【Chapter4】各コンポーネントのCSS

概要と目標完成に向けて詳細にCSSを調整。

見出しやボタンなどの装飾をCSSで調整し、ページを完成させる。

今回のゴール

RERUN

新しいウインドウで表示する

テキストの非表示視覚的には必要ないテキストを
非表示にする。

スクリーンリーダー用（音声読み上げソフトなど）のテキストをCSSで非表示にしましょう。

テキストの非表示にしてみよう

「www」フォルダ内の「index.html」をテキストエディタで開く
非表示にするテキスト span要素で囲み、class属性を指定
（class名： screen-reader-text）

www/index.html

      <h1>
        <span class="screen-reader-text">Dummy Cafe</span>
        <a href="index.html"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
      </h1>

      <p id="footer-button"><a href="#top"><span class="screen-reader-text">このページの先頭に戻る</span></a></p>

        <address>
          <span class="screen-reader-text">Dummy Cafe</span>
          <a href="#" id="footer-logo"><img src="images/common/logo-primary.png" alt="Dummy Cafe"></a>
          架空県架空市架空0-0-0 / <a href="tel:0X-1234-5678">0X-1234-5678</a>
        </address>

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
グリッドのCSSの下に、非表示用テキストのCSSを記述

www/css/common.css

/*
  Accessibility
----------------------------------------------- */
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(1px, 1px, 1px, 1px);
}

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
ブラウザで「www」フォルダ内の「index.html」にアクセスし、
テキストが非表示になったかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

見出しの装飾文字のサイズを大きくし、
位置を調整。

見出しの文字のサイズを大きくして左右中央に、
上下の余白も調整する。

見出しの装飾をしよう

「www」フォルダ内の「index.html」をテキストエディタで開く
各セクションの見出しの要素に、class属性を指定
（class名： heading-primary）

www/index.html

<h2 class="heading-primary">人気のメニュー</h2>

<h2 class="heading-primary">ニュース &amp; ブログ</h2>

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
グリッドのCSSの下に、見出しのCSSを記述

www/css/common.css

/*
  Heading
----------------------------------------------- */
.heading-primary {
  text-align: center;
  font-size: 2.5em;
  font-weight: bold;
  margin-bottom: 1.2em;
}

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
ブラウザで「www」フォルダ内の「index.html」にアクセスし、
見出しの装飾ができたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

カード型の装飾写真を上に、
テキストを下に配置。

カード型モジュールの装飾は、positionを使って写真を上に移動し、テキストを下に下ろす。

カード型の装飾をしよう

「www」フォルダ内の「index.html」をテキストエディタで開く
各カードのa要素の、class属性に「card」と指定
各商品の商品説明には、class属性に「card-text」と指定
各商品の金額には、class属性に「card-price」と指定

www/index.html

<a href="#" class="card">
  <h3>ブレンドコーヒー</h3>
  <figure>
    <img src="images/menu/menu-blend-coffee.jpg" alt="淹れたての香りが引き立つ最高のコーヒー。">
  </figure>
  <p class="card-text">毎日厳選したコーヒー豆のみを使ったオリジナルブレンド</p>
  <p class="card-price">¥ 320</p>
</a>

<a href="#" class="card">
  <h3>トマトソースパスタ</h3>
  <figure>
    <img src="images/menu/menu-tomato-pasta.jpg" alt="トマトソースがよく絡んだパスタをお皿に盛り付け。">
  </figure>
  <p class="card-text">新鮮なトマトを惜しみなく使った自慢のトマトソースパスタ</p>
  <p class="card-price">¥ 750</p>
</a>

<a href="#" class="card">
  <h3>チーズバーガーセット</h3>
  <figure>
    <img src="images/menu/menu-cheeseburger.jpg" alt="溢れんばかりのボリュームたっぷりハンバーガーとあみあみポテト。">
  </figure>
  <p class="card-text">架空村のたまねぎとレタスを使ったチーズバーガーとポテトのセット</p>
  <p class="card-price">¥ 750</p>
</a>

<a href="#" class="card">
  <h3>チョコレートケーキ</h3>
  <figure>
    <img src="images/menu/menu-chocolate-cake.jpg" alt="チョコレートのスポンジとクリームで作られたきれいな断層のケーキ。">
  </figure>
  <p class="card-text">当店の優秀なパティシエが愛情を込めて作ったチョコレートケーキ</p>
  <p class="card-price">¥ 500</p>
</a>

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
見出しのCSSの下に、カードのCSSを記述

www/css/common.css

/*
  Card
----------------------------------------------- */
.card {
  position: relative;
  display: block;
  padding: 10.3125em .5em .5em;
  border: 1px solid #ddd;
  text-decoration: none;
  color: #212121;
}

.card:hover {
  background-color: #fafafa;
}

.card img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

.card h3 {
  font-weight: bold;
  margin-bottom: .5em;
}

.card-text {
  font-size: .75em;
  color: #666;
}

.card-price {
  text-align: right;
  font-size: .75em;
  font-weight: bold;
}

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
ブラウザで「www」フォルダ内の「index.html」にアクセスし、
カードの装飾ができたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

メディア型の装飾写真を左に、
テキストを右に配置。

メディア型モジュールの装飾は、floatを使って写真を左に移動し、テキストを右に配置する。

メディア型の装飾をしよう

「www」フォルダ内の「index.html」をテキストエディタで開く
下記を参考に、文章部分をdivで囲み、各要素にclass属性を指定する

www/index.html

<a href="#" class="media">
  <div class="media-body">
    <h3>プロが教える！おいしいコーヒー豆の選び方</h3>
    <p><time datetime="2018-12-11">2018.12.11</time></p>
  </div>
  <figure>
    <img src="images/post/post-coffee-beans.jpg" alt="大量のコーヒー豆をひとすくい">
  </figure>
</a>

<a href="#" class="media">
  <div class="media-body">
    <h3>自宅でもおいしいコーヒーが飲めるハンドドリップの方法</h3>
    <p><time datetime="2018-12-09">2018.12.09</time></p>
  </div>
  <figure>
    <img src="images/post/post-hand-drip.jpg" alt="ハンドドリップで淹れたてコーヒー">
  </figure>
</a>

<a href="#" class="media">
  <div class="media-body">
    <h3>2018年〜2019年の年末年始のお休みについて</h3>
    <p><time datetime="2018-12-09">2018.12.04</time></p>
  </div>
  <figure>
    <img src="images/post/post-in-store.jpg" alt="1組のお客様しかいない店内の様子">
  </figure>
</a>

<a href="#" class="media">
  <div class="media-body">
    <h3>ノマドワーカの皆さん！ついに無料Wifi設置しました</h3>
    <p><time datetime="2018-12-01">2018.12.01</time></p>
  </div>
  <figure>
    <img src="images/post/post-nomad.jpg" alt="Macを持ち込んで楽しむコーヒー">
  </figure>
</a>

<a href="#" class="media">
  <div class="media-body">
    <h3>2018年12月のおいしいコーヒーの淹れ方セミナーについて</h3>
    <p><time datetime="2018-11-20">2018.11.20</time></p>
  </div>
  <figure>
    <img src="images/post/post-coffee-seminar.jpg" alt="挽きたてのコーヒーを入れる">
  </figure>
</a>

<a href="#" class="media">
  <div class="media-body">
    <h3>ラテアートが上手にできる方法を解説してみた</h3>
    <p><time datetime="2018-11-11">2018.11.11</time></p>
  </div>
  <figure>
    <img src="images/post/post-latte-art.jpg" alt="きれいなハート型のラテアート">
  </figure>
</a>

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
カードのCSSの下に、メディアのCSSを記述

www/css/common.css

/*
  Media
----------------------------------------------- */
.media {
  display: block;
  overflow: hidden;
  background-color: #fff;
  padding: 1em;
  text-decoration: none;
  color: #212121;
}

.media:hover {
  background-color: #fafafa;
}

.media-body {
  float: right;
  width: 260px;
}

.media figure {
  float: left;
  width: 160px;
}

.media h3 {
  min-height: 5em;
  font-weight: bold;
  margin-bottom: .5em;
}

.media p {
  font-size: .75em;
  color: #666;
}

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
ブラウザで「www」フォルダ内の「index.html」にアクセスし、
メディアの装飾ができたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

ボタンの装飾ボタンをクリックしやすい装飾にしよう。

リンクの部分に装飾を付けてクリックしやすい装飾を付けよう。
今回のボタンは、疑似要素セレクタ（:before、:after）や、CSS3のプロパティを使いアイコン部分も画像を使わず作成してみる。
ただし、CSS3のプロパティを使うときは、対応ブラウザを確認し情報伝達に支障が出ないかを確認する

ボタンの装飾に使うプロパティ

プロパティ名	説明
border-radius CSS 3	ボックスを角丸にするプロパティ。 box-radius \| MDN
transform CSS 3	要素を変形させるプロパティ。 transform \| MDN
box-shadow CSS 3	ボックスをドロップシャドウを指定するプロパティ box-shadow \| MDN

ボタンの装飾をしよう

「www」フォルダ内の「index.html」をテキストエディタで開く
各ボタンのa要素に、class属性を指定
（class名： button）
さらに、主要なボタンには、「button-primary」
ページの先頭に戻るボタンには、「button-pagetop」を追加

www/index.html

<p><a href="#" class="button button-primary">全てのメニューを見る</a></p>

<p><a href="#" class="button button-primary">全ての記事を見る</a></p>

<p id="footer-button"><a href="#top" class="button button-pagetop"><span class="screen-reader-text">このページの先頭に戻る</span></a></p>

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
見出しのCSSの下に、ボタンのCSSを記述

www/css/common.css

/*
  Button
----------------------------------------------- */
.button {
  box-sizing: border-box;
  display: block;
  text-align: center;
  text-decoration: none;
}

.button-primary {
  position: relative;
  width: 320px;
  margin: 3em auto 0;
  font-weight: bold;
  border: 1px solid #212121;
  border-radius: 1em;
  padding: 1em;
  background-color: #fff;
  color: #212121;
}

.button-primary:before,
.button-primary:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg); /* Androd4.4.4 Blackberry用 */
      -ms-transform: rotate(45deg); /* IE9用  */
          transform: rotate(45deg);
}

.button-primary:before {
  right: 24px;
  background-color: #212121;
}

.button-primary:after {
  right: 26px;
  background-color: inherit;
}

.button-primary:hover {
  background-color: #212121;
  color: #fff;
}

.button-primary:hover:before {
  background-color: #fff;
}

.button-pagetop {
  position: relative;
  width: 64px;
  height: 64px;
  border: 4px solid #212121;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.button-pagetop:before,
.button-pagetop:after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg); /* Androd4.4.4 Blackberry用 */
      -ms-transform: rotate(45deg); /* IE9用  */
          transform: rotate(45deg);
}

.button-pagetop:before {
  top: 8px;
  background-color: #212121;
}

.button-pagetop:after {
  top: 16px;
  background-color: inherit;
}

.button-pagetop:hover {
  background-color: #212121;
  color: #fff;
}

.button-pagetop:hover:before {
  background-color: #fff;
}

上書き保存
「css」フォルダ内に「css」フォルダ内の「common.css」をテキストエディタで開く
ブラウザで「www」フォルダ内の「index.html」にアクセスし、
ボタンの装飾ができたかを確認

ブラウザでの表示例

RERUN

新しいウインドウで表示する

PC Site Coding

Chapter04 各コンポーネントのCSS

概要と目標完成に向けて詳細にCSSを調整。

テキストの非表示視覚的には必要ないテキストを
非表示にする。

テキストの非表示にしてみよう

見出しの装飾文字のサイズを大きくし、
位置を調整。

見出しの装飾をしよう

カード型の装飾写真を上に、
テキストを下に配置。

カード型の装飾をしよう

メディア型の装飾写真を左に、
テキストを右に配置。

メディア型の装飾をしよう

ボタンの装飾ボタンをクリックしやすい装飾にしよう。

ボタンの装飾をしよう