【HTML/CSS コーディング解説】入門：プロフィールサイト（後編）

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

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

  
profile
 │
 ├── css
 │   └── style.css
 │
 ├── img
 │   │
 │   ├── logo.svg
 │   ├── favicon.ico
 │   ├── mainvisual.jpg
 │   ├── about.jpg
 │   ├── bicycle1.jpg
 │   ├── bicycle2.jpg
 │   └── bicycle3.jpg
 │
 └── index.html

profileという名前のフォルダを1個つくり、その中に、index.html、cssフォルダ、imgフォルダを作ります。

画像については、下記から練習用の画像をダウンロードしてください。
もちろんご自身でご用意していただいてもOKです。

ダウンロードはこちら

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

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

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

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

全体のコーディング
1. HTMLをコーディング
2. CSSをコーディング
各パーツのコーディング（header、メインビジュアル、About、bicycle、footer）
1. HTMLをコーディング
2. CSSをコーディング（レスポンシブも調整）

ちなみに、コーディングの手順は人によって様々ですので、慣れてきたら自分が一番やりやすいやり方で進めていくのがいいと思います。

それでは、全体のコーディングから始めていきましょう！

①：全体のコーディング

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

HTML

      index.html
      
  <!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>Profile</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="stylesheet" href="css/style.css">
    </head>

    <body>
      <!-- ヘッダー -->
      <header id="header" class="wrapper">
      </header>

      <main>
        <!-- メインビジュアル -->
        <div id="mainvisual">
        </div>

        <!-- Aboutセクション -->
        <section id="about" class="wrapper">
        </section>

        <!-- bicycleセクション -->
        <section id="bicycle" class="wrapper">
        </section>
      </main>

      <!-- フッター -->
      <footer id="footer">
      </footer>
    </body>
  </html>

head部分: metaタグとtitleタグは基本の設定通りですので、特に解説は必要ないかと思います。
リセット用のCSSとして、今回は「ress.min.css」を読み込んでいます。
body部分: headerとsectionには、横幅のサイズを指定するための、wrapperという名前の共通クラスを指定しています。
このwrapperクラスに、CSSで横幅などを指定していきます。

CSS

      style.css
      
  @charset "UTF-8";

  html {
    font-size: 100%;
  }
  body {
    color: #383e45;
    font-size: 0.9rem;
  }
  a {
    text-decoration: none;
  }
  img {
    max-width: 100%;
  }
  li {
    list-style: none;
  }
  .site-title {
    width: 120px;
    line-height: 1px;
    padding: 10px 0;
  }
  .site-title a {
    display: block;
  }
  .section-title {
    display: inline-block;
    font-size: 2rem;
    margin-bottom: 60px;
    border-bottom: solid 1px #383e45;
  }
  .content-title {
    font-size: 1rem;
    margin: 10px 0;
  }
  .wrapper {
    max-width: 960px;
    margin: 0 auto 100px;
    padding: 0 4%;
    text-align: center;
  }

html

フォントサイズを100%で指定しておくことで、ユーザーがブラウザで設定したフォントサイズが正しく反映されます。

img

画像が画面の横幅からはみ出るのを防ぐためにmaxサイズを設定します。

.site-title

h1タグ用のクラスです。line-heightにh1タグがもともと持つ高さよりも小さい値「1px」を指定することで、h1タグの上下の余白を消してロゴ画像の高さと揃うようにします。

@media screen and (max-width: 1024px)

ブレイクポイントを設定します。コーディング仕様に従い、PCとスマホのレイアウトを1024pxで切り替えます。（1024px以下がスマホで1025px以上がPCになります。）

.site-title a

「display: block;」を設定して、aタグのリンク範囲を親要素のサイズいっぱいに広げます。
※displayプロパティの詳細については、「【CSS】displayプロパティの使い方について」で詳しく解説しています。

.section-title

各セクションの見出し用（h2タグ）のクラスです。各セクションの見出しは同じデザインなので、このクラスを共通で使用します。

.content-title

Bicycle内の各コンテンツのタイトル用（h3タグ）のクラスです。

.wrapper

画面の最大幅を指定するためのクラスです。共通のクラスとして使用します。
「max-width: 960px;」で最大幅を設定し、「margin: 0 auto 100px;」で中央に配置、下に100pxの余白を設定します。また、「padding: 0 4%;」で両サイドの内側に4%の余白を設定します。（※画面幅に応じで余白のサイズを変更したいため % で設定しています。デザインデータ上からは余白の指定が px なのか % なのかは読み取れないため、コーディング時に適した方を選択します。今回は % を使用していますが px で指定しても問題ありません。）

※marginとpaddingの詳細については、「marginとpaddingについて」で詳しく解説しています。

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

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

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

HTML

      index.html
      
  <header id="header" class="wrapper">
    <h1 class="site-title">
      <a href="index.html"><img src="img/logo.svg" alt="Profile"></a>
    </h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#bicycle">bicycle</a></li>
      </ul>
    </nav>
  </header>

ロゴ: h1タグ：ロゴ全体をh1タグで囲みます。
aタグ：ロゴ画像をaタグで囲むことで、ロゴにリンクを設定しています。
リンク先は、「href=”index.html”」で指定しているトップページになります。
グローバルナビゲーション: グローバルナビゲーションをnavタグで囲みます。navタグの中のメニュー部分は、ul、liタグを使用して記述していきます。ちなみに、グローバルナビゲーションの、nav、ul、liタグの組み合わせは、よく使う王道のパターンです。縦並び、横並びのシンプルなテキストメニューであれば、この形を使うことが多いです。

それでは、CSSでレイアウトを組んでいきましょう。

CSS

      style.css
      
  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
  }
  #header ul {
    display: flex;
    padding: 10px 0;
  }
  #header li {
    margin-left: 30px;
  }
  #header li a {
    color: #24292e;
  }
  #header li a:hover {
    opacity: 0.7;
  }

#header: 「display: flex;」でロゴとグローバルナビゲーションを横並びし、「justify-content: space-between;」で両端に配置します。「align-items: center;」で高さを中央でそろえます。
※フレックスボックスの詳細については、「【CSS】Flexbox（フレックスボックス）の使い方について」で詳しく解説しています。
#header ul: 「display: flex;」でメニューを横並びにします。
#header li a:hover: 「opacity: 0.7」を設定して、メニューにマウスをのせた際に少し透過させます。
尚、CSSには2種類の透明度の設定方法が存在しますので、両者の違いについては「【CSS】2種類の透明度「rgba」と「opacity」の違いについて」を参考にしてみてください。

ヘッダーのコーディングは以上になります。

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

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

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

HTML

      index.html
      
  <main>
    <div id="mainvisual">
      <img src="img/mainvisual.jpg" alt="テキストテキストテキスト">
    </div>
  </main>

メインビジュアルは、画像をdivタグで囲み、id名に「mainvisual」を指定します。
※idとclassの使い分けについては、「idとclassの使い分けについて」で詳しく解説しています。

このdivタグと画像に対して、CSSでレイアウト調整を行っていきます。

CSS

      style.css
      
  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual {
    margin-bottom: 80px;
  }
  #mainvisual img {
    width: 100%;
    max-width: 1920px;
    height: 600px;
    object-fit: cover;
  }

  @media screen and (max-width: 600px) {
    /*-------------------------------------------
    Mainvisual
    -------------------------------------------*/
    #mainvisual img {
      height: calc(100vh - 60px);
    }
  }

#mainvisual img

「max-width: 1920px;」で横幅の最大サイズを設定します。「height: 600px;」と「object-fit: cover;」を設定して、画像の高さを固定表示にします。スマホの場合は、「height: calc(100vh – 60px);」を設定して画像の高さをブラウザ下いっぱいまで広げます。（※100vhというのは画面の縦幅いっぱいの高さを表していますが、このままだとヘッダーの高さの分（60px）だけ画面下にはみだしてしまうので、-60pxすることで画面下ちょうどでおさまるようにしています。）

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

メインビジュアルは以上になります。

続いて、Aboutセクションです。

④：Aboutのコーディング

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

HTML

      index.html
      
  <section id="about" class="wrapper">
    <h2 class="section-title">About</h2>
    <div class="content">
      <img src="img/about.jpg" alt="テキストテキストテキスト">
      <div class="text">
        <h3 class="content-title">タイトルタイトル</h3>
        <p>
          テキストテキストテキストテキストテキストテキストテキスト<br>
          テキストテキストテキストテキストテキストテキストテキスト<br>
          テキストテキストテキストテキストテキストテキストテキスト
        </p>
      </div>
    </div>
  </section>

Aboutセクションも、先ほどのレイアウト構成にしたがって作っていきます。

全体をsectionタグで囲みます。グローバルナビゲーションからの遷移先になるため、id名を指定します。
※idとclassの使い分けについては、「idとclassの使い分けについて」で詳しく解説しています。

h2: セクションタイトルをh2タグで記述します
div（.content）: プロフィール用の画像とテキストをdivタグで囲みます。
画像とテキストはflexboxで横並びに配置します。
h3: プロフィールタイトルをh3タグで記述します。

続いてCSSです。

CSS

      style.css
      
  /*-------------------------------------------
  About
  -------------------------------------------*/
  #about .content {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #about img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 30px;
  }
  #about .text {
    text-align: left;
  }

  @media screen and (max-width: 600px) {
    /*-------------------------------------------
    About
    -------------------------------------------*/
    #about .content {
      flex-direction: column;
    }
    #about img {
      margin-right: 0;
    }
  }

#about .content: 「display: flex;」で画像とテキストを横並びにし、「justify-content: center;」で中央に配置します。「align-items: center;」で高さの中心で並ぶようにします。スマホは、「flex-direction: column;」で縦に並べます。
#about img: widthとheightで画像の横と縦のサイズを指定し、「border-radius: 50%;」で画像を丸く切り取ります。

Aboutセクションのコーディングは以上になります。

次は、bicycleセクションです。

⑤：Bicycleのコーディング

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

HTML

      index.html
      
  <section id="bicycle" class="wrapper">
    <h2 class="section-title">Bicycle</h2>
    <ul>
      <li>
        <img src="img/bicycle1.jpg" alt="テキストテキストテキスト">
        <h3 class="content-title">タイトルタイトル</h3>
        <p>テキストテキストテキスト</p>
      </li>
      <li>
        <img src="img/bicycle2.jpg" alt="テキストテキストテキスト">
        <h3 class="content-title">タイトルタイトル</h3>
        <p>テキストテキストテキスト</p>
      </li>
      <li>
        <img src="img/bicycle3.jpg" alt="テキストテキストテキスト">
        <h3 class="content-title">タイトルタイトル</h3>
        <p>テキストテキストテキスト</p>
      </li>
    </ul>
  </section>

Bicycleセクションも、レイアウト構成の通りにコーディングしていきます。

全体をsectionタグで囲み、Aboutセクションと同じくid名を設定します。

h2: セクションタイトルをh2タグで記述します。
ul、li: 画像部分をul、liタグで記述します。
ulタグにflexboxを使用することで、liタグを横並びに配置します。
なお、HTMLにはulタグ以外にもリストタグが存在します。リストタグの種類と使い方については、「リストタグの種類と使い方について」で詳しく解説しています。
h3: liタグ内のタイトルをh3タグで記述します。

続いてCSSです。

CSS

      style.css
      
  /*-------------------------------------------
  Bicycle
  -------------------------------------------*/
  #bicycle ul {
    display: flex;
    justify-content: space-between;
  }
  #bicycle li {
    width: 32%;
  }

  @media screen and (max-width: 600px) {
    /*-------------------------------------------
    Bicycle
    -------------------------------------------*/
    #bicycle ul {
      flex-direction: column;
    }
    #bicycle li {
      width: 100%;
      margin-bottom: 30px;
    }
  }

#bicycle ul: 「display: flex;」で横並びにし、「justify-content: space-between;」で両端揃えにします。スマホは、「flex-direction: column;」で画像を縦に並べます。
#bicycle li: 「width: 32%;」で画像の横幅を設定します。（※レスポンシブ対応の場合、画面幅を狭めた際に画像の横幅も狭まるようサイズは%で指定します。）スマホの場合は、「width: 100%;」で画像を横幅いっぱいまで広げます。

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

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

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

HTML

      index.html
      
  <footer id="footer">
    <p>&copy; 2020 Profile</p>
  </footer>

CSS

      style.css
      
  /*-------------------------------------------
  footer
  -------------------------------------------*/
  #footer {
    font-size: 0.5rem;
    padding: 10px 0;
    text-align: center;
  }