WebページはブラウザーがHTMLを読み、必要なCSSなどを読み込んで表示します。HTMLは文章へ役割を付ける記述です。「道具の整理会」をh1で囲むと主な見出し、「持ち物」をh2で囲むとその下の話題になります。文字を大きくしたいだけの理由で見出しの番号を選ぶと、内容の階層が分かりにくくなります。

CSSはHTMLの要素を選んで表示を指定します。h1を選んで色を変えたり、noticeというクラスを付けた領域へ余白を作ったりします。同じHTMLでもCSSを変えると外観が変わります。ただしCSSに文章を書いて内容を伝えることは、この練習では行いません。

JavaScriptはクリック後の処理などを作る別の仕組みです。ここではHTMLとCSSを自分で書く静的な案内を、保存・表示・公開・更新へ進めます。フォーム送信や決済が必要な場合は、文章を表示するHTMLだけで処理が完成するわけではありません。必要な処理と管理の条件を別に確かめます。

この章の根拠：出典1出典2出典3

プレーンテキストを編集できるエディターと、普段使うブラウザーを用意します。新しいnotice-demoフォルダーを作り、次のコードをindex.htmlとしてUTF-8という、日本語などを数字のデータへ変えて保存する文字コードで保存します。保存後は拡張子まで確認してください。index.html.txtや書式付き文書では、HTMLとして開けないことがあります。

doctypeは文書の種類を示す前置き、htmlのlangは日本語の指定です。headには文字コード、ブラウザーのタブへ表示するtitle、CSSへのlinkなどを書きます。画面で読む内容はbodyの中です。titleとh1は別の場所へ表示されます。タブは「道具の整理会｜練習ページ」、画面の主見出しは「道具の整理会」です。

ファイルをブラウザーへドラッグするか、「ファイルを開く」からindex.htmlを選びます。まだstyle.cssを作っていないので標準の見た目ですが、見出し、段落、箇条書き、リンクが読めれば内容を確認できます。ローカルファイルを開いただけでは、他人へ公開されません。

この章の根拠：出典1出典3出典4

remはページのhtml要素の文字サイズを基準にした長さの単位です。2remなら基準の2倍です。pxはCSSのピクセルという単位で、画面の物理的な点と常に一対一ではありません。この例では文字サイズと余白にremを使い、文字を拡大した状態も確認します。

HTMLと同じnotice-demoフォルダーにstyle.cssを作り、次のCSSを保存します。HTMLのhref="style.css"がこのファイルを指定しています。CSSのファイル名を変えた場合は、hrefも同じ名前へ直します。保存して再読込みすると、淡い緑の背景の上に白い案内が出ます。

.noticeの先頭の点は、class="notice"を付けた要素を選ぶ意味です。h1は全てのh1要素を選びます。波括弧の中は、color:値;のように性質と値を組み合わせます。paddingは内側の余白、marginは外側の余白、max-widthは広がり過ぎない上限です。文章を直す操作と色を直す操作を混ぜず、一つ変えて保存・再読込みしてみます。

42remはこの例の読み幅です。全サイトの正解ではありません。小さい画面では領域が縮み、文字は折り返します。見出しのサイズを変えてもh1という役割は変わりません。リンクの下線と、キーボードで選んだ位置の枠は残し、色だけに頼って操作箇所を知らせないようにします。

この章の根拠：出典2出典3出典5

最初はHTMLの「道具の整理会」を「本棚の整理会」へ変えて保存します。画面のh1だけ変わり、タブのtitleは残ります。タブも変えたいならtitleを編集します。次に持ち物のliを一つ増やすと、箇条書きの項目が増えます。箇条書きを空白や改行だけで作る操作とは違います。

CSSでは.noticeのpaddingを1.5remから2remへ変え、内側の余白が増えることを見ます。この数値は練習用です。変更前のファイルを複製しておくと、比較したあとに戻せます。何行も同時に変えると、どの指定が結果を変えたか分からなくなるため、最初は一つの変更を確認します。

開始タグと終了タグは、内側を先に閉じます。強調を段落内へ入れるならpの中でstrongを閉じ、そのあとpを閉じます。HTMLは誤りがあってもブラウザーが補って表示する場合があるため、「画面が出た」だけで正しく書けたとは判断しません。エディターの警告やコードの囲みを確認してください。

この章の根拠：出典1出典2

画像もHTMLへ埋め込む別のファイルです。練習フォルダーの中にimagesフォルダーを作り、次の自作の道具画像コードをtools.svgとしてUTF-8で保存します。画像を置く場所が変わればsrcも変えます。他人の画像を使う場合は、利用権と条件を確認します。

次の例では工具を用意する説明として、ドライバーと小箱を見せます。コードをh1の後ろへ加え、style.cssの末尾へimgの指定を追加すると、画像が案内の幅に収まります。widthとheightは画像の比率を知らせ、CSSが実際の表示幅を調整します。ファイル名が違う、画像を転送し忘れた場合は表示されません。

altはすべての画像へ同じ文章を入れる欄ではありません。必要な道具を伝えるならその内容、飾りだけで本文と重複する画像なら空のalt等、役割から選びます。W3C WAIは画像の目的に応じて説明を選ぶ方法を示します。文字を含む重要な条件は本文にも書き、画像だけに隠さないでください。

スマートフォンの幅と文字の拡大で、画像がはみ出さず、説明が読めるかを確認します。写真を追加するなら、必要な寸法と容量、圧縮後の画質を確認します。大きい元画像を表示だけ小さくしても、通信する容量は減るとは限りません。

この章の根拠：出典6

文章が変わらなければ、編集を保存したか、ブラウザーを再読込みしたか、開いているindex.htmlが編集したフォルダーのものかを見ます。日本語が崩れる場合はUTF-8の保存形式とmeta charsetを確認します。ファイル名を全角で入力していないか、拡張子が隠れていないかも確かめてください。

文章は変わるが装飾がない場合は、linkのhref、CSSの保存場所、クラスの綴りを確認します。.noticeとclass="notice"は対応します。セミコロンや閉じ括弧を落とした箇所のあとだけ効かない場合もあります。開発者ツールで要素を選ぶと、適用されるCSSと打ち消されたCSSを見られます。

リンクを押しても条件へ移らなければ、href="#condition"とid="condition"が一致するかを確認します。Tabキーでリンクへ移り、Enterで移動できることも試します。文字を拡大し、細い画面で最後の条件まで読めるかを見ます。画像を追加する場合は利用権を確かめ、意味を伝える画像へ説明文を付けます。無断の画像や実在する個人情報を練習ページへ入れないでください。

この章の根拠：出典1出典2出典3

端末内のindex.htmlを開くと、アドレスはfileで始まります。他の人がインターネットから読むには、ファイルを提供するホスティング先へ置き、https等の公開URLで案内します。ドメインはアクセスする名前、サーバーは内容を保存して要求へ返す仕組みです。独自ドメインが必須なサービスだけではありません。選ぶ公開先で使えるURLと契約条件を確かめます。

静的HTMLを置けること、ファイルの転送方法、HTTPS、容量、更新と復旧の方法、初期費用と更新費を同じ範囲で比較します。無料でも独自ドメインや機能に条件がある場合があります。古い料金表や、独自ドメインならSEOが有利という理由だけで契約先を決めません。CMSは文章や画像を管理画面から更新する仕組みで、ファイルを自分で書く方法とは編集の操作が異なります。

公開の権限がある試し領域で、公開先の公式案内が指定するファイル管理画面やSFTP等の転送方法を使います。SFTPは暗号化してファイルをやり取りする方法です。接続先と公開ディレクトリーを管理担当へ確認し、index.html、style.css、images/tools.svgの位置関係を保ちます。公開ディレクトリー名がすべてpublic_htmlとは限りません。既存のindex.htmlへ上書きせず、変更前のファイルと戻し方を確認します。

試しのhttps://example.test/notice/を使うなら、その領域のindex.htmlからstyle.cssとimages/tools.svgを読める構成にします。example.testは例示名で実サイトではありません。公開後は通常のブラウザーで完全URLを開き、CSS・画像・リンクを確認します。端末内の絶対パスをsrcへ書くと、読者の端末から読めません。

表示されない場合は公開先の場所、ファイル名の大文字小文字、相対パス、サーバーの応答を調べます。ChromeのNetworkでHTML、CSS、画像が読み込めるかを確かめ、404のファイルだけを特定します。接続の秘密情報を原稿や画像へ入れず、共有する記録にはURLと症状、変更したファイルだけを残します。

この章の根拠：出典7出典8

SEOは、内容を検索で見つけ、理解しやすくする工夫です。HTMLではtitleがページの内容を具体的に表し、h1が本文の主な題名になります。章の見出しは必要な答えの順序を示します。リンクには行き先の分かる文章、意味を伝える画像には役割に合う説明を付けます。キーワードを何度も入れるだけでは、必要な答えは増えません。

道具の整理会の練習例には「架空の催し」「実際の受付なし」と書きます。実在する催しとして検索やSNSから募集しないでください。実際の公開内容へ作り直すなら、誰の疑問に答えるか、現行の案内と許諾、タイトル・説明・本文の一致を確認します。meta descriptionは内容の要約で、設定した文が検索結果へ必ずそのまま出るとは限りません。

検索へ出すページではアクセスやnoindex等の設定を担当と確認します。noindexは検索に載せない指示で、秘密資料を守る認証ではありません。Search Consoleの所有確認と権限があるなら、URL検査で完全URLの登録状態とライブテストを分けて見ます。公開したこと、索引に登録されること、検索から読まれることは別で、コードだけで上位表示を保証できません。

公開後は検索の表示やクリックと、読者に残る質問を別に見ます。対象ページと期間をそろえ、未測定を0件へ置き換えません。内容を直すときは変更前のフォルダーを保存し、どのHTML・CSS・画像を変えたかを記録します。公開先の同じファイルを更新し、公開URLを再確認します。崩れた場合は確認済みの保存へ戻し、原因のファイルを調べます。

静的サイトにも、リンク切れ、古い案内、ドメインや公開先の契約切れへ対応する担当が必要です。コードの公開後にすべての管理がなくなるわけではありません。CMSへ移るなら記事や設定の保存方法も変わるので、ファイルだけの練習と混同しません。

この章の根拠：出典9出典10出典11

完成例には主見出し、説明、持ち物の一覧、条件へのリンクがあります。HTMLだけでも内容を読め、CSSで背景や余白を整えます。暗記したタグの数より、どの編集がどこへ表示されるかを説明できることが最初の目標です。

完成例は、HTMLとCSSの編集を理解するための架空案内です。公開する場合は内容の許諾と公開先の条件を確認し、同じ構成のファイルを試し領域へ置きます。実際の送信フォームや決済は別の機能が必要で、静的なHTMLだけで受け付けたことにはなりません。

記録にはファイル名、変更した一行、期待する表示、公開URLで見た結果、未確認の検索と復旧の条件を残します。HTMLで作る方法は、保存・配置・読込みの関係を自分で扱う方法です。内容と表示を一つずつ変え、公開後の管理まで継続してください。

この章の根拠：出典1出典2出典3