HTMLとCSSだけで作ったレスポンシブに対応したWebページの基本フォーマットを全面的にアップデートしました。
- 1カラム
- 2カラム（左メニュー、右メニュー）
- 3カラム（両端メニュー）
の4パターンを用意。ここでは新旧サンプルの比較を行います。
HTML,CSS基本フォーマットのアップデートについて
HTML5, CSS3は、レスポンシブウェブデザインに対応するため、いろいろな機能が追加されています。
それによって、いままでちょっと工夫が必要だった処理がかんたんにできるようになりました。
ぼくが以前つくったサンプルも、もっとかんたんに、さらに完成度が高いものができるようになったので、全面的に作り替えることにしました。
新旧のサンプルの記事はこちらです。
このようなものは、WordPressのテーマなどテンプレートの中にすでに組み込まれています。普段は意識する必要はないですし、絶対に必要な知識でもありません。
しかし根本を知ることは損ではないので、学習用としてあってもいいかなと思って作りました。
レスポンシブデザインをどのように実現しているのか知りたい人に、ぜひ参考にしていただければと思います。
レスポンシブに対応した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="column1">
<header>Header</header>
<div class="content">
<div class="main">Main Content</div>
<div class="side-menu side-left">Left Side Menu</div>
<div class="side-menu side-right">Right Side Menu</div>
</div>
<footer>Footer</footer>
</div>
</body>
</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>無駄なdivがなくなってスリムになっています。また、ヘッダー・フッターはHTML5から追加されたheader・footerタグを使うように変更しました。
レスポンシブに対応したCSS記述
次にCSSです。90行くらいありますが、レスポンシブ用のCSSは25行目からです。難しいことは何1つしていません。
/* base configure */
header, footer, .main, .side-menu {
padding: 15px;
text-align: center;
font-size: 1.2rem;
color: #fff;
}
header, footer {
background: #ffe9b6;
margin: 0 auto;
}
.main {
background: #7fc2ef;
}
.side-left {
background: #d687b0;
}
.side-right {
background: #dbe159;
}
.main, .side-left, .side-right {
min-height: 200px;
}
/* display column */
.column1 .side-left, .column1 .side-right {
display: none;
}
.column2-left .side-right, .column2-right .side-left {
display: none;
}
/* Sideways tablet, PC */
@media (min-width: 992px) {
/* content width init */
.column1 header, .column1 footer {
max-width: 900px;
}
.column2-left header, .column2-left footer,
.column2-right header, .column2-right footer {
max-width: 1030px;
}
.column3 header, .column3 footer {
max-width: 1160px;
}
.column1 .main {
width: 900px;
}
.column2-left .main, .column2-right .main {
width: 700px;
}
.column3 .main {
width: 580px;
}
.column2-left .side-menu, .column2-right .side-menu {
width: 300px;
}
.column3 .side-menu {
width: 260px;
}
.content {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
/* content position */
.side-left {
order: -1;
}
.side-right {
order: 1;
}
/* grow shrink base-size*/
.main {
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.side-menu {
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
}次に修正前のCSSです。
/* 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;
}
}ボリュームが50行、1/3くらい減りました。一番の違いは、レスポンシブの動きを『float:left, float:right』の回り込みから、『display:flex』に替えたことです。
flexコンテナはCSS3から使えるもので、レスポンシブデザインのために追加されました。これを使うことで細かい微調整がいらなくなりました。
メディアクエリ（@media）で細かいデバイスの区切りが不要になったこともその一つです。今回のサンプルでは、メディアクエリは1つしか使っていません。
新コードの解説はあとにして、まずはサンプルページを表示してみましょう。
（比較のために、修正前のサンプルページもリンクします。）
レスポンシブ対応基本フォーマットのサンプルページ
それぞれ4パターンのサンプルページを用意しています。ソースは上のHTML・CSSの2つです。各ボタンを押すとサンプルが表示されます。
ブラウザの横幅を変えるだけでレスポンシブにコンテンツが変化します。ブラウザの開発ツールでテスト用スマホ、タブレットでも確認できます。
1カラム（メインコンテンツのみ）のサンプルページ
修正前は、微調整のためにマージンを使っているので、コンテンツの間にどうしても余白ができてしまいます。
また、ヘッダー・フッターの幅がメインコンテンツと違います。これだと、PCのモニターが27インチなど大きなものではバランスが悪くなります。
修正後は、これらがかんたんに解決されています。完成度が一段と高くなっていると思います。
（2カラム・3カラムでも修正されています。）
2カラム（左メニュー、右メインコンテンツ）のサンプルページ
HTMLは、7行目の <div class="column1"> を <div class="column2-left"> に変更するだけです。
修正前は、floatを使って回り込みしているので、サイドメニューが下になる一瞬、デザインが崩れているように見えます。
PCのブラウザの幅を変えながら確認すると、修正後のデザインはなめらかに変化します。これが少ないコードでかんたんに解決しています。
（2カラムの右サイドメニュー、3カラムでも修正されています。）
2カラム（右メニュー、左メインコンテンツ）のサンプルページ
同じように、<div class="column1"> を <div class="column2-right"> に変更します。
3カラム（両端メニュー、中央メインコンテンツ）のサンプルページ
もうお分かりだと思いますが、<div class="column1"> を <div class="column3"> に変更するだけです。
まとめ
HTML5, CSS3で作ったフォーマットは、デザインが崩れることが一瞬もないので、スムーズにレスポンシブデザインに対応できます。一段と完成度の高いレスポンシブデザインになることが実感できるでしょう。
HTMLのスリム化、CSSのボリューム削減は、floatによるコンテンツの回り込みから、flexコンテナに替えたことでできました。
そして、処理の内容もシンプルになっています。
- HTMLはスマホの表示順に合わせて書く。
- CSSはスマホメインで書く。
- CSSのメディアクエリは、PCの横並びコンテンツ調整が中心。
- フォーマット切り替えはHTMLでクラス名を変更するだけ。
行なっている処理はこれだけです。古いブラウザに対応するために、HTML5, CSS3の新機能を使うのに躊躇する人もいると思いますが、余程のことがないかぎり使っていく方がよいです。
