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だけでブロック要素の表示非表示(トグルボタン)
  • facebook15
  • はてなブックマーク5
  • Google+3
  • Pocket0
  • Twitter0

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

  • Labs

jQuery

こんにちは(・∀・)

 今回は前回に続きHTML5で作るグリッドレイアウトのサンプルをご紹介します。今回はレスポンシブなグリッドレイアウトです。


 各要素のサイズは、横幅120px(marginとpaddingがともに10pxなので実サイズは160px)、280px(marginとpaddingがともに10pxなので実サイズは320px)、440px(marginとpaddingがともに10pxなので実サイズは480px)の3種類の要素をフロートさせています(460pxの要素はスマホ向けでは300pxに変わります)


 レスポンシブなのでブラウザサイズが変われば各要素は並び替わりますが、最近はやりのぴゅーんって感じに移動するプラグインを使ってみたかったので今回は要素を動かすプラグイン使います。こちらのjQuery Masonryを使用しますのでダウンロードしてください。

サンプルデモ

 サンプルデモはこちら!


HTML

 Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。それとあわせて同じく<head>内にダウンロードしたmasonry.pkgd.min.jsを読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="masonry.pkgd.min.js"></script>

<div id="contents">
<div class="grid g2">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g2">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid">
<h3>grid</h3>
<!--grid--></div>
<div class="grid">
<h3>grid</h3>
<!--grid--></div>
<div class="grid">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<div class="grid g3">
<h3>grid</h3>
<!--grid--></div>
<!--contents--></div>
CSS

/* 0 to 639px */
header {
	min-width: 320px;
	border-bottom: 2px solid #9fb7d4;
	margin: 0 auto;
}
	header h1 {
		width: 320px;
		margin: 0 auto;
		padding: 10px 10px 0 10px;
	}
	header h2 {
		width: 320px;
		margin: 0 auto;
		padding: 0 10px 10px 10px;
	}
#contents {
	width: 320px;
	margin: 0 auto;
	overflow: hidden;
	background: #ccc;
}
	.grid {
		float: left;
		width: 280px;
		background: #9fb7d4;
		margin: 10px;
		padding: 10px;
	}
	.g2 {
		width: 280px;
		background: #9fb7d4;
		margin: 10px;
		padding: 10px;
	}
	.g3 {
		width: 120px;
		background: #9fb7d4;
		margin: 10px;
		padding: 10px;
	}
footer {
	min-width: 320px;
	border-top: 2px solid #9fb7d4;
	margin: 0 auto;
}
	footer #copyright {
		width: 320px;
		margin: 0 auto;
		padding: 10px;
	}
/* ** */
@media only screen and (min-width: 640px) {
header {
	min-width: 640px;
}
	header h1 {
		width: 640px;
	}
	header h2 {
		width: 640px;
	}
#contents {
	width: 640px;
	background: #8ccf8a;
}
.g2 {
	width: 440px;
}
footer {
	min-width: 640px;
}
	footer #copyright {
		width: 640px;
	}
/* ** */}
@media only screen and (min-width: 960px) {
header {
	min-width: 960px;
}
	header h1 {
		width: 960px;
	}
	header h2 {
		width: 960px;
	}
#contents {
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
	background: #d49fc2;
}
footer {
	min-width: 960px;
}
	footer #copyright {
		width: 960px;
	}
/* ** */}
JavaScript

 <head>内に読み込んだmasonry.pkgd.min.jsに次のコードを記述します。*jqueryを使わなければ普通にレスポンシブで並び替わります。


$(function(){
var $container = $('#contents');
//$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.grid',
columnWidth: 20
//});
});
});

関連リンク

 HTML5でグリッドレイアウト

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