記事の内容
HTMLのタグ記載ルール
HTMLの基本はタグではさむ
HTMLのタグは開始タグと終了タグをはさみこみ、
終了タグにはタグ内に[/]を入れます。
入れ子のタグはインデントを入れる
インデントとは、入れ子になったタグの頭にスペースを入れる事を言い視覚的にHTMLの構図を把握できます。
インデントを入れなくても問題なくファイル文書は開きますが、コードが膨大になった時に
把握しにくくなるのでインデントは入れるように心がけましょう。
HTMLタグの基礎
DOCTYPE宣言(文書型宣言)
<!DOCTYPE html>は、今から記述するファイル文書がHTMLである事を宣言します。
※HTML5からDOCTYPEの指定は必須
html要素
html要素は、大きく分けて２つの要素に分かれており
ファイル文書に関する全体的な情報(メタデータ)と画面表示に関する内容(ボディ要素)があります。
基礎
<!DOCTYPE html>
<html lang="ja">
<!-- 全体的な情報(メタデータ) -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>タグの基礎</title>
</head>
<!-- 画面表示に関する内容 -->
<body>
<h1>HTMLタグに関して</h1>
</body>
</html>出力結果
HTMLタグに関して
<html lang=”ja”>
HTMLファイル文書の言語設定を指定する箇所で
ブラウザが自動判断するので問題ありませんが、誤判断を防ぐために基本は記述しましょう。
head要素
文章におけるメタデータ
記法
<meta name=”文書情報の種類” content=”文書情報の値”>
| name属性 | 概要説明 |
|---|---|
| application-name | webアプリケーション名を記述 |
| author | 文書の著作者を記述 |
| color-scheme | ブラウザーが使用するカラースキームを指定 ※例を記載 |
| description | 検索一覧でのページ概要を記載(検索エンジンが読み取れば記載される) |
| generator | ページを生成したソフトウェア名を示す ※人の手によって作成された場合は必要なし |
| keywords | 文章内容を表すキーワードを指定 |
meta要素(color-scheme)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>meta要素</title>
</head>
<body class="body">
<p>color-schemeをdarkに指定</p>
</body>
</html>出力結果
スマートホン向けの文書表示指定
記法
<meta name=”viewport”>
| content値 | 概要説明 |
|---|---|
| initial-scale | webページが最初に読み込まれた時の拡大・縮小率を指定 ※0.0〜10.0の数値 |
| width | webページをレンダリングするビューポートの幅とピクセル数、device-witdh(100vw)で指定 |
| height | webページをレンダリングするビューポートの幅とピクセル数、device-height(100vh)で指定 |
| user-scalable | ユーザーにwebページの拡大・縮小を許可するかyesかnoで指定 ※初期値はyes(拡大・縮小が可能) |
| minimum-scale | 許可する拡大率の下限を数値で指定 ※0.0〜10.0の数値 |
| maximum-scale | 許可する拡大率の上限を数値で指定 ※0.0〜10.0の数値 |
文書をクローラーにアクセスさせるかを制御
上記のように指定する事で、検索エンジンのクローラーにwebページをインデックス登録されたりページ内リンクをたどったりさせなくする事ができます。
記法
<meta name=”robots” content=”noindex,nofollow”>
