インターネットコンテンツが溢れかえっている現代。Webサイトへのアクセスやコンバージョンを増やすためには、コンテンツの中身はもちろん、ユーザーの興味・関心を高めるデザイン性も重要です。
そのため、デザインを指定するための言語であるCSSは、Webデザイナーだけではなくマーケティング担当者なども知っておいて損はありません。
CSSについて基本的なことを知っておくだけでも、Webサイトの構造が理解できるため、かんたんな調整であればWebデザイナーを介さずとも自分でできるようになります。
しかしWeb制作の経験をお持ちでない方からすれば、そもそも「CSSとは？」「何ができるの？」と疑問に感じる方も多いでしょう。
本記事ではWebデザイン初心者に向けて、CSSを使って具体的にできることから、おすすめの学習方法まで解説していきます。CSSの基礎がわかるようになれば、よりユーザーに対して価値提供ができるようになるので、ぜひ本記事の内容を参考にしてください。
はじめてHTML・CSSに触れる方は、自分が書いたコードが画面に表示されるだけでも感動を覚えるもの。特にプログラミングスクールでは、HTML・CSSから教わるケースも多い初心者でも扱いやすい言語でもあります。
一方で勘違いされやすいのが、HTML・CSSはプログラミング言語ではないということです。正しくは「HTML＝マークアップ言語」、「CSS＝スタイルシート言語」です。それぞれの言語について簡単に解説します。
マークアップ言語とは、タイトル部分や本文といった文章の構造をタグや記号を使って表したものです。
現在世の中に公開されているWebページのほとんどは、HTMLによって記述されており、見出し・改行・URLリンク・画像などの文章構造はすべてタグや記号といったテキストデータで定義されています。
スタイルシート言語は、HTMLのようなマークアップ言語で記述された文章のスタイル（見た目）を整える言語のことです。たとえば、スタイルシート言語を使うことで「テキストの色を変える」「背景の色を加える」といったように文章のデザインを調整することが可能です。
ちなみに、プログラミング言語とは計算やデータ処理を行うプログラムを作成する時に使う言語を指します。HTML・CSSはあくまでも、文章やデザインを整える言語であるためプログラミングとは根本的に異なります。
CSSは、HTMLで構造化された文章のスタイル（見栄え）を調整する際に活用します。ここでは、具体的にCSSでできることについて解説します。
CSSでは、テキストの色変更・サイズ変更などを行うことができます。
文字サイズは、font-sizeプロパティで指定します。
{ font-size: ◯◯px }
または
{ font-size: ◯◯em }
また、色変更はcolorプロパティで指定します。値には、色名またはカラーコード（16進数文字列）を記述します。
#example1 { color: green; }
#example2 { color: #008000; }
カラーコードはWEB色見本 原色大辞典 - HTMLカラーコードを参考にしてください。
HTMLのレイアウトは縦に並べることしかできませんが、CSSを使うことでレイアウト変更ができるようになります。具体的には、テキスト・表・画像といったさまざまな要素の位置を横並びにするなど調整が可能です。
CSSでレイアウトを組み立てる際に使う手法として、「フレックスボックス」「グリッドレイアウト」の2つがあります。それぞれの使い方について詳しく解説します。
フレックスボックスは、かんたんに横並びのレイアウトを作る機能のことです。フレックスボックスを使うときに、重要な役割を持つのが「親要素＝フレックスコンテナ」と「子要素＝フレックスアイテム」です。
例えるならば、倉庫（フレックスコンテナ）の中に品物（フレックスアイテム）があり、その品物は柔軟に配置を変えることができるというイメージです。
フレックスボックスを使用して子要素を横並びにする際は、以下のように記述します。
<div class="item">アイテム1</div>
<div class="item">アイテム2</div>
<div class="item">アイテム3</div>
</div>
HTMLで定義したクラス名「container」に対し、CSSで「display: flex」を指定するだけで横並びにできます。
グリッドレイアウトは、フレックスボックスよりも新しく登場した手法です。グリッドレイアウトでは格子状（グリッド）のコンテナにアイテムを配置して、自由にレイアウトを組むことができます。
フレックスボックスでは親要素と子要素の関係（入れ子構造）により、構造が複雑になりがちでしたが、グリッドボックスを使うことでシンプルな記述でも複雑なレイアウトを組めるようになります。
グリッドレイアウトは、CSSで「display: grid;」と記述します。
<div class="grid-parent">
<div class="child1">アイテム1</div>
<div class="child2">アイテム2</div>
<div class="child3">アイテム3</div>
<div class="child4">アイテム4</div>
<div class="child5">アイテム5</div>
<div class="child6">アイテム6</div>
</div>
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 80px 80px;
grid-gap: 10px;
}
HTMLで記述された文章は、単にテキストだけが並んでいるだけなので、そのままでは読みづらさがあります。CSSを活用することで、太字にする、斜体にする、行間を指定する、下線を引く、フォントを指定するなど、さまざまな装飾が可能になります。
たとえば、文字を太字にする場合は、font-weight プロパティでboldを指定します。
<p>サンプルです</p>
p { font-weight: bold;}
CSSアニメーションとは、HTMLで記述された要素に対してCSSを使用することで、アニメーションとして表示する機能のことです。例えば、Webサイト上で画像にカーソルを合わせた時に文字を表示させたり、Webサイトの読み込み中にみられるローディングアニメーションを作ったりすることができます。
CSSでは「animation」と「transition」プロパティを使うことで、アニメーションを指定します。両者の違いは対応できるアニメーションの種類です。
わかりやすく言うと、transitionは手軽なアニメーションで、animationは本格的なアニメーションに用いるものと覚えると良いでしょう。
CSSのレスポンシブとは、パソコンやスマホなど画面サイズが異なるデバイスを利用した場合に、アクセスする側の端末に応じて表示を切り替える技術をいいます。
具体的には、レスポンシブデザインは1つのHTMLで配信され、デバイスごとに異なるCSSを用意することで表示を変える仕組みとなっています。
設定方法としては、
といったように記述をします。
メディアクエリとは、CSSの仕様のひとつで、表示された画面環境に応じて適用するスタイルを切り替える機能のことです。主に「@media」規則として記述することができます。
例えば、Webページの画面横サイズが481pxに達した時に、モバイル版からPC版へと画面サイズを変える場合は、以下のように記述します。
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″>
@media screen and (min-width: 481px) { }
CSSでは、class属性を設定することで、HTMLに記述した要素をグループ化できるようになります。グループ化されたHTMLにCSSの装飾を指定することで、グループに該当する要素はすべて装飾が行われます。
そのため、HTML/CSSの記述が少なくて済むようになり、さらにどのclassにどういった装飾が行われているのかがわかりやすくなります。
<li class="list1">テキスト</li>
<li class="list1">テキスト</li>
<li class="list1">テキスト</li>
.list1{font-weight: bold;}
HTMLやCSSはプログラミング言語ほど難しくありませんので、プログラミング学習の入門として扱われるケースもあります。
CSSはプロパティには数多くの種類があります。プロパティを指定することで、文字の大きさや、要素の幅・高さを指定することができます。
以下の表では、CSSを書く際に使われることの多いプロパティを一覧にしました。ほかにもたくさんのプロパティがありますが、最低限使用するものとして覚えておくと良いでしょう。
| プロパティ | 概要 | 例 |
|---|---|---|
|
color |
文字色を変える |
color: #00F; 文字の色を青に |
|
font-size |
フォントの大きさを変える |
font-size: 20px; フォントを20pxに |
|
font-weight |
フォントの太さを変える |
font-weight: bold; フォントを太字に |
|
background |
背景を変える |
background-image: url（画像URL）; 背景に画像を設定する |
|
background-color |
背景の色を変える |
background-color: #FFFF00; 背景の色を黄色に |
|
width |
幅を変える |
width: 200px 幅を200pxに |
|
height |
高さを変える |
height: 100px 高さを100pxに |
|
margin |
マージン（外側の余白）を指定する |
margin-bottom: 20px; 下の外側余白を20px空ける |
|
padding |
パディング（内側の余白）を指定する |
padding: 10px 20px; 内側の余白を上下10px、左右20px空ける |
|
text-align |
水平方向の揃え方を指定する |
h1{ text-align:left; } 左に寄せる |
HTML/CSSはプログラミング言語に比べて複雑ではないため、初心者でも理解しやすいことが特徴です。実際にプログラミングスクールなどでは、初めにHTML/CSSを覚えることが多く、プログラミング初心者にもおすすめです。
しかし実際に独学しようとなると、何からはじめたら良いかわからない方も多いでしょう。ここでは、おすすめのCSS学習方法を紹介します。
学習方法の中でも最も手軽なのが、書籍で学ぶ方法です。書店やAmazonなどで、Webデザインに関する書籍が販売されています。
書籍のメリットは繰り返し読める点と、手元に置いておける点です。自主学習を進める上で、わからないところがあればさっと調べられるように、デスクに一冊置いておくと良いでしょう。
特に、『1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座』（Mana著、SBクリエイティブ）は、書店・ECサイトでベストセラーに選ばれるなど、Webデザインの入門書として最適です。
オンラインのEラーニングサイトは、パソコンやスマートフォンなどオンライン環境があればいつでもどこでも学習できることが特徴です。ここではおすすめのオンラインサービスを2つ紹介します。
Udemy（ユーデミー）は、学びたい人と教えたい人のためのオンラインマーケットプレイスです。HTML/CSSといったWebデザインに関する動画も数多くアップされているため、自分のレベルにあわせて動画を購入可能です。
動画であれば実際の画面をみながら同じようにCSSの記述ができるので、「書籍やWebサイトに書かれていることがあまり理解できない」という方は、動画をみながら真似ると良いでしょう。
もちろん一度購入した動画は繰り返し再生が可能なので、理解するまで何度も学習を行えます。中には質問をコメントできる講座もあるので、より体系的な知識・スキルを習得できます。
Progate（プロゲート）は、初心者向けのプログラミング学習サイトです。「プログラミングを楽しく学ぶ」をテーマに、ゲーム感覚で学習できます。
サービス開始以来、会員数が急増し、現在では「プログラミング学習を始めるならまずはProgateから」と言われるほど、プログラミング学習の登竜門とも呼べる存在です。
プログラミング言語ごとにコースが分かれており、基礎レベルのレッスンは無料で利用できます。もちろん、HTML・CSSの学習コースも含まれているので、CSS学習をこれから始めるかたは、まずはProgateを登録してみましょう。
本記事ではCSSにできることについて基本的な使い方を含めて解説してきました。
CSSはWebページのスタイルを設定するスタイルシート言語です。CSSを使うことで、テキストの装飾や要素の配置などを設定できます。
はじめてHTMLやCSSに触れる方は、構文や記述方法を覚えるだけでも余裕がなくなってしまうでしょう。また、コードのスペルをひとつ間違えただけでエラーになってしまうため、混乱することもあるかもしれません。
しかし、実際に動作させながら次第に慣れていくことで、Webサイトの構造が理解できるようになるため、かんたんなWebサイトであれば自分で作れるようになります。高度な技術を身につければ、WordPressのようなCMSを使用する場合でも、プラグインを使わずとも自分でコードの編集ができるようになるでしょう。
さらに、世の中の優れたサイトのデザインがどのような構造になっているか、コードを読み解くこともできるようになるため、自社や他社のWebサイトの改善立案にも役立つはずです。
HTMLやCSSはWebデザイナーだけが習得するべきスキルではなく、Web制作に携わる全ての方が身につけておくべきスキルと言えるでしょう。今回ご紹介した学習方法などを参考に、まずはHTML・CSSの基礎学習からはじめてみてください。