WEBサイト作成のコツ
受講日：2025年03月25日
既存のWEBサイトを分析する
自分でコーディングする時のポイント
参考サイト
大浜先生作成のHTML-CSS 入門講座サイト。
- Lesson：授業で教えてもらえる内容。
- Webパーツ：サイトで利用しそうなパーツ集。文法を先に勉強してから使う。
- 付録：補足・おさらい的な知識があるので、最低1回は目を通しておく。
ファイルの取り扱い
WEBサイトの作成に必要なファイル
| ファイル名 | 役割 |
|---|---|
| htmlファイル | 検索エンジンがサイトを認識するために設定。 |
| CSSファイル | 人間がビジュアルを捉えるために設定。 |
| 画像ファイル(.jpg/.png/.gif等) | ページ内に表示したい画像。 |
ファイルとフォルダ
ファイルとは
- ファイル名・拡張子（png・jpg・html等）
- ファイル名には基本的に日本語・大文字英数字は使わない。
フォルダ
- ファイルが入っている箱。フォルダは「ディレクトリ」と呼ばれる事が多い。
- フォルダ構造は「ディレクトリ構造」「パス構造」と呼ばれる事がある。パス＝道順。
ファイル整理を徹底する
- 画像フォルダは「img」にしてまとめて入れておく等、役割ごとにファイルを分けて、どこに何があるか分かりやすいように心がける。
- 拡張子順に並べ替え：エクスプローラー＞並べ替え＞種類。
ファイルパスの指定
絶対パスと相対パス
絶対パス
https://gd304.deau-ag.com/index.html相対パス
index.html
images/photo.jpg絶対パスと相対パスの使い分け
HTML ファイルの作り方
ファイルの作成手順
- Terapadを起動
- 文字コードをUTF8に設定：ファイル＞文字/改行コード指定保存＞UTF8N
- 名前をつけて保存：ファイル名にindex.htmlと入力して保存。
※htmlファイルは必ずindex.htmlにする。 - WEBページの画像素材用に、imageフォルダを作成する。
HTML 骨組み要素
親と子の関係を常に意識しながら書く。
ヘッダーエリア<header>
- ファーストビュー：ユーザーが必ず見る重要な部分。WEBページの上部。
- 載せるコンテンツ：企業・商品名などのロゴ・グローバルナビゲーション（Gナビ）
※グローバルナビゲーション(Gナビ)：各ページに遷移するためのメニューリンク。
ヘッダーエリアの表現方法の違い
コーポレート・ECサイト：目的や伝えたい事が多いので、ヘッダーでプッシュしたい情報を画像を載せたり、複数の情報を載せる場合は、スライダーで表現する事が多い。
LP：ヘッダーの要素はシンプルである事が多い。
メインエリア<main>
- WEBページの本文。
- 載せるコンテンツ：アイコン(アイキャッチ)・見出し・小見出し・テキスト・商品画像。
- 情報をグループ化・親子構造化して、サービス内容や商品の情報を伝えていく。
フッターエリア<footer>
- WEBページの下部に配置。
- 載せるコンテンツ：ナビゲーション・コピーライト表記・利用規約・プライバシーポリシー・SNSアイコン・特定商取引法に基づく表記(EC)
HTML タグの構成
<要素名> 内容（コンテンツ） </要素名>
<要素名 属性="属性値"> 内容（コンテンツ） </要素名>
<要素名 属性="属性値">html 要素（HTMLの文書）
| コード | 名称 | 役割 |
|---|---|---|
| <!DOCTYPE html> | ドキュメントタイプ宣言 | 「今からコードを始めます」宣言。HTMLのバージョンを宣言するメタ情報。 |
| <html lang=”ja“></html> | html 要素 | HTML文書である事を表す。lang=“ja” で日本語の文章。 |
| <head></head> | head 要素 | headの情報である事を表す。 ※headerではないので注意 meta・title情報を含む。 |
| <body></body> | body 要素 | bodyの情報である事を表す。header・main・footerエリアを含む。 |
head 要素（文書情報）
| コード | 役割 |
|---|---|
| <meta charset=”UTF-8”> | 文字コード指定。基本UTF-8で指定。必ずheadの次に記述。 |
| <meta name=”description” content=”値,値”> | ページの概要を記述。記述内容が検索結果に表示される。 |
| <meta name=”keywords” content=”値,値”> | 以前SEO対策で使われていたが、クローラーが重視しなくなり、今はほぼ使われない。 |
| <title></title> | ページタイトルを記述。記述内容が検索結果とタブに表示される。 |
body 要素（文書本文）
headerエリア
| タグ | 役割 |
|---|---|
| <header></header> | body要素>headerエリアの情報である事を表す。 |
| <nav></nav> | nav=navigation(ナビゲーション)の略。ウェブサイトのナビゲーションリンクや他のページへのリンクを含むセクションを示す。 |
| <h1></h1> | 「ページ内で1番強調する見出し」である事を表す。基本的にページ内に1個だけ。 |
| <ul> <li></li> <li></li> </ul> | ul=unordered list(アンオーダーリスト)の略。 箇条書きリストを作る。ulで囲む時は、必ずliで各項目をリスト化する。 |
| <address></address> | 連絡先や問い合わせ先を示すタグ。header・footerエリアに表記する事が多い。 |
※headerに記述する事が多いタグだが、bodyやfooterに表記する事もあるし、どちらにも記述する事もある。
mainエリア
| タグ | 役割 |
|---|---|
| <main></main> | body要素>mainエリアの情報である事を表す。 |
| <section></section> | 見出しとそれに関する文章をまとめる。必ずhタグと入れ子で利用する。Webページの構造を明確にする。 |
| <div></div> | div=division(ディヴィジョン)の略。CSSを使ってデザインを整えるために利用。グループ化した部分は、幅や高さのデザインを一括適応できる。 |
| <h2～h6></h2～h6> | h1以下の見出しである事を表す。見出しレベルはページ内で粒度を統一する。 |
| <p></p> | p=paragraph(パラグラフ)の略。HTMLで段落を作成するためのタグで、文章のまとまりを区切るために使用される。 |
| <dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> </dl> | description list(リスト)・ term(言葉)・description(説明文)の略。 dlで説明リストである事を定義。dtの内容をddで説明する形式となるように記述する。 |
footerエリア
| タグ | 役割 |
|---|---|
| <footer></footer> | body要素>footerエリアの情報である事を表す。 |
| <small></small> | 免責事項や著作権表記、注意事項、警告文を定義。※文字を小さくするのには使わない。昔は使ってたので古いサイトだと痕跡があるかも。 |
- navタグやaddressタグ等、headerと似たようなタグを記述するケースが結構ある。
- ただし、HTMLファイルは上から順に読ませたい情報を記述するので、footerに優先順位の高い情報を配置する事はほぼない。
グループ化タグの使い分け
HTML 画像埋め込み指定
HTMLは基本的に画像と文字を載せるだけ。あとはサイズや幅の調整。
HTMLファイルに画像コンテンツを埋め込む
<img src="images/photo.jpg" alt="画像代替テキスト" width="画像サイズ" height="画像サイズ">img 要素(画像)
- img 要素
画像コンテンツの埋め込み（画像表示）をする。外部サイトの画像は基本的に載せない。 - src 属性=”画像ファイルURL“
img 要素を記述する時の必須属性。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用される。他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できる。 - alt 属性=”画像ファイル名“
画像が利用できない環境向けの代替テキストを指定。現時点では記述必須ではないが、アクセシビリティの観点から、代替テキストを必ず指定しておく。 - width , height 属性=”画像サイズ“
縦横幅のピクセル数を指定。基本的には、プロパティ＞サイズで調べたピクセル数をそのまま指定する。電波障害などで画像が表示できない場合でも、指定していたサイズ分のスペースを確保している状態になるので、レイアウトが崩れない。
HTML 外部・内部リンク指定
a 要素 外部リンクの設定方法
<a href="リンク先URL" target="リンク先を開く環境" rel="リンク先との関係">リンクコンテンツ </a>
<a href="https://www.rakuten.co.jp/" target="_blank" rel="noopner noreferrer">リンクコンテンツ </a>- a 要素
a=anchorの略。コンテンツ(画像や特定の文字列)に対してリンクを定義。 - href 属性=”リンク先URL“
href=hypertext referenceの略。絶対パスで指定。http や https から始まるパス指定。 - target 属性=”リンク先を開く環境“
リンクタグの属性。target=”_blank”で、リンク先が新しいウィンドウ(タブ)で表示されるように指定。 - rel 属性=”リンクとの関係性“
外部リンクを指定する時は、noopenerとnoreferrer を同時に指定してサイトの安全性を保つ。
a 要素 内部リンクの設定方法
idを設置。
<要素名 id="pageTop"></要素名>
TOPをクリックで上記idの位置に移動するようにリンクを設置。
<a href="#pageTop">TOP</a>- id 属性=”id名“
特定の要素・位置にid属性を付与する。 - a 要素
内部リンク(ハイパーリンクのリンク先ファイル)を表示する。 - href 属性=”#id名“
内部リンクを指定する時は、属性値の先頭にハッシュ”＃”を記述。
HTML テキスト分類タグ
- pタグと入れ子構造で使う事が多い要素。文章中の特定のテキストに意味を定義する。
- 見栄えの調整は基本的にスタイルシート（CSS）で行い、HTMLでは極力しないようにする。
- HTML5では特に、HTMLの使い方が厳密に定義されている。
| 要素 | 役割 |
|---|---|
| <a></a> | a=anchorの略。コンテンツ(画像や特定の文字列)に対してリンクを定義。外部サイトを指定する時は rel 属性にnoopenerとnoreferrer を同時に指定してサイトの安全性を保つ。 |
| <em></em> | em=emphasisの略。文章の中で強調したい文字列を定義。 |
| <strong></strong> | 文章の中で重要性、重大性、緊急性が高い文字列を定義。emは単純に主張や力説したい場合に用いる。 |
| <small></small> | 免責事項や著作権表記、注意事項、警告文を定義。※文字を小さくするのには使わない。昔は使ってたので古いサイトだと痕跡があるかも。 |
| <i></i> | 慣用句・特定用語を定義。※文字を斜体するのには使わない。昔は使ってたので古いサイトだと痕跡があるかも。 |
| <b></b> | 太字コンテンツ。見た目を太字(ボールド体)にするだけなので、クローラーに重要性を伝える時は必ずem要素を使う。 |
| <span></span> | インライン要素。特定の範囲をまとめてスタイルシート(CSS)を適用したい場合に使用。 |
| <br></br> | 文章の中の改行位置を定義。改行しすぎるとかえって見ずらいので、基本的に「。」の後以外は改行しない。 |
HTML 特殊文字の記載ついて
HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。そのまま書くとタグとしてみなされて、文字化けしたり正しく表示されない文字がある。
3月25日 実習の課題
受講日：2025年03月25日
授業で作成したhtmlファイルのキャプチャを取得して、WordPressの投稿ページに貼り付ける。
【34日目】実習 3月25日にやった事
- HTMLファイルを作成した。
- 素材用のimageフォルダを作成した。
- 骨組み(html・head・body要素)を記述した。
- bodyにheader・main・footer要素を記述した。
- bodyに見出し・グループ化・リスト化などの要素を記述して、情報をグループ化した。
授業の感想
- 閉じタグを忘れる、囲う範囲が1行ズレる、スペルを1文字間違える。ほんの些細な誤表記でも、正しく表示されなくなる。
- 間違っている事に気付ける分、正しく表示されない方がまだ良いかもしれない。本当に怖いのは、間違っているのにブラウザ上は問題なく表示されてしまい、誤表記に気づけない時なのではないかと思う。
- 間違っているのは1文字でも、その1文字のズレを探すために膨大な量のデータから間違い探しをしなくてはならないので、タグの構造を把握しやすいように情報をしっかり整理する事が大切だと思った。
- そのために、インデントを揃える、文法チェッカーを利用する等、地道な作業の積み重ねを欠かしてはならないと肝に銘じたい。
今日の授業を受けての自主課題
- 3/25実習のコードを写経する。(3/26済)
3月29日 実習の課題
受講日：2025年03月29日
【36日目】実習 3月29日にやった事
- HTMLファイルにimgとaタグを記述した。
- HTMLファイルにclassとid属性を記述した。
- CSSファイルを作成した。
- CSSファイルとHTMLファイルを紐づけした。
- CSSファイルにセレクタを記述した。
授業の感想
- 今は完成イメージを見ながらコードを記述しているので、コードを打つ→ブラウザで開く→完成イメージと合っているか確認する。という流れで作業できているが、自分で1からサイトを作る場合、完成イメージがない事になるので、デザインカンプやワイヤーフレームをちゃんと作っておいてからコードを書き始めないと、後々大変な事になりそうだと感じた。
- 上記サイトを大浜先生が作られたものだとお聞きして衝撃を受けた。勝手に神サイトと呼んで崇めていたので、大浜先生のすごさを改めて実感しました。
今日の授業を受けての自主課題
- CSSファイルのセレクタの記述を完成させる。(4/1済)
