スキル

初心者向け:CSSコーディングのルールとコツを伝授

自分の思い通りのWebサイトを作りたいなら、最低限必要となるのがHTMLとCSSの知識です。特にCSSは、Webサイトの見た目をデザインするのに重要です。

とはいえ、今までWebサイトの制作もプログラミングも行った経験のない人にとっては、どうやってコーディングしたらよいか悩んでしまいますよね。

そこで、この記事では、CSSを使ったコーディングのコツをご紹介します。

CSSコーディングの基礎知識

Webサイトを制作する際は、まずPhotoshopやPowerPointなどを使ってWebサイト全体のデザインを行います。Webサイトのカラーやレイアウトを決めてから、実際にHTMLとCSSを使用してコーディングしていく流れです。

ところで、Webデザイン初心者の中には「CSSって何?」という方もいらっしゃるでしょうから、まずはCSSについて解説しようと思います。

Webサイトの装飾ができるCSS

Webサイトは基本的にHTMLとCSS、JavaScriptの3つの言語を使用して作られています。HTMLは、文章を改行したり画像を設定したりと、Webサイトの骨組みを作成するのに使用します。以前はHTMLのみでもWebサイトを制作できましたが、現在はHTMLでWebサイト全体の骨組みを作り、CSSを使用して装飾するのが一般的です。

CSSを使えば、文字や背景のカラーを設定したり、文字のサイズを決めたりして思い通りのWebサイトを作ることができます。1つのHTMLファイルに複数のCSSファイルを適用することで、デザイン違いのWebサイトを量産することも可能です。

これに加えて、JavaScriptで動きを表現します。例えば、Webサイトで良く使われている画像のスライド表示にはJavaScriptが使われています。

知っておくべきコーディングルール

Webサイトのコーディング作業には、いくつかのコーディングルールがあります。ルールをきちんと守れば、エラーが起きにくくなってスムーズにWebサイト制作が進むようになるので、基本的なルールは身につけておきましょう。

コードが読みやすくなるコーディングルール

コーディングルールとは、名前の通り、コーディングに関する決まり事のことです。前述のとおり、Webサイトを制作する際はHTMLやCSSでコーディングを行いますが、Webサイトで特定のデザインや動きを表現するには、複数のコーディング方法があります。

そのため、WebデザイナーやWebコーダーによってコーディングのやり方が異なることがあります。一人でWebサイトを制作する際は、独自のコーディングルールに従ってコーディングしていけばよいのですが、グループで作業するとなるとそうはいきません。

いろんな人が各自のスタイルでコーディングを行ってしまうと、ソースコードを後から読み返した時に訳が分からなくなってしまいます。

ソースコードの修正が行いやすい

チームでWebサイトを制作する際は、コーディングルールを決めておくと作業が行いやすくなります。

また、Webサイトは一度作って終わりではなく、何度もメンテナンスが必要となります。その際、チームでコーディングルールが決まっていれば誰でも修正できるようになるので、メンテナンスが容易になるというメリットがあります。

自分のコーディングパターンを使い回せる

個人でコーディングする際も、コーディングルールを決めておくと必要な部分だけコピーして使いまわせるようになるので、Webサイト制作の手間と時間を省けます。

Webデザインを本格的に始めると、いろいろな作業を同時に行わなければならない時がでてきます。そんな時でも、コーディングルールが決まっていれば、混乱することなくスムーズに作業を進めることができるでしょう。

Googleに評価されやすいCSSコーディングルール

CSSを独学していると、いつの間にか自分なりのコーディング方法が身につくものです。しかし、Googleは簡潔で分かりやすいCSSを高く評価する傾向があるので、自己流のCSSの書き方では検索結果で上位表示されない可能性が高まります。

そこで、Googleに評価されやすいCSSのコーディングルールを知っておきましょう。

idやclass名は分かりやすくする

コーディングでは、CSSでHTMLに設定したclassやidを指定して装飾を施せます。例えば、HTMLに記載した<p class=”text”>内の文章を赤色に設定したい場合は、CSSで「.text{font-color: red;}」と指定します。

この際、classに指定する名前は自分で考えたもので構いません。ただし、先ほどのようにただ「text」と書くだけだと何のテキストか分かりにくいのでハイフンを付けるなどして名前を工夫しましょう。例えば、「text-item01」とすれば、アイテム01に関するテキストだと一目で分かるようになります。

idやclassは複雑にしすぎない

コーディングにおいて、各要素には複数のclassを設定することができます。例えば、<p class=”text diary”>というように、「text」と「diary」両方のclassを設定できます。

とはいえ、classをたくさん設定しすぎると複雑になり過ぎて、後からメンテナンスする時に困ってしまいます。特別な場合を除いて、classは1つだけ設定するようにしましょう。

1行でスッキリまとめる

CSSに慣れてきたら、少しずつCSSの記述をシンプルにしていきましょう。

例えば、背景を設定する時に以下のプロパティを使用するとしましょう。

background-color: #FFF;

background-image: url(images/happy-sun.jpg);

background-repeat: no-repeat;

background-position: right top;

実はこれらの記述は、以下のように1行にまとめることができます。

background: #FFF url(images/happy-sun.jpg) no-repeat right top;

まだCSSに慣れていない頃は頭の中が混乱しがちになるので1行ずつ確実に記述した方が良いですが、慣れてきたら「1行にまとめて書く」を意識しましょう。

「0」は書かない場合もある

文字の大きさやボーダーの太さを指定する時は「px(ピクセル)」という単位を使います。例えば、ボーダーの線の太さを設定する際は「border-width: 1px;」と書きます。

ただ、このように1pxや50pxなどを指定する時は「px」をつけますが、0pxの時はただ「0」と記載しておけばOKです。「0px」というように書いてしまわないように注意してください。

小数の「0」は省略できる

CSSを記載していると、文字の大きさを0.6remにするなど、1以下の数字を設定することがあります。その際は、「0」を省略してしまって構いません。例えば、「0.6rem」と入力するのに替えて「.6rem」というように「0」を省いても大丈夫です。

カラーコードの短縮形を利用する

CSSでは、フォントカラーや背景色をカラーコードで表現できます。例えば、青色にしたい場合は「#0000FF」、3桁の短縮形では「#00F」で表現できます。

なお、カラーコードは、ネットで「CSS カラーコード」で検索すれば一覧表が記載されたサイトがヒットするので、暗記する必要はありません。

読みやすいCSSの書き方

 CSSは「.text{font-size: 14px;}」のように1行で書き表すことができます。ただ、このように1行で書ける時は良いのですが、だらだらと長い内容になる場合は読みにくくなってしまいます。

そのため、CSSは複数行で記載するのが基本です。例えば、以下のように記述します。

.text{
font-size: 14px;
}

コードはできるだけシンプルに記載する

CSSは複数行に分けた方が、後から見直したときに分かりやすくなります。だからといって、ソースコードを複数行に分けて書きすぎると複雑になってしまいます。CSSを後からメンテナンスしやすいように、できるだけコードの量は減らすように工夫しましょう。

コメントで分かりやすくする

HTMLと同様に、CSSでも、どのセクションをどこに記述したのか分からなくなる時があります。後で混乱するのを避けるためにも、どのセクションの部分を記述しているかが分かるようにコメントを加えておきましょう。

例えば、「/*ここからheader*/」というように、後からでもパッと見て分かるように記載するのがコツです。

知っておくと便利なCSS関数

実は、CSSでは関数も使用できます。

例えば、一部分のフォントを通常よりも5pxだけ大きくしたい時ってありますよね。そんな時、16px+5px=21pxというように足し算してから入力しても良いのですが、後から見直した時に「何で21pxに設定したんだっけ?」となることがあります。

そこで、以下のように記述してみましょう。

.text {
    font-size: calc(1em + 5px);
}

こう記述することで、通常のフォントサイズ(1em)よりも5pxだけ大きいサイズに設定した、ということが一目瞭然になります。

このように、CSSでは便利な関数がたくさん使えます。

ここからは、知っていると役に立つCSS関数をご紹介します。

計算式で数値を設定できる

CSSのコードでは、100pxや50%というように数値を使って文字サイズやコンテンツの幅を設定できます。さらに、数値の直接入力だけでなく「calc()」を使用して計算式で設定することもできます。

例えば、通常は以下のように記述します。

.red-box {
width: 170px;
}

「calc()」を使用すると、以下のように異なる単位の計算もカッコ内で行えます。

.foo {
width: calc(100% – 25px);
}

単位の違うものを自分で計算するのは手間がかかりますが、「calc()」を使うと自動的に計算されるので楽になりますよ。

手順を説明するのに活用できる

Webサイトでは、何かの手順を紹介することってありますよね。例えば、以下のような感じです。

<ol>
    <li>レタスを一口大にちぎる</li>
    <li>オシャレな皿に盛りつける</li>
    <li>手作りドレッシングをかける</li>
</ol>

以上のHTMLをブラウザで表示させると、以下のようにになります。

1.レタスを一口大にちぎる
2.オシャレな皿に盛りつける
3.手作りドレッシングをかける

このままでも十分なんですが、ここはcounter関数を適用させてみましょう。CSSでは以下のように記述できます。

body {
  counter-reset: i;
}
li:before {
  counter-increment: i;
  content: レシピ counter(i) :;
}

こちらのCSSスタイルを適用すれば、以下のように表示させることができます。

レシピ1.レタスを一口大にちぎる
レシピ2.オシャレな皿に盛りつける
レシピ3.手作りドレッシングをかける

Webサイトで何かの手順を説明する時に使ってみてください。

Webアプリケーションに活用できる

Webサービスを作る際、「ToDoリスト」のようなコンテンツを作成することがあります。そんな時に使えるのがattr関数です。例えば、以下のように書いてみましょう。

<li data-label=”ToDo:”>ボールペンを購入する</li>

このHTMLに以下のCSSを記載します。

li::before {
  content: attr(data-label);
}

すると、設定したdata-label(データラベル)の「ToDo」が表示されるようになります。

ToDo:ボールペンを購入する

attr関数はアプリケーションの開発にも利用できるので、覚えておくとよいでしょう。

最小値と最大値を設定できる

CSSを使って最大値や最小値を設定する場合は、minmax関数を使用できます。例えば、3つのグリッドが横並びになっている場合、1つのグリッドの幅を50~150pxの範囲に指定したいとします。

そんな時、CSSでは以下のように記述できます。

.grid {
    display: grid;
    grid-template-columns: minmax(50px, 150px) 1fr 1fr;
}

すると、Webサイトを表示する端末に合わせて、グリッドが50~150pxの範囲で変化して表示されます。

CSSコーディングを身につけよう

「これからWebサイトを作りたいなぁ」と思っても、HTMLやCSSに関する知識を勉強するのは大変ですよね。実際CSSだけでもWebサイト制作に活用できるソースコードは数多くあるので、どれを使ったらよいか悩んでしまうこともあるでしょう。

しかし、実際に手を動かしてCSSコーディングしていけば、確実に実力はアップしていきます。

まずは、インターネット上に公開されているCSSコーディングに関する情報や書籍等を参考に、実際にコーディングすることから始めてみてください。