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

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

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

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

目次

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

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

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

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

  
photo
 │
 ├─css
 │  └─ style.css
 │
 ├─img
 │  ├─favicon.ico
 │  ├─logo.svg
 │  ├─detail.jpg
 │  └─mainvisual.jpg
 │
 └─ index.html

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

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

ダウンロードはこちら

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

全体のコーディング

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

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

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

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

HTML

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

    index.html
    
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>PHOTO BOOK</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>
    <div class="container">
      <header id="header">
      </header>

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

        <section id="index">
        </section>

        <section id="detail">
        </section>
      </main>

      <footer id="footer">
      </footer>
    </div>
  </body>
</html>
metaタグ
title、descriptionは基本必須で設定します。
リセットCSS
本サイトでは、「ress.min.css」を使用しています。
リセットCSSは色々なものがあるので、自分が使いやすいものを選んだり、案件によって使い分けたりしてください。
containerクラス
コンテンツ全体の最大幅を設定して中央に配置するためのクラスです。
※containerというクラス名は任意ですが、一般的に「container」や「wrapper」などのクラス名がよく使われます。

CSS

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

    style.css
    
@charset "UTF-8";

html {
  font-size: 100%;
}
body {
  background-color: #f4f9ff;
  color: #333;
  font-size: 0.875rem;
}
img {
  max-width: 100%;
}
/* サイト全体のコンテンツ幅を設定 */
.container {
  max-width: 1000px;
  margin: 0 auto;
}
/* 中のコンテンツ部分の最大幅を設定 */
.inner {
  max-width: 600px;
  margin: 0 auto;
}
.section-title {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 10px;
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 1024px) {
  .inner {
    padding: 0 40px;
  }
}

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

ヘッダーのコーディング

HTML

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

    index.html
    
<header id="header">
  <h1 class="site-title">
    <a href="index.html"><img src="img/logo.svg" alt="PHOTO BOOK"></a>
  </h1>
</header>
headerタグ
ヘッダー全体をheaderタグで囲みます。
ロゴ
ロゴ全体をh1タグで囲みます。さらにロゴ画像をaタグで囲み、トップページへのリンクを張ります。

CSS

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

    style.css
    
/*-------------------------------------------
ヘッダー
-------------------------------------------*/
#header {
  margin-top: 60px;
}
/*
h1タグ
line-height にh1タグの高さよりも小さい値「1px」を指定することで、
h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う
「line-height: 0;」を指定してもOKです
*/
#header .site-title {
  width: 160px;
  line-height: 1px;
  margin-bottom: 15px;
}
/* aタグのリンク範囲を親要素のサイズに広げる */
#header .site-title a {
  display: block;
}

@media screen and (max-width: 1024px) {
  #header {
    padding: 0 10px;
  }
}

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

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

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

HTML

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

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

メインビジュアルは、画像をdivタグで囲むだけです。

CSS

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

    style.css
    
/*-------------------------------------------
Mainvisual
-------------------------------------------*/
#mainvisual {
  margin-bottom: 60px;
}

@media screen and (max-width: 1024px) {
  /*-------------------------------------------
  Mainvisual
  -------------------------------------------*/
  #mainvisual {
    padding: 0 10px;
  }
}

メインビジュアルは以上になります。
続いて、Indexセクションです。

Indexのコーディング

HTML

IndexのHTMLをコーディングしていきます。

    index.html
    
<section id="index">
  <div class="inner">
    <h2 class="section-title">INDEX</h2>
    <ol class="index-list">
      <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
      <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
      <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
      <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
      <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
    </ol>
  </div>
</section>

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

sectionタグ
全体をsectionタグで囲みます。
inner
コンテンツ部分をdivタグで囲み、中央に配置します。
タイトル
h2タグで囲みます。
目次
順序性のあるリストのため、ol、liタグで記述します。

CSS

IndexのCSSをコーディングしていきます。

    style.css
    
/*-------------------------------------------
Index
-------------------------------------------*/
#index {
  background-color: #fff;
  padding: 30px 0;
  margin-bottom: 60px;
}
/*
olタグはリストの先頭に番号がつくので、その分だけ左に移動
※番号を消したい場合は、「list-style-type: none;」を設定
*/
#index .index-list {
  margin-left: 20px;
}
#index .index-list li {
  margin-bottom: 20px;
}
/* リストの最後は下にマージンをつけない */
#index .index-list li:last-child {
  margin-bottom: 0;
}

Indexセクションのコーディングは以上になります。
次は、Detailセクションです。

Detailのコーディング

HTML

DetailのHTMLをコーディングしていきます。

    index.html
    
<section id="detail">
  <div class="inner">
    <h2 class="section-title">DETAIL</h2>
    <div class="content">
      <img class="img" src="img/detail.jpg" alt="">
      <div class="text">
        <p class="title">タイトルタイトルタイトル</p>
        <dl>
          <dt>著者</dt>
          <dd>タイトルタイトルタイトル</dd>
          <dt>出版社</dt>
          <dd>タイトルタイトルタイトル</dd>
          <dt>発行年</dt>
          <dd>タイトルタイトルタイトル</dd>
        </dl>
        <p>
          テキストテキストテキストテキストテキストテキスト
          テキストテキストテキストテキストテキストテキスト
        </p>
        <a class="link" href="#" target="_blank" rel="noopener noreferrer">オンラインストアで見る</a>
      </div>
    </div>
  </div>
</section>

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

sectionタグ
全体をsectionタグで囲みます。
inner
コンテンツ部分をdivタグで囲み、中央に配置します。
タイトル
h2タグで囲みます。
書籍情報
項目と内容が対になっているので、dl、dt、ddタグを使って記述します。

CSS

DetailのCSSをコーディングしていきます。

    style.css
    
/*-------------------------------------------
Detail
-------------------------------------------*/
#detail {
  margin-bottom: 100px;
}
#detail .content {
  display: flex;
  align-items: flex-start;
}
#detail .content .title {
  font-size: 1.125rem;
  font-weight: bold;
}
#detail .content .img {
  width: 270px;
  margin-right: 60px;
}
#detail .content .text p {
  margin-bottom: 20px;
}
#detail .content dl {
  display: flex;      /* dt、ddを横並びにする */
  flex-wrap: wrap;    /* dtとddが100%になったら、横並びを折り返す */
  padding: 16px 0;
  margin-bottom: 25px;
  border-top: solid 1px #dedede;
  border-bottom: solid 1px #dedede;
}
#detail .content dt {
  width: 25%;
}
#detail .content dd {
  width: 75%;
}
#detail .content .link {
  color: #333;
}
#detail .content .link:hover {
  opacity: 0.8;
}

@media screen and (max-width: 1024px) {
  /*-------------------------------------------
  Detail
  -------------------------------------------*/
  #detail .content {
    flex-direction: column;  /* 縦並びにする */
  }
  #detail .content .img {
    width: 100%;
    margin: 0 0 25px 0;
  }
}

以上でDetailセクションのコーディングは終了です。
次は、いよいよ最後のフッターのコーディングになります。

HTML

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

    index.html
    
<footer id="footer">
  <p class="inner">&copy; 2020 PHOTO BOOK</p>
</footer>

footerタグで囲んだ中にpタグでコピーライトを記述します。
コピーライトのマークですが、今回は「&copy;」というコードで記述していますが、文字コードでUTF-8を指定している場合は、文字で入力しても大丈夫です。

CSS

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

    style.css
    
/*-------------------------------------------
footer
-------------------------------------------*/
#footer {
  font-size: 0.625rem;
  padding: 15px 0;
}

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

お疲れ様でした！

【入門編】基礎学習を終えた後のウォーミングアップ用の練習サイト

【初級編】簡単なHTML、CSSでできるシンプルな練習サイト

【中級編】少し複雑なHTML、CSS、JavaScriptを使用した練習サイト

【上級編】難易度の高いHTML、CSS、JavaScriptを駆使した練習サイト

【番外編】Webサイト制作でよく使う技術を練習

関連記事

  • ホーム
  • / 【HTML/CSS コーディング解説】入門：フォトサイト（後編）