【FJORD】HTMLの基本
本日はHTMLの練習…ではなく、お勉強です(^^)/
目次
１．HTMLとは
HTMLの学習は少しずつ進めているので、既に他の記事にも登場していますが、改めてHTMLについてお勉強🖊
HTMLは HyperText Markup Language の略で、Webページに文字や画像を入れたりして、見た目を作っている言語です。
IT用語ってアルファベットが多いので、何の略なのか調べてみると少し理解が深まる気がしますね！
HTMLとセットで使われるCSS（Cascading Style Sheets）というものもありますが、HTMLが構造を作って、CSSが構造に対して装飾をする、といったイメージですね。
２．HTMLの基本タグ
HTMLで使う基本のタグをまとめました。
| タグ | 意味 | 備考 |
|---|---|---|
| head | HTMLに関する情報 | |
| body | Webページ上に現れる本文 | |
| title | ページのタイトル | head要素の中に記載 |
| h1,h2,... | 見出し１、見出し２、… | |
| p | 段落(paragraph) | |
| li | リスト項目(List Item) | ul や ol の中で使う |
| ul | 列挙型リスト(Unorderd List) | |
| ol | 順序型リスト(Orderd List) | |
| dl | 定義型リスト(Definition List) | dt要素で定義されるものを記載 dd要素で定義を記載 |
| a | アンカー(Anchor) | href="URL"でURLにリンク |
| em , strong | 強調(Emphasis) | 強調方法はブラウザによる |
| img | 画像(Image) | src="URL"で画像表示 alt="text"で代替テキスト 終了タグは不要 |
| address | 作者情報 | |
| sup | 上付き文字(Superscript) | |
| sub | 下付き文字(Subscript) | |
| blockquote | 引用 | ブロックレベル要素 |
| q | 引用(Quotation) | インライン要素 |
| cite | 引用元 | blockquote の中で使う |
| div | ブロック化(Division) | ブロックレベル要素 |
| span | ブロック化 | インライン要素 |
| table | 表 | th要素が「項目のタイトル」 tr要素が「行」 td要素が「セル」 |
| caption | 図表のキャプション | |
| form | フォーム作成 | action属性で受け取るプログラムを指定 method属性でデータの送信方法を指定 |
| input | 短い文字列の入力フィールド作成 | value属性で初期値を指定できる 終了タグは不要 |
| textarea | 長い文章用の入力フィールド作成 |
３．CSSの基本プロパティ
HTMLに色をつけたりサイズを指定したりするスタイルシートとして、CSSの基本プロパティをおさらいしました！
| プロパティ | 意味 | 記載例 |
|---|---|---|
| font-size | フォントサイズ | small, 1.3em, 12pt など |
| font-weight | 文字の太さ | normal, bold など |
| font-style | 斜体文字 | normal, italic など |
| text-decolation | 文字装飾 | underline, blink など |
| line-height | 行間 | normal, 2 など |
| letter-spacing | 文字間隔 | normal, 0.5em など |
| text-align | 文字位置 | center, left など |
| text-indent | 行頭インデント | 1em など |
| color | 文字色 | red, #fff, rgba( 略 ) など |
| background-color | 背景色 | 文字色同様または transparent |
| background-image | 背景画像 | none, url( 略 )など |
| border-width | 枠線太さ | thin, 1px など |
| border-style | 枠線スタイル | solid, dotted など |
| padding | 要素から枠線までの距離 | 1em, 20pt など 上下左右個別に指定できる |
| margin | 枠線から外の余白長さ | padding と同様 |
| width | 幅 | 50%, 100px など |
| height | 高さ | width と同様 |
| float | 浮動化 | left, right |
| z-index | 重ね合わせの順序 | 10, 1 など |
４．アクセシビリティ
今や公共施設や店舗などでは当たり前になっている「バリアフリー」や「ユニバーサルデザイン」ですが、Webにおいても同様で、誰でも利用できる／難しくないなどといったことが重要視されています。
W3C Web Accessibility Initiative という、Webのアクセシビリティの向上を目的としている団体があり、そこがアクセシビリティの指針を出しています。
www.w3.org
沢山の項目がありますが、文字を大きくしたり、音声で読み上げることができたり、背景色に対して文字がはっきりしていることなどが謳われています。
アクセシビリティを無視して、ギラギラでリンクもめちゃくちゃなWebページを作ってしまったら、コンテンツが良くても誰も見てくれないですよね😖
