HTMLでフレックスボックスレイアウトを作成するには？基本から実装例まで解説
HTMLでフレックスボックスレイアウトを作成するには、CSSのdisplay: flexプロパティを使用します。Webサイトではコンテンツを複数カラムで表示することが多くありますが、フレックスボックスはそうしたマルチカラムレイアウトを実現するための最も柔軟で強力な手法の一つです。
フレックスボックスレイアウトはCSS3で導入されたレイアウトモデルです。画面サイズに応じて要素が自動的に伸縮・折り返しを行うため、PC・タブレット・スマートフォンなど、さまざまな表示デバイスでも正しく表示できます。また、従来のfloatレイアウトで問題となりがちだったマージン崩れも発生せず、画面サイズに合わせて柔軟にレイアウトが調整される点が大きな特徴です。
フレックスボックス未使用の通常レイアウトの例
まずは、フレックスボックスを使用していない一般的なHTML構造の例です。
<!DOCTYPE html> <html> <head></head> <body> <div class="mycontent"> <header> <h1>Tutorialspoint.com</h1> <h3>Simply Easy Learning</h3> </header> <nav> <ul> <li><a href="/tutorialslibrary.htm">Tutorials Library</a></li> <li><a href="/videotutorials/index.htm">Video Tutorials</a></li> <li><a href="/codingground.htm">Coding Ground</a></li> <li><a href="/tutor_connect/index.php">Tutor Connect</a></li> <li><a href="/online_dev_tools.htm">Tools</a></li> </ul> </nav> <article> <h1>About Us</h1> <p>This is demo content.</p> <p>This is demo content.</p> <p>This is demo content.</p> <p>This is demo content.</p> </article> <footer>Add the footer content here</footer> </div> </body> </html>
フレックスボックスを使ったレスポンシブレイアウトの例
次に、フレックスボックスを活用した柔軟なレイアウトを紹介します。ブラウザのウィンドウ幅を変更すると、下図のようにナビゲーションと記事が横並びに配置され、ページ全体が各デバイスの画面サイズに自動的に適応します。
サンプルコード
以下のコードを実行すると、上記のようなフレキシブルなレイアウトを実際に試すことができます。
<!DOCTYPE html>
<html>
<head>
<style>
.flexmycontent {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
text-align: center;
}
.flexmycontent > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
header {background: #FAFAFA;color:green;}
footer {background: #FAFAFA;color:green;}
.nav {background:#eee;}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav ul a {
text-decoration: none;
}
@media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
</style>
</head>
<body>
<div class="flexmycontent">
<header>
<h1>Tutorialspoint.com</h1>
<h3>Simply Easy Learning</h3>
</header>
<nav class ="nav">
<ul>
<li><a href="/tutorialslibrary.htm">Tutorials Library</a></li>
<li><a href="/videotutorials/index.htm">Video Tutorials</a></li>
<li><a href="codingground.htm">Coding Ground</a></li>
<li><a href="/tutor_connect/index.php">Tutor Connect</a></li>
<li><a href="/online_dev_tools.htm">Tools</a></li>
</ul>
</nav>
<article class="article">
<h1>About Us</h1>
<p>This is demo content.</p>
<p>This is demo content.</p>
<p>This is demo content.</p>
<p>This is demo content.</p>
</article>
<footer>Add the footer content here</footer>
</div>
</body>
</html>コードのポイント
- display: flex … コンテナをフレックスボックスとして定義します。
-webkit-flexは古いSafariなど向けのベンダープレフィックスです。 - flex-flow: row wrap … 要素を行方向に並べ、スペースが足りなくなったら自動的に折り返します。
- flex: 1 100% … 各子要素の初期状態では全幅表示とし、狭い画面では縦積みになります。
- @mediaクエリ … 画面幅が768px以上の場合にのみ、
orderプロパティで並び順を制御しながらナビゲーションと記事を横並びに切り替えます。
このように、フレックスボックスとメディアクエリを組み合わせることで、少ないコード量でメンテナンス性の高いレスポンシブレイアウトを簡単に構築できます。
-
HTMLとCSSでフローティングレイアウトを作成する方法をわかりやすく解説
フローティングレイアウトとはHTMLでフローティングレイアウトを作成するには、CSSのFloat（フロート）プロパティを使用します。Webサイトでは、コンテンツを見やすく表示するために複数のカラム（段組み）構成がよく採用されますが、CSS Floatはそのマルチカラムレイアウトを実現する手法のひとつです。フローティングレイアウトは、Webサイトのレイアウト設計で古くから広く使われている定番の手法です。要素にfloat: left;やfloat: right;を指定することで、要素を左右に寄せ、その横に他の要素を回り込ませることができます。以下は、ヘッダー・ナビゲーション・本文・フッターで構成さ
-
HTMLで参考文献（Bibliography）を作成する方法
参考文献（Bibliography）とは、執筆時に参照した書籍や資料の一覧をまとめて記載するセクションのことです。HTMLを使えば、こうした参考文献リストを簡単に作成できます。具体的には、<ol>タグで書籍を番号付きリストとして列挙し、<cite>タグで作品のタイトルをマークアップします。 <cite>タグは、書籍のタイトルだけでなく、楽曲、絵画、映画など、さまざまな作品のタイトルを示す際にも使用できます。このタグは「引用」を意味しており、タグ内に記述した内容はすべて作品のタイトルとして扱われます。 サンプルコード それでは、実際にHTMLで参考文献リスト