社長BLOG

ハンバーガーレイアウト

スマートフォンのUIHTML構造には、ハンバーガーレイアウトを採用する。

ハンバーガーレイアウトとは、画像のようにHTMLタグをなるべくネストしないでパーツをハンバーガーの具材の用にスタックしていくレイアウト方式。

◆ハンバーガーレイアウトのソースコード

◆３つのパーツ

このような３つのパーツを積み上げていくことでデザインする。
スマートフォンは基本的にタテ一直線のレイアウトなので、この方式でもうまく行く。

それぞれのパーツがなるべくネストしないでコーディングしていくことで、
HTMLやCSSの構造をなるべくシンプルにするというのが狙いだ。
また、HTMLデザインをアプリへ組み込むときのトラブルも少なくできるとおもう。

ネストしているバージョンも作ってみたが、ネストしていてもしていなくても同じ見た目のものが表現できた。
BootstrapのGridレイアウトのおかげで実現したと言っても過言ではない。

今後、アプリ側からグルーピング目的のためにネストさせる必要もあるだろうが、
その時にも、デザインのためのネストは少ないほうがやりやすいと思う。

サンプルはGithub上で公開している。
詳しく中身を確かめたい方は、Githubレポジトリを。

最新記事

アーカイブ