ここでは、ミニサイトで使う HTML ファイルに対して、CSS ファイルを作成していきます。CSS の設定内容は多岐にわたるのですべてをここで取り上げることはできません。主な点にしぼってみていくことにします。

CSSファイルを読みこめるようにしよう

基本とする HTML ファイルは、ページのレイアウトを考えよう にあるものとします。

まず、headタグの中で次のように書いて、CSS ファイルを読み込むようにします。

<link rel="stylesheet" href="/css/style.css">

そして、cssフォルダの下にstyle.cssというファイルを作り、このファイルを更新していくことにします。

ヘッダーとフッターのレイアウトを設定しよう

最初に、ページレイアウト全体の設定を行いましょう。まずは、大きなウィンドウで見たときに、横に広がらないようにします。

#container {
  max-width: 1080px;
  margin: 0 auto;
}

これで、ウィンドウの大きなPCで見たときに、ページ全体には広がらず、中央に表示されるようになります。

次に、ヘッダーとフッターのレイアウトを考えましょう。どちらも、テキストを中央ぞろえにし、リンクのデザインを変えるくらいでOKでしょう。

#container > header, #container > footer {
  text-align: center;
  padding: 30px 0;
}
#container > header {
  background-color: #A9D08E;
}
#container > header h1 {
  margin: 0;
}
#container > footer {
  background-color: #D9D9D9;
  margin-top: 30px;
}
#container > header a, #container > footer a {
  text-decoration: none;
  color: #333;
}
#container > footer a {
  font-size: 200%;
  font-weight: bold;
}

>は、直下の要素を指定するためのものです。header, footerタグはmainタグ内でも使っているため、このような書き方にしています。こうした書き方のほかに、

• それぞれのheader, footerタグに固有のクラスやIDを振る
• 記事内のheader, footerタグは後で設定を上書きする
• そもそも記事内でheader, footerタグは使わない

などの対応の仕方があります。

サイドバーのレイアウトを設定しよう

次に、メイン部分とサイドバーが横並びになるようにします。ここでは、display: grid;を使います（IEではうまく表示されませんが）。

このときに注意したいのが、先にスマホの設定から書くということです。スマホ、タブレット、PC、それぞれの設定をする必要がありますが、先にスマホの設定を書いて、スマホの設定から先に読みこまれるようにします。Google がスマホに適応しているサイトを高く評価するからです。

@media (min-width:768px){
#content {
  display: grid;
  grid-template: auto / auto 320px;
}

このように書くと、768px以上でこの設定が読みこまれるようになります。ここでのgrid-templateは、高さは自動、横は右側は320pxで固定で左側は自動、という設定になっています。つまり、サイドバーの幅を固定した2カラムになります。

ナビゲーションのデザインをしよう

gridを使って、ナビゲーションの設定もしてみましょう。今度は、PCに限定せずに、全体に適用されるように設定します。

#container > nav ul {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template: auto / 33.33% 33.33% 33.33%;
  text-align: center;
}
#container > nav ul li {
  list-style-type: none;
  padding: 5px;
  background-color: #FFE699;
  border: 1px solid #000;
}
#container > nav ul li a {
  text-decoration: none;
}

色などは変えたほうがいいですが、これで横並びのナビゲーションを作ることができます。高さは自由、横は33.33%ずつに設定しています。

サイドバーのデザインをしよう

サイドバーは、各ウィジェットの見た目を整えるといいでしょう。

.widget {
  margin: 10px;
  background-color: #9BC2E6;
}
.widget-title {
  font-weight: bold;
  text-align: center;
  padding: 10px;
}
.widget-body {
  padding: 10px;
}
.widget-body ul {
  margin: 0;
  padding: 0;
}
.widget-body ul li {
  list-style-type: none;
  padding: 5px;
}
.widget-body ul li a {
  text-decoration: none;
}

色や細かなデザインは、サイトに応じてブラッシュアップしていきましょう。

メイン部分のデザインをしよう

メイン部分について考えていきましょう。ここは、サイトによってまったく異なるので、何をデザインしていかないといけないかを挙げていきます。

まず、必須タグとしては、h, p, aタグがあるでしょう。他には、img, ul, ol, li, tableなどもよく使います。blockquote, pre, codeなども使うかもしれません。これらの中で、使いそうなものがあればデザインを考えましょう。

WordPress のテーマを使ったことがあるなら、HTML タグがどのようにデザインされているか、テーマ表示サンプルがついていることがよくあります（例えばこういうページ）が、あれを作るイメージです。

また、重要なポイントをまとめるために、ボックスを使うかもしれませんね。ボタンや罫線、マーカー線、吹き出しを使うこともあるでしょう。目次を載せたい人もいるかもしれません。これらのパーツも、使う予定ならデザインしていきましょう。

ある程度汎用性のあるものは、ネットで検索するといろいろ出てきます。例えば、ボックスなら 【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30が参考になるでしょう。

配色や見出しのデザインなど、少しいじるだけでガラッと印象が変わるので、オリジナリティのあるデザインに仕上げていきましょう。

デザインを考えるのは楽しいですが、凝り過ぎると時間がどんどん過ぎていきます。ある程度のところで止めるようにしましょう。見た目は大事ですが、ミニサイトは記事の方が大事です。

おわりに

ここでは、ページのデザインをするための CSS ファイルの作成について見てきました。簡単にではありますが、全体のレイアウト、各エリアのデザインについて見てきました。

デザインまでできあがれば、だいぶテンションも上がってきますね。ただ、もう少し事前の準備をしましょう。次のページ では、外部サイトの設定をしていくことにします。デザインを考えるときに利用できるものも紹介していきます。