このシリーズは、短期間でWebエンジニアとして最低限必要な技術を学ぶことを目的としています。
前回は、Web技術の中核HTMLについて、基本を学び触ってみました。Webエンジニアを志す人であれば、部品を表示すると動きを付けたくなるかもしれませんが、今回は先に少しデザインの基本について学びましょう。
今回紹介するCSSとは、Cascading Style Sheetの頭文字を取ったもので、HTML上でStyle Sheetという形でデザイン・装飾を指定して、HTML技術から切り出し・分離する役割を担います。現場のWebエンジニアにとっては、デザイナー担当の仕事を自分から切り離すという意味でも重要な役割を担います。エンジニアとしては、最低限どのような構造なのかしっかり把握しておきましょう。
HTMLタグのstyle属性
CSSは、いくつかの方法で指定することができますが、最も手間がかからない原始的な指定方法は、HTMLタグのstyle属性に指定する方法です。
属性に指定するこの形は、デザインの情報がタグの中に埋め込まれてしまうため、デザインの切り出しという観点ではとても弱いのですが、ちょっとしたデザイン調整などでWebエンジニアも使う機会が多い指定方法です。
今回は、いくつかあるCSSでの指定方法について順番に紹介していきます。流れとしては、デザイン情報の埋め込みでタグの属性が長くなっていったら、それを切り出して定義し、最終的には外部ファイルに追い出すことで、他のHTML(Webページ)にも共通したデザインを適用するという順番になっています。
それでは最初のstyle属性でのデザイン指定について見ていきましょう。
style属性を指定
HTMLタグにstyle属性を指定するのは、以下のようにします。
<div style="background-color:red;">
これはstyle属性のテストです。
</div>上記例では、<div>タグにstyle属性を付与し、その中身に“background-color:red”と指定してあります。
<div>タグは、Webエンジニアは特に利用機会が多いタグの一つで、「段落」や「要素をまとめる」効果があるタグです。画面に何かが表示されるものではないため、グループ化しての管理を容易にします。今回は<div>～</div>で文章をひとまとめにして、文章全体にデザインを適用しています。
style属性の中身を少し詳しく見ていきましょう。
プロパティ(Properties)と値(Values)
CSSでデザインを指定するときの基本形は、プロパティ(Properties)とその値(Values)を:(コロン)で区切って指定し、;(セミコロン)で締めます。上記例では、background-colorという背景色のプロパティに、redという赤色の値を指定しました。
試しに別のプロパティを指定してみましょう。
<div style="color:red;">
これはstyle属性のテストです。
</div>上記例では、colorという文字色プロパティを指定しています。
プロパティには、広く共通して指定することができるものや、一部のタグにのみ指定することができるものなどがあります。また、ブラウザなど一部の環境にだけ利用できるものなども存在しており、利用頻度が高いものは世界標準規格に引き上げられるといったことが起きることもあります。
colorに指定する値をいろいろと変えてみます。
<div style="color:#FF0000;">
これはcolor:#FF0000です。
</div>
<div style="color:#00FF00;">
これはcolor:#00FF00です。
</div>
<div style="color:#0000FF;">
これはcolor:#0000FFです。
</div>colorに指定する値を#(シャープ)に続いて6桁の16進数表記で行っています。これは色を扱う時にHTML/CSSでとても一般的な表記方法なので確認しておきましょう。redのような決められた名前を覚えず、任意の色を表現することができます。
HTML内での色の指定方法について
#FFFFFFのように16進数6桁で表記する方法について、少し詳しく見ていきましょう。
#の後ろは2桁ずつRed(赤),Green(緑),Blue(青)という並びになっています。指定できる値は16進数2桁なので、00～FF(10進数での0～255)までということになります。(コンピュータ上の16進数は1-9以降を10:A, 11:B, 12:C, 13:D, 14:E, 15:Fで表現します) RGBそれぞれに256階調指定が可能なこの方法は、256の三乗で約1677万色を表現できることになります。
色の値は、10進数表記で指定することもできます。
10進数を使う場合、値にrgb(red, green, blue)の形で、0～255までの値を指定します。Webエンジニアとして実際に使うかどうかは別として、形として覚えておくと良いでしょう。
<div style="color:rgb(23, 194, 194);">
これはcolorにrgb()で指定するテストです。
</div>複数のプロパティ指定
デザインの指定をするCSSでは、当然プロパティを複数指定することが出来ます。それぞれの指定が;(セミコロン)で区切られているので、複数指定は続けて記入するだけです。
<div style="color:blue;background-color:lightblue">
これはCSSを複数指定しています。
</div>背景色(background-color)に水色(lightblue)、文字色(color)に青色(blue)を指定しています。
色以外のプロパティも追加して、ずらずらと指定してみましょう。
<div style="color:blue;background-color:lightblue;padding:20px;border-radius:10px;">
これはCSSを複数指定しています。
</div>追加したプロパティは内側余白(padding)と角丸半径(border-radius)で、値はそれぞれ固定数値と”px”(ピクセル)となっています。ピクセルは画面の表現の最小単位で、その長さは表示画面と解像度に依存します。(高解像度だと小さくなる)
お洒落な感じにデザイン・装飾出来ていっていますが、HTMLタグが分かりづらく埋もれていっています。上記サンプルは環境によってはスクロールバーが表示されてしまっているかもしれませんが、長く見づらくなることを体感してもらうためなのでご了承ください。
次項から、この見づらくなったstyle属性を切り出して、HTMLタグと分離する方法を紹介していきます。
styleタグ – HTMLタグからデザインを分離
HTMLタグのstyle属性に、複数のプロパティを指定すると、HTMLが煩雑になってしまいます。また、同じデザインを複数のHTMLタグに適用する場合に、その長いstyle属性を全てに指定する必要があり、変更が発生した場合に該当するHTMLタグ全てを更新しなければならず、管理コストがとても高くなってしまいます。
CSSでは、こういったデザインの管理を容易とするための方法がいくつか用意されており、現在のWebサイト制作では作業分担や管理コスト低減のために欠かせない手法となっています。
CSS Selectorとstyleタグ
style属性をHTMLタグに指定するのではなく、<style>タグを使ってあらかじめ定義しておくことができます。<style>タグはデザインの定義であってコンテンツ本体ではないため、HTMLファイルの<head>タグ内に記述するのが一般的ですが、<body>内に記述しても動作します。
<style>
#div_text {
color : blue;
background-color : lightblue;
padding : 20px;
border-radius : 10px;
}
</style>
<div id="div_text">
これはstyleタグの確認です。
</div><style>～</style>の間に、HTMLタグのstyle属性に指定していた内容が記入されています。改行やインデント(行頭のスペース)を入れて読みやすく加工してあります。
プロパティと値を囲むように{}(中カッコ)があり、その前に見慣れない#(シャープ)とdiv_textという文字が指定してあります。これはCSS Selectorと呼ばれ、適用する対象を指定しています。
CSS Selectorはデザイン(CSS)に使われるものですが、WebエンジニアもHTML内の要素を制御するために使うことも多く、Web技術の中では重要な要素です。以下でもう少し詳しく見ていきましょう。
CSS Selector – 対象の指定(選択)
CSS Selectorには様々な指定の方法があります。CSSや今後紹介する予定のJavaScriptなどでもよく利用されるパターンをいくつか紹介します。Webエンジニアとして最初に覚えておきたい指定方法でもあります。
| 指定方法 | 対象 |
|---|---|
| タグ名 | 指定したタグ全て |
| #name | タグのid属性の値がnameのもの |
| .name | タグのclass属性の値がnameのもの |
#(シャープ)によるID指定
上の例で使用していたのは2番目のパターンで、id属性の値で対象を選択しています。id属性は、HTMLタグに付与することができ、一般的には個体識別(identifier)のために固有な名称を与えます。重複したidを定義しても、HTMLとしてエラーになったりはしません。
.(ピリオド)によるクラス指定
3番目の.(ピリオド)のパターンは、クラス名での指定です。id属性と同じように、HTMLタグのclass属性に任意の名前を与えておいて、その名前を指定して対象を選択します。idと違って、複数をまとめて一つのグループのように扱うために用いられます。
名前付きのstyle – クラス(class)
クラスを使ってCSSを適用する例を確認しておきましょう。
<style>
.blue_box {
color : blue;
background-color : lightblue;
padding : 20px;
border-radius : 10px;
}
</style>
<div class="blue_box">
クラス名を指定するCSS Selectorの確認です。
</div>
<input type="button" value="ボタン" class="blue_box" />上記例では、class属性に”blue_box”という名前を付けておいて、CSS Selectorでその名前を指定することでデザインを適用しています。
divタグとinputタグといった異なるHTMLタグでも、同じデザインを適用することが可能なため、Webページ内で統一感のあるデザインを制作するために欠かせない指定の一つです。
CSSファイル – HTMLファイルからデザインを分離
styleタグを使ってデザインの指定をまとめ、HTML内の各要素にデザインを適用することが出来るようになりましたが、実際のWebサイトは複数のWebページで構成されていることが多く、ページをまたがって共通したデザインを適用したいという状況は多いです。
また、Webエンジニアとしては、デザイナーが制作したデザインの定義をファイルで受け取って、それを他のページに適用するといった場面もあるでしょう。
ここでは、CSSの定義を外部ファイルに分離する方法と、それを読込して利用する方法を確認していきます。
Linkタグとrel属性
CSSの定義を外部ファイルに分離するのは簡単で、新しいファイルを作成し、<style>～<style>タグの中身を丸ごと移すだけです。その際の拡張子は”.css”としておきましょう。
.cssのファイルを読み込みするには、HTMLファイル内の<head>～</head>タグの間で、以下のように指定します。
<link href="css_file_name.css" rel="stylesheet" /><link>タグは、外部リソース(ファイルなど)へのリンク(参照)を指定するためのタグです。今回のようにスタイルシート(CSS)を指定する場合に利用される他、Webサイトのアイコン(favicon)などの指定などでも利用されることが多いHTMLタグです。href属性でファイルのURLを指定します。上記例は、HTMLとCSSのファイルが同じ場所に配置されている場合の相対的な指定で、https://のような絶対的な指定方法も利用されます。
rel属性は、外部リソースとの関係性(relationship)を指定します。今回はstylesheetですが、サイトのアイコンの場合はiconのように指定します。この名前はキーワードとして定義されているものなので、残念ながら覚えるしかありません。このキーワードは世界の標準規格のW3Cで調べても量が多すぎて覚えるのは大変なので、良く利用するものだけを覚えたり、使われているWebサイトを参考にするなど工夫しましょう。
デザインは苦手でも知識として知っておこう
今回はWebエンジニアの使う技術分野の中では、デザイン寄りの分野であるCSSについて紹介してきました。エンジニアにはデザインなんて関係ないと思われる方もいるかもしれませんが、Webの業界ではデザインとプログラムはとても密接な関係にあり、度々利用することになります。苦手意識を持たず知識として覚えていきましょう。
Webの世界でのHTML/CSSは、画像や動画などが含まれることが多いためデザイン性がとても高いですが、他のプラットフォームのUI(User Interface)に相当し、Webエンジニアにとって重要な技術分野でもあります。
最後にWebエンジニアの方々に向けて一言アドバイスをすると、CSSは「良いなと思うWebサイトを大いに参考に」していきましょう。配色やUIの配置など、先人たちが作り上げたソフトウェア/Webサイトは最強の教科書でもあります。その中には、技術文書からでは読み取れない様々な工夫があり、きっと技術の理解を助け、広い発想・視点を与えてくれるはずです。
