menu
menu

HTML5でグリッドレイアウト | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook9
  • はてなブックマーク5
  • Google+5
  • Pocket0
  • Twitter0

HTML5でグリッドレイアウト

  • Labs

HTML5

こんにちは(・∀・)

 今回はHTML5で作る、色々なパターンのグリッドレイアウトのサンプルをご紹介します。


 横幅120px(marginとpaddingがともに10pxなので実サイズは160px)、200px(marginとpaddingがともに10pxなので実サイズは240px)、280px(marginとpaddingがともに10pxなので実サイズは320px)、440px(marginとpaddingがともに10pxなので実サイズは480px)、600px(marginとpaddingがともに10pxなので実サイズは640px)の5種類の要素を、横幅は960pxの親要素の中でそれぞれフロートさせています。シンプルデザインなのでコーディングもらくらく!ぜひご活用ください。

サンプルデモ

 サンプルデモはこちら!


HTML

<div id="contents">
<main>
<h2>3カラム</h2>
<div class="grid3">
<h3>grid3</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>280px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>320px</b>)</small>の<b>grid3</b>をフロート。</p>
<!--grid3--></div>
<div class="grid3">
<h3>grid3</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>280px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>320px</b>)</small>の<b>grid3</b>をフロート。</p>
<!--grid3--></div>
<div class="grid3">
<h3>grid3</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>280px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>320px</b>)</small>の<b>grid3</b>をフロート。</p>
<!--grid3--></div>
<h2>4カラム</h2>
<div class="grid2">
<h3>grid2</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>200px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>240px</b>)</small>の<b>grid2</b>をフロート。</p>
<!--grid2--></div>
<div class="grid2">
<h3>grid2</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>200px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>240px</b>)</small>の<b>grid2</b>をフロート。</p>
<!--grid2--></div>
<div class="grid2">
<h3>grid2</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>200px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>240px</b>)</small>の<b>grid2</b>をフロート。</p>
<!--grid2--></div>
<div class="grid2">
<h3>grid2</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>200px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>240px</b>)</small>の<b>grid2</b>をフロート。</p>
<!--grid2--></div>
<h2>2カラム</h2>
<div class="grid5">
<h3>grid5</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>600px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>640px</b>)</small>の<b>grid5</b>と横幅<b>320px</b>の<b>grid3</b>をフロート。</p>
<!--grid5--></div>
<div class="grid3">
<h3>grid3</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>600px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>640px</b>)</small>の<b>grid5</b>と横幅<b>320px</b>の<b>grid3</b>をフロート。</p>
<!--grid3--></div>
<h2>6カラム</h2>
<div class="grid1">
<h3>grid1</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>120px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>160px</b>)</small>の<b>grid1</b>をフロート。</p>
<!--grid1--></div>
<div class="grid1">
<h3>grid1</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>120px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>160px</b>)</small>の<b>grid1</b>をフロート。</p>
<!--grid1--></div>
<div class="grid1">
<h3>grid1</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>120px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>160px</b>)</small>の<b>grid1</b>をフロート。</p>
<!--grid1--></div>
<div class="grid1">
<h3>grid1</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>120px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>160px</b>)</small>の<b>grid1</b>をフロート。</p>
<!--grid1--></div>
<div class="grid1">
<h3>grid1</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>120px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>160px</b>)</small>の<b>grid1</b>をフロート。</p>
<!--grid1--></div>
<div class="grid1">
<h3>grid1</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>120px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>160px</b>)</small>の<b>grid1</b>をフロート。</p>
<!--grid1--></div>
<h2>2カラム</h2>
<div class="grid3">
<h3>grid3</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>280px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>320px</b>)</small>の<b>grid3</b>をフロート。</p>
<!--grid3--></div>
<div class="grid5">
<h3>grid5</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>600px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>640px</b>)</small>の<b>grid5</b>と横幅<b>320px</b>の<b>grid3</b>をフロート。<br><br><br></p>
<!--grid5--></div>
<h2>2カラム</h2>
<div class="grid4">
<h3>grid4</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>440px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>480px</b>)</small>の<b>grid4</b>をフロート。</p>
<!--grid4--></div>
<div class="grid4">
<h3>grid4</h3>
<p>横幅<b>960px</b>の親要素の中に横幅<b>440px</b><small>(<b>marginとpaddingがともに10px</b>なので実際は<b>480px</b>)</small>の<b>grid4</b>をフロート。</p>
<!--grid4--></div>
</main>
<!--contents--></div>
CSS

#contents {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	background: #ccc;
}
#contents h2 {
	padding: 10px 10px 0 10px;
}
	.grid1 {
		float: left;
		width: 120px;
		background: #9fb7d4;
		margin: 10px;
		padding: 10px;
	}
	.grid2 {
		float: left;
		width: 200px;
		background: #9fb7d4;
		margin: 10px;
		padding: 10px;
	}
	.grid3 {
		float: left;
		width: 280px;
		background: #9fb7d4;
		margin: 10px;
		padding: 10px;
	}
	.grid4 {
		float: left;
		width: 440px;
		background: #9fb7d4;
		margin: 10px;
		padding: 10px;
	}
	.grid5 {
		float: left;
		width: 600px;
		background: #9fb7d4;
		margin: 10px;
		padding: 10px;
	}

関連リンク

 HTML5でレスポンシブなグリッドレイアウト

  • カテゴリー:Labs
  • facebook9
  • はてなブックマーク5
  • Google+5
  • Pocket0
  • Twitter0