HTMLやCSSのちょっと人には聞きづらい「基礎の話」を一から解説する本連載。今回のトピックは「正しくCSSを書き換えるポイント」。書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野祐東さんが解説します。みなさんの作業の困った！が解決されますように。
公開されているサイトのCSSの書き換えが上手くいかないのはなぜ？
CSSの編集は、HTMLの編集に比べて複雑で、注意しなければならないこともあります。作業の仕方はもちろん、どんなことに気をつける必要があるか、事前に知っておくことが大事です。
1.どうしてCSSを編集するのが難しいの？
2.「ほかのページのスタイルも変わってしまう」ことに対処する
■後に読み込むのは「カスケード規則」に対応するため
■<style>タグを利用するのでもOK
3.「思ったとおりにスタイルが適用されない」に対処する
■「詳細度」ってなに？
4.実際のサイトを例に実践してみる
5. 作業１：リンクテキストのフォントサイズを変更する
6. 作業2：リンクのボックスをボーダーラインで囲む
さいごに
1. どうしてCSSを編集するのが難しいの？
公開されているWebサイトのCSSを編集する作業には、2つの大きなハードルがあります。
1つは、ほかのページのスタイルも変わってしまう危険性があることです。あるページのデザインを変えるだけでよいのに、気がついたら別のページも変わってしまった、ということがあり、注意が必要です。
もう1つは、思ったとおりにスタイルが適用されないことです。書いているCSSは正しいはずなのに、表示が変わってくれないことがよくあります。
この2つのハードルは、別々の原因で発生します。一つひとつハードルをクリアすることで、ほかのページのスタイルを変えず、正しくスタイルを適用できることができます。
＊前提知識
本稿の内容をひととおり理解するには、入門レベルの、基本的なCSSの知識が必要です。
2. 「ほかのページのスタイルも変わってしまう」ことに対処する
既存のWebサイトのCSSを編集するには、まず「ほかのページのスタイルが変わってしまう」ことに対処します。これはCSSファイルが多数のHTMLファイルで共用されていることが原因で発生します。
HTMLは原則として、「1枚のHTMLファイルが1枚のWebページ」になります。1枚のHTMLファイルを編集しても、影響範囲はその1枚のWebページだけで済みます。
ところが、CSSファイルは一般に、複数のHTMLファイルからリンクされています。そのため、CSSファイルを編集すると、リンクしているすべてのHTMLファイルに影響が及びます。
結果的に、変更する必要がないページのスタイルまで変わってしまう恐れがあります。
▲CSSファイルは複数のHTMLファイルからリンクされているので、変更するとすべてのページに影響する。
ほかのページのスタイルが変わってしまうことを防ぐ方法は何通りかあるのですが、スタイルを書き換えるための新しいCSSファイルを作ることが取り組みやすく、安全です。
<head>
【省略】
<link rel=“stylesheet” href=“css/style.css”> /* すでに読み込まれているCSS */
<link rel=“stylesheet” href=“css/campaign-custom.css”> /* ←追加。新しく作成したCSSを読み込む */
</head>
▲スタイルを書き換えたいページのHTMLファイルに、新しく作成したCSSファイルを読み込む。
ポイントは、新しく作成したCSSファイルを読み込む際は、既存のCSSファイルよりも後に読み込まなくてはならない、ということです。この例では、「style.css」という既存のCSSファイルがあったため、新しく作った「campaign-custom.css」はそれよりを後に読み込みます。
■後に読み込むのは「カスケード規則」に対応するため
なぜ、新しいCSSを後から読み込まなくてはならないのでしょう？
それは、CSSには「カスケード」という規則があるからです。カスケードは、後から読み込まれたスタイルが、前に読み込まれたスタイルを上書きするという規則です。
たとえば、先に読み込まれるstyle.cssと、後から読み込まれるcampaign-custom.cssに、次の図のようなCSSスタイルが書かれているとしましょう。このスタイルはどちらもセレクタが「p.summary」になっています。
▲style.cssとcampaign-custom.css
CSSは、先に読み込まれたものから、そしてソースコードの上のほうに書かれたものからどんどんスタイルを適用していきます。
そして、後から出てきたスタイルは、先に出てきたスタイルを、プロパティ単位で上書きします。
この例では、次の図のように、「font-weight」プロパティの値を、後から読み込まれたCSSが上書きします。この動作を「カスケード規則」といいます。
▲カスケード規則の例。同じ要素に適用されるスタイルは、プロパティ単位で書き換わる。
このカスケード規則の動作のため、スタイルを書き換えたいときは、書き換えるほうのCSSファイルを後から読み込むようにします。
■<style>タグを利用するのでもOK
新しいCSSファイルを作らずに、HTMLの<head>〜</head>内に<style>〜</style>タグを追加し、その中にスタイルを書いてもかまいません。
<style>タグを使う場合であっても、既存のCSSを読み込む<link>タグより後ろに書きます。
<head>
<link rel=“stylesheet” href=“css/style.css”> /* すでに読み込まれているCSS */
<style>
/* ここに新しいCSSを書く */
</style>
</head>
▲<style>タグは既存のCSSファイルを読み込む <link>タグより後ろに書く。
このように、新しいCSSファイルを読み込むか、<style>タグを追加すれば、ほかのページのスタイルを書き換える心配はなくなります。
3. 「思ったとおりにスタイルが適用されない」に対処する
「正しいCSSを書いているはずなのに、スタイルが変わってくれない…」
運用中のCSSを編集しようとしたときに、よく遭遇する悩みです。経験がある方もいらっしゃるかもしれません。
スタイルが適用されない原因は、大きく分けて3つあります。
- 書いたCSSが正しくない
- カスケード規則により、新しく作成したスタイルが既存のスタイルに上書きされてしまっている
- 「詳細度」が、既存のスタイルの詳細度を下回っている
1は、正しいCSSを書けば解決します。落ち着いて、書いたCSSを見直します。
2は、「『ほかのページのスタイルも変わってしまう』ことに対処する」で説明したように、新しく作成したスタイルを、既存のスタイルよりも後に読み込めば解決します。
3について、これから解説します。
■「詳細度」ってなに？
「詳細度」とは、スタイルを適用する優先順位を決める点数です。詳細度は、CSSのルールに使われているセレクタによって決まり、点数が高いほど、スタイルが適用される順位が高まります。
▲この部分（セレクタ）が詳細度を決める。
すでに適用されているスタイルを上書きするには、新しく作るスタイルのセレクタの詳細度を「同じ」か、「それ以上」にする必要があります。
詳細度を同じにするため、スタイルを書き換えるときは、「すでに適用されているスタイルと同じセレクタを使う」のが簡単です。
MEMO 詳細度の計算方法
ちなみに図のセレクタの詳細度は (0, 2, 0) です。ただ、詳細度の計算は少し複雑なので本稿では扱いません。
＊詳しく知りたい方は「詳細度 - CSS: カスケーディングスタイルシート | MDN」を参照してください。https://developer.mozilla.org/ja/docs/Web/CSS/CSS_cascade/Specificity4. 実際のサイトを例に実践してみる
それでは、実際に公開されているサイトを例に、どんな作業をするのか見てみましょう。
ここでは、架空の更新作業を考えます。実際にスタイルを書き換えるわけではありません。
こんな更新作業が発生したとしましょう。
▼作業対象ページ
https://www.r-staffing.co.jp/engineer/
▼作業1
記事へのリンクテキストのフォントサイズを変更する──既存のスタイルにあるCSSプロパティの値を変更
▼作業2
記事へのリンクのボックスをボーダーラインで囲む──新しいCSSプロパティを追加
こんな作業の依頼が来たら、どのように対応するとよいか。試しに考えてみましょう。
5. 作業１：リンクテキストのフォントサイズを変更する
作業1では、既存のスタイルにあるCSSプロパティの値を変更します。
「itstaffing エンジニアスタイル」のトップページにある、記事へのリンクのテキストのフォントサイズを少し大きくします。
▲フォントサイズを変更する。作業前と作業後
それでは始めます。
ブラウザで編集したいページを開きます【1】。次いで［Ctrl］＋［Shift］＋［I］キーを押して開発ツールを開きます【2】。
▲ページを開いたのち、開発ツールを開く。
開発ツール左上の［ページ内の要素を選択して検査］ボタンをクリックしてから【3】、記事へのリンクのテキストをクリックして選択します【4】。
該当するHTMLのソースコードが、開発ツールに表示されるので、正しい要素が選択されていることを確認します。
もし選択された要素が正しくない場合は、HTMLのソースコードの前後を見て、正しい要素をクリックします。
▲ページ上で選択した部分のHTMLが表示される。
開発ツールには、該当するHTML要素の右側に、適用されているCSSが表示されています。［スタイル］タブをクリックすると【5】、適用されているCSSのソースコードが表示されます。
このソースコードの中から、フォントサイズを設定しているプロパティ（font-size）を探します。
font-sizeプロパティが複数ある場合は、斜線（※斜線が引かれているものは、別のスタイルで上書きされていることを示しています。）が引かれていないものを探します。
そして、font-sizeプロパティの値（ここでは1rem）をクリックし、書き換えてみましょう。開発ツールでソースコードを編集しても保存されないので、本当にページのデザインが変わることはありません。
▲font-sizeプロパティを探して、値を書き換えてみる。
CSSを編集すると、その変更は即座にページの表示に反映されます。思ったとおりにテキストのフォントサイズが変われば、成功です。
▲ページの表示を確認して、思ったとおりになっているかどうかを確認する。
CSSを書き換えて、ページの表示が変わったら、「そのスタイルのセレクタを使えばよい」ことがわかります。
そこで、セレクタをコピーします。
Google Chromeの場合は、プロパティの値を書き換えたスタイル（ルール）のセレクタを右クリックし【6】、出てきたメニューの「selectorをコピー」をクリックします【7】。
▲セレクタをコピーする。
実際にWebサイトのCSSを更新する場合は、いまコピーしたセレクタを、作成した新しいCSSファイル（または<style>〜</style>の中）に貼り付けて、実際のスタイルを記述します。新しく作成したCSSには、たとえばこのようなコードを書くことになります。
#main .recent-entries-title {
font-size: 1.2rem;
}
▲スタイルの追加例
Google ChromeでCSSのセレクタにマウスポインタをホバーすると、「特異性」と表示されます。この「特異性」は、詳細度と同じ意味です。
6. 作業2：リンクのボックスをボーダーラインで囲む
作業1では、既存のスタイルにすでに書かれているCSSプロパティの値を書き換えるケースを試してみました。
作業2では、CSSプロパティを追加するケースを考えます。
記事へリンクしている各ボックスを、ボーダーで囲みます。
▲記事へリンクしている各ボックスをボーダーで囲む。作業前と作業後
現在のデザインでは、記事へリンクしている各ボックスはボーダーで囲まれていないため、的確なスタイルにボーダーで囲むためのプロパティを追加します。
基本的な作業は作業1と同じですが、「ボーダーをどの要素につければよいか」を考えながら作業を進める必要があります。
ページを開き、開発ツールを開きます（方法は作業1をご覧ください）。
そして、ボーダーをつける要素を探します。
いまのところ、記事のボックス自体にはボーダーも背景色もついていないので、ページには見えていません。そこで、日付やサムネイル画像、記事のテキストなどをすべて囲んでいる要素を探してクリックします。該当するHTML要素が選択されます【1】。
▲記事のボックスを探してクリックし、HTML要素を選択する。
選択されたHTML要素に適用されているCSSスタイルを見ます。1番上に表示されているスタイルに、ボーダーラインをつけるプロパティを追加します。たとえば次の図のようなコードを、{〜}内に入力します【2】。
▲CSSにコードを入力する。
ページの表示を見て、記事のボックスがボーダーラインで囲まれていれば成功です。
▲ボーダーラインで囲まれていることを確認する。
あとの手順は作業1のときと同じです。ボーダープロパティ（border）を追加したCSSスタイルのセレクタをコピーして、新しく作成したCSSファイルにスタイルを追加すれば、更新が完了します。
さいごに
既存のWebサイトのCSSを編集するのは、影響範囲が大きくてほかのページのスタイルまで変わってしまうことがあるのと、思ったとおりにスタイルが適用されないことの、2つの大きなハードルがあります。 デザインを更新するページ専用のCSSファイルを作り、開発ツールを見ながら的確なセレクタを使うことで乗り越えます。ブラウザの表示結果を見ながら少しずつ、慎重に作業を進めましょう。
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
