CSSの書き方入門 - はじめてのWebデザイン【図解たっぷり】
前回の【図解たっぷり】HTMLの書き方入門で作成したページを元に、Webページの見た目を整えるCSSについて学びましょう。
もちろんCSSの基礎知識や、書かれているコードの読み方も紹介！
CSSって何？ 書くのは初めて、という方でも大丈夫です。
前回作ったhtmlのページがある場合は、それを使って下さい。
下記から素材をダウンロードしても、ご利用いただいてもOKです。
この記事と一緒にCSSを書いていくと、文字と画像だけだったページが一気にWebサイトっぽくなりますよ。ぜひチャレンジしてみてください。
CSSとは
CSSはCascading Style Sheets（カスケーディング・スタイル・シート）という、Webページの見栄えを整えるために使用される言語です。CSS、もしくは単にスタイルシートと呼ばれることもあります。
HTML編では、機械のために画面上では見えないタグを書きましたね。
反対にCSSは人間（ユーザー）に、情報をわかりやすく見せたり、サイトのイメージや雰囲気を伝えたりするための言語なのです。
CSSでできること
CSSでできることは多岐にわたります。
Webページに背景画像をつける、文字の色や大きさを変える、吹き出しを作る……数えればキリがありません。
例えば、Skillhubのブログページでも、赤と黒の見出し・特集マークはCSSで作っています。下図の範囲に画像は一切使っていないんです。
https://skillhub.jp/blogs
デザインを渡されて、こんな感じに構成を考えて作れたら、初心者レベルは卒業。お仕事を受けられるレベルです。
しかも、時代とともにCSSで出来ることは増えています。
かつてはJavascriptでしかできなかったアニメーションがCSSで表現できたり、カラーの画像を画面上では白黒表示したりします。
アニメーションについては別の記事で紹介しています
Skillhubブログ
そんなCSSで使われる指示は、HTMLのタグよりも膨大。
覚えてからサイトを作ろう、というのは現実離れしています。正直なところ、プロのコーダーでも、自分の記憶力だけを頼りに、一気に全CSSを書き上げろ、なんて言われて書ける方は多くないでしょう。
ですので、まずは基礎知識・基本的なスタイル指定を学びましょう。
あとは必要なときに調べて、それを使えれば良いんです。
CSSの基本書式
CSSは、基本的にセレクタ・プロパティ・（プロパティの）値の３つで構成されています。
セレクタ {
プロパティ: 値;
}
この書式の意味は、下記のようになります。
実際にWeb制作で使う指示を入れてみましょう。
もっと分かりやすくなりますよ。
意訳を見ていただくと分かるように、「：」や「；」にも重要な役割があります。
記号が抜けてしまうと機械が意味を読み取れず、指示したスタイルを適用してくれません。
まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする
index.htmlにCSSを加える
では、実際にhtmlを装飾しながら、スタイルシートなるものの扱い方を覚えていきましょう。完成見本はこちらです。
01.CSSをHTMLに適用する
CSSの指示を反映させる方法はいくつかありますが、最もベーシックなのは「CSS専用のファイルを作る」ことです。
CSS専用のファイルの拡張子は「.css」です。
style.cssというファイルを新規作成して下さい。
style.cssを開いて、bodyの背景色を灰色にするスタイル指定を書いてみましょう。
body {
background: gray;
}
上書き保存します。
この状態でindex.htmlをブラウザで開いても、まだ何も変わりませんね。
書いたスタイルを適用させるためには、index.htmlの方で「style.cssファイルを読み込む（その指示を実行する）」という設定をしなくてはいけません。
その設定には<link>タグを使用します。
これは機械に伝えるべき、事務的な指示なので<head>タグの中に書きます。
index.htmlに加えてみましょう。
<head>
<meta charset="utf-8">
<title>エドべース株式会社</title>
<meta name="description" content="EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">
<link rel="stylesheet" href="style.css">
</head>
ブラウザでindex.htmlを開いてみてましょう。
下図のようにCSSが反映され、背景色が灰色になればOKです。
02.divとCSSで左右配置を作る
bodyに背景色が入りましたが、このままでは見にくいですよね。
画像や文字の部分はあまり広がりすぎないようにして、背景色は白にしたいです。
こんなときには<div>というタグを使用します。
HTMLタグは基本的に構造や役割を示しますが、そんな中で<div>タグは意味を持たない特殊なタグ。検索エンジンなどの機械から見れば、あってもなくても良いタグです。
では<div>タグは何なのか、と言えば、主に「レイアウトや装飾のため」に使います。divという透明な箱でコンテンツを囲って、CSSによるレイアウトや装飾をしやすくするのです。
divタグで囲ってみよう
divタグを使ってみましょう。
index.htmlの中身を全てdivタグで囲います。
<body>
<div>
<header>
～ 略 ～
</footer>
</div>
</body>
divで囲えているのか分からないので、cssを書いてみましょう。
body {
background: gray;
}
div{
background: white;
}
上書き保存して、ブラウザで再読み込みします。
灰色背景の中に、白背景のエリアが出来ました。
この白背景部分が、今回作った<div> ～ </div>です。
ヘッダーからフッターまでが１つのグループに入ったわけです。
divに名前をつける
<div>はページデザインによっては、大量に使用します。
今のようにdiv{ }でスタイル指定をすると、<div>タグ部分な全て一緒のCSSが適用されてしまいます。
特定の<div>にだけCSSを適用できるように、divに名前を付けます。
HTMLでdivタグに名前をつけるためには、idもしくはclassという属性を使います。
idはページ内で同じ名前を１回しか使えないというルールがあるので、今回はclassの方を使いましょう。classは１回だけ使っても、何十回使っても良いです。
class名は自由に決めることができます。
今回は全体を包むdivなので、container(コンテナ)と命名しました。
このcontainerという名前のdivにのみスタイルが適用されるように、CSSファイルの方も書き換えましょう。上書き保存しても、ブラウザの見た目が変わらなければうまくできています。
.container{
background: white;
}
containerの前に半角ピリオド（ . ）が入っています。
半角ピリオドはclassを意味する記号です。
03.要素のサイズを指定する
containerクラスのdivは画面いっぱいにどこまでも広がっています。
ちょっと見にくいので、上限の幅を決めてあげましょう。
.container{
background: white;
max-width: 1200px;
}
白背景部分の幅が短くなりました。
今回はmax-width＝幅の上限は1200pxという指定をしているので、見ている画面が1200px以上の場合のみ上図のように隙間ができます。
ブラウザを小さくしてみましょう。
小さくした場合は、白背景部分は画面いっぱいまでの幅で表示されています。
ただ、画像がはみ出していて、横スクロールが出ています。
この状態は、良くありません。
画像も白い背景内に収まるように、上限幅を決めましょう。
img{
max-width: 100%;
}
「img（画像）要素は、最大幅を100％にする」という指定です。
ここでの100%は、親要素の幅を基準にしています。
親要素は、その要素を囲っている要素のことです。
今回の場合、imgの親要素は<div class="container">ですね。
img{ max-width: 100%;}は「最大でも親要素（.container）と同じ幅」という指示になります。こう書いておくと、画像は.containerからはみ出しません。
要素の幅や高さを指定するプロパティは下記のとおりです。
【要素のサイズを決めるCSSプロパティ】
| プロパティ | 指定する内容 |
|---|---|
| width | 要素の幅を指定します。 |
| height | 要素の高さを指定します。 |
| max-width | 要素の最大幅を指定します。 |
| min-width | 要素の最小の幅を指定します。 |
| max-height | 要素の最大高さを指定します。 |
| min-height | 要素の最小の高さを指定します。 |
04.CSSで余白と揃え位置を整える
余白について見てみましょう。
余白はWebデザイン・コーディングでとても重要な項目の一つ。余白を使いこなせるかが、アマチュアとプロの境界線と言っても過言ではないですよ。
marginとpadding、２つの余白を知る
余白を付けるときには、marginとpaddingという２つのプロパティを使います。
marginとpaddingの違いは、外側の余白か内側の余白かです。
これだけではピンときませんね。
index.htmlの一番下にあるフッターを使って見てみましょう。
最初にfooterの背景色と文字色を決めておきましょう。
文字色は「color」というプロパティを使います。
footer {
background: dimgray;
color: white;
}
指定した色が反映されました。
では、外側につく余白「margin」を設定してみます。
footer {
background: dimgray;
color: white;
margin-top: 3rem;
}
remはサイズ単位の一つです。
今回はあまり深く考えずに、とりあえず書いてみて下さい。
次に、内側につく余白「padding」を設定してみます。
footer {
background: dimgray;
color: white;
margin-top: 3rem;
padding: 3rem;
}
先程のmarginのように場所を書かず、「padding: 3rem;」と書くと全方向（上・右・下・左）にそれぞれ3remの余白がつきます。
背景色があると「外側」「内側」の違いが分かりやすいのではないでしょうか。
margin-topと書くと上のみ、paddingと書いた場合は全方向に余白が付きましたよね。
これは方向を指定しない「margin」「padding」というプロパティでは、どの方向にどれだけ余白をつけるか一括で決めることが出来るためです。
一括指定には３パターンの書き方が用意されています。
この書き方はmarginもpaddingも同じです。
【パターン①4方向ぞれぞれ余白を指定する】
下図の場合は、上に1rem、右に3rem、下に2rem、右に5remのmarginがつきます。
【パターン②上下と左右に分けて余白を指定する】
下図の場合は、上と下にそれぞれ2rem、右と左にそれぞれ1remのmarginがつきます。
【パターン③4方向に同じだけ余白をつける】
下図の場合は、上下左右全てに3remのmarginがつきます。
文字の中央寄せ
フッターの文字を中央揃え（横方向の中心に配置）しましょう。
文字揃え位置の変更は「text-align」というプロパティで指定します。
footer {
background: dimgray;
color: white;
margin-top: 3rem;
padding: 3rem;
text-align: center;
}
text-align: center ≒ 文字揃え中央、そのまんまですね。
これだけでエドベース株式会社の文字が、真ん中に配置されます。
marginを使った中央配置
文字の揃えは text-align で出来ました。
では、divなどの箱（ブロックレベル要素と呼ばれます）そのものの位置を変えたいときは、どうすればよいのでしょうか？
箱（ブロックレベル要素）を中央に配置する場合には、marginを使います。
実はmarginは値に「auto」を指定すると、余白を自動で調整してくれる仕様になっています。
margin-leftだけをautoにすると、ブロックは右寄せになります。
取れるだけの余白を全て左に振り分けたイメージです。
左右どちらも「auto」にすると中央配置になります。
取れる余白を、右と左で均等に分けているイメージです。
ということで、marginを使って.container を中央に配置します。
白い背景のフチ、ギリギリまで文字が来ると読みにくいので、paddingも入れてあげましょう。
.container{
background: white;
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
このように、基本の中央配置は２つの方法が使われています。配置したい要素によってどちら使い分けることで、ページ全体のレイアウトをおこなっていきます。
ブロックレベル要素とインライン要素については下記サイトの説明が分かりやすいですよ
05.要素を横並びにする
赤線で囲った部分を横並びで表示されるように設定します。
要素を横並びにする方法の一つに、Flexboxという仕組みがあります。
今回はこのFlexboxを使ってみましょう。
ul {
display: flex;
}
ちょっと重なっていて見にくいですが、これだけでulタグの中身が横並に並びましたね。
Flexboxの仕組み
Flexboxは、親要素のflexコンテナ、子要素のflexアイテムで構成されています。
デフォルトでは、flexコンテナ内の要素は横に並べられます。
先程書いたdisplay: flex;は「この要素をflexコンテナにする」という指示です。
flexコンテナ内の要素は、自動的にflexアイテムとして扱わます。
このため、<li>タグの項目が横に並べられたのです。
もう一箇所の、横並び箇所は<main>と<aside>があります。
Flexコンテナは、中の要素を全てflexアイテムにしてしまいます。footerなども横並びにされると面等なので、<main>と<aside>だけを囲うdivを作りましょう。
<div class="row">
<main>
...
</main>
<aside>
...
</aside>
</div>
Flexコンテナ用のdivには「row」というクラス名を付けました。
rowは“行”を意味する言葉なので、横並びにしたい箇所の囲いによく使います。
先ほどと同じようにcssでdisplay: flex;を指定して、Flexコンテナ化してみましょう。
.row{
display: flex;
}
mainとasideが横に並びました。
asideの方が狭いので、どのくらいの幅にするかを指定してあげましょう。
.row{
display: flex;
}
main {
flex: 3;
}
aside {
flex: 1;
}
使用した「flex」というCSSプロパティは、フレックスアイテム専用のプロパティです。
その要素をどのくらいの大きさで、Flexコンテナ内に配置するかを決めることができます。
今回のように数字を1つだけ書くと、Flexコンテナ内に占める比率として扱ってくれます。
style.cssを上書き保存して、ブラウザを再読込するとaside部分が少し広がりました。
Flexboxについて詳しく知りたい方は動画講座がオススメです
Skillhub無料講座
06.ページのスタイルを整える
ここまでで、index.htmlの大まかなレイアウトは出来ました。
あとはサイトが見ている人が見やすいように、表示を綺麗にしていけば完成です！
ヘッダーのリンク部分
黒丸「・」が重なってしまっている、ヘッダーのli項目を綺麗に並べます。
リストの項目前に表示されているマークをリストマークと呼びます。
デフォルトでのリストマークの種類は
ulは・
olなら数字
と決まっていますが、CSSの「list-style」プロパティを使えばを変更することも、表示させなくすることも出来ます。今回は無くしたいのでnoneと指定してみましょう。
style.cssを書き足していくときには、要素（セレクタ）の親子関係を意識しながら書くようにすると分かりやすいです。
list-style: none;が効いて、黒丸「・」が消えました。
せっかくですから、もう少し綺麗にしましょう。
①はulのpaddingをゼロに
②はliに対してmargin-rightを追加
すると実現できます。
ul {
display: flex;
padding: 0;
}
li {
list-style: none;
margin-right: 1rem;
}
mainとaside
FlexBoxを使って横並びにしたmainとaside。
２つの間に少し間隔があったほうが、左右が別パートだと分かりやすそうですね。
<main>の右側にmarginを加えましょう。
main {
flex: 3;
margin-right: 3rem;
}
赤の点線部分が追加したmarginです。
間が空いたことで、見やすさがアップしたのではないでしょうか？
これでindex.htmlは完成です！
company.htmlにCSSを加える
次に、企業情報などが書かれているcompany.htmlです。
下図のように仕上げます。
まずは、index.htmlと同じように、head内でstyle.cssを読み込ませましょう。
<head>
<meta charset="utf-8">
<title>会社概要｜エドべース株式会社</title>
<meta name="description" content="エドべース株式会社の企業概要などを掲載しています。">
<link rel="stylesheet" href="style.css">
</head>
レイアウトのために追加した<div class="container">と<div class="row">で、必要な部分を囲います。構成はindex.htmlと同じですね。
<body>
<div class="container">
<header>
～略～
</header>
<img src="images/company.png">
<div class="row">
<main>
～略～
</main>
<aside>
～略～
</aside>
</div>
<footer>
<p>エドベース株式会社</p>
</footer>
</div>
</body>
index.htmlの作成時に書いたCSSがあるので、これだけでも見た目が整っています。
前回HTMLの書き方入門で、“<table>タグに「border」という属性を指定して枠をつける方法は非推奨になっている”とご紹介しました。
ここだけ推奨される書き方に直しましょう。
HTMLの方に書いていた「border=1」は削除しておきます。
代わりに、style.cssでborderを指定しましょう。
borderプロパティでは、表示する線の太さ・種類・色をまとめて指定することができます。
table{
border: 1px solid gray;
}
ブラウザで表示を見てみると、テーブル全体の枠しか出来ていません。
それぞれのパーツにも線が入るように、セレクタを追加します。
table, th, td {
border: 1px solid gray;
}
元通りの表示になりました！
折角CSSを書いたので、もうひと工夫しましょう。
二重になっている線を重ねて表示する「border-collapse: collapse;」というスタイル指定を加えます。
table, th, td {
border: 1px solid gray;
border-collapse: collapse;
}
１行足しただけなのに、見た目の綺麗度がぐんと上がりますね。
これでcompany.htmlも完成です！
form.htmlにCSSを加える
最後のページ、form.htmlに取り掛かりましょう。
下図が完成形です。
head内でstyle.cssを読み込ませて、headerからfooterまで丸ごと<div class="container">で囲います。
<html>
<head>
<meta charset="utf-8">
<title>お問い合わせ｜エドべース株式会社</title>
<meta name="description" content="エドべース株式会社へのお問い合わせフォームです。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
～略～
</footer>
</div>
</body>
</html>
お問い合わせのページは、今までのページと違ってasideが無いですね。
ですが、画像とフォームを左右に並べて表示させたいところです。
ちょっとHTMLの構成を変えましょう。
mainタグに「inquiry」というクラス名をつけて、画像も中にいれた形です。
見出しとフォームはsectionタグで囲いました。
▽変更したHTMLはこちら▽
<body>
<div class="container">
<header>
<h1>エドベース株式会社</h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="company.html">会社概要</a></li>
<li><a href="form.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main class="inquiry">
<img src="images/form.png">
<section>
<h2>お問い合わせ</h2>
<form>
名前 : <input type="text" name="name"><br>
性別 : <input type="radio" name="seibetu" value="man">男 <input type="radio" name="seibetu" value="woman">女 <br>
内容 : <textarea name="inq"></textarea><br>
<input type="submit">
</form>
</section>
</main>
<footer>
<p>エドベース株式会社</p>
</footer>
</div>
</body>
こうすることで、flexboxを使って横並び配置がしやすくなります。
.inquiry {
display: flex;
}
.inquiry section {
margin-left: 2rem;
}
「.inquiry section {}」という半角スペースで区切る書き方は、下記のような意味を持っています。特定の場所だけにスタイルを指定したい時に便利です。
ブラウザで表示を確認してみましょう。
フォームの入力欄が近いので、marginを加えて少し間隔を作ります。
input {
margin: 1rem 0;
}
これで完成です！
レスポンシブデザインにする
レスポンシブとは？
Webデザインや制作について調べていると「レスポンシブデザイン（レスポンシブWebデザイン）」という言葉がよく出てきます。
レスポンシブWebデザインとは、簡単にいってしまうと「同じファイルで、パソコンからでもスマホからでも綺麗に見えるようにする」という手法のこと。
昔はパソコン用のhtml&cssファイル、スマホ用のhtml&cssファイルと分けて作っていたのですが、最近は１つのファイルで対応できるようにするのが主流です。
というわけで、今回作ったサイトもレスポンシブサイトにしてみましょう。
難易度が高いと思われがちですが、ほんの数行でスマホでも難なく見られるように調整できますよ！
レスポンシブ化してみよう
ページをレスポンシブWebデザインにするために必要なものは下記の２つ。
- HTMLファイルのViewport（ビューポート）の設定
- CSSファイルのMedia Queries（メディアクエリ）設定
一つずつ設定してみましょう。
HTMLにViewportを入れる
Viewportはmetaタグのname属性の一つ。
Web ページの表示方法を制御するための設定になります。
細かく見ていくと難しいのですが、基本的には下記の記述でOKです。
テンプレートのようなものですので、そのままhead内に貼り付けて下さい。
<meta name="viewport" content="width=device-width,initial-scale=1">
例えば、index.htmlならこうなります。
全てのページにviewport指定が必要なので、他のページにも貼り付けておきましょう。
CSSでメディアクエリを書く
次に、CSSファイルでメディアクエリ（@media）というものを設定します。
これは「画面幅が指定した条件に当てはまるなら、このスタイル指定を使ってください」と指示するための記述です。
書き方は何通りかありますが、最もシンプルなのは下記の形です。
ブラウザ幅を狭くすると、index.htmlはこんな感じになりますよね。
画面が小さいスマホでもこう見えてしまいます。
左右配置にしたmainとasideが狭いので、スマホでは縦並びに戻してみましょう。
style.cssの一番最後に、下記のように書いてみてください。
@media (max-width:767px) {
.row{
flex-direction: column;
}
}
flex-directionというプロパティは、flexアイテムをどう並べるかを設定できます。
何も指定していない場合はrow(横並び)になります。
今回指定した「column」は縦にFlexアイテムを並べよという指示です。
保存して、ブラウザの表示を確認してみましょう。
画面いっぱいにブラウザを広げているときは、見え方に変わりありません。
ブラウザを小さくすると、asideの部分がmainの下に表示されます。
form.htmlは<div class="row">ではなく<main class="inquiry">をflexコンテナにしました。
こちらも縦並びになるように、flex-direction: column;を指定しておきましょう。
@media (max-width:767px) {
.row, .inquiry {
flex-direction: column;
}
}
下図のように、画面幅によって表示が切り替われば完成です。
コーディング、お疲れさまでした。
CSSは書いたコードによる変化が目に見えやすく、楽しいのではないでしょうか？
書いたCSSは短く簡単なものですが、それでもCSS無しの状態のページと比べると、見た目のレベルが段違いにアップしたと思います。
今回使った３ページ分のCSS+レスポンシブのための@mediaが、CSSの基礎であり定番。ほとんどのWebサイトで使われています。
ここまで出来るようになったら、CSSの基礎はほぼ完璧ですね。
あとは「ページで表現したいこと」に合わせて、必要なCSSを書いていけばOK。CSSのプロパティと値は数が多いですし、組み合わせによっても見え方が変わるので、作りながら必要なところから学習するのがおすすめです。
まずは無料で14講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
11月24日まで