HTML・CSS 個人用備忘録(vol.1)

公開するほどの内容ではないですが、誰かの参考になればいいなという思いも込めて公開しています。
また、個人用備忘録ですが間違いなどがあればご指摘いただけると非常に助かります。

HTML備忘録

見出し [ h1~h6 ]

• それぞれの見出しの大きさに対してh1～h6まで割り当てることができる。
• h1が一番大きな見出しとなる。

罫線 - 水平 [ hr ]

• 画面に水平線を描く

段落 (paragraph) [ p ]

• 文章の段落。節という意味。
• 閉じタグ</p>を記述すると改行される。

改行 [ br ]

• テキストエディタでは改行されていても、実際のブラウザ上で表示される際には改行は反映されていないので改行を行いたい箇所にbrタグを記述する。

画像の挿入 [ img ]

• 画像のファイル名を指定しページ内に画像を挿入できる。
  この時、[ src ]属性は必須で記述すること。(URIを指定)
  • [ alt ]属性
    • 画像の説明を設定できる。
    • 代替えテキストとして活用される。
    • 検索エンジンはalt属性の内容を検索する。
  • [ title ]属性
    • 画像に対しての補足説明を設定できる。
    • 画像上にマウスカーソルをのせると設定した補足説明が表示される。
  • [ width ]属性
    • 画像の幅方向のサイズを指定できる。
  • [ height ]属性
    • 画像の高さ方向のサイズを指定できる。

強調 [ strong ]

• 文字を強調してくれるタグ。
• 論理的に強調されるので一般的にSEO対策として用いる。
• [ b ]タグと同様に、見かけ上文字が太く表示され同じに見えるが、用途が違うので注意。

太字 [ b ]

• 文字を太字で表示してくれるタグ。
• 見かけ上のみという理由で太字にしたい場合に用いる。
• [ strong ]タグと同様に、見かけ上文字が太く表示され同じに見えるが、用途が違うので注意。

リスト [ ul, ol, li ]

• ol = 番号付きリスト
• ul = 箇条書きリスト
• li = [ ol ][ ul ]の閉じタグの間に[ li ]を記述する。
  ※この状態をliはol,ulにネスト(入れ子)されているという。

テーブル [ table, tr, th, td ]

• table = テーブルを生成します。
• tr = テーブル内に行を生成します。
• th = [ tr ]にネストする形で記述する。
  
  • [ tr ]生成した行内に列(ヘッダー)を生成し、内容を記述できる。
  • ヘッダーの内容は太字で表示されます。
• td = テーブル、行内にセルを生成し内容を記述できる。

HTML基本構造 [ html, head, body ]

• html = htmlを書きますよという宣言
• head = htmlの設定情報を書き込む
  [ meta, title, link etc... ]
• body = htmlの内容を書き込む

[ meta, title, link ]

• [ head ]タグ内に記載するタグ。
  • meta= webページのメタ情報(付帯情報)を記述する。
    • <meta charset="..."> = 文字コードを設定する。
    • <meta name="description" content="..."> = 該当文の説明を設定する。
      • 検索画面でタイトルの下部に表示される文章となる。
      • 文字数の目安はPC向けWebサイトの場合：全角120字以内、スマホ向けWebサイトの場合：全角50字以内。
    • <meta name="keyword" content="..."> = 該当文のキーワードを設定する。
  • title = ブラウザのツールバーに表示するタイトルの設定を行う。
  • link = 様々なリソースと結びつける設定を行う。

[ div, span ]

• div, span共に1つの固まりを設定するためのタグ。
• htmlのみでは区別がつきにくいが、CSSを記述する際に大きく役割が異なる。
  • div = ブロック要素として用いる。
    複数の要素を入れた箱を設定するイメージ。
  • span = インライン要素として用いる。
    特定の要素に役割を設定するイメージ。

コメント [ !-- -- ]

• ソースの可読性を上げるために要所に用いる。

ハイパーリンク[ a ]

• 設定したページにクリックすることで移動が可能となる。
  ※https://www.Google.com/
  　./sample/index2.html など。
• [ target ]属性でクリック時に新規タブで開く設定が可能
  ※セキュリティの面で注意が必要。
  　解決策としてはリンク先にリンク元の情報を送られないようにする設定を行う。
  • (rel="noopener noreferrer")
• [ href ]属性の値を"#"とすることで、どこのページにも飛ばない設定となる。

絶対パス、相対パス

• 絶対パス
  • ディレクトリ(フォルダ)階層の一番上から目的のファイルまでの道筋を指定する。
  • https: から目的の場所までの道筋を指定する。
• 相対パス
  　現在のディレクトリ(フォルダ)位置から目的のファイルへの道筋を記述して指定する。