HTML&CSS

CSS3のFlexboxでグリッドレイアウトしてみる

Flexboxベースのグリッドシステムもいろいろで出てきている昨今でありますが、整理も兼ねて一度挑戦してみたいと思います。

チェックボックスをCSSでカスタマイズしてカードタイプ風にしてみます。
ついでにチェックした時のアニメーションも作ってみます。

コンテンツがウィンドウの高さより少ない時だけ画面下にフッターを配置する方法はいろいろありますが、CSS3のFlexboxレイアウトを使用すればかなりスマートにできます。

IEのサポートが最新のバージョンだけとなりましたので、そろそろPCサイトもFlexboxでレイアウトしてもいいのではないかという環境になりつつあります。
ということでFlexboxレイアウトの基礎的な部分を解説いたします。

Bootstrapのテーマってクールなものが多く、英語には合うのですが日本語だとうーんってなることがあるじゃないですか（？）
なのでわりと日本語（人？）に合いそうなBootstrapテーマを作成しましたというか作成中です。

jQuery+CSS3で円が画面全体に広がって表示するようなスマホ用のメニューを作ってみました。

横並びのナビゲーションとかでマウスオーバーしたボタンだけ横に広がって、大きくなった分だけ他のボタンが狭くなるというやつです。
ちょっと説明よくわからないですが、サンプルを用意しました。

CSS3オンリーで画像をマウスオーバーするとキャプションがアニメーションして表示するというサンプル集です。
ディレイやイージングを使用してちょっとだけ凝った感じに見える風にしてみました。

jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。

CSSDevices はクラス指定するだけで画像にiPhone/iPad/Apple Watch/Mac bookのフレームを付けてくれるCSSです。