CSSの書き方入門 - はじめてのWebデザイン【図解たっぷり】
「このまま受託制作を続けて、3年後も生き残れるだろうか？」
AIの進化により、単なる制作業務の価値は暴落しつつあり悩んでいる。そんな人は多いと思います。しかし、悲観する必要はありません。
今こそ「作る側」から「教える側」へ回るチャンスです。
THE REAL STORY
億を稼ぐ
スクールの
『裏側』
※ 期間限定公開
ビジネスの設計図を
全て見せます。
Skillhub代表
吉田 光利
「実はこのSkillhubも、
僕１人で作りました。
0から作り上げて、生徒6万人まで育てたノウハウ公開します。
」
HTMLの書き方入門講座で作成したページを元に、Webページの見た目を整えるCSSについて学びましょう。
一緒にCSSを書いていくと、文字と画像だけだったページが一気にWebサイトっぽくなりますよ。
ぜひチャレンジしてみてください。
- CSSの書き方講座と素材
- CSSとは
- 下準備：CSSをHTMLに適用する方法
- 実習１：トップページのCSSを書こう
- div要素（divタグ）とは
- class（クラス）とは
- 要素のサイズを指定する
- 画像のはみ出しを抑える
- 要素の大きさを設定するCSSプロパティ
- 余白を設定するCSS
- marginとpadding、２つの余白を知る
- CSSを使って中央配置を作る
- flexboxを使って要素を横並びにする
- ヘッダーを整える
- mainとasideの間隔を調整する
- 実習２：会社概要ページを完成せる
- 実習３：お問い合わせページを完成せる
- 実習４：レスポンシブにする
CSSの書き方講座と素材
HTMLの書き方入門講座で作成したhtmlがある場合は、それを使って下さい。
以下から素材をダウンロードし、ご利用いただいても本講座を進められます。
CSSとは
CSSはCascading Style Sheets（カスケーディング・スタイル・シート）という、Webページの見栄えを整えるために使用される言語です。
CSS、もしくは単にスタイルシートと呼ばれることもあります。
HTML編では、機械のために画面上では見えないタグを書きましたよね。
反対にCSSは人間（ユーザー）に、情報をわかりやすく見せたり、サイトのイメージや雰囲気を伝えたりするための言語なのです。
CSSでできること
CSSでできることは多岐にわたります。 Webページに背景画像をつける、文字の色や大きさを変える、吹き出しを作る……数えればキリがありません。
例えば、Skillhubのブログページでも、赤と黒の見出し・特集マークはCSSで作っています。下図の範囲に画像は一切ありません。 https://skillhub.jp/blogs
しかも、時代とともにCSSで出来ることは増えています。
かつてはJavascriptでしかできなかったアニメーションがCSSで表現できたり、カラーの画像を画面上では白黒表示に変えることも出来ます。
多くのことが出来る分、CSSで使われる指示はHTMLのタグよりも膨大。
覚えてからサイトを作ろう、というのは現実離れしています。
正直なところ、プロのコーダーでも、自分の記憶力だけで全てのCSSを書けるという方は多くないでしょう。
ですので、まずは基礎知識・基本的なスタイル指定を学びましょう。
あとは必要なときに調べて、それを使えば良いです。
CSS(スタイルシート)の基本書式
CSSは、基本的にセレクタ・プロパティ・（プロパティの）値の３つで構成されています。
セレクタ {
プロパティ: 値;
}
セレクタ・プロパティ・値とは
セレクタやプロパティと言われても、ピンとこないかもしれません。
この書式の意味は、下記のようになります。
- セレクタ：スタイルシートで見た目を変えたい場所
- プロパティ：何を設定・変更したいのか
- （プロパティの）値：どんな風に設定・変更したいのか
実際にWeb制作で使う指示を入れてみましょう。
もっと分かりやすくなりますよ。
意訳を見ていただくと分かるように、「:」や「;」にも重要な役割があります。
記号が抜けてしまうと機械が意味を読み取れず、指示したスタイルが適用されないこともあります。
書いたのに上手く表示されない、というときは確認してみましょう。
下準備：CSSをHTMLに適用する方法
CSSの指示を反映させる方法はいくつかありますが、最もベーシックなのは「CSS専用のファイルを作る」ことです。
CSS専用のファイルの拡張子は「.css」です。
style.cssというファイルを新規作成して下さい。
下図のように、index.htmlと同じ階層にできていればOKです。
htmlファイルから読み込む
style.cssを開いて、bodyの背景色を灰色にするスタイル指定を書いてみましょう。
書けたら上書き保存してください。
body {
background: gray;
}
現段階でindex.htmlをブラウザで開いても、まだ何も変わりませんね。
書いたスタイルを適用させるためには、index.htmlの方で「style.cssファイルを読み込む（その指示を実行する）」という設定をしなくてはいけません。
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です。
実習１：トップページのCSSを書こう
ここからは、実際にhtmlをCSSで装飾しながら、スタイルシートの扱い方を覚えていきましょう。
完成見本はこちらです。
div要素（divタグ）とは
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>です。
ヘッダーからフッターまでが１つのグループに入ったわけです。
class（クラス）とは
class属性で要素に名前をつける
ページデザインによっては<div>を大量に使用します。
今のようにdiv{ }でのスタイル指定だと、<div>タグ部分に全て一緒のCSSが適用されてしまいますよね。
特定の<div>にだけCSSを適用できるように、divに名前を付けます。
divタグに名前をつけるために、HTMLではidもしくはclass属性を使います。
idはページ内で同じ名前を１回しか使えないというルールがあるので、今回はclassの方を使いましょう。
classは１回だけ使っても、何十回使っても良いです。
class=" "て設定した名称をクラス名、もしくはCSSクラス名と呼びます。
クラス名はコードを書く人が、自由に決めることができます。
今回は全体を包むdivなので、container(コンテナ)と命名しました。
クラス名を使ってスタイル指定を書く
containerという名前のdivにのみスタイルが適用されるように、CSSファイルの方も書き換えましょう。
スタイル指定では、セレクタにcontainerの前に半角ピリオド（ . ）を入れて書きます。
半角ピリオドはclassを意味する記号です。
.container{
background: white;
}
上書き保存しても、ブラウザでの表示が変わらなければうまくできています。
要素のサイズを指定する
containerクラスのdivが、決まった大きさよりも横に広がらないようにCSSを書き加えてみましょう。
max-widthという、最大横幅を決めるプロパティを使います。
.container{
background: white;
max-width: 1200px;
}
白背景部分の幅が短くなりました。
今回はmax-width＝幅の上限は1200pxという指定をしています。
この場合、見ている画面が1200px以上の場合のみ上図のように隙間ができます。
画像のはみ出しを抑える
ブラウザを小さく（細く）してみましょう。
指定した1200px;よりも小さいときには、画面いっぱいまでの幅で表示されていますね。
.containerの幅はぴったりですが、画像がはみ出しています。
画像も白い背景内に収まるように、上限幅を決めましょう。
img{
max-width: 100%;
}
これは「img（画像）要素は、最大幅を100％にする」という指定です。
ここでの100%は、親要素の幅を基準にしています。
親要素は、その要素を囲っている要素のこと。
今回の場合、imgの親要素は<div class="container">です。
img{ max-width: 100%;}は「最大でも親要素（.container）と同じ幅」という指示になります。
こう書いておくと、画像は.containerからはみ出しません。
要素の大きさを設定するCSSプロパティ
要素の幅や高さを指定するプロパティは、今回使ったもの以外にも存在します。
【要素のサイズを決めるCSSプロパティ】
| プロパティ | 指定する内容 |
|---|---|
| width | 要素の幅を指定します。 |
| height | 要素の高さを指定します。 |
| max-width | 要素の最大幅を指定します。 |
| min-width | 要素の最小の幅を指定します。 |
| max-height | 要素の最大高さを指定します。 |
| min-height | 要素の最小の高さを指定します。 |
余白を設定する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はWebで使用するサイズ単位の一つです。
今回はあまり深く考えずに、とりあえず書いてみて下さい。
ブラウザで表示を見てみると、バナーとの間が少し空きますね。
次に、内側につく余白「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方向に同じだけ余白をつける】
値を１つだけ書くと、上下左右全てに同じだけのmarginがつきます。
CSSを使って中央配置を作る
文字を中央揃えにするCSSプロパティ「text-align」
フッターの文字を中央揃え（横方向の中心に配置）しましょう。
文字揃え位置の変更は「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;
}
このように、基本の中央配置は２つの方法が使われています。
配置したい要素によってどちら使い分けることで、ページ全体のレイアウトをおこなっていきます。
flexboxを使って要素を横並びにする
赤線で囲った2か所を、横並びで表示できるように設定します。
要素を横並びにする方法の一つに、Flexboxという仕組みがあります。
今回はこのFlexboxを使ってみましょう。
Flexboxとは
Flexboxは正式名称「Flexible Box Layout Module」というレイアウトモジュールです。
簡単に言ってしまえば、Webページ内の要素を並べるためのキットのようなものです。
基本的な使い方は簡単。
Flexレイアウトで並べたい要素の親要素にdisplay: flex; と指定するだけです。
ulタグで試してみましょう。
ul {
display: flex;
}
ちょっと重なっていて見にくいですが、これだけでulタグの中身が横並に並びましたね。
Flexboxの仕組み
Flexboxは、親要素のflexコンテナ、子要素のflexアイテムで構成されています。
デフォルトでは、flexコンテナ内の要素は横に並べられます。
先程書いたdisplay: flex;は「この要素をflexコンテナにする」という指示です。
flexコンテナ内の要素は、自動的にflexアイテムとして扱わます。
このため、<li>タグの項目が横に並べられたのです。
mainとasideを横並びにする
index.htmlでもう一箇所、横並びにしたい箇所<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が横に並びました。
Flexアイテムの幅を指定する
このままでは、asideの方が狭いですね。
どのくらいの幅にするかを指定してあげましょう。
.row{
display: flex;
}
main {
flex: 3;
}
aside {
flex: 1;
}
使用した「flex」というCSSプロパティは、フレックスアイテム専用のプロパティです。
その要素をどのくらいの大きさで、Flexコンテナ内に配置するかを決めることができます。
今回のように数字を1つだけ書くと、Flexコンテナ内に占める比率として扱ってくれます。
style.cssを上書き保存。
ブラウザを再読込すると、aside部分が少し広がります。
Flexboxで使えるプロパティ等の詳細はブログ【Flexboxの書き方入門】シリーズをご確認ください。
Skillhubブログ
ヘッダーを整える
黒丸「・」が重なってしまっている、ヘッダーのli項目を綺麗に並べます。
リストマークを非表示にする
リストの項目前に表示されているマークをリストマークやリストマーカーと呼びます。
デフォルトでのリストマークは、ulは黒丸（・）、olなら数字。
ですが、CSSの「list-style」プロパティを使えばを変更することも、表示自体を無くすことも出来ます。
今回は無くしたいのでnoneと指定してみましょう。
list-style: none; を指定すると、黒丸「・」が消えました。
ul,li要素の余白を調整する
せっかくですから、ul部分をもう少し見やすくしましょう。
調整したいのは、下図の２箇所です。
①はulのpaddingをゼロにする。
②はliに対してmargin-rightを追加すると実現できます。
ul {
display: flex;
list-style: none;
padding: 0;
}
li {
margin-right: 1rem;
}
mainとasideの間隔を調整する
FlexBoxを使って横並びにしたmainとaside。
２つの間に少し間隔があったほうが、左右が別パートだと分かりやすそうですね。
<main>の右側にmarginを加えましょう。
main {
flex: 3;
margin-right: 3rem;
}
赤の点線部分が追加したmarginです。
間が空いたことで、見やすさがアップしたのではないでしょうか？
実習２：会社概要ページを完成せる
企業情報などが書かれているcompany.htmlにCSSを加え、下図のように仕上げます。
既存のスタイル指定を活用する
company.htmlも<head>内でstyle.cssを読み込ませましょう。
方法はindex.htmlと同じなので、コピーして貼り付ければOKです。
<head>
<meta charset="utf-8">
<title>会社概要｜エドべース株式会社</title>
<meta name="description" content="エドべース株式会社の企業概要などを掲載しています。">
<link rel="stylesheet" href="style.css">
</head>
index.htmlでは、レイアウトのためにdivを追加しました。
company.htmlも同様に、<div class="container">と<div class="row">で必要な部分を囲いましょう。
<body>
<div class="container">
<header>
～略～
</header>
<img src="images/company.png" alt="エドベース株式会社-会社概要トップ画像">
<div class="row">
<main>
～略～
</main>
<aside>
～略～
</aside>
</div>
<footer>
<p>エドベース株式会社</p>
</footer>
</div>
</body>
これだけでも、CSSが効いて見た目が整いました。
テーブルのスタイルを指定する
CSSのborderプロパティで枠線をつける
HTMLの書き方入門で、<table>タグに「border」という属性を指定して枠をつける方法は非推奨になっているとご紹介しました。
推奨される書き方に直しましょう。
まず、HTMLファイルに書いていた「border=1」は削除しておきます。
代わりに、style.cssでborderというプロパティを使って以下のように書いてくてください。
table{
border: 1px solid gray;
}
borderプロパティでは、表示する線の太さ・種類・色をまとめて指定することができます。
ブラウザで表示を見てみると、テーブル全体の枠しか出来ていませんね。
それぞれのパーツにも線が入るように、セレクタを追加します。
table, th, td {
border: 1px solid gray;
}
元通りの表示になりました！
テーブルの枠線が二重にならないようにする「border-collapse」
折角CSSを書いているので、もうひと工夫。
二重になっている線を1本にする（重ねて表示する）ことができるスタイル指定を加えます。
「border-collapse: collapse;」と加えましょう。
table, th, td {
border: 1px solid gray;
border-collapse: collapse;
}
１行足しただけなのに、見た目の綺麗度がぐんと上がりますね。
これでcompany.htmlも完成です！
実習３：お問い合わせページを完成せる
最後のページ、form.htmlに取り掛かりましょう。
下図が完成形です。
CSSの読み込みと、スタイルの適用
以下２つの設定をして、ここまで作ってきたCSSを活かしましょう。
- 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デザイン）」という言葉がよく出てきます。
レスポンシブ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は<main class="inquiry">をflexコンテナにしました。
こちらも縦並びになるように、flex-direction: column;を指定しましょう。
@media (max-width:767px) {
.row, .inquiry {
flex-direction: column;
}
}
下図のように、画面幅によって表示が切り替われば完成です。
まずは無料で7講座から始めましょう！
募集人数には制限があります。サインアップはお早めに。
9月27日まで