初心者が複数ページのサイトを書く流れ

HTMLとCSSを勉強した段階では、３ページ程度からなるサイトを作るだけでも大変だと思います。
書き方は何となく理解したけど、実際に何か作ろうとすると、なぜか手が止まってしまうこともあります。

この記事では複数のページのサイトを書く流れを、CSSを中心に紹介してみようと思います。

最初は作っているうちに、わからないことがたくさん出てくるはずです。それらを調べたり、知っている人に聞いたりして、試していくことで絶対に力がついていきます。

作るページを整理する

まずどんなサイトを作るのか、そのために必要なページがいくつあるのかを確認しましょう。ページが存在する理由が明確であれば、ページ内のどこに何を配置すればいいのか考えやすくなります。

ここで必要なフォルダを用意して、作るページのファイル名を決めておくと楽なのでやっておきましょう。ただ、HTMLファイルは後で共通部分を書いたファイルを複製して、書き換えるという方法を今回は使うので、今はファイルの作成をしなくても大丈夫です。

私は例として簡単なブログサイトを作ります。
以下のようにファイル名を決めました。

・トップページ　　　　index.html
・記事一覧ページ　　　archive.html
・個別記事ページ　　　article.html
・お問い合わせページ　contact.html

それからCSSや画像は、フォルダに分けて管理したいので、それらも作っておきます。

他にも、わかる部分があれば用意しておきましょう。
できるところから進めると、投げ出しにくくなると思います。

デザインを考える

デザインが決まっていない場合は、紙に簡単に書くだけでもいいので決めておきます。

コードをとりあえず書いてみるのも大事なことですが、最低限決めておかないと、無駄なコードを書くことになりがちです。それはそれで勉強できていいかもしれません。ただ、モチベーションが続かないことも多いので、最初に決めておくことをオススメします。

もし決められないときは、そのページで特に何を伝えたいのか、ユーザーにどうしてほしいのかを考えてみましょう。

トップページを例にすると

・サイトの名前を知ってほしい
・サイトを何のために作ったか知ってほしい
・最近投稿した記事に誘導したい

これらの優先度などを考慮しながら、見てほしいものをページの上部に配置するなど、どうすれば達成できるかを考えるといいと思います。

また、メニューをページ間で共通のデザインにするなど、サイト内で一貫性を持たせることでユーザーにサイト内を迷いなく見せられるので試してみるといいかもしれません。

共通する部分を書く

どんなページを作るのか決まったら、共通する部分をHTMLとCSSで書いて、ページを作るときの土台にします。

私が作るサイトの共通部分は以下にしました。

・サイト上部のヘッダー（サイト名、メニュー）
・サイト下部のフッター（メニュー）

HTMLでは、ふたつの共通部分だけでなく、headタグ内の見た目には表示されない共通部分なども書いておきましょう。

HTMLファイルがある程度書けたら、CSSを書きたいところですが、
その前に準備するものがあります。

このままCSSを書いてしまうと、自分が使っているブラウザではうまく表示されていても、別のブラウザだと、ずれて表示されてしまうかもしれません。

なぜこれが起こるかというと、ブラウザごとにCSSの初期値がことなるからです。

それを解決するために、リセットCSSがあります。
種類があるのですが、今回はこちらのリセットCSSを使います。
http://html5doctor.com/html-5-reset-stylesheet/

サイトにアクセスしてコピペ又は、ページ下部のGithubなどのリンクからCSSファイルをダウロードして、HTMLからアクセスできる場所に保存します。あとは、HTMLで普通のCSSと同じようにlinkタグを使って読み込むだけです。

注意点として、複数のCSSファイルを読み込むときは、リセットCSSのlinkタグを一番上に書くようにしてください。

例

<link rel="stylesheet" href="css/reset.css"> <!-- リセットCSS -->
<link rel="stylesheet" href="css/common.css"> <!-- 共通CSS -->
<!-- <link rel="stylesheet" href="css/ページ個別のcssファイル名.css"> -->

リセットCSSを他のCSSより下に書くと、リセットCSSが優先されてしまい、うまくスタイルが適用されない可能性があります。

用意が出来たら、共通で使うCSSファイルを作成して、書いていきましょう。

HTMLとCSSの役割を分けるというのを意識するとさらに良くなります。HTMLはページの構造を定義し、CSSは見た目を定義しています。CSSのためだけにHTMLの構造をかえてしまうと、よくないケースがあります。

GoogleやYahooなどのサイトを検索するサービスは、HTMLのタグをみて最適なページを探します。

例えば、「おにぎり」と検索したとき、h1タグに「おにぎり」を含むサイトAと、h1タグには「おにぎり」を含まずに、pタグに「おにぎり」を含むサイトBがあるとします。
この場合、見出しにキーワードが含まれているサイトAがサイトBより、
上にくる可能性が高いですよね。検索で上に来れば見てもらえる確率が高まるので、HTMLのタグは適切につけたほうがよさそうです。

見出しを小さく表示したいというような理由で、タグを変えてしまわないように注意しましょう。

検索されやすくするために、タグや内容そのものを考えることを、
検索エンジン最適化、これを英語にした略で、SEOと言います。

構造を変えないように、CSSで見た目をつけるには、HTMLのタグにclass名をつけます。

今回は要素の指定に使うclass名が複雑になりすぎないように、BEMという命名のためのルールを参考にします。

classの命名にルールがあると、デザインの変更が起こったときに、CSSだけの変更ですんだり、既存のclassが何を表しているのかわかりやすかったりします。
ただ、一人で作る小規模のもので全体が常に把握できるのであれば無理に使う必要はありません。

class名やBEMについてもっと詳細を知りたい方は、以下の記事もチェックしてみてくださいね。

必要なページを作成する

さて、共通部分のHTMLとCSSが作成できたら、あとはページごとに独自の部分を作成して完成です。
共通部分を書いたHTMLをコピペするか、複製して名前を変えるなどした後に、ページごとに独自の部分を書いていきます。

独自の部分のCSSは、共通部分とはファイルを分けて書いていきましょう。分けずに作成する場合は、他のページのCSSと混ざらないように、bodyタグにidをつけて指定するなどして、区別するといいと思います。

class名は先ほど命名のルールを使った場合、同じルールを使うことも忘れないようにしましょう。

以上で完成です。