コーディング練習(2) 隣接セレクタ(li + li)の使い方

f:id:mimipen:20191111211452j:plain こんにちは、かなきち(@kanakichi0801)です。

前回の続きで、今回は以下の部分をコーディングして行きます。さっそく作成するという方はこちらをクリック！
f:id:mimipen:20191111210012j:plain

前回の記事をまだ見ていないよという方は、以下記事から一緒にホームページを作成してみましょう！

0. 基本となるHTMLを作成し、リセットCSSを読み込ませる記事↓
blog.mimipen.net

1. ヘッダーとメインビジュアルをコーディングした記事↓
blog.mimipen.net

コーディング練習第二回目！
共通で使えるようにタイトルをパーツ化してみよう！また、よく使う3カラムのレイアウトにも挑戦してみよう！記事の最後には隣接セレクタ(li + li)の解説もあるので、よかったら見てみてね！

こんな人に読んで欲しい

・HTMLとCSSの使い方を覚えたい方

・ホームページを作ってみたい方

・ホームページを作りたいけど、何から始めればいいかわからない方

完成コード
コーディングルール
デザインデータを元に計画をたてる
それぞれのエリアで使えるタグ構造を考えよう
タイトルのパーツ化
固有のスタイル
3カラム作成する
- 3カラムのスタイル
隣接セレクタ (li + li)に挑戦してみよう
ABOUTの完成コード
まとめ
- HTMLをしっかり使ったコード

完成コード

サンプルページ

[html]

<div class="about">
  <div class="about__inner">
    <div class="base__title">
      <h2><div>ABOUT</div>カフェのこだわり</h2>
      <div class="deco"></div>
    </div>
    <div class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
    <div class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
    <div class="about__3column">
      <div class="about__item">
        <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
        <h3 class="about__item__title">豆からこだわりました</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
      <div class="about__item">
        <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
        <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
      <div class="about__item">
        <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
        <h3 class="about__item__title">食後にデザートはいかが？</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
    </div>
  </div>
</div>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/

/*前回の記事で追加した clearfix のパーツが入ります〜*/

/*title*/
.base__title{
  text-align: center;
  color: #74859f;
  font-weight: bold;
}
.base__title h2{
  font-size: 32px;
  font-weight: bold;
}
.base__title h2 div{
  font-size: 16px;
  margin-bottom: 13px;
  letter-spacing: .2rem;
}
.base__title .deco{
  display: block;
  width: 20px;
  height: 3px;
  margin: 18px auto 0;
  background-color: #ccc;
}

/*HEADER MVのスタイルが入ります〜*/

/*--------------------------------------------------------------
   ABOTU
--------------------------------------------------------------*/
.about{
  padding: 100px 0 120px;
}
.about__inner{
  width: 1040px;
  margin: 0 auto;
}
.about__inner .base__title{
  margin-bottom: 31px;
}
.about__inner .txt{
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.about__3column{
  margin-top: 36px;
  font-size: 0;
}
.about__item{
  display: inline-block;
  width: 320px;
  height: 337px;
  border-bottom: solid 1px #74859f;
}
.about__item__title{
  margin: 25px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.about__item__txt{
  font-size: 14px;
  line-height: 1.5;
}
.about__item + .about__item{
  margin-left: 40px;
}

もっとレベルを上げて、コードを書きたいという方は、ページの下部にHTMLタグをしっかり使ったコードも載せてあるので参考してみてね！

以下より、このブログでのコーディングルールを解説し、その後コードの解説へと入って行きます。

コーディングルール

初心者向けのコーディング記事となります。その為、以下のルールを元にコーディングを行います。

1. 使用するHTMLタグは「div」「img」「a」「h」しか基本的に使わない。
2. 全体で共通するスタイル(body、aなど、よく使うタグへの指定)は、一番最後に反映させる。その為、コーディング途中はデザインと見た目が違う場合があります。

デザインデータを元に計画をたてる

まずは、デザインを確認しましょう！デザインデータはこちらをクリック。

デザインデータを元に以下のように考える。
f:id:mimipen:20191111210015j:plain

かなきちメモ
デザイン全体を見た時に、各エリアのコンテンツ幅は同じ。しかし、MENUエリアには背景があるため、背景を指定できるように大枠(クラス名：about、menu、access)を作ります。中のタグには、[エリア名]__innerという形でクラス名をつける。タイトルは各エリアで使いまわせそうなので、パーツ化してみよう。3カラムの部分は inline-block を使って横に並べてみよう...
などなどを事前に考えます。

それぞれのエリアで使えるタグ構造を考えよう

今回は、かなきちメモで紹介したように、大枠には、各エリア名のクラス名を使い、中のタグには、[エリア名]__innerという形でクラス名をつけるルールを作りました。

[ABOUTエリアの場合]

<div class="about">
  <div class="about__inner">

  <!-- 〜ここに中身を記述〜 -->

  </div>
</div>

タイトルのパーツ化

タイトルのHTML構造

どのエリアでも使えるようなクラス名を指定します。今回は、base__titleにしました。

    <div class="base__title">
      <h2><div>ABOUT</div>カフェのこだわり</h2>
      <div class="deco"></div>
    </div>

タイトルのスタイル

base__titleは共通で使用するので、「PARTS」の中に記述します。

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/

/*前回の記事で追加した clearfix のパーツが入ります〜*/

.base__title{
  text-align: center;
  color: #74859f;
  font-weight: bold;
}
.base__title h2{
  font-size: 32px;
  font-weight: bold;
}
.base__title h2 div{
  font-size: 16px;
  margin-bottom: 13px;
  letter-spacing: .2rem;
}

h2を含むタグ(base__title)に共通して適用されるスタイルを記述します。text-align: centerでテキストを中央寄せにし、font-weight: boldで太文字に、colorで文字色を指定しました。

ポイント！
パーツ化するコツは、パーツ自体に他の要素との余白は書かないことです。パーツ単体のスタイルを記述し、どこでも流用ができるようにします。

タイトルの下のライン装飾

最初は装飾に画像を使おうか考えるかもしれませんが、CSSで実装可能な部分はできるだけCSSで実装しましょう。どれが実装可能かわからない時は「CSS 装飾」で検索すればたくさんのサンプルコードが出てきますので練習で実装するのもおすすめです。

[ライン装飾のスタイル]

.base__title .deco{
  width: 20px;
  height: 3px;
  margin: 18px auto 0;
  background-color: #ccc;
}

幅20px高さ3pxの長方形を作成し、背景色(background-color: #ccc)を追加します。

ポイント！
長方形はdivを使って作成しています。divは、ブロック要素(display: block)なので、base__titleに使用したtext-align: centerでセンター寄せできません。その為、marginの左右にautoを指定して中央寄せにしています。

個人的に、この書き方(divを使った)は、あまり好きではないのでブログの下部では擬似要素を使った書き方を紹介しています。

固有のスタイル

ABOUTは、前回追加した「MV」の次に記述して行きます。ここは難しくないのでコードだけ載せておきますね。 f:id:mimipen:20191111210018j:plain

/*--------------------------------------------------------------
   ABOTU
--------------------------------------------------------------*/
.about{
  padding: 100px 0 120px;
}
.about__inner{
  width: 1040px;
  margin: 0 auto;
}
.about__inner .base__title{
  margin-bottom: 31px;
}
.about__inner .txt{
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}

3カラム作成する

今回のポイントがここです！HTMLを書く時に同じスタイルが適用される部分を全部書いてからスタイルを修正していませんか？
[NG例]

<div class="about__3column">
  <div class="about__item">
    <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
    <h3 class="about__item__title">豆からこだわりました</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
  <div class="about__item">
    <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
    <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
  <div class="about__item">
    <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
    <h3 class="about__item__title">食後にデザートはいかが？</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
</div>

これだとabout__item中にタグを追加したいときに、全てのコードへの書き直しが発生してしまいます。手間を減らす為にパーツは１つだけ書き、スタイルが確定してからHTMLで要素を増やすようにしましょう。

[最低限のパーツだけ記述する]

<div class="about__3column">
  <div class="about__item">
    <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
    <h3 class="about__item__title">豆からこだわりました</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
</div>

3カラムのスタイル

about__itemの幅は320pxで指定します。about__itemの下部にボーダー(border-bottom)をつけるので、要素の高さを337pxで固定しました。

.about__3column{
  margin-top: 36px;
  font-size: 0;
}
.about__item{
  display: inline-block;
  width: 320px;
  height: 337px;
  border-bottom: solid 1px #74859f;
}

3カラムは、inline-blockを使用して実装して行きます。inline-blockの使い方は、以下の記事で使い方は説明しているので飛ばしますね。 blog.mimipen.net

以下のように、about__itemのタイトルとテキストのスタイルを指定します。

.about__item__title{
  margin: 25px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.about__item__txt{
  font-size: 14px;
  line-height: 1.5;
}

f:id:mimipen:20191111210024j:plain

about__itemのスタイルを指定し終わったら、HTMLを複製しましょう。

<div class="about__3column">
  <div class="about__item">
    <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
    <h3 class="about__item__title">豆からこだわりました</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
  <div class="about__item">
    <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
    <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
  <div class="about__item">
    <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
    <h3 class="about__item__title">食後にデザートはいかが？</h3>
    <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
  </div>
</div>

f:id:mimipen:20191111210027j:plain

隣接セレクタ (li + li)に挑戦してみよう

最後に、絶品ピザとケーキ、それぞれの左側に余白を追加します。それぞれ固有のクラス名を追加するのもいいですがスマートに書きたいので、以下のセレクタを使用します。

.about__item + .about__item{
  margin-left: 40px;
}

隣接した要素に適用する、隣接セレクタです。よくリスト(li + li)で使われます。

同階層で隣接している次の要素に対してスタイルを適用することができます。

ここでは、about__item の次のabout__itemにスタイルを指定できます。これは同じ条件を持つ要素全てに適用されます。絶品ピザとケーキの要素、それぞれ左側に余白を指定しました。 f:id:mimipen:20191111210809j:plain

こちらで以上になります。以下に完成コードを載せておきますね！

ABOUTの完成コード

サンプルページ

[html]

<div class="about">
  <div class="about__inner">
    <div class="base__title">
      <h2><div>ABOUT</div>カフェのこだわり</h2>
      <div class="deco"></div>
    </div>
    <div class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
    <div class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
    <div class="about__3column">
      <div class="about__item">
        <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
        <h3 class="about__item__title">豆からこだわりました</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
      <div class="about__item">
        <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
        <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
      <div class="about__item">
        <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
        <h3 class="about__item__title">食後にデザートはいかが？</h3>
        <div class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</div>
      </div>
    </div>
  </div>
</div>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/

/*前回の記事で追加した clearfix のパーツが入ります〜*/

/*title*/
.base__title{
  text-align: center;
  color: #74859f;
  font-weight: bold;
}
.base__title h2{
  font-size: 32px;
  font-weight: bold;
}
.base__title h2 div{
  font-size: 16px;
  margin-bottom: 13px;
  letter-spacing: .2rem;
}
.base__title .deco{
  display: block;
  width: 20px;
  height: 3px;
  margin: 18px auto 0;
  background-color: #ccc;
}

/*HEADER MVのスタイルが入ります〜*/

/*--------------------------------------------------------------
   ABOTU
--------------------------------------------------------------*/
.about{
  padding: 100px 0 120px;
}
.about__inner{
  width: 1040px;
  margin: 0 auto;
}
.about__inner .base__title{
  margin-bottom: 31px;
}
.about__inner .txt{
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.about__3column{
  margin-top: 36px;
  font-size: 0;
}
.about__item{
  display: inline-block;
  width: 320px;
  height: 337px;
  border-bottom: solid 1px #74859f;
}
.about__item__title{
  margin: 25px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.about__item__txt{
  font-size: 14px;
  line-height: 1.5;
}
.about__item + .about__item{
  margin-left: 40px;
}

まとめ

お疲れ様です！よく使えそうなタイトルと3カラムを実装してみましたがいかがだったでしょうか？最後にHTMLタグをしっかり使ったコードも載せておくのでよかったら見比べてみましょう！

HTMLをしっかり使ったコード

[html]

<section class="about">
  <div class="about__inner w__base">
    <h2 class="base__title"><span>ABOUT</span>カフェのこだわり</h2>
    <p class="txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと<br>
    だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p>
    <ul class="about__3column">
      <li>
        <img src="./img/about__coffee.jpg" alt="コーヒー豆の写真">
        <h3 class="about__item__title">豆からこだわりました</h3>
        <p class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p>
      </li>
      <li>
        <img src="./img/about__pizza.jpg" alt="石窯で焼いた絶品ピザの写真">
        <h3 class="about__item__title">石窯で焼いた絶品ピザも人気</h3>
        <p class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p>
      </li>
      <li>
        <img src="./img/about__cake.jpg" alt="シェフ自慢のケーキの写真">
        <h3 class="about__item__title">食後にデザートはいかが？</h3>
        <p class="about__item__txt">だみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすとだみーてきすと</p>
      </li>
    </ul>
  </div>
</section>

[css]

/*--------------------------------------------------------------
   PARTS
--------------------------------------------------------------*/
/*前回の記事で追加した clearfix と w__base のパーツが入ります〜*/

/*title*/
.base__title{
  text-align: center;
  font-size: 32px;
  color: #74859f;
  font-weight: bold;
}
.base__title span{
  display: block;
  margin-bottom: 13px;
  font-size: 16px;
  letter-spacing: .2rem;
}
.base__title::after{
  content: '';
  display: block;
  width: 20px;
  height: 3px;
  margin: 18px auto 0;
  background-color: #ccc;
}

/*HEADER MVのスタイルが入ります〜*/

/*--------------------------------------------------------------
   ABOTU
--------------------------------------------------------------*/
.about{
  padding: 100px 0 120px;
}
.about__inner{
  width: 1040px;
  margin: 0 auto;
}
.about__inner .base__title{
  margin-bottom: 31px;
}
.about__inner .txt{
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.about__3column{
  margin-top: 36px;
  font-size: 0;
}
.about__3column li{
  display: inline-block;
  width: 320px;
  height: 337px;
  border-bottom: solid 1px #74859f;
}
.about__item__title{
  margin: 25px 0 12px;
  font-size: 16px;
  font-weight: bold;
}
.about__item__txt{
  font-size: 14px;
  line-height: 1.5;
}
.about__3column li + li{
  margin-left: 40px;
}

使ってるタグの意味
・section：一つのセクションであることを示す
・p：段落であることを示す※一塊の文章であるという意味
・ul：順序のないリストを表示する
・li：リストの項目を記述

今回、初心者用のコードと大きく違う点は、タイトルの下にあるライン装飾を::afterを使ってCSSで擬似的に要素を作り出したことでしょうか。これを擬似要素と言います。

ブログで紹介するのは、まだ先になりそうなので、気になった方は調べてみてくださいね!

次の記事はこちら↓ blog.mimipen.net

この記事がいいなっと思ったら読者登録をお願いいたします！

【ツイッターでは主に、仕事や技術系の内容をつぶやいています】技術者の方ともっと繋がりたいっす！お気軽にフォローもお願いします！
かなきち(@kanakichi0801)
かずん(@kazoonLab)