自分でWebページを自由にデザインできるようになりたい！
Webデザインをするのなら学習必須になるのがHTMLとCSS。
前回の記事↓では、HTMLについて解説しました。
【初心者向けHTML入門】学習のための基本まとめ
HTMLの基礎について解説しています。ステップごとに、HTMLとCSSを網羅できるような構成になっているので、HTMLとCSSについて学びたい方はこのページで学習してもらえると嬉しいです。
今回の記事では、CSSの基本的な部分について解説していきます。
maipyon
Webデザインがしたいと思っている人以外にも、ブロガーの方なんかにもオススメです。
この記事の目次
【CSS入門】CSSでできることは？
そもそもCSSはデザインを変えるための言語。
そのため、CSSがないと普段見ているサイトは以下のようになってしまいます。
なんて見にくいサイトでしょう・・・。
CSSがあれば、色や背景色、それぞれの要素の位置などを決めることができます！
ということで、ウェブデザインを自分でしたい人にとっては必ず学習する必要のある言語になります。
CSSの適用方法
では、CSSをどのようにして適用すればいいのでしょうか？
主に以下の3つがあります。
CSSの適用方法
- HTMLタグに書き込む
- HTMLファイルにstyleタグを作って書く
- HTMLファイルとCSSファイルに分ける
それぞれ説明していきます！
HTMLに直接書き込む方法
HTMLタグに直接書き込む方法です。
<div style="background-color: #bbdefb; width: 300px; height: 200px;"> <h1 style="text-align: center">CSSを学ぼう</h1> <p style="margin: 0 10px;">このページではCSSを学んでいきます！</p> <p style="margin: 10px 10px;">詳細に説明しますので、頑張ってついてきてくださいね！</p> </div>
style=”〇〇”のように書けば、以下のように多少デザインを整えることができます。
書き方については後程紹介します。分からなくてもOK
やり方としては、タグの中にstyle="ここにCSSを書いていく"と書けば適用できます。
複数個のCSSを指定することも可能ですが、一つ一つすべてに書き込んでいくと膨大な量になり、修正するのも困難になるため非推奨です。
HTMLファイルにstyleタグを作って書く
今すぐCSSを書いて試してみたい！と思う方はこの方法で練習するのもアリ。
これが一番簡単な方法です。
<!--上側の部分は省略--> <head> <title>練習1</title> <style> ここにCSSを書く </style> </head> <body> <div> <h1>CSSを学ぼう</h1> <!--下側の部分は省略 -->
</head>の直前に、<style>～</style>を書き、その中にCSSを書き込んでいきます。
CSSの書き方は後程説明します！
HTMLファイルとCSSファイルに分ける
ファイルを別にして、HTMLファイルの<head>～</head>内にて<link rel="stylesheet" href="ファイル名.css">と書くことで外部からCSSを読み込ませる方法です。
大きなメリットがあり、複数のページ（複数のHTMLファイル)でも、同じCSSファイルを読み込ませることで共通のCSSを扱うことができます。
maipyon
ですので、CSSファイルの中身を書き換えれば全部のページのデザインが変わります。
やり方としては難しめなので、「複数ページになるとこの方法なんだな～」くらいに捉えてもらえればと思います。
HTML、CSSの練習にはCodePenがおすすめ
CSSの適用方法を3つ紹介しました。
難しいよ～という方でも、CodePenを使えば上記のような設定は必要ないので簡単です！
Create a Penを押し
見やすいように設定を変えるだけ。
あとはHTMLの部分にはHTMLを、CSSの部分はCSSをそのまま書いていけばいいです。
私も最初に学習したときはここでいじっていました。
【CSS入門】CSSの基本をしっかり抑えよう
では、本格的にCSSの解説に入ります。
CSSの基本となる部分から紹介していきます。
CSSは、セレクタ、プロパティ、値の3つで決めていきます。
そして、「セレクタ」の「プロパティ」を「値」にして！
という意味になるように書いていきます。
セレクタ{
プロパティ:値;
}
となるように書きます。コロン「：」やセミコロン「；」も忘れないようにしましょう。
半角スペースやtabならいくらでも入れても構いませんが、全角スペースが入るとエラーの原因になります。
修正しようにもわかりにくいので全角スペースは絶対使わないこと！
セレクタやプロパティを複数指定する
セレクタやプロパティを複数指定する場合、例えば「h2の見出しもh3の見出しも同じ文字色にしたいよ～」という場合には、以下のように指定します。
h2, h3{
color: red;
}
上記のCSSでは、h2見出しもh3見出しも赤色の文字になります。
このように書くことで何行にも渡って書く必要がなくなるので楽です。
次に、プロパティを複数指定する方法を見てみましょう。
例えば、「h2見出しの文字色を変えて、h2見出しの大きさを大きくしたいよ～」という場合には、以下のように指定します。
h2{
color: red;
font-size: 20px;
}
上記のCSSでは、h2見出しが赤色になり、文字の大きさが20pxになります。
基本的にCSSをたくさん掛け合わせておしゃれなデザインにしていきます。
特定の要素にだけCSSを適用したいとき
特定の要素にだけCSSを適用できなければ話になりません。
例えば同じ形の枠で、枠Aは赤色で、枠Bは緑色にしたいときには、どのように指定すればいいでしょうか。
この場合、HTMLにidやクラスを指定すればできます。
<タグ名 id="id名">や<タグ名 class="class名">とすることでidやclassを指定することができます。
classは同じHTMLファイルの中に同じ名前をいくつも使えますが、idは同じ名前を1つしか使えません。
classを書いた方がいい、idを書いた方がいいというのは書いていくうちに慣れで段々と分かってきます。
今回の例のように枠Aは赤色にして、枠Bは緑色にする場合には、以下のようになります。
idで指定する
classで指定する
<p id="frame-a">idで指定する</p> <p class="frame-b">classで指定する</p>
/*枠A-idで指定する*/
#frame-a{
border: solid 2px red;
}
/*枠B-classで指定する*/
.frame-b{
border: solid 2px green;
}
覚えておきたいのは、idならCSSで#id名{ ... }とし、classならCSSで.class名{ ... }とすることです。
idならid名の前にシャープ、classならclass名の前にピリオドを書くという違いですね。
基本的にclass名やid名を指定しつつHTMLもCSSも書いていくことになります。必ず覚えましょう！
子孫セレクタで指定する
最後に、子孫セレクタについても説明します。
例えば、以下のHTMLで、一番上のpタグの文字色を変えたいときにはどうすればいいでしょうか。
<div class="container"> <span> <p>この文章の文字色を変えたい</p> </span> <p>この文章の文字色は変えたくない</p> </div>
こういった場合に、子孫セレクタを使えば簡単にCSSを適用することができます。
/*子孫セレクタを使って指定する*/
.container span p{
color: red;
}
やっていることは、containerクラスの中のspanタグの中のpタグの文字色を変えるということです。
絞り込んでいって、CSSを適用させる場合に使います。
CSSでよく使うプロパティと値の基本
CSSの大まかな部分が分かりましたが、今の状態ではプロパティと値の部分が分からないことだらけ。
例えば文字の大きさを変えるだけでも、『どう書けばいいの？』という状態かと。
最後にプロパティと値について、見ていきましょう。
文字の大きさを変える
まずは、文字の大きさを変えるところから。
font-size: ...で文字の大きさを変えることができます。
…の部分には、20pxのようなpx単位の値や、80%のような割合、1.5emなどの倍率が入ります。
初期設定20pxの文字
80%の文字1.5emの文字
<p>初期設定</p> <p class="px">20pxの文字</p> <p class="percent">80%の文字</p> <p class="em">1.5emの文字</p>
p{
font-size: 16px;
}
.px{
font-size: 20px;
}
.percent{
font-size: 80%;
}
.em{
font-size: 1.5em;
}
初期設定の文字の大きさは16pxですので、80%だと13pxほど、1.5emだと1.5倍で24pxになっているということですね。
文字の色を変えよう
文字の色を変えるにはcolor: red;とする方法や、color: #f00;とする方法や、color: rgb(255, 0, 0);とする方法などがあります。
色々な方法がありますが、よく使うのはcolor: #f00;のような書き方ですね。
詳細については後程解説します。
背景色を変えよう
背景色を変える場合は、background-color: ...で指定します。
色についての説明はCSSで使う色についての見出しに詳細を書きますので、そちらをご覧ください。
この文字の背景色を変える
<span class="back">この文字の背景色を変える</span>
.back{
background-color: #b3e5fc;
}
文字だけでなくて、divタグなどに指定して、ボックスの背景色に使うことが多いです。
文字を太字にする
文字を太字にするには、font-weight: ...で指定します。
値については、100,200,300,・・・900のほか、normalやboldを使用します。
フォントに数種類の太さが設定されている場合のみ太さが変化するのですが、全種類の太さが用意されているフォントは少ないです。
そのためboldで太字にするとだけ覚えておけばOKでしょう。
文字を太字にします
<span class="bold">文字を太字にします</span>
.bold{
font-weight: bold;
}
枠線をつける
枠線をつける方法は、border: 種類 線の太さ 色;のように書きます。
順番は関係ありません。
色々な線の種類があるので、よく見ていきましょう。
<div class="solid">枠線をつけます</div> <div class="dashed">破線をつけます</div> <div class="dotted">点線をつけます</div>
.solid{
border: solid 2px #4fc3f7;
}
.dashed{
border: dashed 2px #81c784;
}
.dotted{
border: dotted 2px #ffb74d;
}
一気に華やかなデザインにすることも可能です。
色々な囲み枠のデザインを集めた記事を見つつ、どの程度のことができるのかを見てもらうのもいいかなと思います！
widthとheightについて
widthとheightはそれぞれwidth: ...やheight: ...で指定します。
意味通り、横幅と高さを決めるものです。
ただし、aタグやspanタグなど、display:inlineとなっている要素は指定できませんので注意。
<div class="box">文字は自動で折り返されます</div>
.box{
width: 100px;
height: 80px;
background-color: #ddd;
}
幅と高さが決まったら、その中の文字などは基本的に折り返されるようになります。
widthの値は割合にすることもでき、80%などにすると親要素の幅の80%の長さになります。
割合指定しておくことでレスポンシブにも対応できる大きさのボタンやデザインが簡単に作れるので覚えておきましょう。
他にも色々値の指定方法があるので、思い通りにできないときは調べてみましょう！
文字を寄せる
先ほど紹介した、幅と高さを指定したブロックの中の文字は自動で折り返されていました。
折り返したときの文字は、左寄せでした。
折り返したときに中央に寄ってほしいときなども出てきます。
そのような場合や、タイトルなどの文字を中央に置きたい！という場合には、文字を左右もしくは中央に寄せる必要があります。
text-align: ...で指定することで、文字を左右または中央に寄せることができます。
<div class="box"> <div class="center">中央寄せ</div> <div class="left">左寄せ</div> <div class="right">右寄せ</div> <div class="center">改行されたとしても中央寄せ</div> </div>
.box{
width: 150px;
height: 130px;
background-color: #ddd;
}
.center{
text-align: center;
}
.left{
text-align: left;
}
.right{
text-align: right;
}
特に中央寄せは使う機会が多いので覚えておきましょう！
コメントアウトについて
最後にコメントアウトについて紹介します！
HTMLでは、コメントを<!--と-->の間に挟むと書きました。
CSSでは、/*と*/の間に挟みます。
h1{
color: #f44336;/*赤色*/
}
/*h2は青色にする*/
h2{
color: #2196f3;
}
このコメントは一切反映されることがないので、メモ書きに使いましょう。
CSSで使う色について
color: red;などでも文字の色を変更することはできるのですが、これでは扱うことのできる文字の色に限りがあります。
そこで、RGBで表現する方法、RGBAで表現する方法、カラーコードを使用する方法について説明します。
RGBおよびRGBAについて
RGBおよびRGBAを使うと、色を以下のように表現します。
RGBはcolor: rgb(180, 230, 120);のように使用します。
RGBAはcolor: rgba(180, 230, 120, 0.5);のように使用します。
RGBではただの色を指定し、RGBAでは透明度を含めて指定します。
Red、Green、Blueの順で指定するからRGB。
順番は覚えておきましょう！
カラーコードについて
カラーコードを使うと、以下のような指定方法になります。
color: #ffb74d;こんな書き方を見かけたことがあるかもしれません。
16進数で表記されていたものを、10進数に直してあげればRGBでの表記と同じになります。
とはいえ、良い色にするためには時間がかかるので、カラーコード一覧表が載っているサイトに頼るのが良いです。
Material Design Colorsというサイトが使いやすいかなと思います！
maipyon
CSSの入門まとめ
今回は、CSSについて基本的な部分をしっかりと解説していきました。
ここで紹介したプロパティは一部ですが、ブログをやるという人はこのページの物だけを覚えていればちょろっとしたデザインであれば自己解決できると思います！
maipyon
ここにあるものだけをマスターしても、まだまだ難しいです。
中にはアッと驚くようなプロパティもあるので、分からないときは調べつつ進めていけるように頑張りましょう！
