HTMLとCSSで作る静的サイトの基本

HTMLは内容、CSSは見た目を担当する

HTMLには見出し、本文、画像、リンクなどの内容と構造を書きます。CSSでは文字の大きさ、色、余白、並び方などを指定します。見た目に合わせて見出しを選ぶのではなく、ページの話の順序に合わせて見出しを組み立てるのが基本です。

静的サイトは、用意したHTMLや画像などをサーバーから配信する構成です。記事や案内が中心なら比較的シンプルに管理できますが、会員管理や決済などの機能は別の仕組みが必要になります。

最初は1ページを最後まで作る

いきなり多くのページを作らず、サイト名、主見出し、説明、画像、問い合わせや関連ページへのリンクを持つ1ページを完成させます。次にスマートフォンでも読めるかを確認し、共通部分をほかのページへ広げましょう。

例えば教室の案内なら、学べること、対象者、場所、日時、申込み方法という順に並べると、読む人が必要な情報を見つけやすくなります。

公開用と制作資料を分ける

画像の原本、バックアップ、作業メモ、認証情報を公開フォルダへ入れないようにします。公開用には、閲覧に必要なファイルだけを出力します。ファイル名を内容が分かる名前にしておくと、修正する場所を探しやすくなります。

更新後は画面とリンクを確認する

保存しただけでは公開中のページは変わりません。制作、表示確認、アップロード、公開先での確認までを一連の作業にします。本文、画像、メニューだけでなく、別ページから戻れるか、存在しないURLで適切な案内が出るかも確かめましょう。

作業前のコピーと更新日を残しておくと、問題が起きたときに変更箇所をたどれます。