Zenn
Open15

HTML・CSS 学習備忘録

CSS
HTML
おつまみおつまみ

#見出し [ h1~h6 ]

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

#段落 (paragraph) [ p ]

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

#改行 [ br ]

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

#画像の挿入 [ img ]

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

#強調 [ strong ]

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

#太字 [ b ]

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

#リスト [ ul, ol, li ]

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

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

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

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

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

#[ div, span ]

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

#コメント [ !-- -- ]

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

#ハイパーリンク[ a ]

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

#絶対パス、相対パス

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