入社半年目のぽんこです。
今日は現代のwebデザインに欠かせないCSSについて改めて調べてみました。
そもそもCSSとは？
「Cascading Style Sheet(カスケーディングスタイルシート)」を略して、CSSと呼びます。
HTMLタグにCSSでスタイルを定義することで、サイトにデザインを反映することが出来ます。
基本的なCSSの書き方
CSSの書き方としては主に3パターンが挙げられます。
① ヘッダーなどに一括して書く方法。
例 <style>～</style>
② HTMLタグの内部に追加して書き込む方法。
例 <p style=“~”>
③ CSSを外部ファイルに書いて、それを読み込む方法。
例 <link href=”base.css” rel=”stylesheet” type=“text/css”>
最近では、CSSに沢山の情報を書くことが多いので、③のようにCSSを外部ファイルにして管理することが一般的になっています。
CSSを使用するメリット
CSSを使用するメリットはいくつかありますが、その中でも特に大きなメリットは「デザインを一括で管理出来る」ということだと思います。
HTMLタグで書かれたサイトに、CSSでスタイルを定義すると、指定した範囲全てにデザインが適用されます。例えば「この見出しの色をまとめて変えたい!」というときも、CSSを少し変更するだけで済みます。
画像で説明すると…
先日私が練習で作ったtableです。
「この表の年号～十二支の見出しの色を変えたい!」というときも、
この見出しに適用されているスタイルの中のカラーを1カ所変更するだけで…
このように、簡単に見出しの色を変更することが出来ます。
CSSの中身
では実際のCSSの中身が、どのように書かれているのかを見ていこうと思います。
CSSは{}の中に「〜を〜したい」という指定を書きます。
さっきのtableの場合、
「table.year thead th」の「color(=文字色)」を「#fff」にしたい
という指定から
「table.year thead th」の「color(=文字色)」を「#00796B」にしたい
という指定に書き換えることで、見出しの色を変更しました。
今回変更したのは「color」のみですが、作ったtableには他にも沢山の指定をしています。
まず、padding。
paddingは「上下左右の内側の余白」を指定するために使います。
そしてpaddingの数字は左から順に「上、右、下、左」というように時計回りに数字が適用されます。
極端な例として、paddingをこんな風に設定してみます。
すると、このように適用されます。
緑色で示した部分がpaddingです。
因みに見出しのpaddingをなくしてしまうと…
このように上下の余白が詰まって見づらくなってしまいます。
続いて、vertical-align。
これは行の中でテキストや画像など、縦方向の揃え位置を指定するときに使います。
今回はvertical-align: top;なので、「上端に揃える」という指定をしています。
他にも
middle(中央揃え)
bottom(下端揃え)など、指定したい揃え位置によって使い分けます。
colorは先ほど説明した通り、 文字の色を指定します。
因みに、背景の色を変更したいときは、backgroundで指定します。
残る2つは「font」という単語がついている通り、文字に関することを指定しています。
font-sizeは文字のサイズ。今回は42pxを指定しています。
font-weightは文字の太さ。今回はlighter(細字)を指定しています。
CSSを変更するだけで、こんなに変わる
先ほどのtableのCSSのみを変更してみました。
CSSを見比べてみます。
見出しのbackgroundを#ffcdd2、paddingは20pxにして高さを縮めました。
文字のcolorを#e57373にして、font-weightをboldにしました。
各年号のbackgroundも#fffに変更しています。
見出しひとつひとつに文字色や余白などを設定していると変更が大変ですが、CSSでデザイン定義を一括で管理すると、このように効率よく変更作業などを行うことが可能です。
まとめ
上記の通り、以前はHTMLタグの中に書かれていたデザイン定義ですが、記述量が増えCSSとして分割されたことで、より効率がよく高度なデザイン表現が可能となりました。また、CSS自体のバージョンアップも為され、可能性はどんどん広がっています。
改めてCSSについて調べたことで、CSSのみならずウェブデザインの今後の可能性についても考えることが出来ました。実際にCSSを使いこなすのはもちろんのこと、多くの可能性を持ったCSSを活かすことの出来る高度なデザイン表現をマスターしていきたいと思います。
また、今回の記事では主に「CSSを使用することによるデザインの一括管理」を重点的に紹介しましが、他にもCSSを使用するメリットは沢山あるので、今後更に勉強して記事にしていこうと思います。
最後まで読んで下さって、ありがとうございました。
