wordpressレイアウトをCSS３のメディアクエリで機能的にする
ワードプレス３・３のデフォのテーマ「Twenty Eleven」がレスポンシブ・ウェブデザインらしいのだが、そもそもそれって何なの？的な興味もあってちと、基本から挑戦する。
メディアクエリはスマートフォン、ipadなど様々な端末に適応して変化するレイアウト。
１、まず下記のような2カラムレイアウトのHTMLとCSSを用意する。
/***HTMLの構造***/
<html >
<head>
</head>
<body>
<div id=”pagewrap”>
<div id=”header”>
ヘッダー
</div>
<div id=”content”>
コンテンツ
</div>
<div id=”sidebar”>
サイドバー
</div>
<div id=”footer”>
フッター
</div>
</div>
</body>
</html>
/***CSSのレイアウト***/
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#content {
width: 600px;
float: left;
}
#sidebar {
width: 300px;
float: right;
}
#footer {
clear: both;
}
２、HTMLにviewportの設定を<head></head>部分に追加。
<!– viewport meta to reset iPhone inital scale –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
３、メディアクエリ未対応のIE8以下のブラウザのため、同じく<head></head>部分に下記を追加。
<!– css3-mediaqueries.js for IE8 or older –>
<!–[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script>
<![endif]–>
４、CSSを以下のように記述。デスクトップ（980px）、タブレット（700px）、スマートフォン（480px）の３パターンで変化するようになる。
/***********************************************************
MEDIA QUERIES
*********************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 65%;
}
#sidebar {
width: 30%;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {
#content {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
}
/* for 480px or less */
@media screen and (max-width: 480px) {
#header {
height: auto;
}
h1 {
font-size: 24px;
}
#sidebar {
display: none;
}
2012/02/11 | CSS
関連記事
-
-
HTML5対応などリセットCSSの紹介サイト
「リセットCSS」はブラウザごとで、文字サイズ等で表示に異なり、それら...
-
-
wordpressの画像キャプションCSS
キャプションを記入すると現れるキャプションだが、 何もない状態だと、い...
-
-
wordpressの記事の画像回り込みCSS
やっぱり画像を使って文章を書きたいところ。 画像の配置は左で回り込みが...
新着記事
-
-
見どころ満載アクションに興奮/映画『ミッション：インポッシブル ローグ・ネイション』
映画『ミッション：インポッシブル ローグ・ネイション』を鑑賞。飛行機ぶ...
-
-
お約束パニックも進化した映像で納得/映画『ジュラシック・ワールド』
映画『ジュラシック・ワールド』を鑑賞。進化した映像で恐竜の動きは素晴ら...
-
-
いかにもな王道パターンに懐かしさ/映画『HERO』
映画『HERO』を鑑賞。良く言えば「HERO」らしい、悪く言えば予定調...
-
-
ロスジブリを埋める夏のエンタメ大作/映画『バケモノの子』
映画『バケモノの子』を鑑賞。子供から大人まで楽しめる夏の大作を作る細田...
-
-
懐かし場面多いも、ストーリー大幅変更/映画『ターミネーター：新起動 ジェニシス』
映画『ターミネーター：新起動 ジェニシス』を鑑賞。前作のシーンを織り交...
PREV : wordpressの画像キャプションCSS
NEXT : HTML5対応などリセットCSSの紹介サイト
コメント/トラックバック
トラックバック用URL：
コメントフィード