2025.12.11 学習記録 ～HTML/CSS②～

2025年12月11日 最終更新日時 : 2026年2月18日 Kumiko Okawara

用語

  • HTML（ハイパーテキスト・マークアップ・ランゲージ）
    Web ページ内の各要素の意味や文書構造。
    googleやYahoo！の検索エンジンに対して、「このサイトは何を記述してある」という事をマークアップする言語。
  • ハイパーテキスト
    Web ページから別の Web ページへのリンクを作成したり画像、動画、音声などの埋め込みを行います。
  • マークアップ
    文章の各要素が、どんな役割（見出し・段落・表・リストなど）を持っているかの目印を付けます。
  • CSS（カスケーディング・スタイル・シート）
    Web ページのレイアウトデザインや各要素の装飾（色・サイズ・レイアウトなど）。
    見た目を作る為の言語。紙に筆で絵を描くように、CSSというプログラム言語を利用してWebサイトを描く。
  • JavaScript
    Web ページに動きを付けたり計算などの処理を行うプログラミング言語。
  • jQuery
    JavaScript を容易に記述できるようにしたJavaScriptライブラリ。
  • シフトJIS/SHIFT-JIS/SJIS（charset="Shift_JIS"）
    PC（Windows）で広く使われている文字コード体系。英数カナ文字は 1 バイトで表現し、それ以外の文字は 2 バイトで表現する。
    文字の種類が少ないため現在は主流ではない。
  •  EUC（charset="EUC-JP"）
    サーバー用OSである UNIX で広く使われている文字コード体系。
    英数カナ文字は 1 バイトで表現し、それ以外の文字は 2 バイトで表現する。
    英数とカナとそれ以外の文字を切り替えるためにコード体系の切り替えコードが挿入される。
  • UTF-8（UTF-8 BOM 有り）（charset="UTF-8"）
    インターネットの世界で広く使われている文字コード体系で、ファイルの先頭に文字コード体系を示す BOM（Byte Order Mark/16進数で「EF BB BF」）が挿入されている。
    英数は 1 バイトで表現し、それ以外は 2～6 バイトで表現する。日本語の文字は基本的に 3 バイトで表現される。
  • UTF-8（UTF-8 BOM 無し）（charset="UTF-8"）
    UTF-8 BOM 有りと同じコード体系だが、UTF-8 BOM 無しは BOM が格納されてなく実際に格納されている文字コードを見て判断する。
    現在のこちらが主流。
  • 絶対パス
    http や https から始まるパス指定であり、どこから指定しても同じ、一意のパス。
  • 相対パス
    自己ファイル格納位置からの相対位置で指定するパス。

Webサイト（ページ）作成の流れ

  1. 依頼を頂く
  2. ご提案（企画をまとめる）
    ・企画書（企画案）
    ・サイトマップ
    ・見積り
    ※場合のよっては「ワイヤーフレーム」の用意が必要な場合もある。
  3. 制作依頼を受諾し制作スタート
  4. デザインに必要な素材の作成
    ・ロゴ
    ・ピクトグラム
    ・アクセスマップ
    ・写真（加工・撮影・収集）
    ・原稿
    ・その他（SNSやjQueryの動きの素材等々…）
  5. デザインラフの作成
    ※必要に応じて「PCのデザイン」だけでなく「スマホ・タブレット」の素材も用意
  6. コーディング

コーディングの手順

１.【素材の確認】

・ロゴ
・ピクトグラム
・写真
・原稿
・その他（SNSやjQueryの動きの素材等々…）

２.【マークアップ】

  1. 「!doctypehtml」「html」「head」「body」等骨組みのタグを整える。
  2. 「h1～h6」「p」「ul,li」「img」「a」等の基本タグで「原稿」と「画像」をマークアップする。
  3. 「header」「nav」「main」「section 」「footer」等のセクションの部分をマークアップする。
  4. デザインに合わせて「div」や「span」を追加して「id=""」「class=""」を付けていく。
  5. 検証ツールを上手く利用する。
    （http://www.htmllint.net/html-lint/htmllint.html）

３.【CSSでデザインをする】

リセットCSSの設定
CSSを上手くコントロールするためにリセットCSSを設定しておく。

セレクタ（selector）の記述を先に行う
例：#header headerh1{}
　　点数計算とセレクタの記述ルールに気を付ける。
※リテイク（変更・修正）に強いコードを意識して、「後から使うかも…」のセレクタまで記述しておくと良い。

プロパティを書いていく
デザインの上から作成していくことがコツ。
※セレクタをマークアップと同じ上から書くことによって間違い探しがラクになる。

スマーフォン対応「メディアクエリ」を足していく。
デベロッパーツールのシュミレーターなどを使って、実機検証を行う。

SNSやjQueryの埋め込みは最後に行うのがコツ
※サーバーにUPしないと動かないものもあるため、最後に行う。

４.【サーバにテストアップ】

リンク切れや画像の確認・ブラウザやデバイス確認をする。

５.【納品】

納品後も運営というサポートがあるため、準備をしておくこと。

HTMLの基本構造について

タグの構造

<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>

（例）
<p class=”hello”>こんにちは</p>

  • 要素名
    タグの種別を指定する。タグ名。
    要素の種類によって終了タグ（</要素名>）の有無が決まる。
  • 属性
    要素名に対して設定する属性名を指定する。
    属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定することができる。
  • 属性値
    属性に対する値を指定する。
    一般的には、ダブルクォーテーション（”）で囲んで指定する。シングルクォーテーション（’）で囲むことも可能。
    属性値がない時はイコール（=）以降が省略される。
    複数の属性を指定する時は、スペースで区切って指定する。

HTMLの基本構造

<!DOCTYPE html>
<html lang=”ja”>
<head>
　　（文書の情報を記述）
</head>
<body>
　　（文書の本体を記述）
</body>
</html>

  • !DOCTYPE 宣言（ドキュメントタイプ宣言）
    この文書のバージョンを宣言するメタ情報。
    HTML5 であれば<!DOCTYPE html>と記述する。
  • html 要素（HTML の文書）
    この文書が HTML の文書であることを表す。
    「lang=”ja”」の “ja” は日本語で書かれた文書であることを表します。
  • head 要素（文書情報）
    この文書のメタデータを記述する。
    <title>～</title>でその文書のタイトルを記述することができる。
  • body 要素（文書本文）
    この文書の本文を記述する。
    この body 要素で囲まれた領域が Web ページとして表示される。

doctype宣言

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となる。

互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまうリスクがある。

文書の先頭に <!DOCTYPE html> と記述することで標準モードにすることができる。

主要なHTML言語一覧

head 要素（文書情報）

  • title 要素（ページタイトル）
  • meta 要素（文字コード指定／charset）
  • meta 要素（ページの説明文／description）
  • meta 要素（ビューポート／viewport）
  • link要素（外部 ファイルとの紐付け）

body 要素（文書本文）

  • 構造化タグ
  • コンテンツのグループ化タグ
  • テキストの意味
  • コンテンツの埋め込み
  • テーブル
  • フォーム

構造化タグ

  • article 要素（アーティクル）
  • section 要素（セクション）
  • nav 要素（ナビ）
  • aside 要素（アサイド）
  • h1～h6 要素（見出し）
  • header 要素（ヘッダー）
  • footer 要素（フッター）

コンテンツのグループ化タグ

  • p 要素（段落（パラグラフ））
  • ol/li 要素（順序のあるリスト）
  • ul/li 要素（順序のないリスト）
  • dl/dt/dd 要素（定義・説明リスト）
  • main 要素（メインコンテンツ）
  • div 要素（ひとつのかたまりの範囲）

テキストの意味

  • a 要素（ハイパーリンク）
  • em 要素（強調）
  • strong 要素（重要情報）
  • small 要素（免責・警告・著作権など）
  • i 要素（慣用句・特定用語）
  • b 要素（太字）
  • span 要素（特定の範囲をグループ化）
  • br 要素（改行）

コンテンツの埋め込み

  • img 要素（画像）
  • iframe 要素（インラインフレーム）

備考・メモ

HTML・CSSのメモ書きサイト
https://samplesdl.me/training_html-css/

バックアップを取る際は、修正したファイルのみではなくフォルダごと全てまとめた状態でバックアップを取る！

HTML内に<!--コメント-->で注釈やコメントを残すことができる。

WEBページ作成に必要なもの

  • エディタ
    Windows：TeraPad、サクラエディタ、Visual Studio Code/VS Code
    Mac：テキストエディット、mi、Visual Studio Code/VS Code
  • ブラウザ
    Windows：Chrome、Edge
    Mac：Chrome、Safari
  • FTPツール
    Windows：FFFTP、FileZilla
    Mac：Cyberduck、FileZilla

その他資料・リンク

カテゴリー
オンライン
タグ

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事
2025.12.10 学習記録 ～HTML/CSS①～
2025年12月10日
次の記事
2025.12.13 学習記録 ～HTML/CSS③～
2025年12月13日