紹介・お知らせセクションのレスポンシブコーディング

今回は「ズーロッパ東京とは」と「お知らせ」のセクションを、まとめてコーディングしていきます。
どちらのセクションもそう難しくありません。ここまでレスポンシブコーディングの復習も兼ねて、HTMLとCSSを書いていきましょう。

「ズーロッパ東京とは」セクション

見出しまわりの作成

見出し部分のデザインは、前回の「楽しいイベント～」のところとほぼ同じ作りです。

違いは、文字の色と、見出し下にテキストがないことくらいですね。
文字色は「text-green」クラスを新しく作成して対応します。

index.html 

<section class="about">
  <article class="container section-padding">
    <h2 class="text-green text-center">
      ズーロッパ東京とは
    </h2>
    <div class="text-center">
      <img src="images/line@2x-8.png" width="400" height="6" alt="">
    </div>

  </article>      
</section>

style.css 

.text-green{
  color: #669900;
}

HTMLの構成を考える

このセクションでイレギュラーなのは、横並びレイアウトの切り替え。
タブレット幅でも、画像と文章は縦並び配置のまま。PC幅で横並びに変わります。

また、タブレット幅の時はコンテンツ幅よりも狭くデザインされています。

画像（赤い線）とテキスト（青い線）の合計が親要素よりも大きくなれば、flexアイテムの折り返しが起こり縦並びになります。
前回、paddingを付けたカードが横に並ばなかったのと同じですね。

ですので、HTMLの構成と必要なスタイル指定を、下図のように想定します。

共通（スマホ幅）のHTMLとCSSを書く

上のイメージ図に従って、HTMLを書きます。

オレンジ色の線は「flex-container」クラスを適用。
赤色の線部分は「about-image」、青い線で囲った部分には「about-description」と新しいクラスを作ります。

index.html 

<section class="about">
  <article class="container section-padding">
    <h2 class="text-green text-center">
      ズーロッパ東京とは
    </h2>
    <div class="text-center">
      <img src="images/line@2x-8.png" width="400" height="6" alt="">
    </div>
    <!-- ▼ここから追加部分▼ -->
    <div class="flex-container">
      <div class="about-image card">
        <img src="images/about@2x-8.png" width="388" height="243" alt="パンダ">
      </div>
      <div class="about-description">
        <h3 class="text-green">
          都心でいちばん動物とふれあえる場所
        </h3>
        <p>
          動物園で、ありのままの動物たちの生活や行動、しぐさの中に「凄さ、美しさ、尊さ」を見つけ、「たくさんの命あふれる空間の居心地の良さ」を感じてほしい。家畜・ペット種との触れ合いを通じて「命の温もり、命の尊さ」を感じてほしい。そして、野生動物の保護や環境問題を考えるとき、動物たちは私たちと対等な生き物なんだと思うきっかけになれる、そのような動物園でありたいと思っています。
        </p>
      </div>
    </div>
  </article>
</section>

赤線「about-image」、青線「about-description」クラスに対して、スタイル指定を書きます。

左右marginのautoは、width:100%の要素に対しては影響しません。
タブレット幅で中央配置になる「about-text」クラスの方にも、先に指定してしまいます。

style.css 

.about-image,
.about-description{
  margin: 1.5rem auto; /* 上下に余白を加え、左右は中央配置 */
}

.about-image{
  max-width: 420px;
}

スマホ幅での表示を確認します。

タブレット幅、PC幅表示のCSSを書く

タブレット幅

タブレット幅のCSSを追加して、表示を整えます。
画像サイズや中央配置は既に書いているので、.about-descriptionの幅指定だけ書けばOKです。

style.css - @media (min-width: 600px) { } 内 

.about-description{
  width: 85%;
}

タブレット幅に切り替えて、表示を確認します。
縦並びのまま、中央配置になりました。

h3見出しの文字が小さいので、デザインに合わせて大きくしておきましょう。

style.css - @media (min-width: 600px) { } 内 

h3{
    font-size: 24px;
}

PC幅

PC幅用のCSSも、.about-descriptionに対する指定だけです。

style.css - @media (min-width: 1024px) { } 内 

.about-description{
    flex: 1;
    padding-left: 3rem;
}

width指定よりも「flex:1」の方が強いので、widthプロパティの上書きはしなくて大丈夫。
横並びになり、右側はコンテンツ幅の端まで広がります。

「お知らせ」セクション

いよいよ最後！
お知らせのセクションをコーディングしていきましょう。

見出しまわりの作成

見出し部分は、楽しいイベント～のセクションと同じ。

コピー・アンド・ペーストして、見出しの文字だけ打ち替えましょう。
見出し下、ｐタグで囲んだテキストは削除します。

index.html 

<section class="info">
  <div class="container section-padding">
    <h2 class="text-white text-center">
      お知らせ
    </h2>
    <div class="text-center">
      <img src="images/line@2x-8.png" width="400" height="6" alt="">
    </div>

  </div>
</section>

お知らせ表示部分の作成

見出しの下、お知らせが表示されている部分を作ります。

1.外側の枠を作る

白背景+影は「card」クラスを使えば出来ますね。

ただ、PC幅のデザインを見るとコンテンツ幅いっぱいには広がっていません。
日にちのフォントサイズも変更があるので、このあたりを調整しながら書いていきます。

まず、枠になる部分<div class="card">を作りましょう。
幅を制限するために「info-wrapper」クラスを新規追加し、CSSを書きます。

index.html 

<section class="info">
  <div class="container section-padding">
    <h2 class="text-white text-center">
      お知らせ
    </h2>
    <div class="text-center">
      <img src="images/line@2x-8.png" width="400" height="6" alt="">
    </div>
    <div class="card info-wrapper">

    </div>
  </div>
</section>

style.css 

.info-wrapper{
  max-width: 860px;
  margin: 3rem auto 0;
}

2.内側に表示するコンテンツ

次に、カードの内側です。
構造と必要なスタイル指定を考えながら、HTMLとCSSを書きます。

  • 黒い線：articleタグ + flex-containerクラス
  • 赤い線：h3タグ + info-dateクラス
  • 青い線：h3タグ + info-title

index.html 

<div class="card info-wrapper">
  <article class="flex-container">
    <div class="info-date">
      2024/05/02
    </div>
    <h3 class="info-title">
      <a href="#">
        サマースクール参加予約が開始！
      </a>
    </h3>
  </article>
  <article class="flex-container">
    <div class="info-date">
      2024/03/01
    </div>
    <h3 class="info-title">
      <a href="#">
        4～7月の開園時間について
      </a>
    </h3>
  </article>
  <article class="flex-container">
    <div class="info-date">
      2023/02/19
    </div>
    <h3 class="info-title">
      <a href="#">
        ZooloppaがTVで紹介されます
      </a>
    </h3>
  </article>
</div>

style.css 

.info-wrapper article{
  border-bottom: solid 1px #CCCCCC;
}

.info-date{
  font-size: 14px;
}

h3.info-title{
  font-size: 16px;
}

スマホ幅のCSSをざっと書いてみたら、ブラウザで表示を確認。

大体できていますが、詰まったような表示になっていますね。
atticleにpaddingを追加します。

style.css 

.info-wrapper article{
  padding: 0.75rem 0;
  border-bottom: solid 1px #CCCCCC;
}

3.タブレット幅以上の表示

タブレット幅以上の表示に変更するための、CSSを追加します。
こちらも、最初に考えたCSSをとりあえず書いて、ブラウザで表示を見てみましょう。

style.css - @media (min-width: 600px) { } 内 

.info-date{
  font-size: 16px;
  width: 9em;
}

h3.info-title{
  flex: 1;
}

余白を調整します。

style.css - @media (min-width: 600px) { } 内 

.info-wrapper article{
  padding: 1rem 0;
}

.info-date{
  font-size: 16px;
  width: 9em;
}

h3.info-title{
  flex: 1;
  margin-top: 0;
}

4.もっと見るボタンの追加

一番下に、オレンジ色のボタン風デザインで「もっと見る」を追加します。

ボタン風デザイン自体は、ファーストビューの「詳細はこちら」と同じ作り。
文字を中央に配置するため、text-centerクラスを適用したpタグで囲みます。

index.html 

      ...
      </article>
      <p class="text-center">
        <a href="#" class="btn-more text-white">もっと見る</a>
      </p>
    </div>
  </div>
</section>

ブラウザで見てみると、text-whiteクラスが効いていません。

.card a{ } をセレクタに書いているスタイル指定に、負けている（上書きされている）形です。
これは、CSSセレクタの優先順位が影響しています。

クラスだけのセレクタよりも、クラスと要素の２つが指定されている方が優先されます。
優先順位を変えるには、important宣言を付けるか、セレクタの書き方を変えて優先度を上げる必要があります。
どちらの方法でも良いので、試してみてください。

【important宣言を使う方法】
CSSのimportant宣言は、スタイル適用の優先順位を一番高くするための宣言。
強制的に「このスタイル指定を使え！」と命令するような書き方です。

使い方は、CSSプロパティ値の後ろ、セミコロンとの間に「!important」と書くだけ。

style.css 

.text-white{
  color: #FFFFFF !important;
}

【CSSセレクタで優先度を上げる方法】
important宣言を多用すると、スタイル指定を書いても適用されない（important宣言で上書きされる）状況に陥る危険があります。このため、important宣言を使わない、というコーディングルールが定められている場合もあります。

そうした場合は、CSSセレクタの優先順位が上になる書き方をします。
今回のtext-whiteクラスだと「親要素がcardクラスでも効く」ように、以下のように書けばOK。

style.css 

.text-white,
.card .text-white{
  color: #FFFFFF;
}

「もっと見る」の文字が白く表示できたら、お知らせのセクションは完成です。

前のレッスン 次のレッスン レッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

レッスン素材一覧

関連する講座

【図解たっぷり】Chrome検証ツール...
HTML&CSSでつくるWebサイト制...
Web制作初心者のためのTailwin...
新HTML/CSS入門講座（応用編）
プロコーダー育成講座
HTMLの書き方入門 - はじめてのW...
CSSの書き方入門 - はじめてのWe...
Photoshopで作って学ぶサムネイ...
基礎から学びたい人のためのHTML入門...
基礎から学びたい人のためのCSS入門【...
イラストレーター入門講座 - はじめて...
フォトショップ入門講座 - はじめての...
JavaScriptの書き方入門 - ...
レンタルサーバーを使ったWebサイト公...
Wordpress制作入門講座 - は...
×