シンプルなスプリングボードを作る

スプリングボードとは

今回はシンプルなスプリングボードを作ります。スプリングボードとは、スマートフォンのホーム画面のように、アイコンとラベルがセットになってグリッド状に並んでいるデザインです。よく見るデザインだと思いますが、それだけ見やすくて使いやすいということですね。

ご覧のような見た目になります。

HTML

HTMLのポイントは、特にないです。ulタグでアイコンとラベルをセットにしたリストを並べます。

CSS

とりあえず全文です。

CSSのポイントは、liタグを並べるのに従来から使われている「float:left;」ではなく、CSS3 Flexboxを使っている点です。

CSS3 Flexboxは簡単に言うと、サイズが不明な要素を動的にうまくレイアウトしてくれるレイアウトモジュールです。若干IEで問題が残るものの、大体の最新ブラウザでサポートしています。その仕組みを簡単に説明すると、flexアイテムという複数の要素があったとして、それらを包括するようなflexコンテナという要素を用意し、そのコンテナに対してflexアイテムのレイアウトを調整します。

つまり、今回のスプリングボードの例でいうと、

  • スプリングボード全体のulタグをflexコンテナとする
  • アイコンとラベルのセットをliタグで囲み、それをflexアイテムとする

という構成でCSSを記述することになります。では、CSSの説明をします。

スプリングボードを包括する領域の定義です。

flexコンテナとなるulタグの定義です。「display: flex;」はflexboxを使うための指定です。「flex-wrap: wrap;」はflexアイテムを1行か複数行(つまり、横並び)に並べることを指定します。「align-content: flex-start;」はflexアイテムを上端に揃えるための指定です。これで、このコンテナのflexアイテムは左から上端揃えで横並びに並べられるようになります。

flexアイテムの幅は必ず指定します。この幅を自動調整に使っているようです。

flexboxを使うことで、ラベルの文字数が多くなってリストの高さが段違いになったとしても、自動で高さを調整してくれるようになります。flexboxは便利なので、ぜひ覚えておきたいところですね。

広告
  • LINEで送る