CSSとは
CSSは、Cascading Style Sheetsの略で、Webサイトのサイズや色・レイアウトなどを設定する役割を持つ言語です。背景色の変更や画像の配置、フォントの色やサイズなどのデザインを定義する際に使用します。Webページのデザインに使用されるため、Webページ自体の制作に必要なHTMLとセットで使われます。プログラミング言語ではなく、CSSはスタイルシート言語、HTMLはマークアップ言語と呼ばれます。
CSSの歴史
CSSはスイスにある欧州原子核研究機構（CERN）において、ホーコン・ウィウム・リー氏によって1994年に提唱されました。誕生以来アップデートを何度も繰り返しており、CSS特有のLevelという名称で変化を遂げています。
| 年代 | Level | 備考 |
|---|---|---|
| 1996 | CSS Level1 | CSSの初期段階 |
| 1998 | CSS Level2 | 表示メディアによって自動的にスタイルシートの変更が可能に |
| 2011 | CSS Level3 | CSS3以降、仕様が部品単位で策定される方針に変更 |
| 2018 | CSS Level4 | 部品単位でLevel4に到達することはあるとW3Cが発表している |
CSS Level1では、基本的なプロパティが追加されています。しかし、CSS Level1が登場した当初は対応するブラウザがなく、使用される機会は少ない状態でした。
CSS Level2では、定義がわかりにくいという声があがり、開発者の間で互換性の低さが指摘されました。それを受けてCSS Level2.1が開発され、互換性の改善やエラーの解決、実装されないプロパティの除外を行いました。CSS Level2では、主に音声に関するプロパティが多く追加されました。
CSS Level3から、それぞれの部品やプロパティに対してレベルが振り分けられるようになりました。まとめて機能を更新するよりも、個々で更新することで効率的かつ簡単に更新できるからです。
CSS Level4は存在しませんが、それぞれの部品やプロパティがLevel4以上に到達することはあるとW3Cが発表しています。CSS Level3以降は部品やプロパティ単位にレベルが定められているため、CSSをまとめてバージョンアップすることはありません。これからは既存のプロパティが更新されるだけではなく、新しいプロパティも追加され続けることに注意が必要です。
HTMLと違うCSSの役割
CSSはWebページ全体の見栄えを良くするために、文字の大きさを変えたり、表示位置を調整したり、色を設定したりする役割を持ちます。
一方で、HTMLはWebページに表示されるテキストや画像の記述をします。HTMLにもレイアウトを整えるようなタグが存在し、以前はそのタグを使ってレイアウトを記述しているWebサイトも多くありました。
しかし、Webコンテンツの多様化によってすべてのレイアウト情報をHTMLに記述すると、ソースコードが複雑になり、運用が難しくなります。そのため、レイアウトに関することはCSSにまとめて記述するケースが増え、Webページの文章構造はHTML、デザインはCSSで指定することが一般的です。
CSSの基本的な構造
CSSは、セレクタ・プロパティ・値の3つで構成されています。
セレクタ {
プロパティ : 値 ;
}
この基本書式を用いて、HTMLのどの部分の何を、どのように変更するかを指定します。
セレクタ
セレクタとは、セレクト（選択）という名前の通り、どの部分にCSSを適用させるかを選択する役割を持ちます。現在のCSSにはさまざまな種類のセレクタがあります。その中でも基本的なセレクタは、タグセレクタ・classセレクタ・idセレクタです。
タイプセレクタ
要素型セレクタとも呼ばれ、指定されたすべての要素にスタイルを適用するセレクタです。セレクタ部分に、スタイルを適用したい要素名を記述します。
タイプセレクタの指定方法
要素名{
プロパティ : 値 ;
}
classセレクタ
classセレクタは、特定の分類にスタイルを適用するのに便利なセレクタです。HTMLのclass属性に指定された値に対してスタイルを適用します。セレクタ部分にセレクタであることを表す「.」を記述し、続けてスタイルを適用したいclass属性の属性値を記述します。
class属性の指定方法
〈要素名 class=”分類名”〉
classセレクタの指定方法
.分類名 {
プロパティ: 値;
}
idセレクタ
idセレクタは、特定の要素にのみスタイルを適用できるセレクタです。HTMLのid属性に指定された値に対してスタイルを適用します。セレクタ部分にidセレクタであることを表す「#」を記述し、続けてスタイルを適用したいid属性の属性値を記述します。注意点は、同一ページ内に同じ固有名のid属性があってはいけないことです。
id属性の指定方法
〈要素名 id=”固有名”〉
idセレクタの指定方法
#固有名 {
プロパティ : 値;
}
プロパティ
プロパティは、適用するCSSのスタイルの種類です。文字サイズを変更したい場合のfont-sizeや、背景色を変更したい場合のbackground-colorなどが挙げられます。CSSではさまざまなプロパティが用意されており、実現させたいデザインに応じてプロパティを使い分けます。
値
値は、セレクタに適用するプロパティをどのように変更するのかを指定する項目です。プロパティにbackground-colorが指定されている場合は、red・blue・yellowなどを指します。指定する値はプロパティによって異なります。
HTMLとCSSの連携方法
CSSはWebページを制作するうえで欠かせない言語であり、HTMLとセットで使用されます。ここでは、実際にCSSを書く場所のパターンについて解説します。連携方法には内部スタイルシートと外部スタイルシートがあり、それぞれのメリットとデメリットは以下の通りです。
| 方法 | メリット | デメリット |
|---|---|---|
| 内部スタイルシート | 特定のHTMLファイル内のスタイルを 管理するのに便利。小規模ファイルで あれば見やすい。 |
複数のWebページを同時にデザインが できない。大規模になると可読性が下がる。 |
| 外部スタイルシート | CSSファイルが独立しており、管理しやすい。複数ページのデザインをまとめて管理可能。 | HTMLファイルから別のファイルとして読み込むため、 ページ読み込みに多少時間がかかる。 |
外部インライン方式
HTMLファイルとCSSファイルを完全に分ける方法です。HTMLファイルからCSSファイルを呼び出すことでデザインを適用します。ファイルが独立しているため、Webページの見せ方を変更したい際、CSSのシートのみを変更すればすべてのページを一括で変更可能です。そのため、これまで多くのWebページを制作している経験豊富な方におすすめの方式です。
内部インライン方式
HTMLファイルとCSSファイルを分けずに記述する方法です。HTMLにはheadやbodyと呼ばれるパートがあります。通常、目にするコンテンツはbodyに記述されており、headにはWebブラウザや検索エンジン向けの情報が記載されているため、headの内容はブラウザに表示されません。内部スタイルシート方式ではhead部分にCSSを記載し、ページのデザインをまとめて指示することが可能です。
CSSの基本的な書き方
ここからは、実際に動作確認ができるプログラムで、CSSの基本的な書き方を見ていきましょう。前述した3つのセレクタ指定方式を使用できるため、それぞれ3通りの指定方式を紹介します。
CSSの前にまずはHTMLファイルを作成し、記述します。pタグやid、classを付与したテキストボックスを用意します。
HTMLファイル
〈!DOCTYPE html〉
〈html〉
〈head〉
〈meta charset="UTF-8"〉
〈title〉Hello〈/title〉
〈link rel="stylesheet" href="sample.css"〉
〈/head〉
〈body〉
〈p〉Hello World!〈/p〉
〈input type="text" id="textBox" value="こんにちは"〉
〈input type="text" class="sample-text" value="こんばんは"〉
〈/body〉
〈/html〉
次にsample.cssというCSSファイルを用意します。
CSSファイル
/* タイプセレクタ。pタグ全てに適用される */
p {
color : blue;
}
/* idセレクタ。指定idを持つタグに適用される */
#textBox {
font-size : 20px;
}
/* classセレクタ。class名が一致するタグに適用 */
.sample-text {
background-color : yellow;
color : #fff; /* 白 */
}
これらのファイルを用意できたら、実際に画面表示して確認してみましょう。
関連記事： CSSの勉強方法について詳しく解説
レスポンシブデザインとCSS
レスポンシブデザインとは、PCやスマホ、タブレットといったあらゆるデバイスサイズに応じてCSSを切り替え、一つのHTMLで複数の見せ方を可能とする方法です。レスポンシブデザインをうまく実装できれば、SEOへの良い影響が期待できます。ここでは、レスポンシブでよく使用するプロパティについて解説します。
| プロパティ | 用途 |
|---|---|
| width, max-width | 画面サイズに応じて画像やボックスの大きさを制御 |
| display | 画面サイズに応じた表示・非表示を制御 |
| flex | 画面サイズに応じて横並びレイアウトにする |
width, max-width プロパティ
画面サイズに応じて、画像やボックスの幅を変化させる際に使用します。レスポンシブでは、width: 100%と、パーセンテージで指定することが多いです。しかし、パーセンテージで大きさを指定すると、PCブラウザのように1000pxを超過した際に画像が大きくなり過ぎてしまいます。そこでmax-widthプロパティを使用して最大の幅を指定します。
img {
width: 100%;
}
@media screen and (min-width: 960px) {
img {
max-width: 960px;
}
}
displayプロパティ
特定の要素をPCだけ表示する、スマートフォンだけ表示するなど、デバイスごとに表示・非表示を切り替える際に使用します。特定の画面サイズのときにdisplayプロパティをnoneに指定することで非表示にできます。
例えば、検索ボタンをスマートフォンにのみ表示する場合は以下のように記述します。
.search {
color: #fff;
background-color: red;
border: none;
border-radius: 5px;
padding: 4px 10px;
margin: 10px 10px;
}
@media screen and (min-width: 481px) {
.search {
display: none;
}
}
flex, flex-wrapプロパティ
CSSで横並びにさせる方法で便利なのが、フレックスボックスレイアウトです。flexプロパティやflex-wrapプロパティを使用します。
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
img {
width: 100%;
}
@media screen and (min-width: 481px) {
ul {
display: flex;
flex-wrap: wrap;
}
li {
width: 50%;
box-sizing: border-box;
padding: 10px;
}
}
@media screen and (min-width: 640px) {
li {
width: 33%;
}
}
CSSを活用するWebエンジニアの転職事情
主にCSSを活用する職業は、Webエンジニアです。ここでは、Webエンジニアに転職するために知っておきたいWebエンジニアの仕事内容や平均年収、必要性について解説します。
Webエンジニアの仕事内容
Webエンジニアは、Webサイトやモバイルサイト、ECサイトで使用する機能の開発やITシステム・アプリケーションなどの設計・開発、運用保守までWeb開発全般を行うエンジニアです。
主にWebで使用するITシステム・アプリケーションなどの設計や開発、プログラミングを行います。Webエンジニアの中でもフロント部分を担当するフロントエンドエンジニアは、Webサイトページのアウトラインからレイアウト、アプリケーション入力画面など、ユーザーがシステムと接触する部分を担当します。コードを書く場合はHTMLやCSS、JavaScriptを使用するケースが多いでしょう。
Webエンジニアの平均年収
2023年11月現在、レバテックキャリアでスキル条件にCSSを指定した際の上位10件の平均年収は605万円です。Webエンジニアの年収は、スキルやキャリア、勤務先によって大きく変わります。プログラミング言語のpythonのスキルや経験があれば、年収アップにつながる可能性が高いでしょう。
Webエンジニアの必要性
Webエンジニアは今後10年のスパンで考えたときに必要とされる職業でしょう。独立行政法人情報処理推進機構の「DX白書2023」によると、国内企業の約50%がIT人材の大幅な不足を実感しているという結果が出ています。DX化が推進されている昨今において、各企業ではIT人材の確保が大きな課題です。積極的な中途採用や再学習のフォローアップ、評価や待遇の見直しといった取り組みを行う企業が増えており、Webエンジニアの必要性は依然として高いといえます。
ITエンジニアの転職ならレバテックキャリア
レバテックキャリアはIT・Web業界のエンジニア職を専門とする転職エージェントです。最新の技術情報や業界動向に精通しており、現状は転職のご意思がない場合でも、ご相談いただければ客観的な市場価値や市場動向をお伝えし、あなたの「選択肢」を広げるお手伝いをいたします。
「将来に向けた漠然とした不安がある」「特定のエンジニア職に興味がある」など、ご自身のキャリアに何らかの悩みを抱えている方は、ぜひ無料のオンライン個別相談会にお申し込みください。業界知識が豊富なキャリアアドバイザーが、一対一でさまざまなご質問に対応させていただきます。
「個別相談会」に申し込む
転職支援サービスに申し込む
※転職活動を強制することはございません。
レバテックキャリアのサービスについて
