Lesson2 HTML

01HTMLとは？

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するための言語です。Webページの骨組みとして利用され、さまざまな場面で使用されます。

ただし、HTMLだけで使用することはあまりなく、多くはCSSやJavaScriptなどの言語とともに用います。CSSやJavaScriptについてはChapter2以降で解説します。

レッスンを始める前にCloud9に作業用のフォルダを作成しましょう。「Lesson1_HTML_CSS」という名前で新しくフォルダを作成しましょう。

このレッスンでは「Lesson1_HTML_CSS」フォルダの中にファイルを追加していきます。

「Lesson1_HTML_CSS」フォルダの中に新たに「Chapter1_HTML」を作成しましょう。

Lesson1_HTML_CSS
└ Chapter1_HTML

02HTMLの骨組み

HTMLの骨組みは以下のコードです。

「Chapter1_HTML」ファルダの中に「html_1.html」を作成し、以下のコードを張り付けてください。

<!doctype html> 
    <html lang="ja">
    <head>
        <!-- ファイルの読込などを行う -->
    </head>
    <body>
        <!-- ここに記載した内容が画面に表示される -->
    </body>
</html>

HTMLは基本的に<タグ名>という形で記述します。

最初の<タグ名>を開始タグ、</タグ名>を終了タグまたは閉じタグといいます。

タグの中に書かれている文字を要素名といい、書かれている内容がその文書でどのような意味を持つのかを示すことができます。タグは画面には表示されません。

それぞれのタグがどのような意味を持っているのか、1つずつ解説していきます。

タグ	説明
<!doctype html>	この部分は「これから書く内容はHTMLですよ」ということを宣言しています。
<html lang=”ja”></html>	HTMLを記述する場合はまず<html></html>を記述します。あまり深く考えなくて大丈夫です。 ※lang=”ja”は言語が日本語であることを表しています。英語の場合は「en」と記述します。
<head></head>	headタグといわれる部分で、この中でサイトに関する情報やCSSファイルなどを読み込みます。例えば、メタ情報と呼ばれるサイトに関する情報や、linkタグで他のファイルを読み込んだり、titleタグでブラウザのタブに表示されるサイト名を設定したりします。

①<!doctype html>

具体例

メタ情報

<meta name=”description” content=”サイトの説明文”>
　<!-- →　検索されたときのサイトの説明文を設定できます -->

<meta name=”twitter:url” content=”リンク先URL”>
　<!-- →　twitterで共有され、リンクが押されたときのリンク先を設定できます -->

ファイル読み込み

<link href=”cssファイル名” rel=”stylesheet”>

タイトル設定

<title>サイトタイトル</title>

<body></body>

bodyタグといわれる部分で、実際に画面に表示される部分を記述します。画面表示に関するHTMLの記述方法については、次のChapter1-2で詳しくご紹介します。

まとめると、以下の画像のように記述場所を分けます。

コメントとは？

骨組みのコードの中でで記載されているものをコメントといいます。コメントは画面には表示されません。開発時のメモを残すときに活用します。

03HTMLの記述方法

先ほどHTMLの骨組みについて解説しましたが、ここからは実際にbodyタグ内に記載し、画面に表示する具体的なHTMLの記述方法について解説します。

段落（文章）
文章中の改行
画像
ページリンク
リスト
表
フォーム

具体的には以上の８つをご紹介します。

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は、パスに気を付ける必要があります。パスについてはLesson1-6で詳しく解説します。

さらにalt属性についても理解しておきましょう。

alt は ALTernate（代替）の略で、画像に対するテキストでの説明を記述します。

通常は見えませんが、画像がうまく表示されなかったときなどに表示される画像の解説テキストになります。また、視覚障害や認識機能障害を持つ方のための音声補助ソフトが読み上げてくれる役割もあります。

属性については、Lesson1-4で詳しく説明します。

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-4 ページリンク【a要素】

書き方

<a href="https://www.officestation.jp/">オフィスステーション</a>

表示

説明

aは Anchor（アンカー：錨）の略です

で囲まれた文字列が画面に表示され、リンクになります。href属性にはリンク先のURLを設定します。

また、文字だけでなく画像をリンクにすることもできます。

<a href="https://www.officestation.jp/">
    <img src="ofs.jpg" alt="オフィスステーション">
</a>

1-2-5 リスト【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つの項目を意味します。

で囲った中に必要な数だけを記述していきます。

また、リストの前についている「・」は、Lesson1-2で紹介する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-6 表【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-7 フォーム【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要素はお問合せフォームなどによく使われます。

また、Lesson3以降で学習するJavaScriptやPHPでも使用するので覚えておきましょう。

form内の要素について見てみましょう。

label要素はinput要素のためのラベル（表示用の項目名）で、 for="" の属性でinput要素のid属性（Lesson1-4-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などを指定できますが、これらについてはLesson7 PHPの中で詳しく触れていきます。

1-2-8 divタグ

書き方

<div>
    <a href="<https://www.officestation.jp/>">オフィスステーション</a>
</div>

表示

説明

divはDIVision（部分）の略です。

div要素は表示されることはありません。また、特に何か特徴をもつ要素でもありません。

ただ、Lesson1-2で学習するCSSで多くの恩恵をもたらしてくれますので、覚えておきましょう。

04インデント

ここまでさまざまな要素を紹介してきましたが、タグごとに段落の開始位置が揃っていたことに気づいたでしょうか。これをインデントといいます。

下の図は、Chapter1-2-6のコードを抜粋したものです。インデントが揃っているため、タグごとの関係が目で追いやすくなっています。

インデントはタブ、もしくはスペースでつけることができます。

05属性

属性は、次のようにHTMLやXMLの要素に記述します。

<要素 属性="値">

属性は、HTMLやXMLの要素に対してさまざまな情報を指定することができます。

例えば、HTMLのa要素にはhref属性があり、この属性を使用することでリンク先のURLを指定することができます。

<a href="<https://example.com/>">リンクテキスト</a>

1-4-1 id属性

id属性とは、HTMLやXMLなどのマークアップ言語で使用される属性のことを指します。

id属性は、要素を一意に識別するために使用します。

次のように、HTMLやXMLの要素に記述します。

<h1 id="title">こんにちは</h1>

id属性の値は、HTMLやXMLドキュメント内で一意である必要があります。つまり、同じ値を持つid属性を複数の要素に指定することはできません。

1-4-2 class属性

class属性とは、HTMLやXMLなどのマークアップ言語で使用される属性のことを指します。

次のようにHTMLやXMLの要素に記述します。

<h1 class="title h1">こんにちは</h1>

class属性はid属性とは違い複数の値を持つことができます。一意である必要がないということです。

また、class属性とid属性を同時に持たせることもできます。

<h1 class="title h1" id="title">こんにちは</h1>

06デベロッパーツールの使い方

ここでは開発中のデバックやちょっとした確認のときによく使われるデベロッパーツールの使い方について説明します。

1-5-1 デベロッパーツールについて

デベロッパーツールとは、Webブラウザに搭載されている、Webページの開発やデバッグを行うためのツールのことを指します。

デベロッパーツールを使用すると、WebページのHTMLやCSSを確認したり、JavaScriptのコンソールを開いたりすることができます。

デバッグとは？

プログラムやシステムに潜む不具合やバグを発見し、修正することを指します。デバッグを行うことで、プログラムやシステムが正しく動作するようになります。

1-5-2 デベロッパーツールの使い方

①開き方

【開き方その１】

右クリックで検証をクリック

【開き方その２】

ctrl + shift + j　を押す

【開き方その３】

F12　を押す

②使い方

下の画像の赤丸をクリックしWebページの適当な要素にカーソルを持って行ってください。

実際にHTMLやこの後出てくるCSSを編集することができます。

※変更は自分のパソコンにしか反映されません。さらに画面を読み込むともとに戻ります。

Chapter2で学習するCSSや送受信したデータ、URLなど様々な情報をデベロッパーツールで確認することができます。

07ファイルのパス

ここではファイルのパスについて解説します。

ファイルパスはファイルや画像など、呼び出すファイルの場所を指定するための文字列です。

ページの中でリンクを貼ったり、画像を読み込んで表示させたりするときに、呼び出し元のページ（例えば今回はindex.html）から見て「読み込みたいファイルがどこにあるのか」を指定します。

パスの指定方法は相対パスと絶対パスと呼ばれる方法が存在します。

1-6-1 相対パス

相対パスは、基本となるパスの書き方です。「呼び出し元のファイルを起点として、呼び出し先のファイルがどの位置にあるのか」を示します。下図を例に見てみましょう。

※top内にあるindex.htmlがトップページです。

top
├ first
│  └ one
│     └ index.html
├ second
│  └ two
│     ├ index.html
│     └ css
│       └ style.css
├ third
│  └ three
│     ├ index.html
│     └ main.js
└ index.html

topフォルダ内には複数のフォルダが入っており、階層構造になっています。

firstやsecondなどのサブフォルダは、「今 topフォルダで作業している」という指定がされれば、そのサブフォルダ名などを確認できます。

一方で、main.jsはthirdフォルダ内のthreeフォルダに移動しないとファイルを確認できません。

このように現在どこの位置で作業をしているのかを示すカレントディレクトリ（カレントフォルダ、作業ディレクトリ）を指定する必要があります。

HTMLファイルなどを作成するとき、そのファイルがどこのフォルダにあるのかを示すのがカレントディレクトリになります。

では、top フォルダ内の index.html から css フォルダの中にある style.css を呼び出す方法を考えてみましょう。つまり、カレントディレクトリは、top となります。

HTMLは以下のようになります。

<link rel="stylesheet" href="./css/style.css">

topフォルダ内のindex.html の中で ./css/style.css と書いた場合、どういう意味を持っているのか順番にたどって見てみましょう。

./：index.html と同じ階層にある
css/：cssフォルダの中の
style.css：style.css を呼び出す

このようになります。

フォルダの区切りには/を使います。./は「記述されたファイルと同じ階層にある」という意味です。

次は thirdフォルダのthreeフォルダ内にある index.html から style.css を呼び出す場合です。 thirdフォルダのthreeフォルダ内にある index.html と secondフォルダのtwoフォルダのcssフォルダ内にある style.css は異なるフォルダ（ディレクトリ）になります。つまり、cssフォルダ内に該当するファイルがあるのかどうかは、そのフォルダに移動（フォルダを指定）しないと呼び出すことができません。したがってこの場合は、以下の順番で呼び出します。

../：1つ上の階層へ行く（thirdフォルダ）
../：さらに1つ上の階層へ行く（topフォルダ）
second/：secondフォルダへ移動して
two/：twoフォルダへ移動して
css/：cssフォルダへ移動して
style.css：その中の style.css を呼び出す

以上をまとめて、../../second/two/css/style.css と記述します。

../ は「1つ上の階層へ行く」という意味です。

よって、third/three/index.html では、次のように書いて、 style.cssファイルを呼び出します。

<link rel="stylesheet" href="../../second/two/css/style.css">

画像を呼び出す場合や、リンクを張る場合も、同じく../を使えます。../は階層ごとに1セットずつ増えます。

CSSが読み込めない、画像が表示されない場合などは、このパスを間違えている可能性が高いです。再度、位置関係と階層を確かめてみましょう。

1-6-2 絶対パス

相対パスが「呼び出し元のファイルを起点として、呼び出し先のファイルがどの位置にあるのか」を示すのに対し、絶対パスは「サイトの最上位を起点として、呼び出し先のファイルがどの位置にあるのか」を示します。絶対パスは、呼び出したいファイルが同じサイト構成内にある場合とない場合で記述方法が異なってきます。まずは、同じサイト構成内にある（同一サーバー内のファイルを参照する）場合を見ていきましょう。

上図のようなサイトで、secondフォルダのtwoフォルダ内のindex.htmlファイルおよびfirstフォルダのoneフォルダ内のindex.htmlファイル、thirdフォルダのthreeフォルダ内のindex.htmlファイルのすべてにcssフォルダ内にあるstyle.cssを適用したいと考えます。

しかし、先に紹介した相対パスで指定した場合は次のようになってしまい、ファイルごとに修正する必要が出てきます。

secondフォルダのtwoフォルダ内のindex.htmlファイルでの指定方法

<link rel="stylesheet" href="./css/style.css">

firstフォルダのoneフォルダ内のindex.htmlファイルおよびthirdフォルダのthreeフォルダ内のindex.htmlファイルでの指定方法

<link rel="stylesheet" href="../../second/two/css/style.css">

このようにファイルによって指定する方法が変わってくるのは、カレントディレクトリ（カレントフォルダ、作業ディレクトリ）が異なっているためです。

では、カレントディレクトリについては無視し、サイト構成の上位階層から指定する方法を用いて上記を書き換えることにします。

上図の場合、topフォルダから構成されていますが、サイト構成の最上位ディレクトリ（フォルダ）を「/」で表します。つまり、cssフォルダ内にあるstyle.cssファイルを絶対パスにて指定すると以下のとおりとなります。

絶対パスでのcssファイルの適用方法

<link rel="stylesheet" href="/second/two/css/style.css">

ただし、この書き方ができるのは、呼び出したいファイルが同じサイト内にある必要があります。

この書き方では、href属性で指定しているファイルパスの先頭が「/」から始まっていることがポイントになります。絶対パスは、どのファイルから参照するにしてもパスが変わることがありませんので、先ほど紹介した3つのindex.htmlファイル内での指定方法が同じになります。

次に、呼び出したいファイルが同じファイル構成内にない場合を見てみましょう。

例えば、下図のような構成のサイトのtopフォルダにあるcssフォルダ内のstyle.cssファイルを呼び出したいとします。

絶対パスはサイトの最上位から呼び出し先のファイルがどこにあるかを示す必要がありますので、「sample.com」から「style.css」までを順に記述します。

この際、「sample.com」はこのサイトのドメイン名となるので「http://」のうしろから書き始めます。

sample.comのcssファイルの適用方法

<link rel="stylesheet" href="<http://sample.com/top/css/style.css>">

ドメインとは？

コンピューターやネットワークは「IPアドレス」という数値によって識別されていますが、それを分かりやすい文字に置き換えたものが「ドメイン」です。ネットワーク上の「住所」と表現されることが多いです。

08ブラウザによっての挙動差異の理解

Webブラウザは、WebサイトやWebアプリケーションを表示するためのソフトウェアです。しかし、異なるブラウザは同じWebサイトやアプリを表示する際に微妙な違いがあります。これは、それぞれのブラウザが異なる仕様や解釈を持っているためです。この違いは、HTML、CSS、JavaScriptなどのWeb技術に関連しています。

例えば、同じHTMLとCSSを用いて作成されたWebページでも、Google ChromeとMozilla Firefoxでは微妙な違いが生じることがあります。これは、ブラウザのエンジン（ページを解釈し、表示するためのプログラム）が異なるからです。そのため同じソースコードでも、ブラウザごとに微妙な見た目の違いや動作の違いが発生する可能性があります。

異なるブラウザは新しいWeb技術や仕様のサポートに対する速度や方法が異なることもあり、あるブラウザが最新の機能をサポートしていても、別のブラウザではまだ対応していない場合があります。各ブラウザがどこまでのHTML, CSS, JavaScriptに対応しているのか理解しておくことが重要です。

また、ブラウザによって挙動に差が出るということは、Web開発者がクロスブラウザ対応のために異なるブラウザでの見た目や動作の違いを考慮してコードを書き、テストをする必要があります。

クロスブラウザ対応

クロスブラウザ対応とは、WebサイトやWebアプリケーションが、異なるWebブラウザ（例えばGoogle Chrome、Mozilla Firefox、Safariなど）で一貫した見た目や機能を提供することを指します。

01HTMLとは？

02HTMLの骨組み

①<!doctype html>

具体例

コメントとは？

03HTMLの記述方法

1-2-1 段落【p要素】

1-2-2 段落【br要素】

1-2-3 画像【img要素】

1-2-4 画像の拡張子と最適化

1-2-5 遅延読み込み（Lazy Loading）

1-2-4 ページリンク【a要素】

1-2-5 リスト【li ul ol要素】

順序なしリスト

順序ありリスト

1-2-6 表【table要素】

1-2-7 フォーム【form要素】

1-2-8 divタグ

04インデント

05属性

1-4-1 id属性

1-4-2 class属性

06デベロッパーツールの使い方

1-5-1 デベロッパーツールについて

1-5-2 デベロッパーツールの使い方

①開き方

②使い方

07ファイルのパス

1-6-1 相対パス

1-6-2 絶対パス

08ブラウザによっての挙動差異の理解

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル