Zenn
🐾

HTMLとCSSの基礎の学習

2024/03/24に公開
CSS
HTML
Flexbox
本
基礎
idea

概要

HTMLとCSSの基礎を改めて学ぼうと思い、以下の本を読みました。
備忘録も兼ねてまとめます。
Webサイト制作、HTMLとCSS初学者向けの内容となっています。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

本の構成と学べること

  • CHAPTER1~3
    Webの仕組み、HTMLの基本、CSSの基本

  • CHAPTER4~7
    CHAPTER1~3で学んだ基礎をふまえ、実際にコードを見ながら1つのWebサイトを制作

Webデザインについて

よいWebデザインとは

■ デザインの目的は相手に伝えること、デザインはあくまで「伝えるための手段」であり、「美しく装飾すること」ではない

  • 見栄えがかっこよくても何のサイトかパッと見てわからないサイトはユーザーに好まれない

■ ユーザーにとって使いやすいサイトであることが重要

  1. 色使いに注意する
    • 配色は長時間見ていても疲れない目に優しいものを選ぶ
  2. ユーザーが調べたい情報にすぐに辿り着ける
    • 使いやすい操作性にする、予想ができるようにする
    • 「ここをクリック」と書かれたボタンより「お申込み」と書かれたボタンの方がその先の動作を予想しやすい
  3. ターゲットに向けた工夫をする
    • 子供向けなら難しい漢字を使わない等

HTMLの基礎

HTMLファイルの骨組み

HTMLは以下の骨組みで構成されている

index.html
<!doctype html> <!-- Doctype宣言 -->
<html lang="ja"> <!-- HTML、日本語文書と示す -->
  <head> <!-- head部分、HTMLのページ情報を記述 -->
    <meta charset="UTF-8"> <!-- メタ要素、文字コードが UTF-8 -->
    <title>アサガオの観察</title> <!-- ページのタイトル -->
    <meta name="description" content="アサガオの観察日記、日々の成長を記録"> <!-- メタ要素、このページについての説明文 -->
  </head>

  <body> <!-- body部分、HTMLの本文部分 -->
    <h1>7月1日のアサガオ</h1>
    <p>花が咲きました。</p>
  </body>
</html>

よく使うHTMLタグ一覧

基本構造、head内

  • html
    HTML文書だということを表す。HTML文書において基点となる要素
  • head
    HTML文書のヘッダ部分。ブラウザには表示されない。この中に検索エンジンのための説明文やCSSファイルへのリンク、ページタイトルなどを記述する
  • meta
    言語や説明文など、ページの情報を記述
  • title
    ページタイトル。この部分がブラウザのタブやブックマークした時のページタイトルとして表示される
  • link
    参照する外部ファイル、主にCSSファイルを読み込む時に使う
  • body
    HTML文書のコンテンツ部分。この中に書かれたものがブラウザに表示される

コンテンツ内

  • h1~h6
    見出しを表示。数字の順に記述する。大見出しとなる <h1> は基本的には1つのページにつき一度の利用が良い
  • p
    文章の段落
  • img
    画像を表示。src属性で表示させたい画像を指定する
  • a
    リンクを貼る。リンク先はhref属性で指定する
  • ul
    番号のない箇条書きリスト
  • ol
    番号付き箇条書きリスト
  • li
    リストの各項目
  • br
    改行
  • strong
    強い重要性要素。一般的に太字で表示される
  • blockquote
    引用文
  • small
    著作権表示や法的表記
  • span
    意味をもたないインライン要素。CSSで一部分のみ装飾する時に使う
  • audio
    音声のデータを埋め込むために使用する
  • video
    動画のデータを埋め込むために使用する
  • script
    スクリプトデータを埋め込んだり参照する。通常JavaScriptのコードに使う

表

  • table
    表を示すタグ。表全体を囲む
  • tr
    表の1行を囲む
  • th
    表の見出しとなるセルを作成する
  • td
    表のデータとなるセルを作成する

フォーム

  • form
    フォームを作成する
  • <input type="text">
    １行テキスト入力欄
  • <input type="radio">
    ラジオボタン。選択項目のうち1つだけ選択可能
  • <input type="checkbox">
    チェックボックス。複数の項目を選択可能
  • <input type="submit">
    送信ボタン
  • select
    セレクトボックス
  • option
    セレクトボックス
  • textarea
    複数行テキスト入力欄
  • label
    フォームのラベル。フォームのパーツと項目の名前を関連付けられる

グループ分け用ブロック要素

  • header
    ページ上部にある要素。主にロゴやページタイトル、メインナビゲーションメニューを囲む
  • nav
    メインのナビゲーションメニュー
  • article
    ページ内の記事となる部分。そこだけを見ても独立したページとして成り立つような内容を囲む
  • section
    1つのテーマを持ったグループ
  • main
    ページのメインコンテンツ部分
  • aside
    本文ではない補足情報。メインコンテンツとは関連性が低い情報に使う
  • footer
    ページ下部にある要素。多くの場合コピーライトやSNSリンクなどを含んでいる
  • div
    意味を持たないブロック要素

CSSの基礎

CSSとは

Webサイトの土台であるHTMLの見た目を調整できる言語
CSSを適用させる方法は大きくわけて以下の3つ

CSSファイルを読み込んで適用させる

「.css」の拡張子がついたCSSファイルを作成し、それをHTMLファイルに読み込ませて適用させる
HTMLファイルの <head> 内に <link rel="stylesheet" href="style.css"> と指定することでCSSファイルに書かれた装飾を適用できる
Webサイトを制作する時はこの方法が最も一般的で、特別な理由がない限りはこの方法で適用させる
1つのファイルをCSSファイルを複数のHTMLファイルに読み込ませられるので、一括で管理ができる

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>アサガオの観察</title>
    <meta name="description" content="アサガオの観察日記、日々の成長を記録">
    <link rel="stylesheet" href="style.css"> <!-- ここに指定 -->
  </head>

  <body>
    <h1>7月1日のアサガオ</h1>
    <p>花が咲きました。</p>
  </body>
</html>

HTMLファイルの<head>内に<style>タグで指定する

HTMLファイルの <head> 内に <style> タグで囲み、CSSを書き込むことで適用させる
CSSを記述したHTMLファイルでのみ適用され、CSSファイル読み込みでの適用方法と違い他のHTMLファイルには反映されない
特定ページのみデザインを変えたいという時に使える

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>アサガオの観察</title>
    <meta name="description" content="アサガオの観察日記、日々の成長を記録">
    <style>
      /* ここにCSSを書く */
      h1 { color: #f00; }
      p { font-size: 18px; }
    </style>
  </head>

  <body>
    <h1>7月1日のアサガオ</h1>
    <p>花が咲きました。</p>
  </body>
</html>

HTMLタグの中にstyle属性を指定する

HTMLタグにstyle属性を使って直接CSSを書き込み適用させる
1つ1つのタグに指定するので手間がかかり、メンテナンスも難しい
ただ、他の方法で指定するよりCSSを適用させる優先順位が高く、CSSを上書きしたい時や一部のデザインだけ変更したいといった時に使える

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>アサガオの観察</title>
    <meta name="description" content="アサガオの観察日記、日々の成長を記録">
  </head>

  <body>
    <h1 style="color: #f00;">7月1日のアサガオ</h1> <!-- それぞれのタグに書き込む -->
    <p style="font-size: 18px;">花が咲きました。</p> <!-- それぞれのタグに書き込む -->
  </body>
</html>

文字コードの指定

CSSファイルの1行目には「@charset "UTF-8";」を書く。これはコードの文字化けを防ぐためのもので、これより先にCSSのコードを書いてしまうとエラーになるため必ず先頭に書く

CSSの書き方

「セレクター { プロパティ: 値;}」のように記載する
それぞれがどのような役割を持つかは以下の通り

  • セレクター
    どの部分を装飾するかの指定をする
    HTMLのタグの名前や、クラス、IDと呼ばれる特定の変更箇所を書く
  • プロパティ
    セレクターで指定された部分の何を変えるのかを書く
    例えば文字色を変える、文字サイズを変える等
  • 値
    見た目をどのように変えるのかを書く
    例えば文字色を変えるなら「何色に変えるか」を具体的に指定する

例えばセレクター「h1」に、文字色のプロパティ「color」、値を「red」と指定する場合は以下となる

h1 { color: red; }

CSSを書く時のルール

style.css
/* 複数のセレクターに同じ装飾を指定 */
h1, p { color: red; }

/* 1つのセレクターに複数の装飾を指定する */
h1 { color:red; font-size:20px; }

/* 要素の中の要素に指定する
   以下の場合は<div>タグで囲まれた<p>タグのみに装飾が適用される */
div p {color: red; }

レイアウトを組む

レイアウトは、掲載する様々なコンテンツをユーザーが使いやすいようにWebページ上のどこに、どう配置するか設計すること
代表的なものは「Flexbox」と「CSSグリッド」

Flexboxで横並びにする

以前は float プロパティでレイアウトを組むことが多かったが現在では Flexbox が主流

  • Flexboxの使い方
    以下のレイアウトを横並びにする
    HTMLは親要素の「container」というクラスのついた <div> タグの中に、子要素である「item」というクラスのついた <div> タグが入っている
    この場合 item は縦に並ぶ

CSSに親要素である「.container」に対して「display: flex;」を追加する
子要素の item が横並びになる

  • 子要素の並ぶ向きを指定する「flex-direction」プロパティ
    「.container」に指定することで反映される
    • flex-direction: row;
      初期値。子要素を左から右に配置
    • flex-direction: row-reverse;
      子要素を右から左に配置
    • flex-direction: column;
      初期値。子要素を上から下に配置
    • flex-direction: column-reverse;
      初期値。子要素を下から上に配置
       
  • 子要素の折り返しを指定する「flex-wrap」プロパティ
    「.container」に指定することで反映される
    • flex-wrap: nowrap;
      初期値。子要素を折り返しせず、1行に並べる
    • flex-wrap: wrap;
      子要素を折り返し、複数行に上から下へ並べる
    • flex-wrap: wrap-reverse;
      子要素を折り返し、複数行に下から上へ並べる
       
  • 水平方向の揃え「justify-content」プロパティ
    「.container」に指定することで反映される
    • justify-content: flex-start;
      初期値。行の開始位置から配置。左揃え
    • justify-content: flex-end;
      行末から配置。右揃え
    • justify-content: center;
      中央揃え
    • justify-content: space-between;
      最初と最後の子要素を両端に配置し、残りの要素は均等に間隔を空けて配置
    • justify-content: space-around;
      両端の子要素も含め、均等に間隔を空けて配置
       
  • 垂直方向の揃え「align-items」プロパティ
    「.container」に指定することで反映される
    • align-items: stretch;
      初期値。親要素の高さ、またはコンテンツの一番多い子要素の高さに合わせて広げて配置
    • align-items: flex-start;
      親要素の開始位置から配置。上揃え
    • align-items: flex-end;
      親要素の終点から配置。下揃え
    • align-items: center;
      中央揃え
    • align-items: space-around;
      ベースラインで揃える

CSSグリッドでタイル型に並べる

タイル型レイアウトとは、壁にタイルを敷き詰めるように同じ大きさのボックスを等しい感覚で並べていくレイアウト
CSSに親要素である「.container」に対して「display: grid;」を追加する
ただこの時点ではグリッドアイテムは縦に並んでいる状態

  • グリッドアイテム（子要素）の横幅「grid-template-columns」プロパティ
    grid-template-columns プロパティで各グリッドアイテムの幅を指定することで横並びにできる
    1列に3つのグリッドアイテムを各200pxずつ並べる場合は「200px 200px 200px」と指定する
    ※高さを指定する場合は「grid-template-rows」プロパティを使用する
  • グリッドアイテム（子要素）同士の余白「gap」プロパティ
    gap プロパティで余白の値を指定すると、グリッドアイテム同士の間に指定した幅の余白がつく

デフォルトCSSをリセットする

ChromeやSafari、Edgeなど、それぞれのブラウザはデフォルトで独自のCSSが適用されているため、CSSの指定に差が出てしまう
リセットCSSを使うことで、ブラウザが本来適用させているCSSを打ち消し、異なるブラウザで見ても表示を統一することができる
リセットCSSは自分で作成することはできるが書く量も多く難しいため、外部のWebサイトで公開されているCSSファイルを利用するとよい
2024年3月現在有名なのは destyle.css や ress.css

HTMLへの書き込み方

HTMLファイルの「head」部分に読み込ませる
その際、最初にリセットCSSを書き、その下に自作のCSSファイルを書くようにする

index.html
<head>
  <meta charset="UTF-8">
  <title>アサガオの観察</title>
  <!-- 読み込ませるリセットCSSを先に書く -->
  <link rel="stylesheet" href="使いたいリセットCSSのURL">
  <!-- 自作のCSSは下に書く -->
  <link rel="stylesheet" href="style.css">
</head>

よく使うCSSプロパティ一覧

文字や文章の装飾

  • font-size
    文字サイズを指定
  • font-family
    フォントの種類を指定
  • font-weight
    文字の太さを指定
  • line-height
    行の高さを指定
  • text-align
    テキストを揃える位置を指定
  • text-decotation
    テキストに下線や打ち消し線などの飾りを指定
  • letter-spacing
    文字の間隔を指定
  • color
    文字に色をつける
  • font
    フォントに関するプロパティをまとめて指定

背景の装飾

  • background-color
    背景色を指定
  • background-image
    背景画像を指定
  • background-repeat
    背景画像の繰り返し表示の仕方を指定
  • background-size
    背景画像の大きさを指定
  • background-position
    背景画像を表示する位置を指定
  • background
    背景関連のプロパティをまとめて指定

幅と高さ

  • width
    幅を指定
  • height
    高さを指定

余白

  • margin
    要素の外側の余白。半角スペースで区切って上・右・下・左（時計回り）の順で指定
    • margin-top
      要素の外側・上部分の余白
    • margin-bottom
      要素の外側・下部分の余白
    • margin-left
      要素の外側・左部分の余白
    • margin-right
      要素の外側・右部分の余白
  • padding
    要素の内側の余白。半角スペースで区切って上・右・下・左（時計回り）の順で指定
    • padding-top
      要素の内側・上部分の余白
    • padding-bottom
      要素の内側・下部分の余白
    • padding-left
      要素の内側・左部分の余白
    • padding-right
      要素の内側・右部分の余白

※指定した値の個数により適用される方向は以下の通り

  • 1つの値を指定した場合は全て
  • 2つの値を指定した場合は前から上下・左右
  • 3つの値を指定した場合は前から上・左右・下
  • 4つの値を指定した場合は前から上・右・下・左

線

  • border-width
    線の太さを指定
  • border-style
    線の種類を指定
  • border-color
    線の色を指定
  • border
    線の色・スタイル・線の太さをまとめて指定
    • border-top
      要素上部の線の色・スタイル・線の太さをまとめて指定
    • border-bottom
      要素下部の線の色・スタイル・線の太さをまとめて指定
    • border-left
      要素左の線の色・スタイル・線の太さをまとめて指定
    • border-right
      要素右の線の色・スタイル・線の太さをまとめて指定

リスト

  • list-style-type
    リストマーカーの種類を指定
  • list-style-position
    リストマーカーの表示位置を指定
  • list-style-image
    リストマーカーに使う画像を指定
  • list-style
    リストマーカーの種類・位置・画像をまとめて指定

レイアウト組み（Flexbox）

  • display
    Flexbox を使って子要素を並べる。値は flex
  • flex-direction
    子要素の並ぶ向きを指定
  • flex-wrap
    子要素の折り返し方法を指定
  • justify-content
    水平方向の揃えを指定
  • align-items
    垂直方向の揃えを指定
  • align-content
    複数行にした時の揃えを指定

レイアウト組み（CSSグリッド）

  • display
    CSSグリッドを使って子要素を並べる。値は grid
  • grid-template-columns
    子要素の幅を指定
  • grid-template-rows
    子要素の高さを指定
  • grid-gap
    子要素同士の余白を指定

まとめ

HTMLとCSSの基礎からしっかりと教えてくれます。
イラスト（画面のイメージ）も多くとてもわかりやすく学べる本でした。
デザインやレイアウトの考え方も教えてくれます。

Discussion