新人SEの学習記録

14年度入社SEの学習記録用に始めたブログです。気づけば社会人3年目に突入。

学習記録:Web開発

[学習記録] Web開発

内容 フロントエンド開発フィールドガイド

5章:マークアップクイックレシピ
  • HTML5で簡素化を図る
    • DOCTYPE
<!DOCTYPE html>
      • DTDへの参照が不要に
      • DOCTYPEが大文字なのはXHTMLの名残。HTML5では小文字でも問題はない
      • ただしファイルの最初の行に記述する必要
    • ルート要素
<html lang="ja">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
      • type="text/javascript"はデフォルトなので省略可
  • コンテンツモデル
    • HTML要素にどのようなコンテンツを含めても良いか定義したもの
    • 例)ul要素には直下にli要素以外を含めてはいけない(正解には0個以上のli要素)
    • 全て覚えるのは大変なのでその都度調べるくらいで良い
    • カテゴリ:コンテンツモデルにおける分類
      • メタデータコンテンツ:title, meta, scriptなど
      • フローコンテンツ:多くの要素はこの分類。article, div, b, hr, label, p, pre, span, select, table, input...
      • セクショニングコンテンツ:article, aside, nav, secion
      • ヘッディングコンテンツ:h1〜h6
      • フレージングコンテンツ:テキストとテキストの文節・語句などの要素。b, br, img, inputなど
      • 埋め込みコンテンツ:audio, canvas, img, object, videoなど
      • インタラクティブコンテンツ:a, button, keygen, label, select, textareaなど
  • セクションとアウトライン
    • HTML5以前では、見出し要素(h1〜h6)をセクションの始まりとみなす暗黙的なセクショニング
    • HTML5では、セクショニング要素を用いた明示的なセクショニングが可能に
<section>
  <h1>朱鷺</h1>
  <p>このセクションでは、朱鷺について説明します。</p>
  <section>
    <h1>概要</h1>
    <p>朱鷺は、、、、</p>
  </section>
  <section>
    <h1>生態</h1>
    <p>朱鷺の生態は、、、、</p>
  </section>
</section>
      • 暗黙的なセクショニングでは、概要・生態はh2で囲む必要
      • 明示的なセクショニングでは、h1を汎用的な見出しとして使用可能
    • nav:主要なナビゲーションを表すセクション。
    • article:自己完結したセクション。ニュース記事やブログコメントなどのように、単独で再配布できるコンテンツ。
    • aside:メインコンテンツと関連性の薄いセクション。広告や補足記事など。
    • section:汎用的なセクション。nav, article, asideのいずれにも該当しないコンテンツ。
  • 広く取り入れられているコーティングスタイル
    • タグ名は小文字を使用する
      • 大文字は入力が手間な上、補完やハイライトが機能しないエディタがあるため
      • DOCTYPEだけは大文字でも良い
    • 対になったタグは閉じる
    • 属性値はダブルクォーテーションで囲む
    • Boolean属性(requiredなど)は常に省略する
    • imgタグにはwidthとheightを明示する
      • widthとheightが省略されたimg要素は、画像の読み込みが完了するまで自身のサイズを確定できない
    • src, href属性に空指定しない
      • 一部の古いブラウザは、空指定でもHTTPリクエストを発行してしまうため
    • スタイルシートは対象タグよりも前に記述する
      • head内での記述が一般的
    • スクリプトはbodyタグ内の一番下に記述する