【HTML/CSS コーディング解説】入門：ブランドサイト（後編）

1. ディレクトリを用意しよう

今回作るサイトのディレクト構成は下記の通りです。

  
brand
├─img
│  ├─favicon.ico
│  ├─logo.svg
│  ├─mainvisual.jpg
│  ├─concept.jpg
│  └─work.jpg
│
├─css
│  └─style.css
│
└─index.html

brandという名前のフォルダの中に、index.html、cssフォルダ、imgフォルダを作ります。

画像については、下記から練習用の画像をダウンロードできます。

ダウンロードはこちら

準備ができたら、コーディングに入っていきましょう！

2. コーディングをしよう

それでは、さっそくコーディングに入っていきましょう。

コーディングは下記の手順ですすめていきます。

全体のコーディング
1. HTMLをコーディング
2. CSSをコーディング
各パーツのコーディング（メインビジュアル、ヘッダー、Conceptセクション、Workセクション、フッター）
1. HTMLをコーディング
2. CSSをコーディング（レスポンシブも調整）

①：全体のコーディング

まずは全体のコーディングです。
全体の枠組みとhead部分のコーディングを行なっていきます。

HTML

      index.html
      
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Wooden Jewelry</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div id="mainvisual">
    </div>

    <header id="header">
    </header>

    <div class="container">
      <main>
      </main>

      <footer id="footer">
      </footer>
    </div>
  </body>
</html>

metaタグ: title、descriptionは基本必須で設定します。
リセットCSS: 本サイトでは、「ress.min.css」を使用しています。
リセットCSSは色々なものがあるので、自分が使いやすいものを選んだり、案件によって使い分けたりしてください。
body内: main、header、footerの枠だけコーディングしておきます。
mainとfooterは、横幅を設定してコンテンツを中央に配置するために全体を「container」という名前のdivタグで囲みます。（名前は任意です。）

Googleフォント
Googleフォントの「Crimson Text」を使用するため、headタグ内で以下の2行を読み込みます。

      index.html
      
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;700&display=swap" rel="stylesheet">

※Googleフォントの使い方については、下記の記事を参考にしてください。
Google Fontsの使い方

CSS

      style.css
      
@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  color: #2d2d2d;
  font-family: 'Crimson Text', serif;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
ul {
  list-style: none;
}
a {
  color: #2d2d2d;
  text-decoration: none;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 18px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 834px) {

}

body: 「font-family」でGoogleフォント「Crimson Text」の指定を行います。
.container: mainとfooterのコンテンツ幅を設定するためのクラスです。「max-width: 1000px;」でコンテンツの最大幅を設定し、「margin: 0 auto」で中央に配置します。

全体のコーディングができたら、次は各パーツのコーディングにはいっていきましょう！

②：メインビジュアルのコーディング

メインビジュアルのコーディングをしていきます。

HTML

      index.html
      
<div id="mainvisual">
  <img src="img/mainvisual.jpg" alt="">
</div>

メインビジュアルは全体をdivタグで囲むだけで完了です。

CSS

      style.css
      
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  width: 90vw;
  margin: 4% auto 0 auto;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual {
    width: 100%;
    margin: 0;
  }
  #mainvisual img {
    width: 100%;
    height: 50vh;
    object-fit: cover;
  }
}

#mainvisual

「コーディング仕様」の中で、横幅90vwという指定があるので「width: 90vw;」を設定します。（※widthをvwで指定することで、画面幅を基準にした可変の横幅になります。）スマホの場合は、「width: 100%;」で全幅にし、「margin: 0;」でサイドの余白を消して画面幅いっぱいに表示します。

#mainvisual　img

スマホの場合のメインビジュアルの高さは特に指定されていないので、デザインを参考に「height: 50vh」と「object-fit: cover;」で画面の高さを基準にした高さを設定します。（※基本的に実案件では、仕様書内で「90vw」のように具体的な数値が指定されることは少ないので、デザインを確認してコーディングしていきます。）

※object-fitプロパティの使い方については、「【CSS】object-fitプロパティの使い方について」で詳しく解説しています。

メインビジュアルのコーディングは以上になります。

次はヘッダーです。

③：ヘッダーのコーディング

ヘッダーのコーディングをしていきます。

HTML

      index.html
      
<header id="header">
  <h1 class="site-title">
    <a href="index.html"><img src="img/logo.svg" alt="Wooden Jewelry"></a>
  </h1>

  <nav>
    <ul>
      <li><a href="#concept">Concept</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="mailto:xxxxx@xxx.xxx?subject=お問い合わせ">Contact</a></li>
    </ul>
  </nav>
</header>

ロゴ: 全体をh1タグで囲みます。中の画像はaタグで囲み、トップへのリンクを張ります。
グローバルナビゲーション: グローバルナビゲーションをnavタグで囲みます。navタグの中のメニューは、ul、liタグで記述します。

CSS

      style.css
      
.site-title {
  width: 110px;
  line-height: 1px;
  margin-right: 50px;
}
.site-title a {
  display: block;
}

/*-------------------------------------------
Header
-------------------------------------------*/
#header {
  width: 90vw;
  display: flex;
  align-items: center;
  padding: 32px 0;
  margin: 0 auto 30px auto;
}
#header ul {
  display: flex;
}
#header li {
  font-size: 0.875rem;
  margin-right: 30px;
}
#header li:last-child {
  margin-right: 0;
}
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  /*-------------------------------------------
  Header
  -------------------------------------------*/
  #header {
    width: 100%;
    padding: 20px 18px;
  }
}

.site-title: 「width: 110px;」でロゴの横幅を設定します。「line-height: 1px;」でh1タグが持つ行間の高さを消します。
#header: メインビジュアルと同じく、「コーディング仕様」の通り横幅を「width: 90vw;」に設定します。「display: flex;」でロゴとグローバルナビゲーションを横並びにします。
#header ul: グローバルナビゲーションの各メニューを「display: flex;」で横並びにします。
#header li: フォントサイズを設定して、「margin-right: 30px;」で右に余白をとります。
#header li:last-child: 最後のliタグは右に余白は不要なので「margin-right: 0;」で消します。

以上でヘッダーのコーディングは終了です。

次は、Conceptセクションのコーディングです。

④：Conceptセクションのコーディング

Conceptセクションのコーディングをしていきます。

HTML

      index.html
      
<section id="concept" class="content">
  <div class="img">
    <img src="img/concept.jpg" alt="">
  </div>
  <div class="text">
    <h2 class="section-title">私たちの考えるジュエリーとは</h2>
    <span class="section-title-en">Concept</span>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
</section>

section: 見出しを含む1つのまとまったコンテンツなので、全体をsectionタグで囲みます。
.content: 画像とテキストを横並びに配置するためのクラスです。ConceptセクションとWorkセクション共通で使用します。
タイトル: h2タグで記述します。Workセクションでも同じタイトルを使用するため、「section-title」という名前で共通で使用するクラスを設定しておきます。
英語タイトル: spanタグで記述します。（※pタグを使ってもよいですが、文章ではないためspanタグを選択しています。）

CSS

      style.css
      
.section-title {
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 4px;
}
.section-title-en {
  display: inline-block;
  margin-bottom: 25px;
}

/*-------------------------------------------
Concept、Work
-------------------------------------------*/
.content {
  display: flex;
  align-items: center;
  margin-bottom: 60px;
}
.content .img {
  width: 50%;
}
.content .text {
  width: 50%;
  padding: 0 7%;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  .content {
    flex-direction: column;
  }
  .content .img {
    width: 100%;
    margin-bottom: 10px;
  }
  .content .text {
    width: 100%;
    padding: 0;
  }
}

.section-title: ConceptセクションとWorkセクション共通で使用するタイトル用のクラスです。
.section-title-en: 英語タイトル用のクラスです。spanタグを使用しているので、「display: inline-block;」を設定して改行を行い、「margin-bottom: 25px;」で下の余白も設定します。
.content: ConceptセクションとWorkセクション共通で使用します。「display: flex;」で画像とテキストを横並びにします。スマホの場合は、「flex-direction: column;」で縦に並べます。
.content .img .content .text: 画像とテキストエリアはそれぞれ横幅に「width: 50%;」を設定し、半分ずつになるようにします。テキストエリアだけ「padding: 0 7%;」を設定して両サイドに可変の余白をとります。スマホの場合は、画像、テキストエリアともに「width: 100%;」を設定して全幅表示にします。

以上でConceptセクションのコーディングは終了です。

次は、Workセクションのコーディングです。

⑤：Workセクションのコーディング

Workセクションのコーディングをしていきます。

HTML

      index.html
      
<section id="work" class="content">
  <div class="text">
    <h2 class="section-title">ハンドメイドにこだわる理由</h2>
    <span class="section-title-en">Work</span>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
  </div>
  <div class="img">
    <img src="img/work.jpg" alt="">
  </div>
</section>

Conceptセクションと同じですが、画像とテキストの位置を入れ替えます。

CSS

      style.css
      
/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 767px) {
  /*-------------------------------------------
  Concept、Work
  -------------------------------------------*/
  #work {
    flex-direction: column-reverse;
  }
}

#work: スマホの場合、「flex-direction: column;」でそのまま縦に並べるとテキストが上にきてしまうため、「flex-direction: column-reverse;」で並び順を入れ替えながら縦に並べています。

以上でWorkセクションのコーディングは終了です。

次は、いよいよ最後のフッターのコーディングになります。

フッターのコーディングをしていきます。

HTML

      index.html
      
<footer id="footer">
  <div class="logo">
    <img src="img/logo.svg" alt="Wooden Jewelry">
  </div>
  <p>&copy; 2021 Wooden Jewelry</p>
</footer>

全体: footerタグで囲みます。
ロゴとコピーライト: それぞれdivタグとpタグで囲みます。

CSS

      style.css
      
/*-------------------------------------------
Footer
-------------------------------------------*/
#footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  padding: 20px 0;
}
#footer .logo {
  width: 110px;
}

#footer: 「display: flex;」でロゴとコピーライトを横並びにし、「justify-content: space-between;」で両端に配置します。
#footer .logo: 「width: 110px;」でロゴの横幅を設定します。

以上で、コーディングは全て終了です。

お疲れ様でした！