Webサイトは、HTMLと呼ばれるファイルと、CSS（スタイルシート）と呼ばれるファイルから出来ています。テンプレートを使ってサイトを作る場合、必ず行わなければならないのがHTMLの編集ですが、CSSは特に編集する必要がありません。
しかし、CSSを編集することができれば、テンプレートから作ったサイトでもオリジナリティをもたせることができます。それは、CSSがサイトの色、書体、文字の大きさなどの見た目を決める役割を担っているからです。
この記事では、CSSに触れたことがない、けれどサイトにもっとオリジナリティを持たせたい！ という方向けに、CSSの編集方法を紹介します。HTMLとは記法が異なりますが、共通する部分も多いので、覚えるのはそれほど難しくありません。ぜひ挑戦してみて下さい！
CSSファイルって？
CSSファイルとは、HTMLで書かれた文書を装飾するためのもので、見やすくオシャレなWebサイトを作るためには欠かせません。ネット上に公開されているほぼ全てのWebサイトでCSSが使われている、と言ってもよいでしょう。
CSSファイルが関与するサイトの見た目の例として、次のようなものがあります。
- 文字の色、サイズ、書体、太さ、字間および行間
- 背景の色、余白の大きさ
- 要素の枠線の有無、および枠線の種類、太さ、色
- 要素の位置や重なり
- その他
「do」で配布しているテンプレートでも、もちろんCSSを使っています。例えば、以下はテンプレート「modern」のHTMLソースの冒頭部分です。
<!DOCTYPE html> <html lang="ja"> <head> ～中略～ <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/fuwaimg.css"> </head>
<head>タグの中に、<link rel="stylesheet" href="〇〇〇.css">と書かれた行が二つあるのがわかります。それぞれの行で、ひとつずつCSSファイルを読み込んでいることになります。この場合は、cssフォルダに格納されているstyle.cssと、同じくcssフォルダに格納されているfuwaimg.cssのふたつです。
この例だと、当サイトで配布している画像表示用プログラム「fuwaimg」を実装するためのCSSも読み込んでいますが、個人サイト向けテンプレートでは、CSSファイルをひとつしか使っていない場合もあります。CSSファイルの命名に特に決まりはありませんが、サイト全体のデザインを決めるCSSファイルは多くの場合「style.css」とか「common.css」のような名前がつけられています。
また、CSSファイルは「css」と名前のつけられたフォルダに入れられているケースも多いです。
CSSの読み込みを削除すると……？
では、CSSがどれだけサイトの見た目に関わっているか確認するために、テンプレート「modern」からCSS読み込みの記述を削除してみましょう。
CSS読み込みをしている行を削除してみると……
何も装飾されていない状態のHTMLになりました。書体やリンクの色、背景色や余白、リストの装飾などがすべてリセットされています。こうして見ると、CSSがサイトのデザインにいかに大きく関わっているものかがよく分かりますね。
CSSの記法
次に、CSSがどのように書かれているか見てみましょう。最初は慣れないコードの羅列に頭が痛くなるかもしれませんが、ひとつずつ理解していけば大丈夫です。いきなりすべてを覚えられなくても問題ありませんので、最初は「ふ～ん、こういうことができるだ」くらいに思っておいて、必要になったらこの記事に戻ってきて確認するくらいでOKです。
装飾する要素の指定
さっそく、modernのstyle.cssを見てみます。開いてみると、何やら小難しいコードがずらずらと書かれています。
body {
background: #eeedf1;
color: #242424;
margin: 0;
padding: 0;
font-size: 15px;
font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
}
少し下の方にスクロールすると、このような記述があります。bodyは、HTMLを編集したことのある皆さんならご存じの<body>タグのことです。この記述では、<body>タグの見た目を決めています。一行ずつ解説をつけるとこんな感じです。
body {
background: #eeedf1; // 背景色は#eeedf1
color: #242424; // 文字色は#242424
margin: 0; // 外側の余白は０
padding: 0; // 内側の余白は０
font-size: 15px; // 全体の文字サイズは15px
font-family: 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif; // 文字の書体はメイリオが最優先
}
modernの背景色は淡いグレー（スマホから閲覧している場合は見えない部分）ですが、背景色をグレーから黒に変えたい場合は、background: #eeedf1;の部分を編集すればよい、というわけです。
クラスやIDを使った要素の指定
また、CSSでは見た目を変える要素を指定するとき、タグ名だけでなく、クラスやIDの名前を使って指定することもできます。
a {
color: #242424;
text-decoration: underline;
...
}
～中略～
a.btn {
display: block;
background: #fbe125;
text-decoration: none;
text-align: center;
...
}
クラスを指定するには、半角ピリオド.に続けてクラス名を記述します。この例では、<a>リンクタグに文字色（#242424）と文字装飾（underline：下線つき）を設定したあと、「btnクラスがついた<a>リンクタグ」を指定して、背景色（#fde125）、文字装飾（none：装飾なし）などを設定しています。
text-decorationで設定する文字装飾の記述が被ってしまっていますが、この場合は、単純に「<a>リンクタグ」と指定した場合より、「btnクラスがついた<a>リンクタグ」の方が限定されているため、後者の設定が優先して適用されます。つまり、何もクラスのついていない<a>タグでは下線がつくけれど、btnクラスのついた<a>タグでは下線がつかない、というふうになります。
<a href="...">このリンクは下線が付く</a> <a href="..." class="btn">このリンクは下線がつかない</a>
IDを指定する場合は、半角ピリオド.ではなく半角シャープ#を使います。
a#example {
～ここにスタイルの指定～
}
入れ子になっている要素の指定
例えば「<header>タグの中にある<p>段落だけにスタイルを適用したい」という場合は、次のように記述します。
header p {
text-align: center;
font-size: 12px;
}
親要素であるheaderを記述したあと、半角スペースで間を空けてpを記述します。このように書くと、<header>タグの中にある<p>段落はフォントの大きさが12pxになりますが、<header>タグの外の<p>段落には影響しないスタイル指定が可能になります。
入れ子構造の階層の深さには制限がなく、クラス指定やID指定と併用することもできます。
ul.illust li a img {
～ここにスタイルの指定～
}
複数の要素の一括指定
同じスタイルを複数の要素に指定したいときには、要素を半角コンマ,で区切って併記します。
a.btn, a.btn01, a.btn02 {
～ここにスタイルの指定～
}
上のように書くと、btnクラス、btn01クラス、そしてbtn02クラスのうち、いずれかを持つ<a>リンクタグに、同じスタイルが適用されます。
まずは試してみよう
習うより慣れよ、ということでさっそく実際にCSSを編集してみましょう！
あなたの実際に運営しているサイトのデータでも、新しくダウンロードしたテンプレートでも構わないので、CSSファイルを開いてみて、どこか適当な個所を書き換えてみましょう。
もっとも変化がわかりやすいのは、やはり<body>タグの背景色（background、もしくはbackgroud-color）かと思います。
body {
background: #eeedf1;
～略～
}
色の指定は半角シャープ#からはじまるカラーコードでもよいですし、black、white、redなどの英語名でも構いません。今の色とは違う色に書き換えてブラウザでHTMLファイルを開き、背景色が変化していれば成功です。
CSSの変更が反映されないときは
CSSファイルの編集とは厄介なもので、正しく記述をしたはずなのに、ブラウザで確認したら変更が反映されていない……ということがよくあります。このような現象にはいくつか原因が考えられます。
- ブラウザのキャッシュに編集前のCSSが残っている（最もよくあるパターン）
- 記述したCSSより優先度の高いスタイル指定がCSSファイルのどこかに書かれている
- そもそも、CSSの記述が間違っている
まずはブラウザのキャッシュをクリアして、リロードしてみましょう。それでも解決しない場合、詳しい対処法を以下の記事で解説しているので、参考にしてみてください。
コメントアウトを活用しよう
背景色をちょっと変えるくらいならいいのですが、調子に乗ってCSSをドンドン編集していくうちに、なんだかサイトの見た目がおかしくなっちゃった……しかもどこを修正すればいいのか分からない！ なんてことになる場合があります。
このようなミスを防ぐためにも、CSS編集においてはコメントアウトを活用することをオススメします。
HTMLでは、<!-- ここにコメント -->と記述することで、ブラウザからサイトを見たときには見えない場所に、コメントを残しておくことができます。CSSでも同様のことができます。コメントの書き方はHTMLとは少し違って、以下のような感じです。
/* ここにコメント */
半角スラッシュと半角アスタリスクで囲んだエリアはコメントとなり、CSSの記述として認識されなくなります。これを利用して、削除もしくは上書きしたいCSSの記述をコメントとして残しておいて、何か問題があったらコメントを解除してもとの記述に戻すことで、ミスが発生しても元通りにすることができる、というわけです。
body {
/* background: #eeedf1; */
background: red;
～略～
}
また、それでも不安だという方や、いちいちコメントに残しておくのが面倒だという方は、編集前のCSSファイルをコピーしておいて、バックアップとして保存しておくという方法もありますので、ぜひ活用してください。
慣れてきたらデベロッパーツールを活用しよう
CSSの扱いに慣れてきたらオススメしたいのが、デベロッパーツールを活用したCSSの編集です。
デベロッパーツールとはほとんどのブラウザに実装されている機能で、以下のようなことができるものです。
- 現在閲覧しているページのCSSの検証
- 選択した要素にどんなCSSが適用されているかチェック
- およびCSSの編集、書き足しをした場合のプレビュー
- スマホから見た場合の画面プレビュー
ブラウザ上でリアルタイムでプレビューしながらCSSの変更を試すことができるので、とてもオススメです。詳しい使い方は、以下の記事で紹介しています。
よく使うスタイル記述一覧
最後に、CSS編集をする上で、よく使うであろうスタイル記述をカンタンにまとめておきます。こんなふうにデザインを変更したいけど、どこを編集すればいいのか分からない……というときに、参考にしてください。記載の仕方をもっと詳しく知りたい！ という方は、Googleなどで検索してみるとすぐにヒットするので、ぜひ調べてみてください。
| スタイル記述 | 変わるスタイル | 記載例 |
|---|---|---|
| background background-color |
背景色 | #000000（カラーコード） black（英語色名） |
| background-image | 背景画像 | url('ここにURL') ※CSSファイルの場所から見た相対パスになるため注意 |
| color | 文字色 | #000000（カラーコード） black（英語色名） |
| font-size | 文字サイズ | 16px（ピクセル数） 110%（相対的な大きさ） |
| font-family | フォント | フォント名 |
| text-decoration | 文字の装飾 | none（装飾なし） underline（下線） line-through（打消し線）など |
| border | 枠線 | 1px solid black（1pxの黒い実線） 5px dotted red（5pxの赤い点線） |
| font-weight | 文字の太さ | normal（普通） bold（太い） 500（普通） 900（太い） |
