ページごとに全部やり直さないための準備です。
毎ページでCSSやJavaScriptをバラバラに書き始めると、あとで修正が大変になります。 まず共通ファイルを作ると、サイト全体の見た目も動きも揃えやすくなります。
site.css と site.js は何ですか？
まず役割をはっきり分けて考えるとわかりやすいです。
| ファイル | 役割 | 例 |
|---|---|---|
site.css |
見た目を整える | 色、余白、文字、カード、ボタン、ヘッダー |
site.js |
動きを担当する | メニュー開閉、チェックリスト、簡単な動き |
つまり:
HTML は中身と構造、CSS は見た目、JS は動き。
という分け方です。
HTMLに全部押し込まないことが大切です。
ページ本文と、共通の見た目や動きは分けておく方が、ずっと整理されます。
なぜ今このステップが必要なのですか？
ここまでで、あなたはすでに:
- ローカルで作る流れを理解した
- サイトの定義を決めた
- ファイル名とフォルダ構成を決めた
- 必要画像を整理した
- ローカル保存と確認を理解した
- 画像をアップしてURLも保存した
ここで共通ファイルを整えておくと、そのあとのページ制作がかなり安定します。
- 見た目が揃う
- モバイル対応がしやすい
- 後で全体を直しやすい
- ChatGPT に「共通CSSを使って」と言いやすい
ここを飛ばすと、ページごとに少しずつ見た目が崩れやすいです。
その結果、あとで全部を揃えるのがとても大変になります。
site.css には何を入れますか？
site.css は、サイト全体の「見た目の共通ルール」を入れる場所です。
- 色のルール
- 文字サイズ
- 余白のルール
- ボタンの見た目
- カードの見た目
- ヘッダーとフッター
- セクションの幅や配置
- スマホ用の調整
つまり「サイト全体で共通して使う見た目」をまとめます。
site.js には何を入れますか？
site.js は、サイト全体で共通して使う「動き」を入れる場所です。
- スマホメニューの開閉
- チェックリストのカウント
- 現在年の自動表示
- ちょっとした表示補助
- 軽いアニメーションや出現処理
大事なのは、派手なことをたくさんやることではありません。 使いやすさを少し支えるくらいがちょうどよいです。
site.js は「必要なことだけ」にする方が強いです。
学習サイトでは、読みやすさと安定感が大事です。動きすぎない方が信頼感があります。
なぜ共通ファイルが強いのですか？
1. 後で全体を直しやすい
たとえばボタンの色を変えたいとき、1つの CSS を直せば全体に効きます。
2. ページが軽くなる
毎ページに長い style や script を書き続けずに済みます。
3. 見た目が揃う
ヘッダー、カード、見出し、ボタンが自然に統一されます。
4. ChatGPT に指示しやすい
「既存の site.css と site.js を使って」と伝えるだけで済みます。
よくある弱い作り方
最初によくある失敗は、各ページに全部書いてしまうことです。
弱い例
- ページごとに長い
<style>が入る - ページごとに少しずつ余白や色が違う
- ページごとに別の JavaScript を足していく
- あとで直す場所が多すぎる
強い例
- 見た目はできるだけ
site.cssにまとめる - 動きはできるだけ
site.jsにまとめる - HTML は内容と構造を中心にする
この違いは、ページ数が増えるほど大きくなります。
ページを20個作ってから共通ルールを考えるのは大変です。
先に共通ルールを作る方が、あとで何倍も楽になります。
モバイル対応もここで考える
site.css が強い理由の1つは、スマホ対応をまとめて考えられることです。
- ヘッダーが小画面で崩れない
- カードが縦並びになる
- ボタンが押しやすい大きさになる
- 文字が読みやすい大きさになる
- 余白が広すぎたり狭すぎたりしない
モバイル対応をページごとに個別で考えるより、共通 CSS で考える方がはるかに整理されます。
モバイル対応は「あとで」ではなく「共通ルール」で最初から考えます。
スマホで見たときの読みやすさは、サイトの印象を大きく左右します。
ChatGPT にどう頼むとよいですか？
たとえば、こう頼むとかなり強いです。
/site.css と /site.js を作ってください。
条件:
- 日英サイトで使う共通ファイル
- モバイル対応
- ヘッダー、フッター、カード、ボタン、レッスンレイアウト対応
- 学習サイトらしく読みやすい
- Webbie の callout box に対応
- JavaScript はメニュー開閉、チェックリスト、軽い補助だけ
- ページごとの style を増やしすぎない前提こうすると、あとで各ページに流用しやすい形になりやすいです。
このステップのあと何が楽になりますか？
共通ファイルができると、次のページ制作がかなり楽になります。
- 詳細ページを1つずつ作りやすい
- 見た目が揃いやすい
- セクション index も作りやすい
- トップページも自然にまとまりやすい
- サイト全体の印象が安定しやすい
つまり、site.css と site.js は、後の制作の土台になります。
よくある失敗
1. すべてのページに別々の style を書く
後で揃えるのがとても大変になります。
2. JavaScript を増やしすぎる
学習サイトでは、派手さより安定感の方が大事です。
3. モバイル対応を考えない
デスクトップだけ整っていても、スマホで見づらいと印象が落ちます。
4. 共通ファイルの役割が曖昧
CSS に動きを書いたり、JS で見た目を無理に操作しすぎると整理が崩れます。
5. 先にページを大量に作る
共通ルールがないままページが増えると、後で直す量も増えます。
共通ファイルは、後の制作を助ける「見えない骨組み」です。
目立たないけれど、ここがしっかりしていると、サイト全体の品質がかなり上がります。
このステップのゴール
Step 08 のゴールは、次の状態になることです。
site.cssがあるsite.jsがある- 共通の見た目ルールがある
- 共通の軽い動きがある
- モバイル対応の土台がある
- 次の詳細ページ制作がかなりやりやすくなっている
最小チートシート
site.css に入れるもの:
- 色
- 文字
- 余白
- ボタン
- カード
- ヘッダー
- フッター
- モバイル対応
site.js に入れるもの:
- メニュー開閉
- チェックリスト補助
- 軽い表示補助
- 小さな共通動作
まず共通ファイル
そのあと詳細ページこの6つができれば次へ進めます。
完了: 0/6