HTMLとCSSだけでレスポンシブに対応するWebページの基本フォーマットを作成しました。
- 1カラム
- 2カラム（左メニュー、右メニュー）
- 3カラム（両端メニュー）
の4パターンを用意。
cssクラスを1か所変えるだけでパターン変更ができて、スマホになるとサイドメニューが下の方に表示されるようにしています。
HTML5,CSS3からもっとかんたんに作れるようになったので、ソースコードサンプルを全面的に見直しました。
HTML,CSS基本フォーマット作成に際して
近年、Webのフロント開発では当たりのレスポンシブウェブデザイン。それを実現するには、とくにCSSに専門性の高い知識が求められています。
（高度なことを行う場合はJavaScriptも）
でも、じっさいに触ってみると意外と簡単にできてしまうのもHTML、CSSの魅力です。今回HTMLとCSSだけで、レスポンシブウェブデザイン対応のHTMLの基本フォーマットを作成しました。
このようなものは、WordPressのテーマなどテンプレートの中にすでに組み込まれています。普段は意識する必要はないですし、絶対に必要な知識でもありません。
しかし根本的なことを知ることは損ではないので、学習用としてあってもいいかなと思って作成しました。
4パターンのサンプル作成
HTMLは約20行です。CSSは150行くらいですが、読みやすいようにあえてまとめた記述をしていません。また、視覚的にわかりやすいような定義も30％ぐらいあるので、レスポンシブの部分に関する記述は少ないです。
たったこれだけの記述で、cssのクラス名を1か所変えるだけで、4パターンのフォーマットが切り替えられるようになっています。
パターンは次の4つです。
- 1カラム（メインコンテンツのみ）
- 2カラム（左メニュー、右メインコンテンツ）
- 2カラム（右メニュー、左メインコンテンツ）
- 3カラム（両端メニュー、中央メインコンテンツ）
これにヘッダとフッタの領域もつけました。スマホやタブレットで表示するときは、メニューがメインコンテンツの下に表示されます。
レスポンシブデザインをどのように実現しているのか知りたい人にぜひ参考にしていただければと思います。
レスポンシブに対応したHTML文
HTMLの全文です。たったこれだけです。
<!DOCTYPE HTML>
<html>
<head>
<link rel='stylesheet' id='rwd-base-css' href='rwd-base.css' type='text/css' media='all' />
</head>
<body>
<div class="header">Header</div>
<div class="content column1">
<div class="left-group">
<div class="main">Main Content</div>
<div class="side-menu side-left">Left Side Menu</div>
</div>
<div class="right-group">
<div class="side-menu side-right">Right Side Menu</div>
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>レスポンシブに対応したCSS
CSSは150行くらいありますが、レスポンシブのところは40行目以降からです。むずかしいことは何ひとつありません。
/* base configure */
div {
margin: .5em auto;
padding: .5em;
text-align: center;
font-size: 1.2rem;
color: #fff;
}
.main {
background: #7fc2ef;
}
.side-left {
background: #d685b0;
}
.side-right {
background: #dbe159;
}
.header, .footer {
background: #ffe9b6;
}
.main, .side-left, .side-right {
min-height: 200px;
}
/* content width init */
.column1 .main {
width: 976px;
}
.column2-left .main, .column2-right .main {
width: 670px;
}
.column3 .main {
width: 670px;
}
/* detail configure of responsive web design */
/* above pc laptop (exclude iPad Pro) */
@media (min-width: 1025px) {
.column3 .main {
width: 475px;
}
}
@media (min-width: 1100px) {
.column3 .main {
width: 540px;
}
}
@media (min-width: 1200px) {
.column3 .main {
width: 650px;
}
}
@media (min-width: 1300px) {
.column3 .main {
width: 670px;
}
}
.column2-left .side-menu, .column2-right .side-menu {
width: 300px;
}
.column3 .side-menu {
width: 260px;
}
.right-group {
vertical-align: top;
}
/* display column */
.column1 .side-left, .column1 .side-right {
display: none;
}
.column2-left .side-right, .column2-right .side-left {
display: none;
}
/* PC All */
@media (min-width: 992px) {
.left-group, .right-group {
display: inline-block;
}
.column2-left .main, .column2-left .side-left {
float: right;
}
.column3 .main, .column3 .side-left {
float: right;
}
/* tweak */
.side-left {
margin-right: 6px;
}
}
/* iPad Pro */
@media (max-width: 1024px) {
.column3 .right-group {
display: block;
}
.column3 .side-right {
margin-left: 310px;
margin-right: 50px;
margin-top: 10px;
width: 640px;
}
}
/* PC: laptop */
@media (max-width: 1200px) {
.column2-left .side-menu, .column2-right .side-menu {
width: 270px;
}
}
/* Tablet */
/* phone */
@media (max-width: 991px) {
.column1 .main {
max-width: 990px;
width: auto;
}
.column2-left .main, .column2-left .side-menu {
max-width: 990px;
width: auto;
}
.column2-right .main, .column2-right .side-menu {
max-width: 990px;
width: auto;
}
.column3 .main, .column3 .side-menu {
max-width: 990px;
width: auto;
}
.column3 .side-right {
margin: 0;
max-width: 990px;
width: auto;
}
}レスポンシブ対応基本フォーマットのサンプルページ
それぞれ4パターンのサンプルページを用意しました。ソースはさっきのHTML&CSSの2つです。各ボタンを押すとサンプルが表示されます。
ブラウザの横幅を変えるだけでレスポンシブにコンテンツが変化します。ブラウザの開発ツールでテスト用スマホ、タブレットでも確認できます。
1カラム（メインコンテンツのみ）のサンプルページ
2カラム（左メニュー、右メインコンテンツ）のサンプルページ
HTMLの8行目の<div class="content column1">を<div class="content column2-left">に変更するだけで、コンテンツが切り替わります。
2カラム（右メニュー、左メインコンテンツ）のサンプルページ
HTMLの8行目の<div class="content column1">を<div class="content column2-right">に変更するだけで、コンテンツが切り替わります。
3カラム（両端メニュー、中央メインコンテンツ）のサンプルページ
HTMLの8行目の<div class="content column1">を<div class="content column3">に変更するだけで、コンテンツが切り替わります。
まとめ
クラス名を変えるだけでフォーマットを変更するしくみは、すべてのフォーマットに対応するクラスをCSSに書くことです。
これでHTMLでクラス名を変更すると、それに対応したCSSの定義だけが実行されフォーマットが切り替わります。
プログラムでHTMLのclass属性を変えて動的に変更することもできる。
そのほかCSSのポイントは、スマホ、タブレットの記述はほとんどありません。PC、iPadPro用に入れたwidthの処理をクリアしているだけです。
.xxxx {
max-width: 990px;
width: auto;
}スマホ、タブレットのコードはこれだけです。
PC版はひとつだけ工夫が必要です。サイドメニューの表示位置をCSSで調整しました。
- display: inline-block
- float: left
HTMLはスマホの表示順に合わせてサイドメニューを定義します。スマホ、タブレットのときCSSではほとんど制御しません。HTMLを上から順に表示します。
- HTMLはスマホの表示順に合わせて書く
- CSSのスマホ・タブレットの記述はwidthのクリア処理だけ
- CSSは、PC、iPadPro用のサイズ指定とサイドメニューの位置調整が中心
- フォーマット切り替えはクラス名を変更するだけ
レスポンシブの方法はだいたいこんな感じです。ほとんどのことはこれの応用でできます。
HTML&CSSで不可能な高度なことをしたいときはJavaScriptを使います。
