レスポンシブコーディング向け、CSSファイルのベースを作ろう

前回のレッスンではHTMLを中心にコーディングに着手しました。
今回はCSSの方に着手してみましょう。

大まかなスタイル指定を書く

メディアクエリを用意する
コンテンツグループごとの背景色を指定
コンテンツ幅を設定する
Webページの白い枠（余白）を無くす

レイアウト変更のベースを作る

レイアウト変更の共通性を見つける
flexレイアウトのベースになるクラスを作る

見本フォルダについて

大まかなスタイル指定を書く

前回のレッスンではWebページを役割・内容ごとに大きくグルーピングして、HTMLで書き起こしました。

index.html（前回までの作成内容）

<body>
  <header></header>
  <main>
    <section class="firstview"></section>
    <section class="event"></section>
    <section class="about"></section>
    <section class="info"></section>
  </main>
  <footer></footer>
</body>

CSSもベースセッティングと言えるような大きな設定や、画面幅が変わっても変わらない部分から書いてみましょう。

メディアクエリを用意する

最初に、CSSファイルの大枠と言えるメディアクエリを用意しておきます。
コーディング要件の指定通り、モバイル向けのデザインからCSSを書く形にしましょう。

ブレイクポイントはタブレットデザインを600px以上、PCデザインを1024px以上に設定してみます。
特に指定されていませんので、別の数値でも問題はありません。

style.css

/* -------------------------------------------- */
/*  ▼ 全幅共通/スマホ幅で適用するCSS ▼
/* -------------------------------------------- */



/* -------------------------------------------- */
/*  ▼ タブレット以上の場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 600px) {



} /* end @media */
/* -------------------------------------------- */
/*  ▼PCの場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 1024px) {



} /* end @media */

コンテンツグループごとの背景色を指定

HTMLに書いたコンテンツグループには、それぞれ異なる背景が付けられています。
firstview部分は一旦置いておいて、背景色をCSSで指定してみましょう。

まず、最上部のheader部分。
指定する色コードは、Illustratorのスポイトツールで確認できます。
# から始まる6桁のコードを使います。

headerとfooterは、緑色の背景色・白い文字と同じ設定ですね。
二回書くのは面倒なので、セレクタを半角コンマで区切って、まとめて指定します。

style.css

header,
footer{
  color: #FFFFFF;
  background-color: #669900;
}

同様に「event」「about」「info」クラスもCSSで背景色を指定しましょう。
セクション内もテキスト色は複数使われていますから、文字色はまだ指定しません。

各セクションごとに必要なCSSを書き足していけるよう、コメントアウトで区切っておくと分かりやすいです。

style.css

/* -------------------------------------------- */
/*  ▼ 全幅共通/スマホ幅で適用するCSS ▼
/* -------------------------------------------- */

/* ========================== */
/* header/footer
/* ========================== */
header,
footer{
  color: #FFFFFF;
  background-color: #669900;
}

/* ========================== */
/* main
/* ========================== */

/* --- ファーストビュー --- */


/* --- 楽しいイベント --- */
.event{
  background-color: #DBAF23;
}

/* --- ズーロッパとは ---*/
.about{
  background-color: #FFFDE6;
}

/* --- お知らせ ---*/
.info{
  background-color: #FBB93D;
}

/* -------------------------------------------- */
/*  ▼ タブレット以上の場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 600px) {



} /* end @media */
/* -------------------------------------------- */
/*  ▼ タブレット横持ち/PCの場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 1024px) {



} /* end @media */

コンテンツ幅を設定する

コンテンツ幅とは、Webサイト/Webページのメインコンテンツを表示する幅のこと。
今回の題材だと、デザインデータで「コンテンツ幅」レイヤーを表示した時に出てくる、薄い水色の線部分です。

コンテンツ幅に制限するためのCSS

コーディング要件で、コンテンツ幅は最大1200pxと指定されています。
また、画面幅が1200px以下の場合でも、左右に余白を持たせる形になっていますね。

コンテンツ幅を設定するクラスを「container」クラスと命名して、CSSを書きます。
headerとfooterに対する指定よりも、上に書いておくと分かりやすいです。

style.css

/* -------------------------------------------- */
/*  ▼ 全幅共通/スマホ幅で適用するCSS ▼
/* -------------------------------------------- */
.container{
  max-width: 1200px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* ========================== */
/* header/footer
/* ========================== */
header,
...以下略

左右paddingで指定した単位「rem」は、htmlタグの文字サイズを1とした単位です。
デフォルトの文字サイズは16pxですので、16×1.5＝24px の余白が付きます。

コンテンツ幅をHTMLに適用する

CSSで設定したコンテンツ幅は、要素に「container」クラスを追加すると適用されます。
ですが、今までに書いた要素（body、header、sectionタグなど）へ直にクラスを加えると、背景色も途中までで切れてしまいますね。

ですので“横幅をコンテンツ幅に制限するためのクラスを持った要素”を各パートの中に書き加えていきます。
デザイン上のものなので、特に意味を持たないdivタグを使うと良いでしょう。

headerタグの中に<div class="container">を書いて、表示を確認してみましょう。

index.html

<header>
    <div class="container">
        test
    </div>
</header>

スマホ幅とタブレット幅では、左右にpaddingが付いて表示されています。

PC幅の方も、最大幅の指定は効いています。
が、検証ツールで見ると左寄せで配置されています。

横方向の中央にコンテンツが表示されるよう、CSSを追加しましょう。
「margin: auto;」の一行を加えるだけで中央に来ますよ。

style.css

.container{
  max-width: 1200px;
  margin: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

Webページの白い枠（余白）を無くす

ここまでコーディングを進めて、ブラウザでの表示に違和感を覚えた方もいらっしゃるのではないでしょうか。
PC幅の表示でも、スマホ幅でも、上下左右に白い枠のようなものがありますよ。

今回のように全面に背景色や背景画像が入るデザインだと、無い方がスッキリしますね。

検証ツールで原因を探すと、白い枠はbodyのmarginであることがわかります。

これはブラウザ側が自動的につけているCSSです。
サイトで使うスタイルシート、style.cssでmarginを0に指定すると上書きできます。

style.css

body{
  margin: 0;
}

.container{
  max-width: 1200px;
  ...以下略

白い枠が消え、端まで背景色が入りました。

レイアウト変更のベースを作る

レイアウト変更の共通性を見つける

題材のデザインを見ると、表示幅による大きな変更点として要素の並べ方が挙げられます。ヘッダーのメニュー部分が少し変則的ではありますが、表示幅が狭い時は縦並び、タブレット幅やPC幅になると横並びで配置するアイテムが多いですね。

このレイアウト変更を、何（CSSの何プロパティを使うか、javascriptを使うか）で実現させるかを考えます。

今回の場合は全て、CSS、Flexboxレイアウトのみで作ることができそうです。
Flexboxレイアウトを使う場合は、並べたいアイテムを囲う要素（Flexコンテナ）が必要です。
Flexコンテナ、Flexアイテムの構成をイメージしてみましょう。

flexレイアウトのベースになるクラスを作る

Flexboxレイアウトで要素を配置する予定の箇所は、複数あります。
こうした場合、それぞれ個別にクラス名を付けて、CSSでdisplay:flex;やwidth指定を書いていくのも一つの方法です。

ですが、似たようなスタイル指定を、パーツごとに毎回全て書くのは大変。
今回の場合は共通するCSSも多いので、Flexboxレイアウトを作る際に下地として使えるクラスを作ってみましょう。

flexコンテナにつけるクラスを「flex-container」と命名して、CSSを書いていきます。

1.共通/スマホ幅用のCSS

タブレット幅やパソコン幅では横並びになる部分も、スマホ幅では大半が縦並びの配置。
flex-containerクラスにdisplay: flex;だけ指定してしまうと、この時点で横並びになってしまいます。
縦方向にアイテムを並べるよう、flex-direction: column; も合わせて記述します。

CSSはheaderに対する指定よりも上、.containerの下の行あたりに書いてください。

style.css

.flex-container{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

2.タブレット幅以上の指定

タブレット幅では、ほとんどのflexアイテムは横並びになります。
横方向に並ぶように、flex-directionの値を上書きします。

style.css

/* -------------------------------------------- */
/*  ▼ タブレット以上の場合に適用するCSS ▼
/* -------------------------------------------- */
@media (min-width: 600px) {

  .flex-container{
    flex-direction: row;
  }

} /* end @media */