【HTML5&CSS3】個人サイトをレスポンシブ対応にするための作業手順とその方法【サンプルあり】
創作活動のベースとしている個人サイト「水に浮かぶ月」を、2017年4月に大改装＆プチ引っ越し（サブフォルダからルートへ移動）しました。
個人サイトなので当然（？）HTMLベタ打ちサイトです。
この時の大改装には
・HTML5&CSS3によるレスポンシブ化
・htmlファイルのphp化で共通部品を使いまわす
という大改善を含んでまして、メンテが大変楽になりました。
なろうやカクヨム、アルファポリスのような小説投稿サイトが大人気の今、個人サイトかよとも思わなくもないのですが、やっぱり本拠地と呼べる場所を持つのは悪くないと思うんですよね。
そうそうないとは思いますが、万が一のサービス停止でせっかく執筆・投稿した作品がなくなる可能性もゼロではありませんし。
というわけで時代遅れも甚だしいですが、他サイト大改築のための作業手順メモ兼個人・同人サイト普及活動の一環としてここで記事を公開いたします。
あ、ちなみに基本的なHTMLとCSSがわかる人向け記事ですので、「ほーむぺーじってどうやってつくるの？」な方は、もっと親切でわかりやすい記事やブログなどをご確認ください。
今回の記事ではHTML5とCSS3のみでレスポンシブ対応した時の作業手順をざっくりまとめます。
1.サイトの基本的なレイアウトを決める
サイトを作るぞー！となると、まずサイトのデザインを考えたくなりますよね。
かっこいいのとかかわいいのとか、どんな色を使うのかとか。
でもちょっと待ってください。
実はデザインよりも先に決めなければならない項目があります。
それがサイトの基本的な構造とレイアウトです。
「構造やレイアウトってデザインと何が違うの？」と思うかもしれませんが、家に置き替えると
・構造：骨組み
・レイアウト：部屋の配置
・デザイン：インテリア・内装
とまあざっくりこんな感じです。
この構造とレイアウトを考えずにデザインしてしまうと、実際にHTMLを使ってサイトを作ろうと思った時点で「えーと、で、どこからどうすればいいんだろう？」となってしまいます。
ではサイトにおける構造ってなんでしょうか？
基本的なWebサイトは、次のような構造が多いです。
・ヘッダー
・ナビ
・メインコンテンツ
・フッター
最近の一般的なトレンドではまずページの上部にサイト名とメニューがあって、その下にメインコンテンツがあって、一番下のフッターでお問い合わせ先や著作権表示してるのが多いかな？
でも個人サイトだとそんなトレンドにはこだわる必要がないので、↑で紹介した構造を頭に置いてどこに何を配置するのかだけを考えましょう。
具体的に決めるのは次の項目です。
・タイトルの位置
・メニューの位置
・どのコンテンツをいくつ置くか
・フッターの内容
たとえば私のサイトの場合、トップページは次のようなレイアウトになってます。
・ヘッダー：サイトタイトルとメニュー
・メインコンテンツ：当サイトについて・更新履歴・既刊情報・同盟＆サーチバナー置き場
・フッター：著作権表示
改装前はメニューをフッター（画面下部）に表示してましたが、スマホ対応するためヘッダー（画面上部）に移動しました。
こんな感じに必要なページのレイアウトをざっくり決めてから、ようやくHTMLでコーディングを始めます。
2.HTML5で基本構造を作る
HTML5で最も嬉しかったのが、構造を示す要素ができたことです。
一例を挙げると、
・header：サイトのヘッダー
・nav：メニュー等のナビゲーション
・main：メインコンテンツ
・section：コンテンツのかたまり
・article：記事内容
・footer：サイトのフッター
などがあります。
（※ざっくりした認識なので、厳密には違うかもしれません）
ちなみにdivのマトリョーシカが発生するため、コメントアウトと併用したdivの綴じタグ整理が大変でした……
うちのサイトはまだマシな方でしたが、それでも↓のような状況が発生してます。
</div>
<!-- /id="union" -->
</div>
<!-- /id="body" -->
</div>
<!-- /id="footer" -->
</body>もっと複雑な構造のサイトなら、多分これ以上にひっどいことになるんじゃないでしょうか？
実際、xhtmlやBootstrapで実装しようとしてさっそくとんでもないことになりましたからね……
で、この新しい要素の何がいいかって、今紹介したのだけでざっくりとした構造が完成することです。
<header>
<h1>サイト名</h1>
<nav>
<ul>
<li>メニュー１</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>当サイトについて</h2>
<article>サイトの説明</article>
</section>
<section id="history">
<h2>更新履歴</h2>
<article>履歴内容</article>
</section>
<section id="union">
<h2>同盟・サーチ</h2>
<article>同盟・サーチバナー</article>
</section>
</main>
<footer>
著作権表示など
</footer>はい、これでトップページの構造ができました。
main内のsectionにidを付与するとセクションごとに異なる挙動や装飾を割り振れるし、リンクでジャンプもできるのでオススメです。
ちなみにnavをheaderに含んでいるのは個人的な好みです。
外に出しても問題ないですが、私のサイトではヘッダーとナビゲーションはほぼニコイチ扱いなのでこうしています。
小説ページだともっと単純で、本文のためのセクションひとつとページ遷移のためのナビゲーションをフッター前に置く感じです。
これも個人の好みなので、好きな風にレイアウトすればいいでしょう。
「タイトルもナビも全部フッターに入れてヘッダー使わない！」という方は、headerを丸っと削除してもいいです。
こういう個人・同人サイトって「SEOで検索1位を取って目指せミリオンPVサイト！」とかではないので（むしろ二次系やナマモノ系だと逆SEOが必要）、基本のルールだけ守ってゆるっと作りましょう。
注意するべきは、この時点では細かい調整は絶対にしないという点。
まずはワクだけを作ってください。
ここまで作ったら、次はCSS3でレスポンシブの基本動作を作ります。
3.CSS3でざっくりとレイアウトを組む
というわけで、ここからCSSの登場です。
まずはすべての要素から無駄な設定を全部そぎ落としてしまいましょう。
世間ではreset.cssやnormal.cssなどが有名ですが、個人サイトではざっくり全体から不要なマージン・パディング・装飾を消して、あとbox-sizingでパディングが悪さしないように指定すればいいでしょう。
ちなみに、私が実際に使っているものはこれです。
/*パディングやボーダーの幅をwidthに含める*/
*,
*::before,
*::after {
box-sizing: border-box;
}
/*余白やボーダーをすべて削除*/
* {
margin: 0;
padding: 0;
border: 0;
}
/*リスト装飾を削除*/
li { list-style-type: none; }
その上で各要素を全部別の色で塗りつぶしましょう。
borderに色を付けるのもいいですね。
こうするとどの要素がどこにあって、どこにどんな余白が入っているのかが一目でわかります。
この時点での難関はメニューを横並びにすることかなと思うのですが、これはfloatではなくflexboxを使うととっても便利です。
ちなみにサイト全体をflexbox化すると、PCサイトではタイトルもメニューも下に表示されるけど、モバイルで見たらタイトルとメニューが上に表示される、みたいなこともできるようになります。
ぶっちゃけ、このflexboxの存在を知ったからこそサイトの大改装に手を付けられたという背景もあります。（floatに酷い目に遭わされた人）
あとは各項目の幅とかもフィーリングで指定しましょう。
ブログもですが、文字読み系サイトでPCの画面端から端まで文章が表示されるってのはけっこう見づらいです。
なので私は大抵mainの幅を640～750pxで指定します。
こうしておけばmain内のコンテンツの幅も自動的に決まってくるので、後々の設定が楽になります。
これですんごいざっくりとHTML+CSSでのレイアウトができましたので、レスポンシブ対応に取り掛かるとしましょう。
4.基本的なレスポンシブ動作を指定する
画面の大きさや幅に合わせてレイアウトの変わるレスポンシブ。
これを自分で設定すると考えると思わずビビりそうになりますが、実はそんなに難しい事じゃありません。
考え方はすごくシンプルで、
・画面サイズに関係なく最大＆最小の幅をどうするか
・画面サイズにあわせてどう表示したいのか
この二つさえ決めればいいんです。
まず1つめの「画面サイズに関係なく最大＆最小の幅をどうするか」ですが、これはmax-widthとmin-widthで指定できます。
例えば小説本文をスマホでは画面の幅の80％で表示したい。
だけどPC画面だと横幅が広くなりすぎるので最大700pxにしたいという場合、
width: 80%;
max-width: 700px;のように指定することで、
・幅80％が700px以下なら実際のサイズで
・幅80％が701px以上なら700pxで
表示できます。
また、とある要素を60％の幅で表示したいけど、スマホでもちゃんと表示したいので最小の幅を300pxにしたい場合は、
width: 60%;
min-width: 300px;と指定すれば、
・幅60％が300px以上なら実際のサイズで
・幅60％が299px以下なら300pxで
表示できます。
もし、全体的に1カラムのサイトを作るのであれば、ほぼこれでレスポンシブ対応完了です！
あとはメニューの表示方法や、PCとタブレットとスマホで文字の大きさやレイアウトを変えたい場合ですが、@mediaを使います。
@media all and (max-width: 414px) {
/*スマホ表示時のCSS*/
}
@media all and (max-width: 768px) {
/*タブレット表示時のCSS*/
}
@media all and (min-width: 769px) {
/*PC表示時のCSS*/
}ちなみにこのサイズ区切りはその時々で出ているスマホやタブレットサイズによって変動しますが、今回は↓のものを参考にしました。
@mediaでは端末の種類も選択できたりするのですが、ここはあえてallを使いましょう。
というのも世の中にはPCでブラウザを小さくして他の作業をしながら（もしくはしてるふりをしながら・笑）こっそりこそこそ他の事をしている人もいるわけです。
この状態で「PCは大画面で見ること前提だから！」と端末別で固定幅設定してしまうと横スクロールが発生します。
これ、ブログとかWebメディアで見かけるんですが、ぶっちゃけブラウザバックorタブ閉じ案件です。
せっかく我が家に来てもらったのに居心地悪いからとすぐに帰られては残念極まりないので、ここの設定には気をつけましょう。
あともう一点。これはHTML側ですが、メタタグに画面の幅を解像度ベースではなくpxベースで計算してくれるおまじない<meta name="viewport" content="width=device-width, initial-scale=1">を追加しておきましょう。
さて、ここまで終わればレスポンシブ対応はほぼ完了。
あとは各要素のデザインをいじったり微調整を繰り返したりでなんとかなるでしょう。
おわりに
というわけで、レスポンシブ対応したサイトのざっくりとした作り方を説明しました。
HTML＆CSSがわかる人向けの記事ですが、個人サイトや同人サイトやっててHTMLとCSSがさっぱりという人は少ないのではないでしょうか。
ROM専でもちょっとしたタグはわかる人も多いはずですよ隠しとか裏ページ探しの最終手段はソースチェックでしたから。
大昔に作ったレスポンシブ未対応な個人サイトや同人サイトがネットの海にはたくさん沈んでいるでしょう。
私も時々ふと懐かしいサイトの存在を思い出してググったり昔のサイトのリンクページ（これも死語か……？）を辿ったりするのですが、やっぱりスマホだと見づらいサイトは少なくありません。
二次創作系だと流行が廃れば忘れ去られて遺跡やら化石やらになりやすいですが、それでも15年越しに再訪して「サイトが残ってて嬉しいです！」という最高オブ最高な拍手メッセージが届くこともあります。（実話）
もし誰かがそんなサイトを訪れてくれる可能性が万が一、いや億が一にもあるのなら、どんな環境からでもちゃんと見れるようにしたいって思いませんか？
私は思いました。
なのでこの夏の間に、恐ろしく古い二次サイトを逆SEOがっつりかけて大改装予定です。
あ、その合間にphpを使ってヘッダーやフッターなどの共通部品を使いまわしたり、タイトルやファイル名を半自動入力したりする方法についての記事も上げるので、興味のある方はのんびりと交信をお待ちいただけると嬉しいです。
【追記】サンプルページ作ってみました。
この説明だけじゃざっくりすぎてわかりづらいかな？と思ったので、目覚めの指先運動でサンプルのHTMLとCSSを作って自サーバーにアップしました。
ほんとうにざっくりとした作りですが、これをベースに基本的なサイトくらいなら作れるのでは？と自画自賛。
サンプルページをDLしてHTMLとCSSで遊んだり、実際のサイト制作に活用していただいてもOKです。
サイトを作られた際にはコメントやTwitterなどでご一報いただけるととても嬉しいです！