振り返り
HTMLを作成するときの基本構造について理解することができた。タグの構造などどういう順番でタグを書いていけば、ページに反映されるか理解できたので見なくても書けるように練習していこうと思う。
学びまとめ
Webサイト（ページ）の構成要素
- HTML：Web ページ内の各要素の意味や文書構造を定義。
- CSS：レイアウトデザインや各要素の装飾（色・サイズなど）を定義。
- JavaScript / jQuery：動きを付けたり計算などの処理を行う。
Webページ開発ツール
Webページ開発には、テキストエディタとブラウザが必要。Windows標準にインストールされているメモ帳とEdgeでもWebページ開発が可能。
文字コード
日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがある。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用する。
ファイルのパス指定
ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法がある。
HTMLの基本構造
タグの構造
<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>
- 要素名
タグの種別を指定する。タグ名とも言う。要素の種類によって終了タグ（</要素名>）の有無が決定する。 - 属性
要素名に対して設定する属性名を指定する。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができる。 - 属性値
属性に対する値を指定する。一般的には、ダブルクォーテーション（”）で囲んで指定するが、シングルクォーテーション（’）で囲むことも可能。属性値がない時は、イコール（=）以降が省略される。複数の属性を指定する時は、スペースで区切って指定する。
<!DOCTYPE html>
<html lang=”ja”>
<head>
（文書の情報を記述）
</head>
<body>
（文書の本体を記述）
</body>
</html>
- !DOCTYPE 宣言（ドキュメントタイプ宣言）
ドキュメントタイプ宣言は、この文書のバージョンを宣言するメタ情報。HTML5 であれば<!DOCTYPE html>と記述する。 - html 要素（HTML の文書）
html 要素は、この文書が HTML の文書であることを表す。「lang=”ja”」の “ja” は日本語で書かれた文書であることを表す。 - head 要素（文書情報）
head 要素は、この文書のメタデータを記述する。例えば、<title>～</title>でその文書のタイトルを記述することができる。 - body 要素（文書本文）
body 要素は、この文書の本文を記述する。この body 要素で囲まれた領域が Web ページとして表示される。
doctype宣言について
HTML5におけるDOCTYPE宣言はあまり意味を持たないとされてるが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良い。DOCTYPE宣言が無いと、制作者の意図しないレイアウトになってしまう場合がある。
楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合がある。その場合やむを得ず、違う方法を使わなければならない場合があるので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておく。
見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はない。h2やh3などは大きな見出しとなることが多いためたくさん使われると思う。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はない。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができる。
画像の取り扱いについて
<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定する。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用される。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できる。
alt属性には、画像が利用できない環境向けのテキストを指定する。 HTML5ではalt属性は必須ではないが、指定しておけばアクセシビリティーが高まる。
Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズ。
コメント