Sekine Hisako Portforio

デ　ジ　タ　ル　弱　者　を　減　ら　し　た　い

, ,

HTML/CSS基礎①

学科【オンライン】2025.9.18

授業内容

  • Webサイト制作の手順について
  • Webサイト制作時の事前準備について
  • HTMLの基本構造について
  • 文章情報と文書本文について
  • 本日の講義のまとめ

習得内容

  • Webサイト制作の手順について

■Webサイト制作の流れ

  1. 依頼をいただく‥‥打合せ
  2. 提案‥‥企画書、サイトマップ、見積もり　
  3. 受諾
  4. デザインに必要な素材の作成‥‥ロゴ、ピクトグラム、アクセスマップ、写真、原稿など
  5. デザインラフの作成‥‥スマホ、タブレットの素材も作成
  6. コーディング
    (1)素材の確認‥‥ロゴ、ピクトグラム、アクセスマップ、写真、原稿など
    (2)マークアップ
    (3)CSSでデザインをする
    (4)サーバにテストアップ
    (5)納品

■コーディングについて

▢HTMLとは
HTML（HyperText Markup Langage）は、googleやYahoo！の検索エンジンに対して、「このサイトは何を記述してある」という事をマークアップする為の言語。
Web ページ内の各要素の意味や文書構造を定義。
サイト画面右クリック→「ページのソースを表示」を選択で確認できる

▢CSSとは
CSS（Cascading Style Sheets）は、見た目を作る為の言語。紙に筆で絵を描くように、CSSというプログラム言語を利用して、Webサイトを描く。
レイアウトデザインや各要素の装飾（色・サイズなど）を定義。
CSSの指示をしていないと文字の羅列だけになる。
サイト画面右クリック→「検証」を選択で確認できる

▢JavaScript / jQueryとは
動きを付けたり計算などの処理を行う。

▢覚えるコツ

  • 整理整頓
  • 「概要」を理解
  • メモ書きのサイトを自分で用意する
  • Webサイト制作時の事前準備について

■マークアップ・HTMLファイルの作成
①「!doctype html」「html」「head」「body」等骨組みのタグを整える
②「h1～h6」（見出し）「p」「br」（改行）「ul,li」（リストタグ）「img」（画像はりつけ）「a」（リンク
　のはりつけ）等の基本タグで「原稿」と「画像」をマークアップ
③「header」（画面最上位表示）「nav」（ナビゲーション）「main」（中身、本文）「section 」（文書の章
　や節）「footer」（サイト全体またはセクションごとの締めくくり）等のセクションの部分をマークアップ
④デザインに合わせて「div」（要素を一括りにするという役割）「span」（囲んだ要素を強調する）
　を追加して「id=””」「class=””」を付けていく
⑤検証ツールを上手く使う。◆参考サイト http://www.htmllint.net/html-lint/htmllint.html

■CSSでデザインをする

▢CSSの記述

  1. リセットCSSの設定
    CSSを上手くコントロールするためにリセットCSSを設定する。またリセットCSSは育てていく。
  2. セレクタ（selector）の記述を先にする。
    例：#header header h1{} 点数計算とセレクタの記述ルールに気を付ける。
    参考サイト　https://samplesdl.me/training_html-css/sample-selector.html
  3. プロパティを書く。
    コツはデザインの上から作成する。
    セレクタをマークアップと同じ上から書くことによって間違い探しがラクになる。
  4. スマーフォン対応「メディアクエリ」を足していく
    デベロッパーツールのシュミレーターなどを使って、実機検証。
  5. SNSやjQueryの埋め込みは最後に行う
    サーバーにUPしないと動かないものもあるので、最後に取っておく。

▢セレクタ（selector）について
参考サイト　https://shunjitabata.com/selector/

▢Webサイト（ページ）の開発フォルダについて
Webサイト（ページ）を作成する時は、開発用のフォルダを作成して、その中にHTMLファイル、CSSファイル、JavaScript / jQueryファイル、画像ファイルなどを格納する。開発用フォルダには多くのファイルが格納されることになるのでファイルの整理整頓が重要。ファイルが迷子にならないようにサブフォルダの作成も含めてわかりやすく管理する。また、開発用フォルダには、Webサイト（ページ）の表示に不要なファイル（イラストレータのaiファイル、フォトショップ用のpsdファイルなど）は、格納しない。

■文字コードについて
日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがある。Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用する。
▢WindowsでUTF-8化するにはどうすればいいか？
設定方法 設定は簡単でwindows環境での設定となりますが「設定->時計と言語->言語と地域->管理用言語の設定」を開きUnicode対応ではないプログラム言語のシステムロケールの変更を押したのち「ワールドワイド言語サポートでUnicode UTF–8を使用」をチェックして更新後Windowsを再起動します。

■ファイルのパス指定について
ファイルを指定するためには、絶対パスでの指定方法と相対パスでの指定方法がある。それぞれの特徴を理解して使い分ける。
絶対パスはサイト外のリンクで相対パスはサイト内のリンク
参考サイト　https://verse-type.co.jp/column/hp_absolutepath-relativepath/

  • HTMLの基本構造について

■タグの構造
<要素名>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>内容（コンテンツ）</要素名>
<要素名 属性=”属性値”>

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

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

■HTMLの基本構造

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

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

参考サイト　htmlの記述【基本タグ】

■特殊文字について
HTMLを記述する時に、画面に表示したい文字を、そのまま記述できない場合がある。例えば「<」を画面に表示しようとして、そのまま記述するとタグの開始との区別ができなくなる。「<」を画面に表示する場合は、「&lt;」と記述することで画面に「<」と表示することが可能になる。このような文字を特殊文字と呼んで特別な記述が必要になる。
▢代表的な特殊文字
「”」→「&quot;」
「&」→「&amp;」
「<」→「&lt;」
「>」→「&gt;」
「（スペース）」→「&nbsp;」
「©」→「&copy;」
「®」→「&reg;」

■インデンテーション（字下げ）について
HTMLの記述では、可読性の向上が求められる。インデンテーション（字下げ）を意識して記述する。

■doctype宣言について
HTML5におけるDOCTYPE宣言はあまり意味を持たないとされているが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良い。
DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード（Quirks mode）となる。 互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合がある。 ブラウザに標準モード（Standards mode）で解釈させる場合には、DOCTYPE宣言を記述する必要がある。 主要なブラウザでは文書の先頭に <!DOCTYPE html> と記述することで標準モードとなる。

■ワンポイントアドバイス
楽天のショッピングサイトなどのテンプレートでは、 DOCTYPE宣言が無く互換モードになり、CSSが思うように使えなくなる場合がある。その場合やむを得ず、違う方法を使わなければならない場合があるので、お仕事で担当した時は、 DOCTYPE宣言は必ず確認しておく。

  • 文章情報と文書本文について

■head 要素（文書情報）

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

■body 要素（文書本文）

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

■ブロックレベル要素とインライン要素について
要素の多くは、ブロックレベル要素とインライン要素に分類される。
ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっているので、あくまでも性質を持っていると考えておく。
参考サイト　https://samplesdl.me/training_html-css/sample-display.html

■HTML：構造化タグ

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

■ワンポイントアドバイス
見出し（h1～h6）要素でh1タグ以外は、特に使用回数に制限はない。h2やh3などは大きな見出しとなることが多いためたくさん使われる。「h1タグは1ページで一回の使用で抑え、数字の順序をしっかり守ること」これを守っていれば使用になんら問題はない。ただ、html5の場合は、sectionタグやarticleタグと組み合わせることで1ページに複数のh1タグを記述することができる。

■HTML：コンテンツのグループ化タグ

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

■HTML：テキストの意味

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

■HTML：コンテンツの埋め込み

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