サイト名称変更のお知らせ

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

練習課題 レイアウト構成 解説 ソースコード ソースコードを別タブで開く デモ デモサイトを別タブで開く
学習素材ダウンロード（※）

※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

目次

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

まずは、コーディングするための準備として、作業用のディレクトリとファイルを用意します。

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

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

  
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です。

ダウンロードはこちら

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

全体のコーディング

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

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

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

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

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

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

全体のCSSです。
CSSについては、ソース内のコメントで解説していきます。

    style.css
    
@charset "UTF-8";

html {
  /* フォントサイズを100%で指定しておくことで、ユーザーがブラウザで設定したフォントサイズが正しく反映されます */
  font-size: 100%;
}
body {
  color: #24292e;
}
a {
  /* サイト内のリンクに下線が表示されないように設定します */
  text-decoration: none;
}
img {
  /* 画像が画面の横幅からはみ出るのを防ぐためにmaxサイズを設定します */
  max-width: 100%;
}
li {
  list-style: none;
}

/* 画面の最大幅を指定。共通で使用します */
.wrapper {
  max-width: 960px;
  margin: 0 auto 130px auto;
  font-size: 0.9rem;
  padding: 0 4%;
}
/* h1タグ用 */
.site-title {
  line-height: 1px;
}
.site-title a {
  display: block;
}
/* h2タグ用 */
.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

    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;                  /* h1とnavを横並びに配置します */
  justify-content: space-between; /* 両端にそろえます */
  align-items: center;            /* 高さを中央でそろえます */
  height: 270px;
  margin: 0 auto;
  padding: 0 4%;
}
#header ul {
  display: flex;                  /* liタグ（メニュー）を横並びに配置します */
  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;
  }
}

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

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

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

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;  /* 横幅は画面サイズにあわせて伸縮します */
}

※「object-fit」は、IEでは正しく動作しないため注意が必要です。

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

続いて、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: xxx@xxxxxx.jp</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セクションのコーディングは以上になります。

次は、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セクションのコーディングは終了です。

次は、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;
  }
}
ニュース一覧
dlタグに対して、「flex-wrap: wrap;」で折り返し設定を行います。
そのままだと折り返し位置がおかしくなるので、dtタグ（日付）とddタグ（ニュースタイトル）の横幅が、あわせて100%になるようにそれぞれwidthを設定します。
そうすると、ddタグできれいに折り返されます。

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

次は、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;       /* dt、ddタグを横並びに配置します */
  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セクションのコーディングは終了です。

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

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;
}

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

お疲れ様でした！

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

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

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

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

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

【HTML/CSS コーディング練習】初級編：ストアサイト（書店）／1カラム

「1カラム以外のサイトを作ってみたい」という方は、中級編の2カラムのサイトにチャレンジしてみてください。
一般的なブログ形式のレイアウトが学べます。

【HTML/CSS コーディング練習】中級編：ブログサイト／2カラム

「jQueryの勉強がしたい」という方は、上級編のメディアサイトにチャレンジしてみてください。
実務でよく使うカルーセルやハンバーガメニュー、スムーススクロールなどを使用しています。

【HTML/CSS コーディング練習】上級編：メディアサイト／グリッドレイアウト

関連記事

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