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

最終更新日

目次

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

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

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

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

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

ダウンロードはこちら

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

全体のコーディング

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

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

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

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

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

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

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

    style.css
    
@charset "UTF-8";

html {
  /* フォントサイズを100%で指定しておくことで、ユーザーがブラウザで設定したフォントサイズが正しく反映されます */
  font-size: 100%;
}
body {
  color: #383e45;
  font-size: 0.9rem;
}
a {
  /* 今回は、サイト内のリンクに下線が表示されないように設定します */
  text-decoration: none;
}
img {
  /* 画像が画面の横幅からはみ出るのを防ぐためにmaxサイズを設定します */
  max-width: 100%;
}
li {
  list-style: none;
}
/*
h1タグ用
line-height にh1タグの高さよりも小さい値「1px」を指定することで、
h1タグの上下の余白が消えるため、ロゴ画像の高さと揃う
「line-height: 0;」を指定してもOKです
*/
.site-title {
  width: 120px;
  line-height: 1px;
  padding: 10px 0;
}
/* aタグのリンク範囲を親要素のサイズに広げます */
.site-title a {
  display: block;
}
/* h2タグ用 */
.section-title {
  display: inline-block;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 60px;
  border-bottom: solid 1px #383e45;
}
/* h3タグ用 */
.content-title {
  font-size: 1rem;
  margin: 10px 0;
}
/* 画面の最大幅を指定。共通で使用します */
.wrapper {
  max-width: 960px;
  margin: 0 auto 100px auto;
  padding: 0 4%;
  text-align: center;
}

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

ヘッダーのコーディング

HTML

    index.html
    
<header id="header" class="wrapper">
  <h1 class="site-title">
    <a href="index.html"><img decoding="async" 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;                   /* h1とnavを横並びに配置します */
  justify-content: space-between;  /* 両端にそろえます */
  align-items: center;             /* 高さを中央でそろえます */
  margin: 0 auto;
}
#header ul {
  display: flex;                   /* liタグ（メニュー）を横並びに配置します */
  padding: 10px 0;
}
#header li {
  margin-left: 30px;
}
#header li a {
  color: #24292e;
}
#header li a:hover {
  opacity: 0.7;                    /* メニューにマウスをのせた際に少し透過します。 */
}

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

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

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

HTML

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


</main>

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

この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 {
  height: calc(100vh - 60px);
}

画像の高さを「calc(100vh – 60px)」で計算しています。
100vhというのは画面の縦幅いっぱいの高さを表していますが、 このままだとヘッダーの高さの分（60px）だけ画面下にはみだしてしまうので、 -60pxすることで、画面下ちょうどでおさまるようにしています。

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

Aboutのコーディング

HTML

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

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

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%;       /* 画像を丸く切り取ります。丸のサイズは上のwidthとheightで指定します */
  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セクションのコーディングは以上になります。
次は、bicycleセクションです。

Bicycleのコーディング

HTML

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

Bicycleセクションも、レイアウト構成の通りでOKです。

h2

セクションタイトルをh2タグで記述します。

ul、li

画像部分をul、liタグで記述します。
ulタグにflexboxを使用することで、liタグを横並びに配置します。

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セクションのコーディングは終了です。
次は、いよいよ最後のフッターのコーディングになります。

HTML

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

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

CSSは下記の通りです。

CSS

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

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

お疲れ様でした！

今回は、入門編のサンプルサイトをもとに、コーディングの解説を行いました。

コーディング流れやイメージが一通りつかめたら、次は自力で「初級編のコーディング」にチャレンジしてみてください。

まずは、レイアウト解説やソースコードを見ずに、ゼロから自分でトライしてみてください。
もし、手がとまってしまうようでしたら、レイアウト解説を見ながらコーディングにチャレンジしましょう。

最初は思うように作れないかもしれないですが、たくさん模写することで必ずコーディング力が身につきます。

それでは、さっそく模写にチャレンジしてみましょう！

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

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

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

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

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

関連記事