HTMLとCSSだけで作る、レスポンシブに対応したWebページの基本フォーマットを用意しました。
- 1カラム
- 2カラム（左メニュー、右メニュー）
- 3カラム（両端メニュー）
の4パターンがあります。
cssクラスを1か所変えるだけでパターン変更ができて、スマホになるとサイドメニューを下の方に表示します。
HTML,CSS基本フォーマット作成に際して
近年、Webのフロント開発では当たり前のレスポンシブウェブデザイン。
レスポンシブともいわれ、PC、タブレット、スマホなど、いろいろなサイズの端末に合わせてWebページを表示できることをいいます。
それを実現するには、とくにCSSに専門性の高い知識が求められます。
（高度なことを行う場合はJavaScriptも）
ですが、じっさい触ると意外と簡単にできてしまうのもHTML、CSSの魅力です。
今回、HTMLとCSSだけで、レスポンシブ対応のHTMLの基本フォーマットを作成しました。
2018/10/28
HTML5,CSS3から簡単に作れるようになったので、ソースコードサンプルを全面的に作り直しました。さらに完成度の高いコードになっています。
今回は新しいものだけを残して、履歴を残すために比較ページを作りました。
レスポンシブは、WordPressなどのCMSやWebフレームワークなどのテンプレートにすでに組み込まれています。普段は意識する必要はないですし、絶対に必要な知識でもありません。
しかし、根本的なことを知るのは損ではないので、学習用としてあってもいいかなと思ってつくりました。
HTMLは20行もありません。CSSは見た目やサイズなどの指定がほとんどで、レスポンシブの部分は少ないです。
たったこれだけの記述で、cssのクラス名を1か所変えるだけで、4パターンのフォーマットが切り替えられます。
パターンは次の4つです。
- 1カラム（メインコンテンツのみ）
- 2カラム（左メニュー、右メインコンテンツ）
- 2カラム（右メニュー、左メインコンテンツ）
- 3カラム（両端メニュー、中央メインコンテンツ）
これにヘッダー・フッターもつけました。スマホやタブレットで表示するときは、メニューをメインコンテンツの下に表示します。
レスポンシブをどのように実現しているのか知りたい人にぜひ参考にしていただければと思います。
2019/2/4
サンプルコードをさらに更新しました。パターンをラジオボックスで選んで切り替えるツールを追加しています。
また、かんたんにですが見た目のデザインをそれなりのものに変えました。
レスポンシブに対応したHTML文
最初にサンプルページを用意したのでそれを見てみましょう。
カラム変更のツールを用意したので、ラジオボタンを変更して動かしてみてください。カラム数が変わります。
今度はこれをコードの面から見ていきましょう。最初はHTMLです。
ソースコードサンプルのボックスにタップやマウスを合わせると、右上にコピーボタンが出ます。
慣れないうちは、とりあえずコピー&ペーストで、自分で動かすところから始めると良いです。
<!DOCTYPE HTML>
<html lang="ja">
<head></head>
<body class="column1">
<div class="wrap">
<header>
<div class="logo">Sample site</div>
</header>
<div class="content">
<div class="main"></div>
<div class="side-menu left">
<article>
<h3 class="title">Sample</h3>
<div class="content"></div>
</article>
<article>
<h3 class="title"></i>Sample</h3>
<div class="content"></div>
</article>
<article>
<h3 class="title">Sample</h3>
<div class="content"></div>
</article>
</div>
<div class="side-menu right">
<article>
<h3 class="title">Calendar</h3>
<div class="content"></div>
</article>
<article>
<h3 class="title">People</h3>
<div class="content"></div>
</article>
<article>
<h3 class="title">Fun!</h3>
<div class="content"></div>
</article>
</div>
</div>
<footer>
<section class="footer1"></section>
<section class="footer2">© 20xx sample.com</section>
</footer>
</div>
</body>
</html>このコードは、サンプルからツールの部分やアイコンなどカラム変更とは関係ないところを外したものです。
HTMLはむずかしくありません。カラム変更の部分のポイントはひとつです。
それは<body>タグのクラスです。
- 1カラム -> class="column1"
- 2カラム（左メニュー）-> class="column2 left"
- 2カラム（右メニュー）-> class="column2 right"
- 3カラム（両端メニュー）-> class="column3"
4つのパターンごとにクラス名を変更します。HTMLはこれだけです。
ほかにポイントをあげるとすれば、ページのコンテンツ最大幅をコントロールする.wrapと、HTML5から追加された新しいタグを使うくらい。
最近は、HTML5からしか知らない人も多いので気にすることはないです。
HTML5から使えるタブ
- ヘッダ・フッタの専用タグ（<header>, <footer>）
- コンテンツのグループ化（<article>, <section>）
レスポンシブに対応したCSS
次にCSSです。デザインやアイコンの部分を除いた、レスポンシブの部分だけを抜粋します。
/*
* 1カラム
*/
body.column1 .left, body.column1 .right {
display: none;
}
/*
* 2カラム
*/
body.column2.left .right {
display: none;
}
body.column2.right .left {
display: none;
}
/*
* タブレット横向き以上（PCサイズ）
*/
@media screen and (min-width: 992px) {
.wrap {
max-width: 1200px;
margin: 0 auto;
}
/*
* 1カラム
*/
body.column1 .wrap {
max-width: 780px;
}
/*
* 2カラム
*/
body.column2 .left, body.column2 .right {
width: 350px;
}
/*
* 3カラム
*/
body.column3 .left, body.column3 .right {
width: 280px;
}
/*
* メニューの横並び
*/
body.column2 .wrap > .content, body.column3 .wrap > .content {
display: flex;
}
body.column2 .left, body.column3 .left {
order: -1;
}
body.column2 .main, body.column3 .main {
flex: 1 1 auto;
}
body.column2 .left, body.column2 .right, body.column3 .left, body.column3 .right {
flex: 0 0 auto;
}
}気づいたでしょうか？ CSSのポイントは、カラム変更の処理でスマホサイズはほとんどありません。メニューの非表示のコントロールだけです。
処理のほとんどはPCサイズの処理です。PCのときメニューをヨコに並べるので自然と処理が多くなります。
@media{}で囲まれてない最初の15行がスマホサイズの定義です。
それ以外はぜんぶPC用です。
メニューの表示/非表示
xxx {
display: none;
}DOMから要素を外して隠します。DOMから消すのでその領域もなくなります。
DOM（Document Object Model）
htmlのタグや属性の情報をメモリ上に展開したもの。オブジェクト（変数）でhtmlタグの内容が参照できる。
htmlに限らず、xmlなどのマークアップ言語全般に関する規定。W3Cから勧告されている。
ツリーの構成をしているので、DOMツリーとも呼ばれる。
JavaScriptでhtmlの情報をあつかうときは、DOMにアクセスしている。
column1のときは、メニューをふたつとも消します（left, right）。
column2のときは、左メニュー表示のときは右メニューを消して、右メニュー表示のときは左メニューを消します。
両方メニューを表示するときは何もしません。
タブレット横向き以上のサイズの処理
@media screen and (min-width: 992px) {
}@mediaは『メディアクエリ』といいます。
端末サイズごとに処理を分けるのに使います。min-width: xxxは、ページを表示するサイズ幅が指定以上のときの処理です。
992px以上は、タブレット横向き、小さめのノートPC、デスクトップPCが対象です。
じっさいのサイズはメーカーや商品によってまちまちです。992pxはだいたいの端末であてはまるので区分としてよく使います。
ページの最大幅と中央表示
.wrap {
max-width: 1200px;
}widthはヨコ幅を固定にしますがmax-widthは最大値です。指定サイズを超えると固定サイズになります。サンプルでは1200pxを超えるまで横のサイズが変わります。
.wrap {
margin: 0 auto;
}display: blockの要素を中央に表示します。
ブロック要素はデフォルトでヨコ幅いっぱいに広がります。左右のマージンをautoにすると、要素は広がらずマージンを均等に割り当てるので要素が中央に表示されます。
ブロック要素の中央寄せのオーソドックスな使い方です。
（text-align: centerだと、ブロックの横はMaxで広がるので中央寄せしません。）
ブロックとインライン
インラインは文章のようにヨコに並ぶこと。それに対してブロックは段落のようにタテに並ぶ。
| インライン | <a>, <span> など。 |
| ブロック | <div>, <table>, <img> など。 |
ブロックは、『ヨコに並ぶのをブロックして次の段に要素を配置する』と考えると覚えやすい。インラインの対だからアウトラインと言いたくなるが、そうじゃないところに注意が必要。
メインコンテンツとメニューのサイズ指定
body.column1 .wrap {
max-width: 780px;
}
body.column2 .left, body.column2 .right {
width: 350px;
}
body.column3 .left, body.column3 .right {
width: 280px;
}メインコンテンツだけのとき、コンテンツを強調したいのでヨコ幅を大きくとります（780px）。でも1200pxまでは広げません。文章などが読みにくくなるからです。
サイドメニューのサイズは固定にします。メニューが両方にある場合は、コンテンツのジャマになるのでサイズを小さくします。
新書や文庫など、本を参考にするとよいです。だいたい1行あたり35～40文字くらいの幅を持たせると読みやすくなります。
スマホではwidthを設定しません。コンテンツをデバイス幅いっぱいに上から下へ流すように表示するからです。
（未設定ではwidthは100%）
コンテンツとメニューの横並び
body.column2 .wrap > .content, body.column3 .wrap > .content {
display: flex;
}
body.column2 .left, body.column3 .left {
order: -1;
}
body.column2 .main, body.column3 .main {
flex: 1 1 auto;
}
body.column2 .left, body.column2 .right, body.column3 .left, body.column3 .right {
flex: 0 0 auto;
}今回のサンプルのクライマックスです。ほかはサイズ指定とか装飾をつける処理で人によって内容はまちまちなので、正直どうでもいいです。
ここで一番大事なのは、コンテンツのヨコ並びにflexを使うところ。
flexでは、ヨコ並びにするコンテンツの親にdisplayプロパティを指定するだけです。これで子要素が1行でヨコに並びます。
.container {
display: flex;
}flexのすごいところは子要素の並び順も変えられること。
.items {
order: -1;
}デフォルトが0で、小さい値が左、大きい値が右に配置されます。サンプルでは左メニューに-1をつけて一番左に表示するようにしています。
またヨコ並びのコンテンツの幅はwidthしか設定していません。でも実行結果では、メインコンテンツのサイズはレスポンシブに変化します。
それをコントロールしているのがflexプロパティです。これには3つの指定を行います。
| プロパティ | 指定方法 |
|---|---|
| 拡大の有無 | 0 : 拡大しない 1 : 拡大する |
| 縮小の有無 | 0 : 縮小しない 1 : 縮小する |
| 基準幅 | auto : widthの値 その他 : px, %など |
今回のサンプルでは、
| サイドメニュー | flex: 0 0 auto; 拡大・縮小なし。 つねにwidthの幅。 |
| メインコンテンツ | flex: 1 1 auto; 拡大・縮小あり。 ヨコ1行に表示しようとする。 widthが足りないとき、サイズがレスポンシブになる。 （自動的に縮小する） |
になります。
CSS3からレスポンシブデザインのためにflexが追加されました。
サンプルを更新した最大の理由がこれです。
float
display: inline-block
clear
で並び替えしていたものをごっそりやめて、flexに変更しました。
float
display:inline-block
clear
の並び替えは、慣れないとなかなかできないものでしたが、flexでサクッとできるようになっています。
HTMLとCSSはこれで終わりです。改めてサンプルページを表示してみましょう。
ブラウザの開発ツール（ChromeならF12）やスマホ・タブレットで確認してみてください。レスポンシブにコンテンツが配置されます。
【解説】ツールについて
パターン切り替えのツールのしくみはとても簡単です。ラジオボタンでパターンを選んだら、<body>のクラス名をJavaScriptで変更しているだけ。
見た目の動きではJavaScriptで何かしているように思うかもしれませんが、JavaScriptはきっかけを与えているにすぎません。
あくまで動きをコントロールしているのはCSSです。
【解説】メディアクエリ（@media）を最小限の数にする
レスポンシブデザインを行なうのに、メディアクエリは必ず使います。メディアクエリは、端末サイズごとにCSSを設定します。
でもメディアクエリを細かく区切って、それぞれのデバイスの設定を行うのは大変です。
今回は、メディアクエリをひとつにして作業量を最小限にしました。デザインを2タイプに絞ることで、CSSのボリュームを小さくしています。
- CSSの基準デバイスはスマホ
- タブレットのタテ向きまではスマホと同じデザイン
- タブレットのヨコ向き、PCは同じデザイン（メディアクエリで設定）
- デザインの区切りは、幅992pxのひとつだけ
【ちょっとブレイク】レスポンシブに対応したCSSの書き方のコツ
今回のCSSで『基準のデバイスをスマホにしている』のを気になった人がいると思います。
これが、レスポンシブ対応のCSSをシンプルにするためのコツです。さらにメディアクエリの数を少なくすると、CSSの内容がもっとシンプルになります。
基準をPCにして、スマホの定義をメディアクエリで行うコードをよく見ます。でも、この書き方ではCSSサイズが膨らみます。
デバイスが大きいとCSSは複雑になる。
複雑なものを基準にするとそれを打ち消す定義がスマホで必要になる。
から。
スマホがシンプルでPCが複雑になるのはなぜ？
スマホのコンテンツは上から下へ流します。HTMLも上から下に向かって書くのでそのまま表示できます。
とてもシンプルです。CSSのデバイスの幅（width）やコンテンツ配置の変更はいらないですから。
一方、PCなどデバイスが大きいものは、ヨコ幅が広くコンテンツをヨコにも配置します。
これがCSSを複雑にするし、HTMLに調整用タブ（divなど）を追加すると、さらにCSSサイズが増えますよね？
スマホを基準にして、メディアクエリの区切りを少なくするとすっきりします。
メディアクエリに大きいデバイスの複雑な定義だけを書けば、さらに分かりやすいCSSになります。
- CSSのデバイスの基準はスマホ（スマホがメイン）
- メディアクエリに大きいデバイスの定義を書く（PCはサブ）
- メディアクエリの区切りはできるだけ少なくする（ひとつでもイケる）
サンプルコードでもメディアクエリ内の処理が半分以上です。大きいデバイスが複雑になりやすいことが分かります。
全体にかかわる指定はスマホの部分に書くべきです。
（色とか、基準サイズとか）
PCの部分はただでさえ複雑になりやすいので、CSSの全体像が見えづらくなり、全体像が見えないと修正など保守・メンテナンス作業がつらくなります。
まとめ
HTML5, CSS3でつくったフォーマットは、デザインが一瞬も崩れません。なめらかに変化していくようすが気持ちいいです。
まだ以前の使い方をしている人は、レスポンシブの完成度を高くするために積極的に使っていきましょう。
HTML5, CSS3しか知らない人は、前のことは雑学ぐらいにしておきましょう。古いブラウザ対応などの事情がないかぎり使うことはありません。
クラス名の変更でフォーマットを変えるには、すべてのフォーマットに対応したCSSを書かないといけません。
HTMLのクラス名を変更するとそれに対応したCSSだけが実行され、フォーマットが切り替わります。クラス名を変更するプログラムで動的にすることもできます。
HTMLはスマホの表示順に合わせてサイドメニューを定義します。スマホのCSSはほとんどコントロールしません。HTMLを上から順に表示するだけです。
- HTMLはスマホの表示順に合わせて書く
- CSSはスマホメインで書く
- CSSのメディアクエリは、PCのヨコ並びコンテンツ調整が中心
- フォーマット切り替えはHTMLでクラス名を変更するだけ
レスポンシブの方法はだいたいこんな感じです。ほとんどのことはこれの応用でできるでしょう。
HTMLとCSSで不可能なもっと高度なことをするときは、JavaScriptを使うことになります。
