1-06HTMLについて詳しく学ぼう

この回では、HTMLについてさらに詳しく掘り下げて解説していきます。

ブロックレベル要素・インライン要素

<body>〜<body>の中で使われる<h1>や<div>のようなタグの多くは、ブロックレベル要素かインライン要素に分類できます。ブロックレベル要素は、親要素の領域全体に広がって「ブロック」を生成します。インライン要素は、要素を定義するタグで囲われた領域だけを占有します。

  • ブロックレベル要素は、要素が縦に積まれます
  • インライン要素は、要素が横に並びます

ブロックレベル要素の場合

例えば<div>はブロックレベル要素になります。ブロックレベル要素で囲われた要素は縦に積まれていきます。以下のHTMLように<div>〜<div>が3つ並んでいたとします。

<div class="element1">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi libero nesciunt quidem modi vel omnis, aspernatur fuga veritatis repudiandae quasi doloremque quod minus, minima vitae ratione. Eius, quae consequatur.
</div>
<div class="element2">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde similique, architecto voluptate assumenda quo excepturi voluptatibus, enim recusandae, doloribus nesciunt a non ducimus totam minus eaque maxime ratione. Corporis, ipsum!
</div>
<div class="element3">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae possimus molestiae repudiandae dolores minima voluptatem laborum sit, maxime, in a voluptatum dignissimos dolorem alias officiis at unde earum vel est!
</div>

するとブラウザではこのように表示されます。

ブロックレベル要素はCSSで横幅や高さを指定したり、margin・paddingなどの余白を4方向につけることができます。

以下のHTMLはブロックレベル要素に分類されます。

  • header, footer
  • main, aside
  • article, section
  • ul, ol, li
  • dl, dt, dd
  • table
  • h1〜h6
  • p
  • div
  • form

インライン要素

例えばハイパーリンクを指定する<a>はインライン要素になります。インライン要素で囲われた要素は横に並んでいきます。以下のHTMLのように<a>〜<a>が3つ並んでいたとします。

<a href="#" class="element1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos sequi libero nesciunt quidem modi vel omnis, aspernatur fuga veritatis repudiandae quasi doloremque quod minus, minima vitae ratione. Eius, quae consequatur.</a>
<a href="#" class="element2">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde similique, architecto voluptate assumenda quo excepturi voluptatibus, enim recusandae, doloribus nesciunt a non ducimus totam minus eaque maxime ratione. Corporis, ipsum!</a>
<a href="#" class="element3">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae possimus molestiae repudiandae dolores minima voluptatem laborum sit, maxime, in a voluptatum dignissimos dolorem alias officiis at unde earum vel est!</a>

ブラウザではこのように表示されます。

ブロックレベル要素と違って、要素が切り替わると行が切り替わらず続けて横に並んでいきます。

少し分かりづらいので、文章を短くしてみます。

このように要素が横並びで表示され、右側の端まで届くと改行されます。

インライン要素はCSSで横幅や高さを指定することができません。またmarginやpaddingなどの余白も、左右の方向にしかつけることが出来ません。

以下のHTMLはインライン要素に分類されます。

  • a
  • strong
  • br
  • img
  • label, input, button, textarea

CSSのdisplayでボックスの種類を切り替える

「HTMLとCSSでレイアウトを組んでみよう」にでてきたdisplayというCSSプロパティを使うことによって、ブロックレベル要素をインライン化したり、インライン要素をブロック化することができます。

例えば<a>をdisplay:blockという風にすると、ブロック化することができます。

a{
    display: block;
}

displayで指定できる値はblock・inline・flex・inline-block・noneなどがあります。

画像・箇条書き・表組みなど、HTMLタグをもっと知ろう

前回、見出し( h1〜h6 )や段落( p )、ページのアウトライン( header, footer, main, article, section )に関するHTMLタグを紹介しました。HTMLタグには文章構造をわかりやすくするために他にもたくさんのタグが用意されています。ここからはその中でもよく使うものを解説していきます。

画像を表示する（img）

Webページには必ずと言っていいほど写真・アイコン・バナーなどの「画像」を表示する必要があります。画像を表示するためのHTMLタグが<img>タグです。

  • <img>タグには終了タグがありません。
  • <img>タグには( src・alt・width・height )属性があります。
    • src属性では画像ファイルの場所とファイル名を指定します。
    • alt属性では画像の代替テキストを表示します。
    • width・height属性では、それぞれ横幅と高さを指定します。

試しにページに画像を表示してみましょう。表示するための画像を こちらからダウンロード します。zip ファイルのダウンロードが完了したら解凍しましょう。それから、ユーザー（家のアイコン）＞develop に新規フォルダsampleを作成し、先ほど解凍したフォルダの中に含まれている logo.png をそこに移動させましょう。

VS Codeで Command+N で新しいファイルを開き、Command+S で保存します。保存先は先ほどの sample フォルダの中で、そこに「index.html」と名前をつけて保存します。保存ができたらhtml:5と記述して Tab キーで展開しましょう。

<body>タグの中にimgと入力して Tab キーを押します。すると Emmet によりHTMLが展開されます。

展開された<img>タグのsrc属性にlogo.png、alt属性にはN予備校と入力します。さらにwidth属性に640、height属性に144と入力します。HTMLタグの属性で横幅と高さを指定するときはpxのような単位は必要ありません。

追加したタグをまとめると以下のようになります。

<img src="logo.png" alt="N予備校" width="640" heigth="144">

上書きしてChromeを更新すると、画像が表示されます。

  • alt・width・height 属性は指定しなくても画像は表示されます。
  • 画像のファイル名が間違っていたり、指定するフォルダ名が間違っている場合は画像が表示されず、alt属性に指定したテキストが表示されます。

箇条書きを表示する（ul, ol, li）

次に箇条書き（リスト）を表示してみましょう。箇条書きを表示するには、箇条書き全体を意味する<ul>と、1つ1つの項目を意味する<li>を利用します。

さきほどのindex.htmlの<img>タグの下に、ul>li*3と入力して Tab キーで展開しましょう。

それぞれの<li>〜<li>の中身に「りんご」「みかん」「スイカ」と入力します。

上書き保存をしてChromeを更新します。

このように箇条書きで内容が表示されました。

通常の箇条書きでは左側に「・」という印が表示されますが、これを番号付きで表示することもできます。

<ul>〜<ul>となっている部分を<ol>〜<ol>に変更してみましょう。

説明リストを表示する（dl, dt, dd）

HTMLには説明リストという形式の記述方法があります。定義した言葉に対して説明をする、というような表現をしたい場合に使われます。

たとえば「りんご」に対して「りんごは赤くて甘い果物です」という説明を付けるとします。すると以下のようなマークアップが行なえます。

<dl>
    <dt>りんご</dt>
    <dd>りんごは赤くて甘い果物です</dd>
</dl>

上の4行をindex.htmlに追加して、Chromeで確認してみましょう。

さらにいくつか項目を追加してみます。

<dl>
    <dt>りんご</dt>
    <dd>りんごは赤くて甘い果物です</dd>
    <dt>みかん</dt>
    <dd>みかんはオレンジ色で少し酸っぱい果物です</dd>
    <dt>スイカ</dt>
    <dd>スイカは夏によく食べる果物です</dd>
</dl>

この記述をChromeで確認してみるとこうなります。

定義した言葉に対して、複数説明を持たせることもできます。

<dl>
    <dt>りんご</dt>
    <dd>赤い果物です</dd>
    <dd>木になっています</dd>
    <dd>青森県はりんごの生産量が日本一です</dd>
</dl>

<dt>タグの部分は文章にすることもできます。例えばQ&Aのような文章の場合、以下のようにマークアップできます。

<dl>
    <dt>Q.りんごの生産量が多い県はどこですか？</dt>
    <dd>A.青森県はりんごの生産量が日本一です</dd>
</dl>

表組み（table, tr, th, td）

続いては料金や比較などを表現したいときによく使われる「表組み」です。

まずは下の見本を確認してください。

図：表組みの見本

このような料金表をマークアップしていきたいと思います。

最初に、表全体を意味する<table>タグを記述します。

<table>
</table>

次にこの表組みのタイトルを意味する<caption>タグを記述します。

<table>
    <caption>料金表</caption>
</table>

表の1行目を書いてみます。行を意味する<tr>、見出しセルを意味する<th>、データセルを意味する<td>を記述します。

<table>
    <caption>料金表</caption>
    <tr>
    <th>松</th>
    <td>10,000円</td>
    </tr>
</table>

続けて2行目、3行目を記述します。1行分をコピー＆ペーストして、中身を書き換えましょう。

<table>
    <caption>料金表</caption>
    <tr>
    <th>松</th>
    <td>10,000円</td>
    </tr>
    <tr>
    <th>竹</th>
    <td>8,000円</td>
    </tr>
    <tr>
    <th>梅</th>
    <td>5,000円</td>
    </tr>
</table>

このままでは表がわかりづらいので、<head>内に以下のCSSを貼り付けます。

<style>
    table,th,td{
        border-collapse: collapse;
        border: solid 1px #aaa;
    }
    table{
        width: 100%;
    }
    th,td{
        padding: 10px;
    }
    th{
        width: 200px;
        background: #eee;
    }
</style>

これで先ほどの見本通りの表ができあがります。

表はセル・行・列など部分ごとに呼び方がありますので、覚えておきましょう。

強い重要性要素（strong）

文章の中で「重要性が高い」ということを伝えるときに使えるHTMLタグとして<strong>というものがあります。

例えば以下のような使い方をします。

<p>
    <strong>注意！</strong>ダウンロードは一度きりしか出来ません。
</p>

ブラウザではこのように見えます。

<strong>〜<strong>で囲われた部分が太字になって表示されました。

<strong>タグはあくまで「重要性が高い」ということを文章に意味づける役割のもので、決して文章を太字で見せるためのタグではありません。意味は関係なく、フォントを太字に変更したい場合は、CSSプロパティのfont-weightを利用しましょう。

ひとかたまりの範囲として指定する（span）

<span>は<div>に似て、特に意味をもたないタグです。インライン要素の状態で、特定の範囲にCSSで変化を与えたり、classやidを付与する際などに使います。

例えば以下のような使い方をします。

<p>
    囲った部分が<span style="color:red;">赤色</span>になります。
</p>

改行する（br）

文章の中で、改行をしなければいけないことがある場合は、<br>タグを使います。このタグには終了タグがありません。

HTMLの中で文字を改行をしても、ブラウザで確認すると改行が行われていません。

例えばこんな風に書いたとします。

改行したつもりの場所が半角スペースになっていて、実際には改行されずに表示されています。

改行したい場所に<br>タグを入れてみます。

見栄えを整えるために<br>と使って改行をしてスペースをあけるような使い方は誤りです。あくまで文章の意味として改行が必要な場合に利用するものです。例えばページの文章のかたまりとかたまりを分けて見せたい場合は、それぞれを<p>などで囲い、CSSプロパティのmarginやpaddingを適宜使って要素同士の間をあけましょう。

N水族館のページに要素を追加しよう

前回作成したN水族館のページに、今回解説したHTMLタグをいくつか追加して、スタイルを整えてみましょう。

前回の完成データはこちらからダウンロードできます

ユーザー＞develop＞n-aquarium をVS Codeで開き、index.htmlを編集できるようにしておきましょう。

画像を追加する

ヘッダーとコンテンツの間に、キービジュアルを表示します。キービジュアルとは、Webサイトやポスターなどの一番目立つ場所に表示される画像のことです。そのサイトの雰囲気やメッセージ性を持った画像を配置することで、訪れたユーザーに印象づけをするためのものです。キービジュアルは「メインビジュアル」「タイトルバナー」と呼ばれることもあります。

設置する画像はこちらになります。

画像をダウンロード

index.htmlが置かれている場所と同じ場所に画像を保存します。

<main>と<div class="mainInner">の間に.keyVisual>imgと入力して Tab キーで展開します。

src属性に1.jpg、alt属性にN水族館、width属性に1200、height属性に400を入れましょう。

<img src="1.jpg" alt="N水族館" width="1200" height="400">

上書き保存をしてChromeでindex.htmlを開いて表示を確認しましょう。

左側に寄っていますが、これはのちほどCSSで調整をします。

料金表を追加する

来場者向けに入場料の料金表を提示したいと思います。<div class="mainInner">〜<div>の中の、</article>の次にarticle>.priceWrapperを入力して Tab キーで展開します。

<div class="priceWrapper">〜<div>の中にh2{料金について}を入力して展開、続いてp{1Fチケットセンターにてお買い求めいただけます}と入力して展開します。

<p>〜<p>の下にtableと入力して展開、続けてtr>th{大人}+td{1,500円}と入力して展開します。さらに展開された</tr>の下にtr>th{子ども}+td{800円}と入力して展開します。

上書き保存をしてChromeで確認しましょう。

こちらも枠などがないのでわかりづらいのですが、のちほどCSSで装飾をして整えます。

注意事項を追加する

来場者向けの注意事項を箇条書きで提示したいと思います。先ほどの料金表が書かれた<article>〜<article>のあとにarticle>.noteWrapperを入力して Tab キーで展開します。

<div class="noteWrapper"></div>の中にh2{ご注意}と入力して展開、続いてul>li*3と入力して展開します。展開された3つの<li>〜<li>の中に以下の文章を入力します。

  • N水族館は全館禁煙でございます。
  • 一度ご購入された入場券の払い戻しはできません。
  • 営業時間･営業内容を予告なく変更する場合がございますので、あらかじめご了承ください。

全館禁煙のところは強調したいので<strong>〜<strong>でマークアップしましょう。

これで上書き保存をして、Chromeで確認します。

レイアウト調整と装飾をする

style.cssを編集して、レイアウトの調整と装飾を行います。

前回ヘッダーをグレーに色付けしましたが、この色はなしにしたいと思います。

キービジュアルを横中央に配置します。テキストや画像を横中央に配置したいときはtext-alignを使います。CSSに以下の内容を記述します。

.keyVisual{
    text-align: center;
}

上書き保存をしてChromeで確認します。

続いて料金表の装飾をします。CSSに以下の内容を記述します。

.priceWrapper table,
.priceWrapper th,
.priceWrapper td{
    border-collapse: collapse;
    border: 1px solid black;
}
.priceWrapper th,
.priceWrapper td{
    padding: 7px;
}
.priceWrapper table{
    width: 100%;
}
.priceWrapper th{
    width: 150px;
    background: #eee;
}

全体ではこのようなります。

今回出てきたHTMLとCSS

HTML

要素説明
img画像を表示する。src属性で画像の場所を指定し、alt属性で代替テキストを表示したり、width・height属性で高さと横幅を指定する
ul箇条書き全体を表す。
li箇条書きの１項目を表す。
ol順序付きの箇条書き全体を表す。
dl説明リスト全体を表す。
dt説明リストの定義部分を表す。
dd説明リストの説明部分を表す。
table表組み全体を表す。
caption表組みのタイトルを表す。
tr表組みの行を表す。
th表組みの見出しセルを表す。
td表組みのデータセルを表す。
strong強い重要要素を表す。
spanインラインでひとかたまりの要素を表す。
br改行する

CSS

プロパティ値説明
border-collapsecollapse,separate隣接するセルのボーダーを重ねるか、間隔をあけるか設定する
bordersolid,double,groove
px
color		ボーダーの形状・太さ・色をまとめて指定する

完成版サンプル

サンプルファイルをダウンロード

ダウンロードしたzipファイルを展開すると、以下のようなファイルが入っています。

  • n-aquarium（フォルダ）
    • index.html
    • style.css
    • 1.jpg

スポンサーリンク

Posted by エスパパの娘