menu
menu

キーワード検索

 

前月(4月)の人気記事トップ10 - 5/1/2019

  1. ( 2 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 6 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  3. ( 1 ↓) 【CSS】CSSだけでドロップダウンメニュー
  4. (圏外↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 3 ↓) 【jQuery】jQueryでドロップダウンメニュー
  6. (圏外↑) 【決定版】フォントの設定はこれで決まり❗️
  7. (圏外↑) 【Mac】iMovieの保存場所を変更する
  8. (圏外↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  9. ( 5 ↓) 【WiMAX】HUAWEI W04 気づくとWi-Fiの接続が切れてる
  10. ( 9 ↓) 【制作Tips】iPad画面解像度まとめ
このエントリーをはてなブックマークに追加

【CSS】HTML5でFlexレイアウトのテンプレート

【CSS Tips】HTML5でFlexレイアウトのテンプレート

こんにちは(・∀・)

今日はHTML5でFlexレイアウトのテンプレートサンプルをご紹介します。

以前Flexboxでレイアウトする方法についてご紹介したことがありますが、テンプレートとしてご紹介はしてきませんでした。それはやはりIEで使用することができないというのが一番の理由です。しかし、今年の4月でWindows Vista(IE9)のサポートも終わりWindows 7以降のブラウザはIE11となりますのでいよいよFlexboxでレイアウトすることができるようになりました。

ということで改めて、この度Flexboxでのレイアウトテンプレートの公開という運びとなりました。

frameレイアウト・tableレイアウトからfloatレイアウトときていよいよFlexboxでのレイアウトとなります。CSSとブラウザの進化によりこれまでのfloatレイアウトが負のレガシーとなりIE6でのカラム落ちの対応に追われた日々を懐かしむようになることは間違いありません。

Contents

  1. HTML5でFlexレイアウトテンプレート
  2. 2カラムレイアウト
  3. 3カラムレイアウト

1. HTML5でFlexレイアウトテンプレート

2カラム・3カラムのFlexレイアウトのテンプレートです。1カラムレイアウトにしたい場合、#containerの中の#column1・#column2のブロックを無くせば1カラムレイアウトになります。

どちらのサンプルも共にレスポンシブデザインとなっております。レスポンシブデザイン無しの通常のレイアウトにすることもできます。その場合、CSSの@media部分の2行を削除してください(中身は生きです)。

2. 2カラムレイアウト

2カラムFlexレイアウトのテンプレートです。

このテンプレートでやっていること
親要素#container
display:flexを設定してFlexboxでレイアウトしています。
子要素#column1と#column2
flex:○○を設定して横幅に関する設定をしています。
order:○○を設定して表示される順番を決めています。
PC向けレイアウトで#column1と#column2の横幅を変更したい場合

このテンプレートでは#column1の横幅が可変幅で#column2の横幅は固定幅です。親要素#containerの横幅から#column2の横幅を引いた値が#column1の横幅になります。

なので親要素#containerの横幅が1200pxの場合、子要素#column2の横幅を300pxにしたら#column1の横幅は900pxになります。

親要素#contentsと子要素#column1・#column2の設定はCSS内にあります、横幅の変更をしたい場合はそちらで設定変更してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【サンプルデモ】HTML5で2カラムFlexレイアウトのテンプレート - Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--Require Mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<!--Require Stylesheet-->
<link rel="stylesheet" href="sample.css">
<!--Require JavaScript-->
<script src="sample.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h2 id="toplogo"><a href="/">Webデザインラボ</a></h2>
</header>
<div id="container">
<div id="column1">
<h4>#column1</h4>
<p>このカラムの横幅は<span class="txt-sp">100%です。</span><span class="txt-pc">可変幅です。</span></p>
<!--column1--></div>
<div id="column2">
<h4>#column2</h4>
<p>このカラムの横幅は<span class="txt-sp">100%</span><span class="txt-pc">300px</span>です。</p>
<!--column2--></div>
<!--container--></div>
<footer>
<div id="copyright">&copy;web design lab<!--copyright--></div>
</footer>
<!--wrapper--></div>
</body>
</html>
CSS

* {
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
}
header {
  border-bottom: 2px solid #9fb7d4;
}
#toplogo {
  width: 200px;
  height: 40px;
  margin: 10px auto;
}
#toplogo img {
  width: 100%;
  height: auto;
}
/*----------------------------------------------------------------------*/
#container {
  overflow: hidden;
  margin: 10px auto 0 auto;
  background: #ddd;
}
#container #column1 {/*カラム1*/
  background: #9fb7d4;
  padding: 10px;
}
#container #column2 {/*カラム2*/
  background: #d49fc2;
  padding: 10px;
}
  #container p,
  #container #column1 p,
  #container #column2 p {
    padding: 10px;
  }
  #container p .txt-pc {
    display: none;
  }
/*----------------------------------------------------------------------*/
footer {
  border-top: 2px solid #9fb7d4;
}
#copyright {
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
}

@media (min-width: 769px) {
header {
  min-width: 1200px;
}
#container {
  display: flex;
  width: 1200px;
}
#container #column1 {/*カラム1*/
  flex: auto;
  order: 2;
}
#container #column2 {/*カラム2*/
  flex: 0 0 300px;
  order: 1;
}
  #container p .txt-pc {
    display: inline-block;
  }
  #container p .txt-sp {
    display: none;
  }
footer {
  min-width: 1200px;
}
/* ** */}

PC向けレイアウトで横幅を変更したい場合はCSSの黄色でハイライトになっている部分の値を変更してください。
レスポンシブデザインを無しにしたい場合はCSSの青色でハイライトになっている2行を削除してください。

Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード

3. 3カラムレイアウト

3カラムFlexレイアウトのテンプレートです。

PC向けレイアウトで#column1と#column2と#column3の横幅を変更したい場合

#column1と#column2と#column3の横幅の合計と親要素#contentsの横幅の値が同じ値になるように変更してください。例えば#column1は300px、#column2が600px、#column3が300pxの場合、合計すると1200pxになりますので#column1と#column2と#column3の親要素#contentsの横幅も1200pxに設定します。

親要素#contentsと子要素#column1・#column2・#column3の設定はCSS内にあります、横幅の変更をしたい場合はそちらで設定変更してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【サンプルデモ】HTML5で3カラムFlexレイアウトのテンプレートト - Webデザインラボ</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--Require Mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10.0, user-scalable=yes">
<!--Require Stylesheet-->
<link rel="stylesheet" href="sample.css">
<!--Require JavaScript-->
<script src="sample.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h2 id="toplogo"><a href="/">Webデザインラボ</a></h2>
</header>
<div id="container">
<div id="column1">
<h4>#column1</h4>
<p>このカラムの横幅は<span class="txt-sp">100%です。</span><span class="txt-pc">可変幅です。</span></p>
<!--column1--></div>
<div id="column2">
<h4>#column2</h4>
<p>このカラムの横幅は<span class="txt-sp">100%</span><span class="txt-pc">300px</span>です。</p>
<!--column2--></div>
<div id="column3">
<h4>#column3</h4>
<p>このカラムの横幅は<span class="txt-sp">100%</span><span class="txt-pc">300px</span>です。</p>
<!--column3--></div>
<!--container--></div>
<footer>
<div id="copyright">&copy;web design lab<!--copyright--></div>
</footer>
<!--wrapper--></div>
</body>
</html>
CSS

* {
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
}
header {
  border-bottom: 2px solid #9fb7d4;
}
#toplogo {
  width: 200px;
  height: 40px;
  margin: 10px auto;
}
#toplogo img {
  width: 100%;
  height: auto;
}
/*----------------------------------------------------------------------*/
#container {
  overflow: hidden;
  margin: 10px auto 0 auto;
  background: #ddd;
}
#container #column1 {/*カラム1*/
  background: #d49fc2;
  padding: 10px;
}
#container #column2 {/*カラム2*/
  background: #9fb7d4;
  padding: 10px;
}
#container #column3 {/*カラム3*/
  background: #dfd676;
  padding: 10px;
}
  #container p,
  #container #column1 p,
  #container #column2 p,
  #container #column3 p {
    padding: 10px;
  }
  #container p .txt-pc {
    display: none;
  }
/*----------------------------------------------------------------------*/
footer {
  border-top: 2px solid #9fb7d4;
}
#copyright {
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
}
@media (min-width: 769px) {
header {
  min-width: 1200px;
}
#container {
  display: flex;
  width: 1200px;
}
#container #column1 {/*カラム1*/
  flex: auto;
  order: 2;
}
#container #column2 {/*カラム2*/
  flex: 0 0 300px;
  order: 1;
}
#container #column3 {/*カラム3*/
  flex: 0 0 300px;
  order: 3;
}
  #container p .txt-pc {
    display: inline-block;
  }
  #container p .txt-sp {
    display: none;
  }
footer {
  min-width: 1200px;
}
/* ** */}

PC向けレイアウトで横幅を変更したい場合はCSSの黄色でハイライトになっている部分の値を変更してください。
レスポンシブデザインを無しにしたい場合はCSSの青色でハイライトになっている2行を削除してください。

Result

サンプルデモはこちら
スマホでのご確認はこちらをどうぞ
QRコード


関連リンク

【CSS Tips】HTML5でFloatレイアウトのテンプレート
【HTML5 Tips】HTML5・ページ作成の基本

  • CSS HTML5 レイアウト レスポンシブデザイン
このエントリーをはてなブックマークに追加