阿部寛と学ぶHTMLチュートリアル #CSS

はじめに

HTMLの分かりやすい解説サイトなんていくらでもあります。だけどあえて、僕が思う一番分かりやすいチュートリアルを書こうと思います。

よくある記事とは少し趣の違う記事になっていると思います。

HTMLを書く流れ

HTMLを書くときは、以下の２つを考えます。

デザイン
SEO（検索エンジン最適化）

一つずつ解説していくので今は分からなくて大丈夫です。

書き始める前の準備

HTMLを書き始める前に、VSCodeというコードエディタを入れましょう。コードエディタというのは、高性能なメモ帳のことです。

ダウンロード&インストール
公式サイトからVSCodeをダウンロードしてください。ダウンロードしたファイルを実行して、VSCodeをインストールしてください。
作業ディレクトリの作成
デスクトップなど任意の場所に、html-sampleというディレクトリ（フォルダ）を作成してください。
VSCodeを開く
インストールしたVSCodeを起動し、『ファイル』タブから『開く』を選択し、２で作成したhtml-sampleディレクトリを開いてください。
拡張機能をインストール
左側にあるのマークをクリックして、『Live Server』を検索し、Live Serverをインストールしてください。
HTMLファイルの作成
左側にカーソルを持っていくと表示されるマークをクリックして、index.htmlという名前のファイルを作成してください。
正しくインストールされたかの確認

index.htmlにHello worldと書き込んで、右下にあるをクリックしてください。ブラウザが開いてHello worldと表示されれば大丈夫です。

が表示されない場合は、

拡張機能『Live Server』がインストールされていること

ファイル名の拡張子が.htmlであること

を確認した上で、VSCodeを再起動してみてください。

1. デザイン

見本として、阿部寛さんのホームページを真似して作ってみましょう。なぜ阿部寛さんのホームページかというと、有名だということと、デザインがシンプルだからです。

HTMLで扱えるもの

HTMLはサイトの骨組みを作るものです。デザインはCSSを使います。

重要なのは、HTMLが扱えるのは『四角形の枠』だけということです。

四角形の枠だけでどうやってデザインするのか考えていきましょう。

構造を考える

四角形の枠は、以下の２つを指定することができます。

大きさ
周りの余白

実際に題材の構成を考えると、以下のようになります。

枠だけにするとこんな感じです。

枠はそれぞれ大きさがあって、枠と枠の間は余白を持っていることがわかります。

Q&A

文字が中央寄せになってるのはなぜ？
- 文字はCSSで中央寄せ/右寄せ/左寄せすることができます。
四角形の枠しか使えないって言ってるのに、左のメニューに丸いやつあるよ？
- あれも四角形ですが、角を丸くしているだけです。

HTMLの構成について

HTMLは人の形をしています。

head（頭）には、サイトについての情報（タイトルやキーワードなど）が書かれています。

body（体）には、サイトのデザインの骨組みが書かれています。僕たちがWebサイトにアクセスしたときに目にするのはこちらの部分です。

HTMLの記法について

例えば、htmlという枠をこのように表現します。

<html></html>

このhtmlという枠の中にheadという枠とbodyという枠を入れると、こうなります。

<html>
  <head></head>
  <body></body>
</html>

イメージとしてはこんな感じです。

[ ポイント ]

改行やスペースはあってもなくてもエラーにはなりません。
<html><body></body></html>
のように書いても問題ありませんが、見辛くなるので適宜改行しましょう。

また、メモ代わりにコメントを残すこともできます。

<!-- これはコメントです。 -->

実際に書く

"書き始める前の準備" で作成したindex.htmlに書き込んでいきましょう。

まず最初に、「これはHTMLファイルだよ」と宣言する文が必要です。

<!DOCTYPE html>

次に、HTML本体を書き始めます。これは先ほど説明した通りです。

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

デザインをするので、<head></head>には放置して、<body></body>の中に書いていきます。

bodyに書き込めるタグにはたくさん種類がありますが、デザインするためには<div></div>だけ使えば作ることができます。上の「構造を考える」で、すでに阿部寛のホームページの構造は把握しました。なので、それをただ<div></div>に置き換えるだけです。

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="nav-wrapper">
      <div class="nav">
        <div class="nav-content"><div class="nav-icon"></div>トップ</div>
        <div class="nav-content"><div class="nav-icon"></div>映画出演</div>
        <div class="nav-content"><div class="nav-icon"></div>ドラマ出演</div>
        <div class="nav-content"><div class="nav-icon"></div>舞台出演</div>
        <div class="nav-content"><div class="nav-icon"></div>写真集</div>
        <div class="nav-content"><div class="nav-icon"></div>出版本</div>
        <div class="nav-content"><div class="nav-icon"></div>管理者</div>
      </div>
    </div>
    <div class="contents-wrapper">
      <div class="heading">阿部 寛のホームページ</div>
      <div class="contents-wrapper-inner">
        <div class="content-left">
          <div class="face-photo"></div>
          <div class="profile">
            阿部 寛（あべ ひろし）<br/>
            生年月日 1964年6月22日<br/>
            血液型 A型<br/>
            プロフィール
          </div>
          <div class="profile-english">
            If you have any enquiries regarding my TV drama or film, or would like to make an enquiry concerning future projects, please do not hesitate to contact me through the following email address.
          </div>
          <div class="mail">mail:shigeta@navy.plala.or.jp</div>
          <div class="profile-detail">
            所属:<br/>
            茂田オフィス<br/>
            107-0052<br/>
            東京都港区赤坂9-5-29<br/>
            赤坂ロイヤルマンション303<br/>
            TEL : +81-3-5410-8585<br/>
            FAX : +81-3-5410-0588<br/>
          </div>
        </div>
        <div class="content-right">
          <div class="news-heading">★★★　最新情報　★★★</div>
          <div class="news-list">
            <div class="news-list-content">
                <div class="news-list-title">・舞台</div>
                <div class="news-list-description">
                  彩の国シェイクスピア・シリーズ第35弾 『ヘンリー八世』 <br/>
                  2020年2月14日（金）～3月1日（日）
                </div>
            </div>
            <div class="news-list-content">
                <div class="news-list-title">・TV</div>
                <div class="news-list-description">
                    「まだ結婚できない男」<br/>
                    フジテレビ系連続ドラマ主演<br/>
                    毎週火曜日　21時～　放送中                   
                </div>
            </div>
            <div class="news-list-content">
                <div class="news-list-title">・映画</div>
                <div class="news-list-description">
                    「HOKUSAI」 <br/>
                    2020年・初夏 全国公開New!<br/>
                    <br/>
                      マレーシア映画「The Garden Of Evening Mists」<br/>
                    2020年公開予定
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

ほとんど<div></div>しか使っていませんが、説明していないこともあるので補足します。

<div></div>の中に文字を入れることができます。文字は<br/>タグで改行できます。
このあと、それぞれの<div></div>にCSSを使って「大きさ」や「余白の大きさ」を指定していきます。そのときにそれぞれの<div></div>を判別する必要があるので、必ず<div class="名前"></div>のように名前を指定します。

この状態でを押してHTMLを表示しても、何も表示されません。それは、<div></div>の大きさも余白も色も設定されていないからです。

CSSを使う

この記事はHTMLの解説なのでCSSを詳しくは説明しませんが、上記の<div></div>だけのHTMLでデザインができることを示すために、簡単なCSSを追加しましょう。

index.htmlの<head></head>を以下のように編集します。

   <head>
     <!-- CSSファイルを読み込む -->
     <link rel="stylesheet" href="./style.css" />
   </head>

style.cssを作成して、以下を書き込みます。

   * {
     margin: 0;
     padding: 0;
     border: solid 1px;
     box-sizing: border-box;
   }

   body {
     display: flex;
   }

   .nav-wrapper {
     height: 100vh;
     width: 18%;
   }
   .nav {
     margin-top: 43px;
     margin-left: 18px;
   }
   .nav-content {
     display: flex;
     margin-bottom: 31px;
     align-items: center;
   }
   .nav-icon {
     height: 8px;
     width: 8px;
     margin-right: 9px;
     border-radius: 50%;
   }


   .contents-wrapper {
     height: 100%;
     width: 82%;
   }
   .heading {
     margin-top: 35px;
     margin-bottom: 20px;
     text-align: center;
     font-size: 32px;
   }
   .contents-wrapper-inner {
     display: flex;
     width: 880px;
     margin: 0 auto;
   }

   .content-left {
     width: 350px;
   }
   .face-photo {
     width: 100%;
     height: 414px;
     margin-bottom: 23px;
   }
   .profile {
     margin-bottom: 40px;
     margin-left: 20px;
   }
   .profile-english {
     width: 300px;
     margin-bottom: 20px;
   }
   .mail {
     margin-bottom: 20px;
   }


   .content-right {
     width: 530px;
   }
   .news-heading {
     margin-bottom: 30px;
     text-align: center;
     font-size: 16px;
     font-weight: normal;
   }
   .news-list {
     margin-right: 10px;
     margin-left: 10px;
   }
   .news-list-title {
     margin-top: 5px;
     margin-bottom: 4px;
   }
   .news-list-description {
     margin-bottom: 30px;
     margin-left: 80px;
   }

を押すと、以下のように表示されます。

クラス名を指定して、高さ、余白、枠の色を指定しているだけですが、阿部寛のホームページのデザインがほとんどできていることが分かります。

CSSの内容についての補足

box-sizing: border-box; : 要素の大きさをボーダーに合わせます。全ての要素に適用しておくのがオススメです。

display: flex; : 通常縦並びにしかならない要素を、横向きに並べることができます。とても便利です。

margin: 0 auto; : 要素を中央寄せにします。よく使います。

2. SEO

ここまで<div></div>しか使用していませんが、デザインだけならここまでで完成しています。ユーザー目線で見れば、デザインが全てなので、これで十分でしょう。しかし、Googleなどのクローラ（自動で巡回してくるロボット）から見るとどうでしょう。全てが<div></div>で書かれていると、どこが題名なのか、どこがナビゲーションバーなのか分かりません。すると、Googleは内容が薄いと判断して、検索結果に表示されにくくします。阿部寛のホームページも含め、Webサイトは多くの人に見てほしいので、検索結果に表示されやすくするべきです。この『Googleなどの検索結果に表示されやすくする』ための技術をSEOと言います。

セマンティクス

divというのは、ただの枠で、意味を持ちません。なので、題名やナビゲーションバーなどの特別な枠には、意味を持ったタグを使うべきです。この『意味を持つ枠には、意味を持つタグを使うべき』という考え方をセマンティクスと呼びます。

意味のあるタグはたくさんありますが、一例を挙げます。

nav : ナビゲーションバー。
ulとli : 箇条書きのリスト。
dlとdtとdd : 定義リスト。
h1 : 表題。1ページにつき1つだけあるべき。
p : 段落。
span : 特に意味はない。文字を装飾するためのタグ。

それを踏まえた上で、index.htmlを書き直してみます。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <nav class="nav-wrapper">
      <ul class="nav">
        <li class="nav-content"><span class="nav-icon"></span>トップ</li>
        <li class="nav-content"><span class="nav-icon"></span>映画出演</li>
        <li class="nav-content"><span class="nav-icon"></span>ドラマ出演</li>
        <li class="nav-content"><span class="nav-icon"></span>舞台出演</li>
        <li class="nav-content"><span class="nav-icon"></span>写真集</li>
        <li class="nav-content"><span class="nav-icon"></span>出版本</li>
        <li class="nav-content"><span class="nav-icon"></span>管理者</li>
      </ul>
    </nav>
    <div class="contents-wrapper">
      <h1 class="heading">阿部 寛のホームページ</h1>
      <div class="contents-wrapper-inner">
        <div class="content-left">
          <div class="face-photo"></div>
          <p class="profile">
            阿部 寛（あべ ひろし）<br/>
            生年月日 1964年6月22日<br/>
            血液型 A型<br/>
            プロフィール
          </p>
          <p class="profile-english">
            If you have any enquiries regarding my TV drama or film, or would like to make an enquiry concerning future projects, please do not hesitate to contact me through the following email address.
          </p>
          <p class="mail">mail:shigeta@navy.plala.or.jp</p>
          <p class="profile-detail">
            所属:<br/>
            茂田オフィス<br/>
            107-0052<br/>
            東京都港区赤坂9-5-29<br/>
            赤坂ロイヤルマンション303<br/>
            TEL : +81-3-5410-8585<br/>
            FAX : +81-3-5410-0588<br/>
          </p>
        </div>
        <div class="content-right">
          <h2 class="news-heading">★★★　最新情報　★★★</h2>
          <div class="news-list">
            <dl class="news-list-content">
                <dt class="news-list-title">・舞台</dt>
                <dd class="news-list-description">
                  彩の国シェイクスピア・シリーズ第35弾 『ヘンリー八世』 <br/>
                  2020年2月14日（金）～3月1日（日）
                </dd>
              </dl>
            <dl class="news-list-content">
                <dt class="news-list-title">・TV</dt>
                <dd class="news-list-description">
                    「まだ結婚できない男」<br/>
                    フジテレビ系連続ドラマ主演<br/>
                    毎週火曜日　21時～　放送中                   
                </dd>
            </div>
            <dl class="news-list-content">
                <dt class="news-list-title">・映画</dt>
                <dd class="news-list-description">
                    「HOKUSAI」 <br/>
                    2020年・初夏 全国公開New!<br/>
                    <br/>
                      マレーシア映画「The Garden Of Evening Mists」<br/>
                    2020年公開予定
                </dd>
              </dl>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

ユーザーから見たデザインに変化はありませんが、ソースコードを見ただけで、題名(h1)の場所や、ナビゲーションバー(nav)の場所が分かります。

head内の要素

ここまでbodyにしか書き込んできませんでしたが、SEOの観点でも、ユーザビリティの観点でも、headはとても重要になります。実際に、主要なタグをindex.htmlの<head></head>内に書き込んでみましょう。

<head>
  <!-- ページのタイトル -->
  <title>阿部寛のホームページ</title>

  <!-- ページの説明 -->
  <meta name="description" content="俳優の阿部寛のプロフィールや最新情報を発信するホームページです。" />

  <!-- 文字エンコードの指定 -->
  <meta charset="utf-8" />

  <!-- URLを正規化(統一化)する -->
  <link rel="canonical" href="http://abehiroshi.la.coocan.jp/" />

  <!-- スマホに対応するためのViewPortの設定 -->
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <!-- OGP(SNSでの表示)の各種設定 -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@abehiroshi" />
  <meta property="og:url" content="http://abehiroshi.la.coocan.jp/" />
  <meta property="og:title" content="阿部寛のホームページ" />
  <meta property="og:description" content="俳優の阿部寛のプロフィールや最新情報を発信するホームページです。" />
  <meta property="og:image" content="http://abehiroshi.la.coocan.jp/abe-top-20190328-2.jpg" />

  <!-- ホーム画面に追加したときのタイトル -->
  <meta name="apple-mobile-web-app-title" content="阿部寛のホームページ">

  <!-- ホーム画面に追加したときの画像 -->
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/apple-touch-icon.png">

  <!-- サイトアイコンの指定 -->
  <link rel="icon" type="image/png" href="./assets/icon-192x192.png">

  <!-- 電話番号などをリンクに変換されるのを防ぐ -->
  <meta name="format-detection" content="email=no,telephone=no,address=no" />

  <link rel="stylesheet" href="./style.css" /> <!-- CSSファイルを読み込む -->
</head>

覚えなくていいです。コピペして、必要なところを書き換えれるようになりましょう。

さいごに

僕が最初に買ったHTMLの入門書は、いきなりh1やul、liのようにタグを使用していたので、僕は「なんでdivじゃなくてh1なんかを使うんだろう」とモヤモヤした経験があります。そんな疑問を読者に持たせないように、「シンプルなdivだけで簡単にデザインは作れるんだ」と伝えたくてこの記事を書きました。

ご意見やご質問はコメント欄かTwitterまでお願いします。