Hand Inc.でフロントエンドエンジニアをしていますEiです。
社内のデザイナー向けにHTML・CSSの入門講座として勉強会を開催しましたので、その時の内容を記事にまとめました。
本記事は前回のHTML編の続きのCSS編です。前回のHTML編はこちらからご覧ください。
CSSの基本
では早速、CSSの基本から学びましょう。CSSの書き方は以下のようになります。
以下の例の場合、h1はHTMLの<h1>タグにスタイルを当てることを意味します。
これをセレクターと言い、その中に設定したいプロパティと値を記載します。
この例の場合、colorプロパティーが文字色を意味し、その値がblueなのでこれは文字色が青になります。
またその下にあるbackground-colorプロパティーは要素の背景色を意味し、その値がyellowなのでこちは背景色が黄色になります。
それらを合わせるとこの<h1>タグは以下のような見た目になります。
H1見出し
CSSはこのように様々なプロパティーを組み合わせてスタイルを当てていきます。
CSSの記載場所
CSSを記載する場所は複数の方法がありますのでそれを紹介します。
内部スタイルシート
以下のようにHTMLの<head>内の<style>要素の中に記載する方法です。
内部スタイルシートは複数のページを持つサイトでは全部のHTMLファイルに記載する必要があり、効率の悪い作業方法になるため、実際の仕事の現場ではほとんど使用しません。（※意図的に使用する場合はあります）
インラインスタイル
単一の HTML 要素のみに影響を与える CSS 宣言で、以下のようにstyle 属性の中に記述する方法です。
※CSS の実装の中では最も保守の効率が悪いので、可能な限りは使用を避けます。
外部スタイルシート
.cssという拡張子を持つ別のファイルにCSSを記載し、HTMLから読み込む方法です。
最も一般的な方法で仕事の現場では基本的にこちらの外部スタイルシートを使用しますので覚えておきましょう。
<link rel=”stylesheet” href=”style.css” />
linkタグを使用して読み込み、href属性にファイル名を記載します。上記の例ではstyle.cssという名前のCSSファイルを読み込む記述になります。
セレクター
続いてセレクターについて紹介します。
CSS セレクターはどの HTML 要素にスタイルを当てるのかブラウザーに伝える役割を持つものです。要素やその他の用語の組み合わせがありますので以下に代表的なものをいくつか紹介します。
HTML要素
HTMLのタグを直接指定する方法です。タグの名前を記載します。
以下の例ではh1タグの文字色が青になります。
id属性
id属性で指定する方法です。id名の前に#（シャープ）を付けます。
以下の例ではtextというid属性が付いている要素の文字色が赤になります。
ただし、id属性はHTML内でひとつの要素にしか付けられず汎用性がないため、スタイルを当てるのにはあまり使用しません。
class属性
class属性で指定する方法です。class名の前に.（ドット）を付けます。
以下の例ではtextというclass属性が付いている要素の文字色が青になります。
id属性と違ってclass属性は複数の属性に付けることができ汎用性が高いため、スタイルを当てるときはこのclass属性がよく使われます。
特定の要素
複数のセレクターを組み合わせて特定の要素を指定することもできます。
以下の例の場合、「h1 span」はh1タグの中にあるspanタグの中の文字が青色になります。
また、「p.text」はtextというclass属性が付いているpタグの文字が赤色になります。
特定の箇所にだけスタイルを当てたい場合に使用します。
擬似クラス
擬似クラスという要素の特定の状態にスタイルを当てる方法です。:（コロン）を擬似クラス名の前に付けます。
以下の例ではhover（ホバー）というユーザーのマウスのポインターがaタグの上に乗ったとき文字色を青色にする記述です。
結合子
+（プラス）を使用して隣り合っている要素にスタイルを当てる方法です。
以下の例では、pタグの次にあるpタグが青色になります。
以上、代表的なセレクターを紹介しました。
セレクターはまだまだ他にもありますので、現時点では色々な指定方法があるということを知っておきましょう。それぞれどのようなものがあるかは今後使いながら覚えていくといいでしょう。
よく使用するプロパティ
続いてよく使用するプロパティを一部紹介します。
文字サイズ（font-size）
文字の大きさを設定するプロパティです。
font-size: 16px;
行間（line-height）
行の間を設定するプロパティです。単位は付けず、相対値で設定するのが一般的です。
line-height: 1.5;
文字間（letter-spacing）
文字の間を設定するプロパティです。単位はemという文字の大きさに対する相対単位で設定するのが一般的です。
letter-spacing: 0.1em;
文字色（color）
カラーコードや色名で指定できます。
color: #ffffff;
color: red;
文字太さ（font-weight）
boldなどのテキストでの指定や100,200,300 … 900のように数値での指定ができます。
※数値はフォントによって使用できるものが決まっています。
font-weight: bold;
font-weight: 700;
文字配置（text-align）
left（左）、center（中央）、right（右）で文字の位置を設定できます。
text-align: center;
背景色（background-color）
文字色と同様にカラーコードだけでなく色名でも指定できます。
background-color: #eee;
余白（margin、padding）
要素に対して外側の余白をmargin、内側の余白をpaddingで設定します。
margin: 100px 60px;
padding: 20px;
サイズ（height、width）
高さをheight、幅をwidthで設定します。
height: 500px;
width: 100px;
ボーダー（border）
線の太さ、線の種類、線の色を設定します。
border: 10px solid #32a1ce;
以上、代表的なプロパティを紹介しました。
ここで紹介するもの以外にもたくさんありますので、使いながら徐々に覚えていきましょう。
詳細度
セレクターの種類とプロパティーの種類を学んだので、続いては詳細度についてです。
かんたんに言うとスタイルが適用される優先順位です。
例で見てみましょう。以下のようなHTMLのコードがあるとします。
<div id=”box”>
<h1 id=”heading” class=”heading”>見出し</h1>
</div>
こちらに以下のようなCSSでスタイルを当てたとします。
これらは全て<h1 id=”heading” class=”heading”>見出し</h1>の要素に対するスタイルです。
CSSは通常上から順に読み込まれるため、同じ要素に対するセレクターがある場合は通常は一番下のものが適用されます。
ただし、その要素に適用されるプロパティの値は詳細度によって決定されるため、この場合はID属性が優先されるので、color : redとなり見出しの色は赤になります。
これは詳細度が「ID属性 > class属性 > HTML要素」という優先順になっているためです。
こちらの一番詳細度が小さいHTML要素であるh1セレクターを、以下のようにboxという名前のid属性を持つ要素の中のh1となるように書き換えると、詳細度があがり優先度が一番上になるため文字色は青になります。
このように詳細度によって適用されるものが変わってきます。
なるべく詳細度を同じにするため、実際の仕事の場ではclassにスタイルを当てるのが主流となっています。
無駄に詳細度は上げない方が保守しやすいためです。
まずは詳細度によって優先順位があるというのを覚えておきましょう。
CSSを書いていて意図したところにスタイルが反映されない場合は詳細度が影響していることがありますので、その場合は見直してみてください。
メディアクエリー
現在はパソコン、タブレット、スマホなど様々なデバイスがあり、画面幅も端末によって異なります。そのため、画面幅に合わせてデザインを調整する必要があります。
レスポンシブという、ひとつのHTMLコードを用意して表示する画面幅に合わせてスタイルを切り替える方法が現在は取られています。その幅に応じて切り替えるために使用するのがメディアクエリーですので、こちらも覚えておきましょう。
最大条件
@media (max-width: 最大のサイズ)と最大の幅を指定する方法。該当するセレクターを{}で囲みます。
以下の例は450px以下の画面にスタイルが適用されます。
@media (max-width: 450px) {
h1 {
color: blue; }
}
最小条件
@media (min-width: 最小のサイズ)と最小の幅を指定する方法。
以下の例では1000px以上の画面にスタイルが適用されます。
@media (min-width: 1000px) {
h1 {
color: blue;
}
}
複数条件
andで繋ぐことで複数の条件も設定できます。
以下の例では0~400pxと1000px以上の画面にスタイルが適用されます。
@media (min-width: 1000px) and (max-width: 400px) {
h1 {
color: blue;
}
}
これらはデザインや状況に応じて使い分けをしてきますので、使いこなせるようにしましょう。
最後に
以上、簡単にですがCSSの基本となるセレクターやプロパティー、詳細度やメディクエリーについてを紹介しました。
前編のHTML編の記事と合わせて、HTMLとCSSの入門として雰囲気を掴んでいただけたら幸いです！
こちらで紹介したものは一部ですので、もっと詳細を学びたい方は、公式ドキュメントに詳細がありますので見てみてください。
Webデザインをやるならコーディングの基礎知識は必須ですので、やりやすい方法で勉強してみてください。初心者向けの入門書も多数出版されていますので本で学ぶのもおすすめです。
Hand Inc.はさまざまな技術を持ったクリエイター達が集まった、
少数精鋭のデザインクリエーティブカンパニーです。
ブランディングからグラフィックデザイン、アート、
3Dや映像制作、WEBサイト制作など幅広く対応いたします。
この記事を書いた人
