リストの個数が1つの場合のみセンタリングする

あるリストの個数が動的に変化し、その個数が1個のときはセンタリングして、それ以外の時は左寄せにする。 要素をセンタリングしたい時はinline-blockが便利ですけど、下記demoのように横に収まる個数が決まっていて、半端な要素が出た時にセンタリングされてしまいます。 一覧ページやスタッフ紹介など…

追従するサイドバー

追従範囲を指定したサイドバーです。 resizeした時にも対応させていますので、サイドバーが突き抜けることはありません。 デモではわかりやすく各要素にheightを指定しています。 追従している時は.sideにfixedというクラスを、追従をやめたら.sideにstopというクラスが付きますのでst…

外部HTMLをポップアップする

外部HTMLをポップアップするjavascriptです。 jQueryを使用しています。jQueryバージョンは3.2.1です。 ・外部HTML(同一ディレクトリ内)をポップアップ ・ポップアップした状態で次の外部リンクへ移行する ・ポップアップ部分以外をクリック(タップ)した場合、ポップアップを閉…

display:gridを使う

display:gridはあまり使ったことが無かったのですが、改めて使ってみたら楽しかった。 痒いところに手がとどいでいい感じですね。個人的にflexより好き。 複雑なレイアウトやテーブルを簡単に表現できそう。 See the Pen 171031 by M.Ueda (@nekuta) on Co…

フル画面のスライドショー

ブラウザ画面いっぱいに広がるスライドショーです。 結構楽しかった。 以前のエントリ「ブラウザ幅いっぱい広がるビジュアル」ではloadされた時とresizeされた時にブラウザ縦幅を取ってきていましたが、今回はloadのみ。 読み込み時が気持ち悪いので、loading画面とか設定すれば良いと思います。 …

メニュー以外の箇所をタップするとメニューが自動で戻るナビゲーション

UIを意識したくて作ったやつ。 メニューをスライドさせる動きとclassを付けるのをjQueryで行っています。 ハンバーガーメニューは以前作ったこちらを使いました。 CSSだけで作るハンバーガーメニュー 縦にメニューが出てくるナビゲーションですが、メニュー以外をタップした時に自動でナビが戻ります。…

CSSだけで作るハンバーガーメニュー

今更ですがcssだけでハンバーガーメニューを作ります。 widthとheightがあらかじめわかっていれば簡単です。 transform:translateYを使ったのは、active時の動作のためです。 html

cscc [cra…

  • コーダーのための計算機