ここではCSS初心者のために基本的な使い方、書き方をお伝えしています。
CSSの書き方の基礎、初心者にも優しく解説
CSSを書ける場所は３種類ありますが、僕はCSSは外部ファイル（style.css等）に記述するのが一般的と考えています。
外部のCSSファイルに記述するケースを見ていくと以下のような書き方となります。この形式を覚えておくのが効率的だと思います。
この場合、 pの位置にくるものを「セレクタ」と呼び、colorの位置にくるものを「プロパティ」とよび、redの位置にくるものを「値」と呼びます。
この用語はよく出てくるので覚えておかないといけない。
コピペ用
p {
color : red;
}
CSSは概ねこのセレクタ、プロパティ、値によって構成されます。
セレクタにはpやbodyのようにHTMLのタグを指定することもできるし、
.aiueo や .mybox のように自作のクラス名をつけることもできるし、
div p のようにdivタグの中のすべてのpタグ、のように入れ子にすることもできます。
それぞれ以下のように整理しておくと書き方で迷わないでしょう。
| セレクタ | 意味 | 使い方 |
|---|---|---|
| p { } | すべてのpタグに適用 | <p>あああ</p>のように特にクラス指定しなくてよい |
| .aiueo | 全てのaiueoクラスに適用 | 以下のようにクラスを指定 <div class=”aiueo”>あああ</div> <p class=”aiueo”>いいい</p> |
| #mytop | IDがmytopに適用 | 以下のようにIDを指定 <div id=”mytop”>あああ</div> |
| h2.obi1 | クラス名がobi1のh2タグ | 書き方は以下のようになる <h2 class=”obi1″>みだし２</h2> |
| div#myheader | IDがmyheaderのdiv要素に適用 | 書き方は以下のようになる <div id=”myheader”>ううう</div> |
| div p b | divタグの中にあるpタグの中にあるbタグ | 例えば以下のような <div> <p>人生で<b>大事</b>なことは</p> </div> |
| .aiueo .xyz | aiueoクラスを適用したタグの中にあるxyzクラス | 例えば以下のような記述 <div class=”aiueo”> <div class=”xyz”>ここに適用</div> </div> |
| .aiueo, .xyz | aiueoクラスとxyzクラス | 共通のプロパティと値をあたえる時に使う <p class=”aiueo”>文字を赤の15pxにしよう</p> <p class=”xyz”>文字を青の15pxにしよう</p> |
CSSスタイルの継承を理解すること
fontやcolorは親要素に指定するとそれが子要素にも伝搬する。例えば
.font20 {
font-size:20px;
}
とCSSでクラスfont20を定義して
<div class="font20"> あああ <p>いいい</p> </div>
とやると、”あああ”も”いいい”もフォントサイズが20pxになる。これはdiv要素の中の子要素のpにもCSSが伝搬しているから。
逆に親要素がそのまま子要素に引き継がれないプロパティもある。marginとかpaddingのこと。
.m50-top {
margin-top:50px;
}
とCCSを書いて、
<p>あああ</p>
<div class="m50-top">
<p>いいい</p>
<p>ううう<p>
</div>
とやると、”いいい”の上のdivタグの上に50pxの空白ができるが、中のpタグの中の”いいい”や”ううう”の上には50pxの空白はできない。
この違いがあることを覚えておく。もし強制的に引き継ぎさせたい場合にはinherit（引き継ぎという意味）を使う。
.m50-top {
margin-top:50px;
}
.keisyo {
margin-top:inherit;
}
CSSでこうしておいて
<p>あああ</p>
<div class="m50-top">
<p>いいい</p>
<p class="keisyo">ううう<p>
</div>
こうすると、”ううう”を囲ったpタグにkeisyoクラスを記述している。CSSではkeisyoクラスにmargin-topでinheritを記述しているので、親要素のmargin-topを引き継ぐ形になる。これで”ううう”の上にも50pxの空白ができるはず。
文字の大きさをもう1度復習
画面上に表示させる文字の大きさ、これは結構重要なテーマです。
昨今スマホでサイトを見るユーザーが多く、スマホだと画面と目の距離が近いことから14pxの文字サイズが適切だと思います。（13pxでも良いかも）
PCユーザー向けには15pxがおすすめです。15pxだとちょっと大きいと思う人もいるかもしれないけど、50代以降のユーザーもいるので文字は大きい方が見える場合もあります。自分のサイトに来る人の年齢層を考えて文字サイズを設定すべきでしょう。
CSSのボックス要素とmargin、paddingの違い
これを理解するとサイトの中の1カラムとか2カラム右サイドメニューとか3カラムとかヘッダー部やフッター部といった理解が進むと思います。
このボックスの組み合わせで画面のレイアウトを行っていく感じです。
またよくでてくるmarginとpaddingの違いも理解しておくと良いです。
/*まずはdivタグに対して青のボーダーラインを引いてみます。*/
.border-sen {
border:1px solid #66f;
}
/*paddingで上下に50pxを設定してみます。左右は0pxです。*/
.pad50 {
padding:50px 0;
}
/*marginで上下に50px、左右に0pxを設定します。*/
.mar50 {
margin:50px 0;
}
これを全部HTMLで書くと以下のようになります。
全部のdivタグは青線で囲います。
<div class="border-sen">あああ</div> <p></p> <div class="border-sen pad50">いいい </div> <div class="border-sen mar50">ううう </div> <div>えええ</div>
これをブラウザで見ると以下のようになります。
あああが標準的なdivタグのエリアです。青線で囲っているのでdivタグの大きさが一目瞭然ですね。
いいいのところはpaddingで指定しているのでdivタグの中に上下50pxの隙間が出来て、その中にコンテンツ”いいい”が表示されるわけですね。
うううのところはmarginで指定しているので、divタグの外側に上下50pxの隙間が出来てます。
これでわかりやすいのではないでしょうか。
たまにpaddingとmarginの違いを混乱します。誰が言ったか知りませんが、paddingは「パッド」です。ブラジャーのパッドをイメージして中に詰め物をするイメージで覚えるといいです。汗
borderの書き方
border:1px solid #66f;
border: 幅 スタイル 色;
と指定します。
スタイルには色々あって、solid（単線）、double(2重線）、dotted（点線）がよく使うものとしてあります。他にもあるので調べてください。
ボーダーの上右下左のどこに線を書くかも指定できます。
border-top: 3px solid #666
border-right: 3px solid #666
border-bottom: 3px solid #666
border-left: 3px solid #666
こんな感じです。
margin、paddingの書き方
① padding : 上 右 下 左;
② padding : 上下 左右;
これで覚えておくといいかな。僕が上で例示したのは
padding:50px 0;
これは②のパターンですね。
他には
padding-top: 50px;
padding-right : 50px;
padding-bottom : 50px;
padding-left : 50px
といった個別に指定する書き方もあります。
レイアウトで重要なdisplayとposition
displayプロパティに指定できる値
display: none;
何も表示しない
display: inline;
文字のように横詰めで表示する
display: block
ひとかたまりの要素として表示
positionプロパティに指定できる値
static, relative, absolute, fixed。これらが使える。
またpositionの指定に付随してtop、 bottom、 left、 rightによってどこに表示するかも指定しないといけない。
static
初期値
relative
これは相対位置で表示します。
本来書かれる場所だったところの左上が基点になります。
CSSは以下のような記述をします。
.rela {
position:relative;
top:10px;
left:10px;
}
HTML部分は以下のように書きます。
<div class="border-sen"> ううう<span class="border-sen rela">えええ</span>おおお<br> かきくけこ </div>
このHTMLで表示は
本来は”えええ”は”ううう”に続いて表示されるはずですが、position-relativeを行っていて上から10px目、左から10px目から表示されるようになります。
absolute
表示領域の絶対位置に表示する。例えばtop:50pxのleft:200pxと指定すると必ずそのページの上から50pxで左から200pxの位置に表示される。
CSSは以下のように記述
.abu {
position: absolute;
top:50px;
left:200px;
}
fixed
これはブラウザの画面上に常に見せたいボタンとかで使ったり。スマホで画面をスクロールしても常にボタンがその位置に表示して追いかけてくるような事ができる。
例えば以下のように。上のabsoluteの例と同じように見えるが違う。
.kotei {
position:fixed;
top:50px;
left:200px;
}
実際にHTMLを書いてみます。●と、▲を表示させています。
<div class="abu" style="color:red">●</div> <div class="kotei" style="color:blue">▲</div>
最初の表示位置は同じ。
けど、画面を下にスクロールしてみると
▲は画面の表示領域に対して固定なのでスクロールと一緒についてくるのがわかります。
ということでCSS初心者のための基本的な部分、よく間違えやすいを解説しました。
