HTML02
HTMLは文章構造
- webサイトのデザインはまず文章構造の設定から。
- あとから手直ししようとすると全体を作り直すことになる。
- 仕事の現場では、クライアントからの原稿をweb用に組み直すことも必要。
- HTML5の一番の意義は、それまでのバージョンであいまいだったアウトライン構造(見出しの設定)を統一し、安定した運用ができるようになったこと。
firefoxアドオンの入手
- ブラウザ左上→アドオンから。
- 「HTML Validator」ソース表示でHTML記述のエラー確認。
- 「Web Developer」ツールバーからCSSの確認。
- 自宅用もぜひ。
タグ(文章構造)
- h1は繰り返し使えることにはなっているが、h2h3と変える。
- ul=unordered list 過去分詞形のed付きで。
- ol=ordered list
- dl=definition list(definition=定義)
- dt=definition term(term=用語)
- dd=definition description(description=記述)
- dlは更新情報などの記述で使える。
- 文字の手直し程度は更新情報に載せない。
- 「ニュースリリース」は株主向け情報。個人商店では使わない。
- web閲覧者は情報を選んで見るので、箇条書きは重要。
- ulをネストするならdlを。
タグ(テーブル)
- tr=table rowで行を設定し、その中をtdで区切る。
- tableでborderを設定すると、tableの枠への指定がセルの枠にも継承される。
- セルを縦に結合するtd属性のrowspanは、行と行をまたがってつなぐから縦。
- セルを横に結合するtd属性のcolspanは、列と列をまたがってつなぐから横。
- tableはHTMLで使うケースは減ったが、PHPなどでこのやり方が必要となる。
タグ(リンク)
- メールリンクを使うなら盗まれてもいいアドレスで。
- a href="#"練習などでリンク先を設定しない場合はハッシュタグを使う(=ヌルリンク)。リンク先を探しに行かない。
- aをpで挟む。pブロックレベル要素の中にaインライン要素。
- img属性でwidthとhightを適切に指定することで、データが重い場合に表示を早くすることができる。ブラウザで表示する際に、先に画像領域を確保してから画像を当てはめるため。画像のサイズはプロパティで確認する。
- target="_blank"新しいウィンドーを開くと音声読み上げ機能利用者には不便だったが、最近のブラウザは新しいタブを開くため解消された。
タグ(その他)
- summaryは音声読み上げ機能で何のテーブルか示すもの。いちいち項目を読み上げなくても、判断できるよう。
- addressは(c)につける慣習があったが、HTML5ではルール違反。
- 普段から文章見たらマークアップのイメージトレーニングを。
- 仕事で使うHTMLタグは以上。