HTMLとCSSは、ホームページの見た目を作るときに一緒に使われます。ただし、同じ役割ではありません。修正箇所を正しく伝えるには、二つの違いを知っておくと便利です。
HTMLは内容と構造を示し、CSSは主に見た目を整えます。文章修正なのか、配置や色の修正なのかを分けると、依頼範囲が明確になります。
HTMLは内容の構造を示す
HTMLでは、見出し、段落、一覧、画像、リンクなど、ページを構成する要素を記述します。見出しらしい大きさに見えても、構造上は普通の文章になっている場合があります。
構造が適切だと、読み手は内容の順序を追いやすくなります。修正時は、文字だけでなく、その部分が見出しなのか説明なのかも確認します。
- ページ全体の題名
- 章ごとの見出しと段落
- 一覧や表として示す情報
- 画像の説明とリンク先
CSSは見た目と配置を整える
CSSでは、文字の大きさ、色、余白、幅、並び方などを指定します。同じHTMLでも、CSSの指定によって画面上の印象は変わります。
一つの指定が複数ページで共有されることもあります。特定ページだけを直すつもりでも、別の画面へ影響しないかを確認します。
端末の幅に合わせた表示もCSSに関係します。パソコンで整っていても、スマートフォンでは見出しや表がはみ出すことがあります。
修正内容を役割ごとに分ける
文章やリンク先を変える場合は、HTMLや管理画面の内容を確認します。余白や配置を変える場合は、CSSと現在の共通設定を確認します。
実際のサイトでは、管理システムがHTMLを作り、複数のCSSを読み込む場合があります。画面を見ただけで対象ファイルを決めず、制作資料や管理画面と照合します。
- 直したい画面と端末を記録する
- 内容と見た目のどちらかを分ける
- 共通設定の影響範囲を調べる
- 変更前のファイルを保存する
- 主要ページを変更後に確認する
長い見出しと文章を読み直す
見た目だけで文章を小さくしても、読みづらさは解消しません。長い見出しは要点ごとに分け、一文の主語と述語が離れすぎないように直します。
箇条書きは確認項目に向きますが、理由や前後関係は段落で説明します。HTMLの構造と文章編集を同時に見直すと、見た目だけの調整を減らせます。
変更後は端末別に確認する
公開前には、パソコンとスマートフォンで見出し、本文、表、ボタンを確認します。横スクロールや文字の重なりがないかも見ます。
一つのページだけで終わらせず、同じ部品を使うページを確認します。CSSの変更は共通部分へ広がる場合があるためです。
文字サイズだけでなく、行間と本文幅も確認します。一行が長すぎる場合は幅を整え、段落の区切りが内容のまとまりと一致しているかを読み直します。
画像の上に文字を置く部分は、背景によって読みにくくならないかを確認します。装飾を追加する前に、情報の順序と文字の見分けやすさを優先します。
制作会社へ渡す情報
修正を依頼するときは、対象URL、画面の位置、希望する内容、確認する端末を伝えます。「見やすくする」だけでなく、困っている状態を具体的に示します。
- 変更する文章と根拠資料
- 対象ページと共通部品の有無
- 希望する見た目と優先順位
- 公開前の確認者と承認方法
- 元へ戻すための保存場所
