体系的にサクッと学ぶ!CSSの基礎知識マルッとマスター講座
webサイトを作れるようになりたいけど、CSSって難しそうだなぁ。参考書を買うか迷ってるけど、自分には出来ないかもしれないし、損したくない。CSSを無料でマルッとマスターしたいよぉ〜!!
「CSSって難しそう…」そう思っていませんか?
参考書は分厚いから取っつきにくいし、ネットで調べても小分けに書いてあるから何から手をつければいいかもわからない…。
この記事は、そんなあなた向けの記事です。
ここでは、webサイトを作るために知っておくべきCSSの知識をまとめてご紹介しています。
つまりこの記事を読めば、webサイトを作るためのCSSの基礎知識をマルッと習得できるということ(webサイト作成のスタートラインに立てます)!
ここで基礎知識をしっかり習得すれば参考書を買う必要もなく、Webサイト作成を始められるレベルになるので、じっくり読んでくださいね♪
やぁみんな!僕が現役WEBスクール校長のさかしだ!
CSSをマスターしたい君に、全てを伝えられるように本気を出すからよろしくね!
HTML/CSSを使えるようになればwebサイトを作れるから、webデザイナーになることだって可能だ!
しかも、CSSは誰でもできるようになる!
ただ、本気じゃない人にできるほど優しいものでもないから、真剣に取り組んでくれ!
⇒【超初心者向け】HTMLの基礎知識マルっと習得講座
CSSってなぁに?美味しいの?
CSSとは「Cascading Style Sheets(カスケーディング スタイル シート)」の略で、webサイトの文字や背景、余白などを装飾するためのマークアップ言語です。
もっと簡単に言うと、「webサイトを見やすくするために色をつけたり、フォントサイズを大きくしたりするためのもの」ですね。
以下のものは当サイトのトップページで、cssを使ったものと、使っていないものを並べています。
cssを使っていないものは、文字と画像が縦に並んでいるだけでとても見にくいですね(背景画像はCSSで指定しているので見えません)。
一方、cssを使えば情報がまとまっていたり、見やすいように工夫してあるため、どこを注目してみればいいのかわかりやすいと思います。
つまりCSSの目的は、「webサイトをユーザーに気持ちよく見てもらうために使う」と言っても良いでしょう♪
CSSがないと、今みたいに快適にwebサイトを見ることができないんだね!
そゆこと!CSSは洋服みたいなもので、CSS次第で素敵なWebデザインになるかが決まるんだ。
イケてる男の方がイイ!
でもさ、CSSって何をしているの?
CSSは、コンピューターに対して「この文字の色を赤にして」という感じで「指示」を出しているんだよ!
だからこれからCSSを学んでいく君は、「コンピューターに指示を出すためのルールを学んでいく」ということになるね。
「どうやって文字の色を変える指示を出すのか?」「余白を大きくする指令の出し方は?」などを学ぶんだ。
そっか、CSSを勉強するっていうのは「指示の出し方」を学ぶってことだったのか!
なんだか難しく考え過ぎてたかも。
難しく考えなくても大丈夫だよ♪
誰でも人に指示を出したことがあると思うけど、相手がコンピューターになるだけだからね。
「指示を出す」という誰にでもできることをするのがCSSだから、CSSは誰にでもできるようになるんだ。
じっくり学んでいこう!
- CSSはWebサイトを見やすくするために装飾を行うマークアップ言語
- CSSを勉強するとは、コンピューターへの指示の出し方を勉強すること
CSSってどうやって使うの?
CSSは「.css」という拡張子のついたファイルを作成し、その中に指示を記述していきますが、ただファイルに指示を記述するだけでは使えません。
ではCSSファイルはどのように使うかというと、「CSSファイルをHTMLファイルに読み込ませて使う」というのが基本的な使い方となります。
CSSファイルは「このpタグの色を赤にしてね」などの指示を出しており、HTMLはその指示を読み込み、適用しているのです。
HTMLという骨格に対して、CSSという服を着せていくイメージですね。
HTMLファイルにCSSファイルを読み込ませる方法は、以下のようにHTMLファイルの<head>タグの中に、<link>(リンクタグ)の「href属性」を使って読み込ませます。
<!DOCTYPE html>
<html>
<head>
<title>サイトタイトル</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>君の瞳は美しい</p>
</body>
</html>
「rel=”stylesheet”って何?」と思ったかもしれませんが、これはコンピューターに「これはcssファイルですよ〜」とファイル形式を伝えています。
CSSファイルを読み込むには、「HTMLファイルのheadタグの中に<link href=”style.css” rel=”stylesheet”>」と記述すると覚えてください。
CSSをまだ学び始めたばかりの場合は、「CSSはHTMLに読み込ませて使う方法」だけ知っておけばとりあえずはOKです!
CSSのファイル名は「style.css」じゃなきゃダメなの?
.cssっていう拡張子の前は、どんな名前でもOKだ!
kyabako.cssでも良いんだけど、わかりやすい名前の方がイイね。
style.cssなら「これはサイトのデザインを決めるcssファイルなんだな」と一瞬でわかるからね♪
これは共通認識だ。
HTMLファイルにCSSを直接書き込む方法もあるよ♪
CSSは基本的に専用のファイルを作って、それをHTMLに読み込ませるのが一般的ですが、HTMLファイルに直接書き込むこともできます。
やり方は2つ。
- タグの中にstyle属性を使って記述する
- styleタグのなかに記述する
<body>
<!-- 1.タグの中にstyle属性を使って記述する場合 -->
<p style="color: red;">君の瞳は美しい</p>
<!-- 2.styleタグの中に記述する場合 -->
<style>
p {
color: red;
}
</style>
</body>
HTMLファイルにCSSを書き込むと、HTMLファイルが長くなって見にくくなるので基本的には使いませんが、このような使い方もあるというのは知っておくと良いですね♪
webサイトを作るときは、「他の人にも見てもらう可能性がある」という意識を持っておくとイイぜ!
自然とシンプルでキレイなコードを書けるようになるからね。
つまり、HTMLファイルにCSSを書くと見にくくなるから要注意ってことだ!
【CSSの使い方まとめ】
- 基本は専用のCSSファイルを作ってHTMLでそのファイルを読み込む
- HTMLファイルのHTMLタグにstyle属性を使って書きこむ
- <style></style>タグを使ってHTMLファイルに書き込む
CSSの書き方をマスターしよう!
CSSの使い方を学んだところで、ここからはCSSの書き方について学んでいきましょう!
CSSの基本文法は以下の通りです。
セレクタ {
プロパティ: 値;
}
パッとみただけではよくわからないと思うのですが、CSSはこのように書いていきます。
セレクタを記述し、{}の中身にプロパティと値、プロパティの後に:(コロン)、値の後に;(セミコロン)です。
改行やスペースは見やすいように使っていますが、実際の現場でもこのように書く人が多いです。
それぞれの意味を大まかに説明すると、以下のようになります。
セレクタ:どこの(どの要素?タグ名?クラス名?id名?)
プロパティ:何を(文字色?フォントサイズ?余白?)
値:どのように(大きくする?何色にする?)
HTMLもこんな感じの文法があったね!
とりあえずこの型を覚えちゃえば、どんどん進める感じ?
そうそう!
CSSも型を覚えちゃえばあとはプロパティとかを当てはめるだけだぜ!
「どこの」「何を」「どのように」がキーワードだ!
セレクタ、プロパティ、値については今から詳しく説明していくね!
セレクタとは、どれに対してCSSを適応させるかを指定するもの
セレクタとは、HTMLのどの要素に対してCSSのスタイルを当てるかを指定するものです。
例えば以下のHTMLのpタグにスタイルを当てるには以下のように書きます。
<p>君の瞳は美しい</p>
p {
color: red;
}
こちらのCSSでは、「pタグの文字色を赤に変えてね」と指示を出しています。
そして、「p」の部分で「pタグに対して」という指定をしているのです。
もしセレクタがなければ、コンピューターは「どの要素の文字色を赤にすればええねん!」と迷ってしまい、何も反映してくれないのです。
class属性で要素ごとにスタイルを切り分けよう!
ではpタグがいくつもあり、その中の1つだけ文字色を変えたい場合はどうでしょう?
今のようにpタグをセレクタとして使うと、全てのpタグの文字色が赤になってしまいます。
そのため、「class属性」を使って切り分けます。
<p class="red">君の瞳は美しい</p>
<p>アイラブユーベイベー</p>
.red {
color: red;
}
【結果】
こうすることで、<p class=”red”>君の瞳は美しい</p>の要素だけ文字色が赤くなります。
class属性は、要素に対して名前をつけるものでしたよね?
CSSではclass属性を指定することで、スタイルを切り分けることが可能なのです。
上記のHTMLとCSSを書いたサンプルをアップしてるので、見本が見たい人はここからダウンロードしてみてくれっ!
あと、読み進めるだけだと理解が難しいから、ちゃんと自分でもソースを書いてみよう!
class属性をセレクタに指定する場合、「.(ドット)」をクラス名の前に付けるという大切なルールがあるので、ここでしっかり覚えてしまいましょう!
「.(ドット)」を付けることで、コンピューターが「お!これは「.red」ってclassがついてる要素に対するスタイルだな!」と理解してくれます。
class属性ってこういう風に使うんだね!
「なんで名前つけなきゃいけないの?」って意味不明だったよ(笑)
class属性は、「どの要素に対してのスタイルか」を指定できるからすごくよく使うぜ!
pタグとか「タグの名前」で指定すると、別のpタグにもスタイルが当たっちゃうから厄介なんだ。
はじめのうちはスタイルを当てるタグにclass名をつけておこう!
- スタイルの切り分けは、セレクタを要素のclass名で指定する(基本的には)
- CSSは「.class名」とすることでclass名を認識してくれる
他にも便利なセレクタの使い方がある!
ここまでで「タグ名」と「class名」を使ってデザインの切り分けを行うことができるとお伝えしましたが、実はまだまだ便利なセレクタの記述方法があります。
それが、「id属性」「擬似クラス」「複数セレクタ」「子孫セレクタ」を使う方法。
id属性を使ってスタイルを切り分ける方法
HTMLの属性には「id属性」というものがあったのを覚えていますか?
id属性は「1つのファイルで同じidはひとつしか使えない」という厳しいルールを持つものでしたね!
cssのセレクタには、id属性を指定することも可能です。
やり方は、「#」をid名の前に付けるだけです。
<p id="red">君の瞳は美しい</p>
#red { color: red; }
書き方はclassとほぼ同じですが、セレクタのはじめに「#」をつけます。
classの場合は「.(ドット)」、idの場合は「#」です。
間違えないように気をつけましょう!
擬似クラスはすごく便利!
「疑似クラス」と言われても、名前からどんなものかを想像するのは難しいですが、簡単に言うと「○番目の要素」というような指定ができます。
擬似クラスを使った指定方法の例を見てみましょう!
<p>君の瞳は美しい</p>
<p>君の瞳は美しい</p>
<p>君の瞳は美しい</p>
<p>君の瞳は美しい</p>
<p>君の瞳は美しい</p>
p:nth-of-type(3) {
color: red;
}
【結果】
この例では、「3番目のpタグの文字色を赤にしてね」と指示をしています。
「:(コロン)」の後に「nth-of-type(数字)」と指定することで、「上から○番目のpタグ」という細かい設定ができるのです。
擬似クラスについては「nth-of-type()」の他にも色々あります(奇数・偶数番目、3の倍数、下から○番目など)。
今の段階で擬似クラスを全て使えるようにする必要はないですが、このようなセレクタもあるということを覚えておいてくださいね!
慣れてくるととても便利です。
疑似クラスにはほかにも、「マウスが要素に乗った時にこのスタイルを当ててね」という「:hover」や、「pタグ以外の要素」という指定ができる「:not」などもあるので、必要に応じて調べてみてくださいね♪
擬似クラスってよくわかんないけど、便利なの?class名をそれぞれ当てればよくない?
すごく便利だよ!確かにclass名をそれぞれ当てればいいんだけど、わかりやすくて適切なclass名を考えるのって意外と面倒だったりするんだ。
そんな時に擬似クラスを使えば手間を省けるし、クラス名が他の要素と意図せずに同じになってデザインが崩れるみたいなこともなくなる。
今はわからないかもしれないけど、webサイトを作っているうちに便利さに気づくはずだ!
ちなみに、「:hover」っていう疑似クラスはすごくよく使うぜ!
ボタンにマウスを合わせたら色が変わるとかできるからね!
複数セレクタ
複数セレクタとは、「複数の要素に対して同じスタイルを当てる」ときに使うものです。
<h2>星が綺麗だね、でももっと綺麗な星を見つけちゃったよ・・・君さ☆</h2>
<p class="text">釣られちゃったよ、君の赤い糸に。</p>
<p class="description">ぼくの太陽になってくれないか。</p>
h2,
.text,
.description {
color: red;
}
【結果】
このように、複数セレクタは複数の要素にまとめてスタイルを当てることができるのです。
記述方法は要素と要素の間に「,(カンマ)」を記述するだけです。
一番最後の要素にカンマを付けないように注意してくださいね!
これは便利だね!
カンマの後は改行しなきゃいけないの?
必ず改行する必要はないんだけど、改行した方が見やすいから改行することをおすすめするよ!
子孫セレクタ
子孫セレクタは、入れ子構造にある親要素に囲われた子要素、孫要素に対してスタイルを当てるためのセレクタです。
入れ子構造とはdivの中にpが入っているような関係のことでしたね!
その関係を利用して、divの中のpにだけスタイルを適用することができます。
記述方法は、セレクタの間をスペースで区切って書きます。
<div>
<p>君の瞳に恋してる</p>
</div>
<div class="block">
<p>おれの心はおれのもの。お前の心はおれのもの。</p>
<a>君の瞳は美しい。</a>
</div>
div p { color: red; } .block p { color: blue; } div a { color: green; }
このCSSを日本語に翻訳すると、「divタグのなかのpタグ全ての文字色を赤にしてね」「.blockクラスの要素のpタグ全ての文字色を青、aタグ全ての文字色を緑にしてね」です。
もしp、aタグのみをセレクタと指定してしまうと、すべてのp、aタグに対してスタイルがついてしまいますが、この書き方ならスタイルを切り分けることができます。
長くなると見にくくなるのであまりおすすめしませんが、スペースで区切れば何個でもセレクタをつなげることも可能です。
使えるものはすべて使っちゃうんだね!
子孫セレクタはすごくよく使うから覚えておいてね!
半角スペースを空けるのを忘れずに!
たまにCSSが上手く反映されない原因になるから。
セレクタってたくさんあるんだねぇ…
種類はけっこうたくさんあるけど、すべて使うわけではないから全部は覚えなくていいよ。
ただ、セレクタを自由に指定できれば、CSSコーディングが圧倒的に楽に、早くなる!
セレクタを制した者がCSSを制すると言っても過言ではないぜ!
セレクタのチートシートなんかもあるから、時間があったら参考にしてみよう!
【セレクタまとめ】
- セレクタを制したものがCSSを制する
- class属性を指定するには「.class名」
- id属性を指定するには「#id名」
- 疑似クラスで「○番目の要素」などの指定ができ、要素の後に「:(コロン)」でつなげる
- セレクタを「,(カンマ)」で区切れば複数の要素に同じスタイルを当てられる
- 子孫セレクタはセレクタのあとに半角スペースでつなげる
プロパティは「何を?」を指定する
プロパティと聞くとなんだか難しく聞こえますが、要は「何を変えるか」を指定するものです。
ここまでの例でいうと、「color」の部分ですね!
colorプロパティは、「文字の色」を変更するプロパティです。
後で詳しく解説しますが、他にも「background-color(背景色)」、「font-size(文字の大きさ)」、「width(要素の横幅サイズ)」などを指定できます。
1つのセレクタに対して、いくつものプロパティを当てることができるので、思い通りのスタイルを当てることが可能です。
【プロパティ使用例】
<p class="text">君の瞳は美しい</p>
.text { color: white; font-size: 50px; background-color: gray; text-align: center; padding: 50px 0; }
【結果】
このように、プロパティを指定することで変えたいものを思い通りに変更することが可能なのです♪
たくさんの種類がありますが、全てを覚える必要はありません。
基本的なものを使えるようにした上で、必要な時に必要なプロパティを調べれば良いでしょう。
もう少し下でよく使うプロパティについて解説しますね♪
プロパティで何を変えるか指定するのか!
なんだか面白くなってきたぜ!
プロパティに関しては書きながら覚えるといいよ!
ものすごい数が多いし、僕も全部は覚えてないから(笑)
間違っても、全部暗記しようとしてはダメだよ!
値は、プロパティをどのように変更するかを決める
3つ目の「値」は、プロパティをどのように変更するかを決めるものです。
具体的には、「color: red;」の「red」の部分ですね!
上でお話ししたプロパティには、それぞれ指定できる値が設定されています。
例えば「colorプロパティ」では、redやblue、#000000などの16進数での色指定が可能です。
「font-size」プロパティは、16pxのようなpx指定、1em・1remのような相対指定、3vwなどの画面幅によってサイズを調整する指定方法などがあります。
このように、それぞれのプロパティには値を指定することができるので、使いながら徐々に覚えていくと良いでしょう。
値でどんな風に変えるかを指定するんだね!
値を指定することでどんなスタイルを当てるかを指定できるよ。
値についても全て覚えるのは大変だから、使いながら覚えていこう!
プロパティ名で検索すると、そのプロパティで使える値が一覧で見られるサイトがあるから、必要に応じて調べてみてくれ!
【CSSの書き方まとめ】
- セレクタ { プロパティ: 値; } がCSSの基本構文
- セレクタは「どの要素を指定するか?」
- プロパティは「その要素の何を変えるか?」
- 値は「そのプロパティをどのように変えるか?」
基本的なプロパティの意味を理解しよう!
CSSの書き方についてはなんとなく理解できたでしょうか?
わからなくても焦る必要はなく、作りながら学んでいけばOKです。
さてここからは、基本的な「プロパティ(その要素の何を変えるか?)」の種類と意味について解説していきます!
プロパティについて知らなければ、適切なスタイルを当てられませんからね。
何度も言いますが、プロパティは全て暗記する必要はありません。
基本的なところを抑えて、あとは必要に応じて調べながら身につければ大丈夫ですから♪
じっくりといきましょう。
font-size
font-sizeプロパティは、文字の大きさを変更できるプロパティです。
記述方法は以下の通り。
セレクタ名 {
font-size: ○○;
}
○○に入る値は数字と単位です。
単位には、px(ピクセル)、%、em(エム)、rem(レム)、vw(ビューポートウィドゥス)などがあります。
基本的にはpxという絶対指定を使うことが多かったのですが、最近ではスマホやタブレットなどの画面サイズがバラバラのものに対応しなくてはならないため、remなどの相対指定(何かを基準に値を決める)の単位を使うことも増えました。
フォントの大きさだけでもこんなにあるのか…。
初めから全部を使えるようになる必要はないよ!
初心者のうちはpxだけでもOKだ!
慣れてきたらremとかも便利になるから使ってみてね。
pxってさ…どうゆう意味なの?
ピクセルっていうのは、デジタル画像の最小単位のことだよ!
僕たちが普段目にしている画像はドットという小さな点の集合体なんだけど、その小さな点に対する単位なんだ。
小さな点1つ分のサイズなら1px、16個分なら16pxさ♪
ちなみに、cssを何も指定しない場合は16pxがデフォルトになるぜ!
color
colorプロパティは、文字の色を決めるプロパティです。
セレクタ名 {
color: ○○;
}
○○に入る値は「white」や「red」といった英語か、#ffffffのような16進数を使ったパターンがあります。
16進数を使った方が細かな色指定をできます。
16進数って何だか難しそう…。
16進数については特に意識しなくてOKだ!
「カラーピッカー」ってググってみて!
下のようなピッカー機能が表示されて、色を選ぶだけだ!
【カラーピッカー】
Google様ありがとう!
16進数については、「#ffffff」が白、「#000000」が黒ってことくらいを覚えておけば十分だよ。
「#」を付けるのを忘れないようにね!
あと、Webサイトでは「RGB」っていう色のルールを使うことは覚えておこう!
background
backgroundプロパティは「background-image」や「background-color」などの種類があり、背景色を決めたり、背景画像を設定する時などに使います。
background-color: black;
background-image: url("○○○○.jpg");
background: red;
backgroundプロパティは「background: ○○;」だけでも値を認識できますが、見にくくなる場合は「background-image」など、何を変更しているのか記述してあげると親切です。
背景画像を設定する場合は、一緒に「background-size」や「background-position」とかを指定してあげることで、背景画像のサイズや中心点とかを変更できるぜ!
width/height
widthは要素の横幅、heightは要素の高さを指定するプロパティです。
<p class="text1">横幅は300px、高さは50pxです。</p>
<div class="box">
<p class="text2">高さは「.box」の50%です。</p>
</div>
.text1 {
width: 300px;
height: 50px;
background: red;
color: white;
}
.box {
height: 100px;
background: black;
color: white;
}
.box .text2 {
height: 50%;
background: green;
}
上の例のように指定することで、要素の横幅と高さを指定します(わかりやすいようにbackgroundで背景色を付けています。)。
widthとheightも、単位にpxだけでなく%なども使えるので、親子関係などを利用して「親要素の半分」「親要素の1/3」などの指定もできますよ♪
widthとheightを使えば簡単に思い通りのスタイルになりそうだね!
注意しなければいけないのは、スマホとかの小さなデバイスの時だね!
iPhoneとかは画面幅が425pxとかなんだけど、要素が500pxって指定してあるとはみ出しちゃう。
widthとheightは絶対的な指定になるから、その点は柔軟に変更してね!
そうゆう時はどうすればいいの?
単位を%にしたり、「max-width」っていう「最大値は500pxだけど、画面幅が小さくなったらそれに合わせて縮めてね」という意味合いを持ったプロパティを使うといいよ。
あとは、「メディアクエリ」で画面幅ごとにスタイルを変更するってやり方が大切。
メディアクエリに関してはあとで詳しく説明するから、今は「そういうのもあるのか」程度に思っておいてね!
padding(パディング)/margin(マージン)
padding/marginプロパティは、要素間の間隔を調整するプロパティです。
「padding?margin?」という状態だと思うので、まずは以下の画像を見てください。
【要素のボックス構成図】
実は、要素はこの図のように「表示領域」「境界線(border)」「余白(padding/margin)」で構成されています。
そして「表示領域」から「境界線」までの余白をpadding、「境界線」より外の余白をmarginと言います。
これらの余白を設定するのがpaddingプロパティ、marginプロパティなのです。
実際にpaddingとmarginを設定して、見てみましょう!
<p class="text1">paddingを設定したよ</p>
<p class="text2">marginを設定したよ</p>
.text1 {
padding: 20px;
border: 3px solid light-blue;
}
.text2 {
margin: 20px;
border: 5px solid light-blue;
}
【結果(水色線がborder)】
padding、marginともに余白を設定するプロパティですが、境界線の内側の余白か外側の余白かで役割が変わるのが分かると思います。
ちなみに、paddingとmarginは上下左右それぞれに設定できるので、細かなレイアウトを行う時に非常によく使います。
padding、marginのあとに「-top」などと記述することで、それぞれの余白を指定できるので利用してみてください。
padding-top: 20px;
padding-right: 10px;
margin-left: 2rem;
margin-bottom: 10%;
何となく複雑だけど、とりあえず余白を空けたいならpaddingとmarginを使えばいいんだね!
そうゆうこと!
今はイメージがつかみにくいと思うけど、paddingとmarginで余白を空けられるって覚えておいてね!
display
displayプロパティは、要素を「inline要素、inline-block要素、block要素」に変更できるプロパティです。
例えばspanタグはinline要素ですが、block要素に変更することができます。
【inline要素の場合】
<span>君の瞳は美しい</span>
span {
background: blue;
color: white;
}
【block要素の場合】
<span>君の瞳は美しい<span>
span {
display: block;
background: blue;
color: white;
}
ブロック要素には、paddingやmarginを指定出来たり、widthやheightで要素の範囲を広げられる、幅が親要素もしくは画面いっぱいになるなどの特徴がありました。
一方インライン要素はテキストの量に合わせて範囲が変わるなどの特徴があります。
つまり、displayプロパティを使えば柔軟なレイアウトが可能になるという事ですね。
ブロック要素、インライン要素ってあったなぁ(笑)
displayプロパティは便利でよく使うから覚えておこう!
他にはどんな時に使うの?
例えば、文字に下線を付ける時なんかに使うね。
pタグで文字を書いている場合、ブロック要素だから下線を付けたら要素の端から端まで色が変わる。
けど、このpタグをdisplayプロパティで「インラインブロック要素」に変えると…
あっ!下線が文字の部分だけになってる!
そうなんだ!
下線は文字の長さ分だけ付けたい場合が多いよね!
要素のタイプを変えるだけで柔軟にデザインできるようになるから、displayプロパティは重要なんだ。
ということは…要素のタイプごとの特徴をしっかり理解しないとだね(笑)
border
borderプロパティは、要素の境界線を指定するプロパティです。
<p>君の瞳は美しい</p>
p {
border: 5px solid orange;
//以下省略
}
【結果】
borderプロパティは、「境界線の太さ」、「境界線のタイプ(実線(solid)、点線(dotted)、破線(dashed))」、「境界線の色」を記述します。
それぞれに半角スペースを入れて書くので少し戸惑うかもしれませんが、いちど覚えてしまえばとても便利なプロパティとなります。
ちなみにborder-topで上辺の境界線だけを指定でき、「border-right」「border-bottom」「border-left」と、境界線を引きたいところを指定することも可能です。
p {
border-bottom: 3px solid orange;
//以下省略
}
【結果】
また、角を丸めたい場合は「border-radius」というプロパティを使い、5pxなどの値を指定することで角丸を表現できますよ♪
p {
border: 5px solid orange;
border-radius: 5px;
//以下省略
}
borderプロパティもすごくよく使うんだよね!
デザインで境界線を決めることは非常に重要だから、絶対使うと言ってもイイね。
あと、widthとheightを同じ値にして、border-radius: 50%;にすると円を作れるってことを知っておくといいぜ!
text-align
text-alignプロパティは、インライン要素を左右中央寄せにできるプロパティです。
<div>
<span>君の瞳は美しい</span>
</div>
div {
text-align: center;
background: blue;
}
span {
color: white;
}
text-alignの値は「center」「left」「right」が指定できます。
Wordなどで使う中央寄せと同じようなものと言えますね!
なるほど~。テキストを中央寄せするときはtext-alignを使えばいいのか!
左寄せ、右寄せにもできるから、text-alignはすごくよく使うよ!
何も指定しなければ左寄せになるぜ!
line-height
line-heightプロパティは、「行間の高さ」を指定するプロパティです。
行間とは、「文字の大きさ」と「文字が持っている余白」を合計した値を指します。
line-heightを指定すると、「文字が持っている余白」を調整して行間の高さを変化させることができるということですね!(文字の大きさは変わりません)
line-heightを指定したものと、指定していないものを比べてみましょう!
<p class="have-line-height">君の瞳は美しい君の瞳は美しい君の瞳は美しい君の瞳は美しい君の瞳は美しい君の瞳は美しい君の瞳は美しい</p>
<p class="not-line-height">君の瞳は美しい君の瞳は美しい君の瞳は美しい君の瞳は美しい君の瞳は美しい君の瞳は美しい君の瞳は美しい</p>
.have-line-height {
line-height: 50px;
background: green;
color: white;
}
このようにline-heightで行間を設定することで、デザインをより柔軟に表現できます。
行間が狭いWebサイトは美しくないだけでなく、本当に見にくい!
ユーザーのことを考えると、line-heightは絶対に知っておくべきプロパティと言えるね!
position
positionプロパティは、要素を自由に配置することができるプロパティです。
HTMLは上から記述した順番に上から下へ要素が配置されたのを覚えているでしょうか?
<p>君の瞳は美しい</p>
<p>お前の心は俺のもの、俺の心はお前のものだ</p>
<p>やっと僕のシンデレラを見つけたよ</p>
<p>これが君と僕の最後の恋だよ・・・</p>
(色や余白はわかりやすいように変えています。)
しかしpositionプロパティを使うことで、以下のように要素の位置を変えられるのです。
(イメージ的には画像のように自由な位置へ移動することができます。実際はposition以外にも調整することがあります。)
CSSだけでこれほど自由に位置を移動できるなんて、すごく便利だと思いませんか?
値でよく使うものには「relative」と「absolute」があり、親要素に「position: relative」と指定し、子要素に「position: absolute;」と指定することで、「親要素に対してどの位置に移動するか」を決めることができます。
そして「position: absolute;」を指定した子要素に「top: 20px; left: 20px;」などと指定すると、「position: relative」を指定した親要素の一番上から20px、左から20pxの位置に子要素を配置することができるのです。
<div class="parent">
<p class="child">緑が子要素だよ<br>青の親要素の上から20px、左から20pxの位置にいるぜ!
</div>
.parent {
background: blue;
position: relative;
//以下省略
}
.child {
background: green;
position: absolute;
top: 20px;
left: 20px;
//以下省略
}
positionプロパティに関しては長くなってしまうためここでは深く解説しませんが、positionプロパティを使うことで自由なレイアウトが可能になります。
詳しく知りたい人は、以下のページを参考にしてください。
⇒CSSのpositionを総まとめ!absolutebsoluteやfixedの使い方は?
positionプロパティすごいね!
これを使えば紙に書くみたいに自由にレイアウトできそう♪
そうだね!
要素の位置を少しずらしたり、要素の上に別の要素を重ねたり、画面を基準に常に要素を指定の位置に配置出来たりとものすごく便利なんだ。
その分少しややこしいけど、慣れてきたら最強の味方になるぜ!
CSSで横並びを簡単に・効率よく実現する方法
Webデザインをしていると、「この要素を縦じゃなくて横に並べたいなぁ」という場面がたくさん出てきます。
web食いのトップページで言うと以下の部分などですね!
このレイアウトは、divで囲った要素を横に並べています。
一番簡単な横並びの方法は要素を「インライン要素」「インラインブロック要素」にすることですが、そうもいかない時があるのです。
そんなときに簡単に横並びを実現してくれるのが「flexbox」。
横並びにしたい要素をdivなどで全て囲い、囲ったdivに対して「display: flex;」とCSSで指定するだけで横に並びます♪
<div class="wrap">
<div class="box background-green"><div>
<div class="box background-blue"></div>
</div>
.wrap {
display: flex;
}
.box {
width: 150px;
height: 150px;
color: white;
font-weight: bold;
}
.background-green {
background: green;
}
.background-blue {
background: blue;
}
display: flex;と指定しただけで、簡単に要素が横に並びました。
display: flexがないと、縦に並んでしまうのがわかるでしょうか?(両方ともブロック要素(div)ですからね)
display: flex;が登場する前はfloatというもっと面倒な方法で横並びを実現していたのですが、flexboxが登場した今はdisplay: flex;で横並びにするのが一般的となっています。
さらに、display: flex;となった要素は「justify-content」、「align-items」というプロパティを使うことで簡単で思い通りにレイアウトが実現できます。
例えば、先ほどの「.wrap」に「justify-content: space-between;」と記述してみます。
.wrap {
display: flex;
justify-content: space-between;
}
【結果】
要素がそれぞれ端っこに寄ったのがわかるでしょうか?
justify-contentは水平方向の調節をするプロパティで、space-betweenという値は「要素を両端に寄せる」という指示を出せます。
また、横並びの要素の高さがそれぞれ違う場合に、自動で2つの要素を中央に配置することもできます。
.wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.background-blue {
width: 150px;
height: 200px;
background: blue;
}
align-itemsは垂直方向の調整をするプロパティで、なにも指定しないとbox1とbox2は上ぞろえで並んでしまうところ、align-items: center;と指定することでお互いの要素にとっての中央に配置されています。
display: flex;とすることでまだまだ他にも色々な機能があるので、ぜひ一度調べてみてくださいね♪
⇒【CSS】Flexboxの使い方を徹底解説!基本から実践まで(サンプルあり)
flexboxってすごく便利だね!
いろいろな指定ができるから学ぶのに少し時間がかかるけど、マスターすればコーディングの時間が圧倒的に短くなるぜ!
paddingやmarginでちまちま細かい指定をしなくても、自動で「端に寄せて!」みたいな指示ができるから。
positionプロパティを使わなくても、要素の順番を入れ替えたりもできる。
初めは苦手意識が出るかもしれないけど、勉強する価値があるプロパティだ!
疑似要素を使えるだけで表現の幅が広がるよ♪
疑似要素とは、「HTMLへの記述がない要素もどきをCSSで作れるもの」です。
よくわからないと思うので、まずは見てみましょう!
<p>
<a class="arrow">矢印が疑似要素だよ</a>
</p>
HTMLを見ると、矢印の要素が見当たりませんよね?
画像を使っているわけでもないのに…。
実はこの矢印はCSSで表現しています。
矢印のようなただの飾りなどは、CSSの疑似要素を使って表現することが多いのです。
理由は、画像だと容量が多くて読み込みが遅くなるから。
矢印だけでなく、三角形を作ったり、傾いている線を作ったりもできるなど、疑似要素は非常によく使うので覚えておくと良いでしょう。
記述方法は、要素に対して「:before」か「:after」と記述し、CSSでスタイルを当てていくだけです(下記のCSSでは矢印を作っています)。
a.arrow:after {
content: "";
width: 8px;
height: 8px;
border-top: 2px solid #white;
border-right: 2px solid white;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 15px;
transform: rotate(45deg);
}
今回の例の場合は、「a.arrow:after」としています。
「before」と「after」の違いは、要素の前に表示させるか、後ろに表示させるかの違いだけなので、どちらを使っても問題ありません(positionプロパティで絶対位置指定をすることが多いため)。
注意点として、疑似要素は「content」プロパティを指定しなければ表示されないこと。
contentプロパティを設定することで、「この要素には中身があるよー、だから認識してね!」とブラウザに伝えることができるのです。
contentのなかには文字や数字をいれたり、今回のように「””」で空っぽにしておくこともできますが、必ず指定はしてください。
疑似要素ってまたわかりにくい名前が登場したね(笑)
確かにわかりにくいね(笑)
疑似要素は、要素ではないけど、要素っぽく表現できるものと覚えておこう!
うわ~、それもわかりにくい(笑)
というか、飾りもHTMLでpタグとかを作ってCSSで装飾すれば同じじゃないの?
HTMLのタグには意味があったのを覚えてるかな?
pタグには「文章のまとまり」みたいな意味があったね。
それをGoogleが認識して検索順位結果を決めたりするんだけど、ただの矢印とか丸図形って文章じゃないでしょ?
するとGoogleは「これはpタグだから文章のまとまりが入ってるはずだよね?文章何も書いてないじゃん。順位落とすわ。」みたいなことになりかねないわけ。
まぁ、空のpタグが作られたぐらいじゃ検索順位は落ちないけど、やりすぎたり、ユーザビリティ(使いやすさ)が落ちたりすると、検索順位に悪影響を及ぼす可能性はあるね。
なるほど!疑似要素やるね!
【疑似要素についてもっと詳しく見たい方はこちら↓】
⇒CSSの疑似要素とは?beforeとafterの使い方まとめ
見た目と数値を同じにするbox-sizingを利用しよう!
box-sizingとは、要素の幅(width)と高さ(height)の中に「padding」と「border」を含めるかどうか」を設定するプロパティです。
なぜこのような設定が必要かというと、paddingとborderをwidthとheightに含めないと、要素が思い通りにカチッとはまらないためです。
例えばpaddingとborderをwidth,heightに含めない設定の場合、width300pxにしたい要素にpaddingを20px設定したら、横幅は340pxになってしまいます(width300px+padding-left20px+padding-right20px)。
つまりwidthの中にpaddingとborderを含めないと、計算が非常に面倒なのです(box-sizingの設定をしないと面倒という認識でOKです)。
そして、初期設定(box-sizing: content-box;)ではwidthとheightのなかにpaddingとborderは含まれません。
そのため以下のように指定してあげる必要があります。
*,before *,after * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
セレクタの「*」は「すべての要素」を指定するセレクタで、疑似要素全てにも反映させています。
ポイントは「box-sizing: border-box;」で、これを指定してあげることで「width,heightにpaddingとborderを含めるよ」という設定ができるのです。
padding: 0;とmargin: 0;は、ブラウザがもともと持っているCSSに影響されないように、あらかじめ「すべての要素はpaddingとmarginは0ですよ」と指定しています。
このCSSを記述してあげることで「CSSコーディングがすごく楽になる」くらいの認識でOKですよ!
なんかよくわかんない。
意味はあまり重要じゃなくて、「CSSファイルを作る時はとりあえずこれを書くルール」にしておくといいかな!
現時点ではよくわからなくてもOKさ♪
上の記述は、CSSファイルの一番上に書いてあげると「これはborder-boxでCSSを書いてるんだな」とわかるから親切だよ!
ショートハンドを使ってもっと効率よくCSSを書く
CSSには「ショートハンド」という効率的に値を記述する方法があります。
【ショートハンドの記述方法例】
.text {
padding: 10px 15px 20px 25px;
}
こちらはpaddingを指定する時のショートハンドです。
何をしているかというと、paddingをtop(10px)、right(15px)、bottom(20px)、left(25px)と指定しています。
こうすることでpadding-top: 10px;、padding-right: 15px;……というように、何度もpaddingという文字を記述しなくて済むので、コーディング速度が上がります。
marginやborderプロパティなど、様々なプロパティでショートハンドを使えるので、「コーディング速度が遅くて困っている…」という初心者の方は、ぜひ挑戦してみてくださいね!
/* marginでショートハンドを使う例(ビフォーアフター) */
/* before */
.my-margin{
margin-top:30px;
margin-right:40px;
margin-bottom:20px;
margin-left:10px;
}
/* after */
.my-margin{
margin:30px 40px 20px 10px;
}
CSSコーディングを短縮できるってことだね!
コーディングはバカ正直にやるとものすごく時間がかかってしまうんだ。
なるべく時間を短縮できるよう、ショートハンドなどをつかって工夫しよう!
ちなみに、paddingやmarginのショートハンドは「上から時計回りに設定するルールになっている(上→右→下→左)」って覚えるとサクッと使えるようになるぜ!
「継承」を使いこなせれば中級者の仲間入り!
CSSには「継承」という機能があります。
継承とは、親要素に指定したプロパティが子要素にも適用されるというもの。
例えば、colorプロパティを継承させると以下のようになります。
<div class="wrap">
<p>君の瞳は美しい</p>
<a>君の瞳は美しい</a>
<div>君の瞳は美しい</div>
<ul><li>君の瞳は美しい</li></ul>
<dl>君の瞳は美しい</dl>
</div>
.wrap {
color: blue;
}
【結果】
.wrapという親要素にcolorプロパティを当てただけで、中身の子要素(pタグ)の文字色が全て青になりましたね。
これが継承です。
継承を使いこなせると、子要素1つ1つに全てcolorプロパティを当てる必要がなくなります。
子要素のタグが全て違っても適用されます。
「継承」なんて機能があったんだね!
継承をしっかり使えると、無駄なCSSを記述しなくて済むからキレイなコードになるんだ♪
ただ、すべてのプロパティに継承する機能があるわけではないから、リファレンスで確認するようにしよう!
【継承機能をもつ主なプロパティ】
|
---|
ブラウザによっては使えないプロパティも!?ベンダープレフィックスを使おう!
CSS3が登場してからは、特に様々なプロパティが使えるようになりました。
とても便利なのですが、実はあまり新しいプロパティはブラウザによって使えない(まだ対応できていない)という弊害もあります。
特に「InternetExplorer」に関しては使えないプロパティが多いだけでなく、一部のバージョンはサポートも終了しているので大変です。
そんな時に便利なのが「ベンダープレフィックス」。
ベンダープレフィックスとは、ブラウザによってプロパティの機能が影響を受けないようにするためのものです。
使い方は簡単で、プロパティの先頭にベンダープレフィックス(-webkit-、-moz-、-ms-)をつけるだけとなっています。
【例 border-radius】
.text {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
ベンダープレフィックスは、ブラウザの種類ごとにキーワードが変わります。
|
---|
ベンダープレフィックスが必要なのは一部のプロパティだけなので、「ベンダープレフィックスが必要かどうかわからない」というときは以下のサイトで調べてみてくださいね!
⇒ベンダープレフィックスの要不要をチェックできる【Can I use】
ブラウザの種類によっても違うのか…そこまで気を使わなきゃいけないなんて、Web制作者尊敬!
(照)
なに照れてんのよ(笑)
それにしても、InternetExplorerはやっかいそうだね。
そうなんだよ。
InternetExplorerに何度泣かされたことか。
Webサイトを作ったら、必ずそれぞれのブラウザでチェックしようね!
Googlechromeが世界シェアナンバー1だけど、firefoxとかsafariも使われているぜ!
HTML/CSSコーディングクイズ
今まで学習したプロパティを使って、以下をコーディングで再現してみよう!
ちょっと難しいけど、できるところまでやってみよう!
※書き方は色々あるので、答えと同じにならなくても問題ありません!
【メディアクエリ】スマホとタブレットで見てもキレイに見えるようにしよう!
せっかくWebサイトを作ったのに、「スマホとタブレットだと思い通りに表示されない…」なんてなったら悲しいですよね?
そんな時は、CSSでスマホ・タブレットの画面サイズに合わせたスタイルを書きましょう!
方法は「メディアクエリ」というものを使います。
「え…なんかまた難しそうなものが出てきた」と感じたかもしれませんが、安心してください♪
基本的には「画面サイズを指定」+「これまでのCSSを書く」というだけですから。
ビューポートの設定
メディアクエリに対応させるにはまず、HTMLファイルに「ビューポート」という1行の記述が必要です。
<head>タグ内に以下のメタタグを記述しましょう!
<meta name="viewport" content="width=device-width,initial-scale=1.0">
「これなに?」と思ったかもしれませんが、要は「画面幅によってスタイルを変えますよ」というブラウザに向けての宣言だと思ってもらえればOKです。
この記述を加えれば、スマホやタブレットの画面幅によってCSSを切り替える、いわゆる「レスポンシブデザイン」にすることができます。
メディアクエリでCSSを切り替える方法
では、今度はCSSファイルでメディアクエリに対応させる方法を紹介します。
やり方は簡単で、以下のように記述するだけで画面サイズごとにCSSを切り替えることができますよ!
@media screen and (max-width: 767px) {
cssを書き込む
}
CSSファイルに「@media screen and (ほにゃらら)」と書き、波カッコ{}で覆った部分にCSSを書くのがメディアクエリの基本です。
()の中には、CSSを切り替える画面サイズの分岐点※を記述します。
※ブレークポイントといいます。
上の例では(max-width: 767px)となっていますが、これは「767px以下の画面サイズになったら、こっちのCSSを適用してくれや」としているだけです。
ほかにも、min-widthという「このサイズ以上はこっちのCSSな」と指定する方法があり、さらにmax-widthとmin-widthを「and」で組み合わせることで、限定的な画面サイズにだけCSSを当てるという事も可能です。
@media screen and (min-width: 768px) and (max-width: 991px) {
CSSを書き込む
}
上記の例では、「画面幅768px以上かつ991px以下はこっちのCSSを適用してね」と指定しています。
それでは、実際の例を見てみましょう!
<p class="text">君の瞳は美しい</p>
.text {
font-size: 30px;
color: red;
text-align: center;
}
@media screen and (max-width: 991px) {
.text {
font-size: 60px;
color: blue;
}
}
【画面幅992px以上の場合】
【画面幅991px以下の場合】
このようにメディアクエリで画面幅を指定するだけで、画面幅ごとのCSSを指定できます。
レスポンシブWebデザインは、このように作られているのですよ♪
ちなみに、「text-align: center;」は991px以下でも引き継がれているのに気づいたでしょうか?
メディアクエリは画面サイズによってCSSを切り替えることができますが、もともとあったCSSは引き継いでくれるという特徴もあるので覚えておきましょう!
これによって、画面サイズごとに1からCSSを書く必要がなくなるのです♪
レスポンシブWebデザインってもっと難しいものだと思ってたよ。
実際はそこまで難しくないでしょ?
流動的に変化するようにCSSを書いてあげることが重要なんだけど、とりあえずはこれでスマホ・タブレット対応はできると言っても過言ではないね。
@media screen and(max-….
おっと!キャバコストップ!
メディアクエリを書く時は、半角スペースを忘れると適用されなくなるぜ!
「@media」「screen」「and」の後ろにそれぞれ半角スペースを入れよう!
ちっ。うるへーなぁ。
さかしは細かすぎるところがあるんだよなぁ。
もう、悪い子♡
メディアクエリを書いたのに上手く反映されない時は、半角スペースが入っているかもチェックしよう!
- レスポンシブWebデザインをするには「ビューポート」と「メディアクエリ」を記述する必要がある
- HTMLファイルのheadタグの中に<meta name=”viewport” content=”width=device-width , initial-scale=1.0″>と記述する
- CSSファイルには「@media screen and (画面サイズ){ }」と記述
- {}波カッコの中にCSSを記述(セレクタから書く)
- メディアクエリは半角スペースに超厳しい
CSSがうまく反映されない時はどうする?
Web制作をしていると、「合ってるはずなのにCSSが思った通りに反映されない…」なんてことが多々あります。
そんな時のチェックポイントについてご紹介しますね♪
STEP.1 デバッグツールで確認しよう!
CSSが反映されない時は、まず「デバッグツール」を開いてCSSが認識されているかを確認しましょう!
windowsなら「F12」、Macなら「Command + shift + c」でしたね。
デバッグツールの「styles」タブの下に現在反映されているCSSが表示されます。
もし指定したCSSが表示されていない場合は、記述ミスやCSSファイルが読み込まれていない可能性が高いです。
初心者の人に意外と多いのが、「そもそもCSSファイルが読み込めていない」ってミスだ!
パスが間違っていないかよく確認してみよう!
STEP.2 記述ミスやルールに反してないですか?
正しい記述をしているつもりなのに反映されていない場合は、CSSのルールを守れていないか、記述ミスかもしれません。
例えばブロック要素にしか効かないプロパティを、インライン要素に指定しているなどですね!
:(コロン)を忘れていたり、;(セミコロン)がコロンになっている、{}波かっこの閉じ忘れ、プロパティ・値のスペルミスなんかも疑ってみてください。
初心者の場合は、CSSのルールが間違っていたり、スペルミスが圧倒的に多いから、まずは自分を疑ってひとつずつ原因を見つけていこう!
デバッグツールをじっくり確認すれば、原因を見つけられるぜ!
STEP.3 優先順位は守れてますか?
意外と多いのが「CSSが適用されるための優先順位が間違っていること」です。
CSSがきちんと適用されるには、優先順位を守ることが大切。
例えば、CSSは下に記述してあるものが優先的に適用される、セレクタの数が多い程優先される、classよりidセレクタの方が優先されるなど、細かなルールを間違うと思い通りに適用されません。
また複数のCSSファイルを読み込んでいる場合は、headエリアでCSSファイルを読み込む順番なども関係することがあります。
⇒スタイルの優先順位について(HTMLクイックリファレンス)
【CSSが反映されない時のチェックリスト】
- デバッグツールに認識されてる?(CSSファイルが読み込まれてないかも)
- 記述ミスはない?(コロン忘れやスペルミス)
- CSSのルールは守れてる?(それ、インライン要素だからかも)
- 優先順位は守れてる?(デバッグツールに認識されてるのに線でかき消されてたらこれだよ)
CSSも上手く反映されないことがあるんだね。
最初のうちはめちゃくちゃあるよ。
CSSは細かなルールがけっこうあるからね。
でも焦らず、原因を1つ1つ検証することで解決できるぜ!
原因がわかったら、それをちゃんとメモして同じミスをしないようにするのも忘れずにね!
ここまででCSSの基本説明は終わりだよ!
1回じゃ理解できないと思うから、2,3回は読むことをおすすめするぜ。
この記事の内容さえ理解できたら、Webサイトを作ることができる。
わからないことも出てくると思うけど、それはその都度調べればOKだ!
初めから全部できる人はいないからね。
知識を得たら、あとはとにかくwebサイトを作りまくることがCSS上達のカギだぜ!
がんばろう!