03HTMLの記述方法
先ほどHTMLの骨組みについて解説しましたが、ここからは実際にbodyタグ内に記載し、画面に表示する具体的なHTMLの記述方法について解説します。
- 段落（文章）
- 文章中の改行
- 画像
- ページリンク
- リスト
- 表
- フォーム
- divタグ
具体的には以上の８つをご紹介します。
1-2-1 段落【p要素】
書き方
<p>テキストが入ります。</p>表示
説明
p要素のpは Paragraph（パラグラフ：段落）の略です。
段落ごとに区切った文章を書きたい場合は、各段落をpタグでくくります。
<p>一段落目</p>
<p>二段落目</p>
<p>三段落目</p>３段落の文章であれば以下のようになります。
1-2-2 段落【br要素】
書き方
<p>改行にはbrタグを使います。<br>Enterキーで改行しただけでは認識されません。</p>表示
説明
brは BReak（断つ）の略です。
先ほどのpタグでは開始タグ(<p>)と終了タグ(</p>)がありましたが、br要素については終了タグが必要ありません。
HTMLではbr要素を使わないと改行ができません。画面幅によって自動改行される場合はありますが、空白スペースなどでは改行は行われません。
<p>改行にはbrタグを使います。<br>Enterキーで改行しただけでは認識されません。</p>
<p>改行にはbrタグを使います。
Enterキーで改行しただけでは認識されません。</p>
画像のようにbr要素を含む場合は正しく改行されていますが、スペースがたくさん入った場合は改行されません。
1-2-3 画像【img要素】
書き方
<img src="FMnetロゴ.png" alt="F&Mnetのロゴ">表示
説明
imgは IMaGe（画像）の略です。img要素もbr要素と同様、終了タグのない要素です。
img要素を使用する際は、src属性に画像のURLを指定することで画像を表示します。
srcは SouRCe（源）の略です。
ここで指定するURLは、パスに気を付ける必要があります。パスについてはLesson2-7で詳しく解説します。
さらにalt属性についても理解しておきましょう。
alt は ALTernate（代替）の略で、画像に対するテキストでの説明を記述します。
通常は見えませんが、画像がうまく表示されなかったときなどに表示される画像の解説テキストになります。また、視覚障害や認識機能障害を持つ方のための音声補助ソフトが読み上げてくれる役割もあります。
属性については、Lesson2-5で詳しく説明します。
1-2-4 画像の拡張子と最適化
拡張子とは
画像の拡張子とは、画像ファイルの種類を示すための文字列です。一般的な画像の拡張子には、.jpg、.png、.gif、.svg、.webpなどがあります。それぞれの拡張子は、異なる画像形式や特性を持っていますので下記テーブルにまとめました。
| メリット | デメリット | 透過 | アニメーション | 主な用途 | |
| JPEG(.jpg/.jpeg) | 色数が多い写真をきれいに表示できる | 保存を繰り返すと劣化する | × | × | 写真やイメージ |
| PNG(.png) | 何回保存しても劣化しない | データが重くなる場合がある | 〇 | × | ロゴやイラスト |
| GIF(.gif) | データが軽い | 複雑な描写が苦手 | 〇 | 〇 | シンプルなアイコンやアニメーション |
| SVG(.svg) | 拡大・縮小しても劣化しない cssで色を変更できる | 複雑な描写が苦手 | 〇 | 〇 | シンプルなロゴやアイコン |
| WebP(.webp) | 画質がきれいで容量も軽い | 古いブラウザでサポートしていない可能性がある | 〇 | 〇 | ロゴやイラスト、アニメーション |
最適化とは
画像の最適化とは、画像ファイルを軽量化してウェブサイトやアプリケーションの読み込み速度を向上させることを指します。最適化を行うことで、ページの読み込み時間を短縮し、ユーザーが快適にシステムを利用することができます。
画像の最適化の方法はいくつかあります。
１．圧縮
JPEGやPNGなどの形式は、画像を圧縮してファイルサイズを縮小できます。圧縮率を調整することで、画質とファイルサイズのバランスを調整できます。
２．解像度の最適化
画像の解像度を調整することで、ファイルサイズを削減できます。解像度が大きい画像を縮小して利用するのではなく、解像度を調整した画像を利用することで最適化することができます。
画像を圧縮するソフトウェアやオンラインツールもあるので活用してみましょう。
３．フォーマットの選択
先ほど紹介したように画像には適切なフォーマットがあります。写真にはJPEG、図形やアイコンにはPNG、アニメーションにはGIFなど適切なフォーマットを選択することで最適化することができます。
４．キャッシュの利用
ブラウザキャッシュを利用して画像を保存し、再読み込み時にサーバーからのリクエストを省略することで、読み込み速度を向上させることができます。
画像の最適化は開発者が常に意識しておくべきことの１つです。
1-2-5 遅延読み込み（Lazy Loading）
遅延読み込み（Lazy Loading）は、Webページで使われる画像や動画などのコンテンツを、ページがロードされる時点ではすぐには読み込まず、ユーザーがスクロールしてそれらのコンテンツが表示される直前に読み込む仕組みです。
通常、Webページを開くとすべての画像が一度に読み込まれます。これにより、ページの読み込み時間が長くなり、ユーザーがページをスクロールしてもすぐには見えない画像まで読み込まれてしまいます。しかし、遅延読み込みを使用するとページの読み込み時には画像が読み込まれず、ユーザーが画像が表示されるまでスクロールすると、その都度画像が読み込まれて表示されます。
これによりページの読み込み速度が向上し、ユーザーが快適に利用することができます。特に大量の画像が含まれる長いページや、画像が画面外にある場合に効果的です。
遅延読み込み（Lazy Loading）の方法には主に下記の２通りありますが今回は１の「loading=”lazy”を利用する」方法をご紹介します。
- loading=”lazy”を利用する
- JavaScriptを使用する（ライブラリ推奨）
では実際にコードを書いてみましょう。
<img src="sample.jpg" loading="lazy" alt="" width="1280" height="720">このように<img>タグや<iframe>タグにloading=”lazy”という記述を追加すると遅延読み込みさせることができます。現在ではほぼすべてのブラウザで対応しています。
loading属性には３種類あり、それぞれに下記のような特性があります。
| 属性 | 説明 |
| loading=”lazy” | ページの初期読み込み時には読み込まず、ユーザーが画像が表示されるまでスクロールすると読み込まれます |
| loading=”eager” | ブラウザに自動的に読み込み方法を決定させます |
| loading=”auto” | ページの読み込み時にすぐに画像やフレームを読み込みます。ページ全体が表示される必要がある場合に使用されます |
loading=”lazy”を利用する場合、高さと幅を指定することが推奨されています。これはブラウザが画像やiframeのレイアウトを確保するためです。高さと幅を指定しない場合、ブラウザは後から画像が読み込まれたときにレイアウトがズレるという現象が発生します。これではユーザーは快適に利用することができないので、高さと幅を指定するようにしましょう。
1-2-6 ページリンク【a要素】
書き方
<a href="https://www.officestation.jp/">オフィスステーション</a>表示
説明
aは Anchor（アンカー：錨）の略です
<a></a>で囲まれた文字列が画面に表示され、リンクになります。href属性にはリンク先のURLを設定します。
また、文字だけでなく画像をリンクにすることもできます。
<a href="https://www.officestation.jp/">
<img src="ofs.jpg" alt="オフィスステーション">
</a>
1-2-7 リスト【li ul ol要素】
リストを表示する場合も、要素を指定する必要があります。
順序の有無で書き方が異なります。
順序なしリスト
<ul>
<li>HTML&CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>SQL</li>
<li>Laravel</li>
</ul>表示
説明
ulとは Unordered Listの略で、「順序のないリスト」の意味です。
liは List Itemの略で、リスト内の1つの項目を意味します。
で囲った中に必要な数だけを記述していきます。
また、リストの前についている「・」は、Lesson3-4で紹介するCSSで消すこともできます。
順序ありリスト
書き方
<ol>
<li>HTML&CSS</li>
<li>JavaScript</li>
<li>PHP</li>
<li>SQL</li>
<li>Laravel</li>
</ol>表示
説明
olとは Ordered Listの略で、「順序のあるリスト」の意味です。
使い方はulとまったく同じです。
ol要素を用いた場合、自動的に番号が表示されます。
1-2-8 表【table要素】
書き方
<body>
<table border="1">
<thead>
<tr>
<th></th>
<th>名前</th>
<th>性別</th>
<th>電話番号</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>山田 太郎</td>
<td>男</td>
<td>09011112222</td>
</tr>
<tr>
<th>2</th>
<td>江坂 次郎</td>
<td>男</td>
<td>09033334444</td>
</tr>
<tr>
<th>3</th>
<td>吹田 花子</td>
<td>女</td>
<td>09055556666</td>
</tr>
</tbody>
</table>
</body>表示
説明
テーブル（表）を作成したい場合は、table要素を使います。
他にもさまざまな要素を使用するので、合わせて覚えておきましょう。
| タグ | 説明 |
| table | 表を始める要素、最初に書く。必須。 |
| thead | 表の見出し（表の一番上の部分）を書くときに使う。 |
| tbody | 表の内容を書くときに使う。 |
| tr | table rowの意味。横一列を書くときに使う。必須 |
| th | table headの意味。見出しの内容を書くときに使う。 デフォルトで太字になる。必須 |
| td | table dataの意味。内容を書くときに使う。必須 |
table
├ thead
│ └ tr
│ └ th
└ tbody
└ tr
├ th
└ tdテーブルのHTML構造は上記の通りです。
今回は表が見やすいように<table border="1">としています。
このように指定することで表を囲む境界線が表示されます。
続いて表の内容を記述するtbodyについて見ていきましょう。
thタグとtdタグはtrタグの中に記述します。thタグとtdタグの数は同じにしましょう。同じでなければ、テーブルのレイアウトが崩れてしまいます。
1-2-9 フォーム【form要素】
書き方
<form>
<label for="name">名前</label>
<input type="text" id="name">
<br>
<label for="tel">電話番号</label>
<input type="tel" id="tel">
<br>
<label for="email">メールアドレス</label>
<input type="email" id="email">
<br>
<label for="password">パスワード</label>
<input type="password" id="password">
<br>
<input type="submit" value="登録する">
</form>表示
説明
form要素はお問合せフォームなどによく使われます。
また、Lesson5以降で学習するJavaScriptやPHPでも使用するので覚えておきましょう。
form内の要素について見てみましょう。
label要素はinput要素のためのラベル（表示用の項目名）で、 for="" の属性でinput要素のid属性（Lesson2-5-2-1で解説）を指定します。例えば「名前」「電話番号」「メールアドレス」「パスワード」のような表示に使うものです。
input要素は実際の入力エリアを指します。
type=""によってどんな形式のデータが入力されるのかを指定します。
typeには以下のような種類があります。
| タイプ | 説明 |
| text | テキストフィールド。文字列を入力することができます。 |
| password | パスワードフィールド。文字列を入力することができますが、入力された文字は「●」で表示されます。 |
| radio | ラジオボタン。複数の選択肢の中から1つだけを選択することができます。 |
| checkbox | チェックボックス。複数の選択肢の中から複数を選択することができます。 |
| submit | 送信ボタン。フォームを送信するためのボタンです。 |
| reset | リセットボタン。フォームの入力内容をクリアするためのボタンです。 |
| file | ファイル選択フィールド。ファイルを選択するためのボタンと、ファイル名を表示するテキストフィールドがあります。 |
| hidden | 隠しフィールド。フォームを送信するときに、このフィールドに入力された値も一緒に送信されますが、画面上には表示されません。 |
| image | 画像ボタン。画像をクリックすることでフォームを送信することができます。 |
書き方
// テキスト
<input type="text">
// パスワード
<input type="password">
// ラジオボタン
<input type="radio">
// チェックボックス
<input type="checkbox">
// 送信ボタン
<input type="submit" value="submitボタン">
// リセットボタン
<input type="reset" value="リセットボタン">
// ファイル選択フィールド
<input type="file">
// 日付選択フィールド
<input type="date">表示例
form要素には、action属性やmethodなどを指定できますが、これらについてはLesson11 PHPの中で詳しく触れていきます。
1-2-10 divタグ
書き方
<div>
<a href="<https://www.officestation.jp/>">オフィスステーション</a>
</div>表示
説明
divはDIVision（部分）の略です。
div要素は表示されることはありません。また、特に何か特徴をもつ要素でもありません。
ただ、Lesson3で学習するCSSで多くの恩恵をもたらしてくれますので、覚えておきましょう。
コメントを残す