CSS3からSassまで ─ これから学ぶ人のためのCSS全体像 ーー「非エンジニアの起業家が知っておくべきプログラミングの知識 #04」【ゲスト寄稿】

SHARE:

TechAcademy__テックアカデミー____ITに特化したスクール編集部注:本稿は初心者向けにプログラミングやWebデザインの講座を開催している TechAcademy(テックアカデミー)による連載企画。「非エンジニアの起業家が知っておくべきプログラミングの知識」というテーマで数回に分けて極めて基礎的なプログラミングの基礎知識をお伝えする。全連載はこちらから

image01

「非エンジニアが知っておくべきプログラミングの知識」というテーマで、10回に分けてお届けする連載企画。第4回目のテーマは「CSS」です。

前回は「HTMLの設計思想と、2014年に最適な学び方」というテーマでお送りしました。今回は「CSS3からSassまで ─ これから学ぶ人のためのCSS全体像」という記事テーマで、考察・ご紹介します。本連載は、インターネット業界で、これまで技術的なバックグラウンドを持たないまま起業した方や、これから独立・起業しようと思い立った方をサポートするための、連載記事です。

「構造化言語としてのHTML」を説明した前記事は、CSSを学ぶ上で前提となるため、まだ読んでいない方は前回の記事も合わせてご覧ください。

CSSとは何か?

前回の記事で、Webページを表現するHTMLは、構造化言語(マークアップ言語)ということをご紹介しました。

  • (1) 特定の表示領域に対して意味を定義し(それを要素を呼ぶ)
  • (2) 定義された要素間の関係性を作ること

しかしながら、HTMLで文書情報を定義しただけでは、ユニークなWebサイトは実現できません。そこにCSSを用いて、HTMLであらかじめ決められたタグ、あるいは自分で名前をつけて定義する要素(class要素/id要素)に対して、レイアウトや装飾などのスタイル効果を加えます

HTMLは文書構造を定義し、CSSでは定義された情報に基づいてスタイルの適用させるという、その使い分けがポイントです。

CSSの基礎

CSSは、Cascading Style Sheetsの頭文字を取った略称です。Cascadingとは、ここでは「連鎖的に伝わるもの」と表現しましょう。HTMLタグや独自で定義した要素に対して、大きさ・配置(余白)・レイアウト/色・タイポグラフィ(フォント) の指定など、スタイルに関する情報を、連続して記述していくものです。

CSSは、HTMLと同じくテキストファイルで記述し、HTMLの <head>〜</head>タグ内に、<link>タグを用いて、CSSファイルを読み込み、適用させることができます。

外部からCSSファイルを読み込む記法:
<link rel='stylesheet' href='CSSのパス' type='text/css' media='all' />

CSSの基本記法

CSSの基本記法は、以下のとおりです。

セレクタ名 {
  プロパティ: ;
  プロパティ: ;
}

ここでは改行を用いていますが、1行で以下のような記述も可能です。

セレクタ名 { プロパティ: ; プロパティ: ; }

セレクタ名とは、スタイルを適用するHTMLタグや、class/id属性(後述)を指します。プロパティとは、「width」「font-size」「color」など、CSSで設定する数々のスタイルの書式で、あらかじめ決められたものです。そして値は、その名の通りプロパティに対しての「実体」となるものです。プロパティの種類は数多くあるため、学習の過程には、まずプロパティの一覧などが掲載された、リファレンスサイトを活用すると良いでしょう。

例として、セレクタの <body>タグ(通常ブラウザが読み込む、表示領域の全体)に対して、CSSを記述してみましょう。

body {
  background-color: #F0F0F0;  /* 背景色を薄い灰色にする */
  padding: 20px;  /* 上下左右の余白を20px取る */
}

次に、ページ内の画像 <img> タグに対して、スタイルを適用させてみましょう。

img {
  border: 1px solid #767676;  /* 画像の枠に灰色の1pxの罫線を引く */
  padding: 2px;  /* 画像と罫線の間には、2pxの空白を作る */
}

【重要なポイント】プロパティと値をセットで覚えよう!

HTMLタグの種類と比べると、CSSで覚えるべきプロパティと値の組み合わせの数は、その何十倍もあります。学習において重要なポイントは、「プロパティと値」をセットで覚えていく、ということです。簡単なプロパティを使って基本的な記法や覚えたあとは、CSSに関するリファレンスサイトを索引しながら、実際に手を動かしてコーディングを行うことが、効率のよい学習方法だと言えます。前回の記事同様、Google ChromeのDeveloper Toolsで「要素の検証」機能を活用してみましょう。

class属性とid属性の違い

CSSで指定するセレクタは、上で解説したHTMLタグだけではありません。全てのHTMLタグは、それぞれに「class属性」というものを付与することができます。

例えば、<a href=”URL”> 〜 </a> タグに対して、”active” というクラスを付与すると、<a href=”URL” class=”active”>〜</a> という記述になり、CSS側では「active」という定義された情報を、認識することができます。CSSファイルでは、class属性のセレクタは、先頭に半角ドットをつけて「.active」のように記述します。class属性は、1つのページで複数指定することが可能です。

a .active {
  font-weight: bold;
}

一方で、id属性とはHTML構造の中で、一意(ユニーク)な定義を行うときに用います。id属性はページの中で1箇所だけ存在するため、主に「レイアウト」を定義する要素名などに用いられます。id属性で指定した名前は、CSSでは「#main」のように、頭に半角シャープをつけて記述します。

#main {
  width: 600px;
  float: left;    /* floatプロパティは、ブロック要素の回りこみを指定する */
}
#menu {
  width: 300px;
  float: right;
}

擬似クラス

CSSの疑似クラスは、HTMLタグ内には記述されていなくても、CSS側でセレクタとして利用できるクラスのことを指します。一番わかりやすい例が、<a>タグに対する擬似セレクタでしょう。未訪問・訪問済み・マウスオーバー時などでリンクテキストの色が変わるスタイル指定は一般的です。これらを実現しているものが、擬似セレクタと呼ばれています。

a {
  color: #008800;
  text-decoration:none;
}

a:hover {
  color: #ff0000;
  text-decoration: underline;
}

擬似セレクタは、「セレクタ:擬似セレクタ」という記述で行います。

CSS3で実現できるようになったことの一例

現在、新しい標準化規格であるHTML5が草案勧告されているように、CSSにもバージョンがあります。最近のスマートフォンに搭載されたブラウザや、Safari/Google Chrome/IEの最新版などのモダンブラウザでは、CSS3がサポートされています。

html_css

CSS3が取り沙汰され始めた頃、「画像を一切使わずにCSS3だけでドラえもんを描いてみた!」という記事が話題になりました。HTML5とCSS3を使えば、様々な技巧表現が可能になります。それでは、CSS3では、一体どのような仕様変更が行われたのでしょうか。数多くありますが、その一部をご紹介します。

プロパティの追加

ブロックレベル要素に対して角丸を実現する「border-radius」プロパティや、影を実現する「box-shadow」プロパティなどが追加されています。そのほか、時間的変化の「transition」プロパティ、アニメーション効果を表現する「animation」プロパティ、要素の透明度を指定する「opacity」プロパティなども、最近のWebサービスの中で用いられるようになってきています。

値の追加

また、プロパティに対しての「値」が追加されたものも存在します。

例えば「display」プロパティは、ブロックレベル要素・インライン要素などを指定することができるプロパティですが、CSS3では「display: table;」「display: table-cell;」といった記述が追加されました。display: table; の記法は、floatプロパティに変わる新しいレイアウト組みの手法として、注目されています。本記事では全ての紹介がしきれないので、詳しくは是非プロパティ名で検索してみて、動作デモなどをご覧ください。

その他にも、「color」「background-color」などのプロパティに指定するカラーコードの値は、16進数(#2B4B65など)記法で記述されていましたが、CSS3では値として「RGBa」を指定することにより、色の透明度(アルファ値)を含めて指定することができます。(例:color: rgba(0,0,0,0.5); 黒色の50%の透過)

擬似クラスの追加

CSS3では、擬似クラスにも追加が行われています。たとえば、A:nth-child(n) { プロパティ: 値; } という記述では、Aセレクタに対してn番目の要素のみに、そのスタイルが適用されるといったことが可能になります。セレクタに ul li:nth-child(2n)、ul li:nth-child(even) と記述すると、liタグの偶数番目のアイテムに対してCSSを適用できます。(奇数なら ul li:nth-child(2n+1) または ul li:nth-child(odd) と記述)

この方法を用いると、<table>タグで作ったカレンダーの土日だけに、文字色を変えるといったCSSの記述が可能になります。

table.calendar tr td:nth-child(6) {
  color: #009;  /* td要素の6番目(土曜日)には青色の文字色のスタイルを適用 */
}

table.calendar tr td:nth-child(7) {
  color: #900;  /*  td要素の7番目(日曜日)には赤色の文字色のスタイルを適用 */
}

cal

Media Queries(メディアクエリの追加)

近年のトレンドとして、多くの主要サイトでスマートフォンデバイスからのアクセスが半数を超えるなど、「複数デバイス対応」がより重要になっています。よく聞く「レスポンシブデザイン」(ブラウザ幅に合わせて要素のサイズなどが可変する)等を実現する上で、主に採用されている技術がCSS3の「メディアクエリ」です。メディアクエリは、<head>〜</head>で読み込むファイルをそもそも変える方法と、CSS内での記述で、条件分岐する方法などがあります。

<!-- 表示領域が480px以下のデバイスから閲覧したときに読み込まれるCSS -->
<link rel="stylesheet" media="screen and (max-width: 480px)" href="smartphone.css" />

@media screen and (max-width: 480px) {
  /* 表示領域が幅480px以下の場合 */
#sidebar { width: 100%; }
}
@media screen and (min-width: 760px) {
  /* 表示領域が幅760px以上の場合 */
#sidebar { width: 300px }
}

いろんなデバイスからのアクセスを想定して、それぞれに最適化されたCSSを書けるようになるのが学習のゴールになります。

CSS3のデメリット

一方で、CSS3のデメリットもあります。 CSS3が表示できないブラウザもあるため、各ブラウザでどう見えるのかのチェックが必要です。また、表示できないブラウザに対応させるために、CSSの記述が複雑になるというデメリットもあります。

SCSSとは?

最後に、SCSSについてご紹介します。最近のWebサービス開発においては、コンパイルにより CSS を出力する拡張メタ言語の「SCSS」や、さらにコンパクトを追求した「Sass」記法が、積極的に採用されています。基本的にはCSSの設計思想と同じですが、書き方が若干異なります。

【SCSS】セレクタのネスト(階層化)、入れ子にできる

通常 CSSでは、親セレクタ・子セレクタと指定する際には、何度も助長な繰り返し記述が必要になりましたが、SCSSではセレクタにネスト(階層化)・入れ子の概念が存在し、セレクタ管理が効率化できます。コーディングするときの速度・量ともに削減されます。

/* CSSでの一般的な記述方法 */
#content h1 { margin: 20px; padding: 5px }
#content p { font-size: 90%; }
/* SCSSでのセレクタのネスト */
#content{
  h1 { margin: 20px; padding:5px; }
  p { font-size:90%; }
}

2つを比較してみて、いかがでしょうか。こちらのほうが、複数のコーダーと共同作業する際にも、すぐに理解ができ、より直感的にコーディングができます。

【SCSS】数値・カラーコードを変数に格納して呼び出す

変数とは、プログラミングにおいても一般的なもので、「データ(情報)」を入れておく箱のようなものをイメージしてください。SCSSでは、よく使うカラーコードや数値などを、名前をつけた変数に格納しておき、その変数を呼び出すことができます。大規模なWebサイトのコーディングにおいて重宝するでしょう。変数名は、最初に「$」記号をつけます。

/* カラーコードを変数として定義する * /
$onepoint_color: #EF454A;
/* 実際のSCSSコーディング * /
p{ color: $onepoint_color }
/* ブラウザが処理するときの状態 * /
p { color: #EF454A; }

【SCSS】値の演算処理

SCSSでは、値の欄に以下のように四則演算などが可能です。

#container{ width: 800px - 200 }

Sassとは何か

Sassは、SCSSと同様のCSS拡張のメタ言語で、素早くコーディングすることを最も重きにして開発された記法です。Sassでは、{ } といった記号が不要で、半角スペース2つのインデントによるネストにより、要素に対してスタイルを記述することができます。慣れると通常のCSSの1.5倍相当のスピードで開発ができ、ファイルの容量も30%以上削減されるはずです。

【Sass】サンプル

body
  header
    background: #FFFFFF
    margin-top: 20px
    .logo
      text-align: center
    img
      width: 150px
      height: 30px
      padding: 5px

Sassは、半角スペース2つのインデントを用いてネストを行うことで記述ができます。また、最後のセミコロン「;」を省くことができます。

【参考】Sass公式サイト(Syntactically Awesome Style Sheets)

本記事では、CSSを初めて学ぶ人が「どんな専門用語があるのか」「どんな表現ができるのか」など、全体像を掴んでいただくことを目的に執筆しました。HTMLやCSSは学習人口が非常に多いため、無料の学習リソースが、Web上には数多くあふれています。本記事が、少しでも学習する背中を押す一因になれば幸いです。

次回の記事は、いよいよ「プログラミング全般」をテーマにお送りします。

BRIDGE Members

BRIDGEでは会員制度の「Members」を運営しています。登録いただくと会員限定の記事が毎月3本まで読めるほか、Discordの招待リンクをお送りしています。登録は無料で、有料会員の方は会員限定記事が全て読めるようになります(初回登録時1週間無料)。
  • 会員限定記事・毎月3本
  • コミュニティDiscord招待
無料メンバー登録