【HTML/CSS コーディング解説】初級：ポートフォリオサイト（後編）

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

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

  
portfolio
 │
 ├── css
 │   └── style.css
 │
 ├── img
 │   │
 │   ├── favicon.ico
 │   ├── icon-instagram.png
 │   ├── logo.svg
 │   ├── mainvisual-pc.jpg
 │   ├── mainvisual-sp.jpg
 │   ├── works1.jpg
 │   ├── works2.jpg
 │   └── works3.jpg
 │   ├── works4.jpg
 │   └── works5.jpg
 │   └── works6.jpg
 │
 └── index.html

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

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

ダウンロードはこちら

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

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

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

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

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

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

それでは、全体のhtmlのコーディングです。

①：全体のコーディング

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

HTML

        index.html
        
  <!DOCTYPE html>
  <html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>My Work - Portfolio</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">
      </header>

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

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

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

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

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

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

    </body>

  </html>

metaタグ: title、descriptionは基本必須で設定します。
リセットCSS: 本サイトでは、「ress.min.css」を使用しています。
リセットCSSは色々なものがあるので、自分が使いやすいものを選んだり、案件によって使い分けたりしてください。
wrappeクラス: コンテンツの最大幅やマージンを指定している共通クラスです。

CSS

      style.css
      
  @charset "UTF-8";

  html {
    font-size: 100%;
  }
  body {
    color: #24292e;
  }
  a {
    text-decoration: none;
  }
  img {
    max-width: 100%;
  }
  li {
    list-style: none;
  }

  .wrapper {
    max-width: 960px;
    margin: 0 auto 130px auto;
    font-size: 0.9rem;
    padding: 0 4%;
  }
  .site-title {
    line-height: 1px;
  }
  .site-title a {
    display: block;
  }
  .sec-title {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 65px;
  }

  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 600px) {
    .wrapper {
      margin-bottom: 70px;
    }
    .site-title {
      margin-top: 20px;
    }
    .sec-title {
      margin-bottom: 40px;
    }
  }

html: フォントサイズを100%で指定しておくことで、ユーザーがブラウザで設定したフォントサイズが正しく反映されます。
a: サイト内のリンクに下線が表示されないように設定します。
img: 画像が画面の横幅からはみ出るのを防ぐためにmaxサイズを設定します。
wrapper: 画面の最大幅を指定するためのクラスです。共通クラスとして使用します。
.site-title: h1タグ用のクラスです。ロゴに設定します。
.sec-title: h2タグ用のクラスです。各セクションの見出しで使用する共通クラスです。

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

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

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

HTML

      index.html
      
  <header id="header">
    <h1 class="site-title"><a href="index.html"><img src="img/logo.svg" alt="My Work"></a></h1>
    <nav>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#works">Works</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li>
          <a href="https://www.instagram.com/" target="_blank" rel="noopener noreferrer">
            <img class="icon" src="./img/icon-instagram.png" alt="インスタグラム">
          </a>
        </li>
      </ul>
    </nav>
  </header>

先ほどのレイアウト構成にしたがってコーディングしていきます。

ロゴ: h1タグで記述します。
グローバルナビゲーション: navタグで囲みます。
navタグの中のメニュー部分は、ul、liタグで記述します。

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

CSS

      style.css
      
  /*-------------------------------------------
  ヘッダー
  -------------------------------------------*/
  #header {
    max-width: 960px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 270px;
    margin: 0 auto;
    padding: 0 4%;
  }
  #header ul {
    display: flex;
    padding: 10px 0;
  }
  #header li {
    font-size: 0.9rem;
    margin-left: 30px;
  }
  #header li a {
    color: #24292e;
  }
  #header li a:hover {
    opacity: 0.7;
  }
  #header li img.icon {
    width: 20px;
  }

  /*-------------------------------------------
  SP
  -------------------------------------------*/
  @media screen and (max-width: 600px) {
    /*-------------------------------------------
    ヘッダー
    -------------------------------------------*/
    #header {
      max-width: 100%;
      height: auto;
      flex-direction: column;
    }
    #header li {
      font-size: 0.8rem;
      margin-left: 20px;
    }
    #header li:first-child {
      margin-left: 0;
    }
  }

#header

「display: flex;」でロゴとグローバルナビゲーションを横並びし、「justify-content: space-between;」で両端に配置します。「align-items: center;」で高さを中央でそろえます。画面幅を狭めた際に両サイドに余白ができるよう「padding: 0 4%;」を設定します。（※4%は「コーディング仕様」の「コンテンツ幅」で指定されている数値です。）スマホは、「flex-direction: column;」でロゴとグローバルナビゲーションを縦に並べます。

※フレックスボックスの詳細については、「【CSS】Flexbox（フレックスボックス）の使い方について」で詳しく解説しています。

#header ul

「display: flex;」でliタグ（メニュー）を横並びに配置します。

#header li:first-child

スマホの場合は、グローバルナビゲーションの左側に余白ができないよう、メニューの最初の「margin-left」をゼロに設定します。

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

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

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

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

HTML

      index.html
      
  <div id="mainvisual">
    <picture>
      <source media="(max-width: 600px)" srcset="img/mainvisual-sp.jpg">
      <img src="img/mainvisual-pc.jpg" alt="テキストテキストテキスト">
    </picture>
  </div>

メインビジュアル: 画像全体をdivタグで囲みます。
今回は、PCとスマホで画像を出し分けたいので、pictureタグで画像の切り替えを行っています。PC：pictureタグ内のimgタグの部分がPC用の画僧です。スマホ：pictureタグ内のsourceタグの部分がスマホ用の画像で、レスポンシブのブレークポイントと同じく、600pxでスマホ用の画像に切り替わります。

CSS

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

#mainvisual img

「max-width: 1920px;」で横幅の最大サイズを設定します。「height: 420px;」と「object-fit: cover;」を設定して、画像の高さを固定表示にします。

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

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

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

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

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

HTML

      index.html
      
  <section id="about" class="wrapper">
    <h2 class="sec-title">About</h2>
    <ul>
      <li>Xxxxx Ashley</li>
      <li>2th Floor xxxxx Building x-x-x Nishiazabu, Minato-ku, Tokyo 106-0031 Japan</li>
      <li>tel: 000-0000-0000</li>
      <li>url: www.xxxxxx.jp</li>
      <li>mail: [email protected]</li>
    </ul>
    <p>
      プロフィールテキストテキストテキストテキストテキストテキストテキストテキストテキストスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
    </p>
  </section>

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

タイトル: h2タグで記述します。
プロフィール: リスト形式の情報なので、ul、liタグで記述します。
一番下のプロフィールテキスト部分はpタグで記述します。

CSS

      style.css
      
  /*-------------------------------------------
  About
  -------------------------------------------*/
  #about ul {
    margin-bottom: 30px;
  }
  #about li:first-child {
    margin-bottom: 30px;
  }
  #about p {
    text-align:justify;
  }

#about li:first-child: 名前の下だけ余白を入れたいので、最初のliタグだけ「margin-bottom: 30px;」を設定します。
#about p: 「text-align:justify;」でテキストの両端が揃うようにします。（※特に長い文章の場合、justifyを設定することで文章の両端がそろい見た目が綺麗になります。）

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

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

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

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

HTML

      index.html
      
  <section id="works" class="wrapper">
    <h2 class="sec-title">Works</h2>
    <ul>
      <li><img src="img/works1.jpg" alt="テキストテキストテキスト"></li>
      <li><img src="img/works2.jpg" alt="テキストテキストテキスト"></li>
      <li><img src="img/works3.jpg" alt="テキストテキストテキスト"></li>
      <li><img src="img/works4.jpg" alt="テキストテキストテキスト"></li>
      <li><img src="img/works5.jpg" alt="テキストテキストテキスト"></li>
      <li><img src="img/works6.jpg" alt="テキストテキストテキスト"></li>
    </ul>
  </section>

タイトル: h2タグで記述します。
画像: ul、liタグで記述します。

続いてCSSです。

CSS

      style.css
      
  /*-------------------------------------------
  Works
  -------------------------------------------*/
  #works ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 50px;
  }
  #works li {
    width: 31%;
    margin-bottom: 23px;
  }

  @media screen and (max-width: 600px) {
    /*-------------------------------------------
    Works
    -------------------------------------------*/
    #works ul {
      flex-direction: column;
    }
    #works li {
      width: 100%;
    }
  }

#works ul: 画像用のリストです。「display: flex;」で横並びにし、「flex-wrap: wrap;」で横幅いっぱいまできた時に折り返されるようにします。「justify-content: space-between;」で左右の画像が両端に揃うようにします。スマホの場合は、「flex-direction: column;」で縦に並べます。
#works li: 「width: 31%;」で各画像の横幅を設定します。スマホの場合は、「width: 100%;」で画像が横幅いっぱいまで広がるようにします。

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

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

⑥：Newsセクションのコーディング

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

HTML

      index.html
      
  <section id="news" class="wrapper">
    <h2 class="sec-title">News</h2>
    <dl>
      <dt>2020.XX.XX</dt>
      <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.11』に掲載していただきました。</dd>
      <dt>2020.XX.XX</dt>
      <dd>ＸＸ月ＸＸ日から写真集「ＸＸＸＸＸＸＸ」の販売を開始します。</dd>
      <dt>2019.XX.XX</dt>
      <dd>【イベント開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
      <dt>2019.XX.XX</dt>
      <dd>デザイン雑誌「ＸＸＸＸＸＸ Vol.10』に掲載していただきました。</dd>
      <dt>2019.XX.XX</dt>
      <dd>【個展開催のお知らせ】テキストテキストテキストテキストテキストテキストテキスト</dd>
    </dl>
  </section>

タイトル: h2タグで記述します。
ニュース一覧: dl、dt、ddタグで記述します。
日付がdtタグ、ニュースタイトルがddタグです。

続いてCSSです。

CSS

      style.css
      
  /*-------------------------------------------
  News
  -------------------------------------------*/
  #news dl {
    display: flex;
    flex-wrap: wrap;
    border-top: solid 1px #c8c8c8;
    margin-bottom: 20px;
  }
  #news dt {
    width: 20%;
    border-bottom: solid 1px #c8c8c8;
    padding: 15px;
  }
  #news dd {
    width: 80%;
    border-bottom: solid 1px #c8c8c8;
    padding: 15px;
  }

  @media screen and (max-width: 600px) {
    /*-------------------------------------------
    News
    -------------------------------------------*/
    #news dl {
      flex-direction: column;
    }
    #news dt {
      width: 100%;
      border-bottom: none;
      padding-bottom: 0;
    }
    #news dd {
      width: 100%;
      padding-top: 0;
    }
  }

#news dl（ニュース一覧）: 「display: flex;」で日付とニュースタイトルを横並びに配置します。さらに「flex-wrap: wrap;」で折り返し設定を行います。（そのままだと折り返し位置がおかしくなるので、dtタグ（日付）とddタグ（ニュースタイトル）の横幅が、あわせて100%になるようにそれぞれwidthを設定します。そうすると、ddタグできれいに折り返されます。）スマホの場合は、「flex-direction: column;」で日付とタイトルを縦に並べます。
#news dt（日付）: 「width: 20%;」で日付の横幅を設定します。スマホの場合は、「width: 100%;」で全幅表示にします。
#news dd（タイトル）: 「width: 80%;」でニュースタイトルの横幅を設定します。スマホの場合は、「width: 100%;」で全幅表示にします。

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

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

⑦：Contactセクションのコーディング

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

HTML

      index.html
      
  <section id="contact" class="wrapper">
    <h2 class="sec-title">Contact</h2>
    <form action="#" method="post">
      <dl>
        <dt><label for="name">NAME</label></dt>
        <dd><input type="text" id="name" name="your-name"></dd>
        <dt><label for="email">E-mail</label></dt>
        <dd><input type="email" id="email" name="your-email"></dd>
        <dt><label for="message">MESSAGE</label></dt>
        <dd><textarea id="message" name="your-message"></textarea></dd>
      </dl>
      <div class="button"><input type="submit" value="送信"></div>
    </form>
  </section>

タイトル

h2タグで記述します。

フォーム

全体をformタグで囲みます。
フォーム内はdlタグを用いて、ラベルをdtタグ、入力フィールドをddタグで記述し、flexboxで横並びに揃えます。
inputで指定したid名を、labelのfor属性で指定することにより両者の紐づけができ、ラベルをクリックした際に自動で入力フィールドがアクティブになります。

※フォームの入力欄の種類と使い方については、「フォームの入力欄の種類と使い方について」で詳しく解説しています。

続いてCSSです。

CSS

      style.css
      
  /*-------------------------------------------
  Contact
  -------------------------------------------*/
  #contact dl {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  #contact dt {
    width: 15%;
  }
  #contact dd {
    width: 85%;
    margin-bottom: 10px;
  }
  #contact dd input,
  #contact dd textarea {
    width: 100%;
    border: solid 1px #c8c8c8;
    padding: 10px;
  }
  #contact dd textarea {
    height: 10rem;
  }
  #contact .button {
    text-align: center;
  }
  #contact .button input {
    width: 200px;
    background-color: #24292e;
    color: #fff;
    padding: 15px 0;
    border: solid 1px #24292e;
  }
  #contact .button input:hover {
    background: #fff;
    color: #24292e;
  }

  @media screen and (max-width: 600px) {
    /*-------------------------------------------
    Contact
    -------------------------------------------*/
    #contact dl {
      flex-direction: column;
    }
    #contact dt {
      width: 100%;
    }
    #contact dd {
      width: 100%;
    }
  }

#contact dl（フォーム）: 「display: flex;」でフォーム内のラベル（dt）と入力フィールド（dd）を横並びにします。dtとddの横幅が100%になったら折り返されるように「flex-wrap: wrap;」を設定します。スマホの場合は、「flex-direction: column;」でラベルと入力フィールドが縦に並ぶようにします。
#contact dd input（入力フィールド input） #contact dd textarea（入力フィールド textarea）: 「width: 100%;」を設定して、入力フィールドが親要素いっぱいまで広がるようにします。
#contact .button input（送信ボタン）: 「width: 200px;」で横幅を設定します。マウスオーバー時に背景を白に変化させるため、ボタンが見えなくならないよう「border: solid 1px #24292e;」で枠線の設定をしておきます。
#contact .button input:hover（送信ボタンマウスオーバー）: ボタンをマウスオーバーした際の背景とテキストカラーを設定します。

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

いよいよ最後のフッターです。

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

HTML

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

footerタグで囲んだ中にpタグでコピーライトを記述します。

CSSは下記の通りです。

CSS

      style.css
      
  /*-------------------------------------------
  フッター
  -------------------------------------------*/
  #footer {
    background-color: #24292e;
    color: #fff;
    font-size: 0.5rem;
    padding: 10px 20px;
    text-align: center;
  }

#footer

背景、フォント、余白を設定して、「text-align: center;」で中央寄せにします。

※background関連のプロパティの使い方については、下記の記事を参考にしてください。
【CSS】backgroundプロパティの使い方について

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

お疲れ様でした！

初級編のサイト制作はいかがだったでしょうか。

フレックスボックスとリストタグは実務でも頻繁に使用するので、今回の初級編でも繰り返し練習できるように何度も使用しました。

こうやってレイアウトのパターンに1つ1つ慣れていくことで、確実にコーディングの幅が広がっていきます。

引き続き色々なサイトのコーディングチャレンジしてみてください！

「positionの使い方をまだあまり理解できていない」という方は、初級編の下記サイトがおすすです。
画像の上にテキストを重ねるという、実務でもよく使用するテクニックが学べます。