WEBサイトをメイクアップ！お母さんにもできるCSS入門【第2回】
前回のCSS入門ではなるべく簡単にCSSの書き方などについて説明していきました。
今回はCSSの書く場所と実践を交えながら解説していこうと思います。
目次
3種類のCSSを書く場所
さっそくCSSを書きていきたいところですが、まずCSSの書く場所について説明していきます。
CSSを書く場所は3種類あります。
- HTMLファイルに直接書き込む。
- タグに直接書き込む。
- 別にCSSファイルを作り、読み込ませる。
１つ１つ説明します。
HTMLファイルに直接書き込む。
このようにHTMLのファイルの中に直接書き込みます。
結果は以下です。
<p>タグで挟まれたテキストが全て赤くなります。
HTMLファイル内にCSSを書き込む際は<style>タグを使用してその間に書いていきます。
しかしこの方法だと、HTMLとCSSが一つのファイルに書かれており、コードがとても長くなってしまいます。
なのであまりオススメはしません。
タグに直接書き込む。
|
1 |
<p style="color:red;">もうジョジョとキスはしたのかい？ まだだよなァ 初めての相手はジョジョではないッ！ このディオだッ！ーッ</p> |
このようにCSSを適用したいタグに直接書き込みます。
書き込む際は半角空白を入れ、『style=""』と書き、『""』の間にCSSを書きていきます。セレクタは必要ありません。
結果は以下です。
この場合はCSSを書き込んだタグのみ文字が赤くなります。他のタグにはCSSは適用されません。
この方法は1の方法よりもさらにHTMLとCSSが混在し、管理が面倒になるので、こちらも必要が無ければ避けた方がよいです。
別にCSSファイルを作り、読み込ませる。
これが一番オススメで一般的な書き方です。
まずはCSSファイルを作成します。
CSSファイルを作成する際はHTMLと同じメモ帳でも作ることができます。
このようにCSSのみを書けば大丈夫です。
保存する際は便宜上「style」という名前にします。ですが基本的には好きな名前で大丈夫です。
名前のあとにはCSSファイルということを表すために「.CSS」を付けて保存します。
|
1 |
<link rel="stylesheet" href="style.css"> |
CSSファイルが出来たら、HTMLファイルの<head>~</head>の間にファイルを読み込むタグを入れます。
<link>タグを使用します。relのところには「stylesheet」と書き、「href」の部分にはCSSファイルのある場所を指定します。このファイルの指定の仕方にもやり方があるのですが、これは別の機会に説明していきます。
結果は以下です。
1の『HTMLファイルに直接書き込む。』と同じ結果になりました。
セレクタで<p>タグすべてを指定していましたので、このように赤くなりました。
一番主流なのは3つめの『別ファイルとして読み込ませる』です。
HTMLとCSSを別々に分ければ管理が楽になります。コードが混在することもないので一般的にはこちらの方法が使われています。
CSSを書いてみよう
やっと本番です。
前回HTML編で作ったファイルにCSSを使っていこうと思います。
前のままだと文字だけで少しつまらないので、うちのサイトのロゴも置いときました。またボックス要素を作る<div>タグを挿入しました。
このHTMLだけで作られたファイルをCSSによって以下のようにしていきます。
全体の背景をグレーにする。
|
1 |
body { background:gray; } |
すげぇ色。
<body>タグに背景の色を変えるプロパティ『background』を使って『gray』にしました。
<div>タグの背景を白にする。
|
1 |
div { background: white; } |
ロゴや文字のある部分を<div>タグで囲ったので、背景が白くなりました。
幅を調節する。
|
1 2 3 4 |
div { background: white; width:50%; } |
<div>タグの幅が全体に広がっていましたので、幅を調整する『width』使い、ブラウザの幅の半分という意味の『50%』に指定します。
また一つのセレクタに複数のプロパティを指定する場合は、『;』の後にそのまま他のプロパティと値を指定します。
わかりにくいように見えますが、こちらも我流日本語訳にしてみると、
『どこに』＝<div>タグに
『なにを』＝背景の色と幅を
『どのように』＝白と50%に
といった感じになります。
複数指定する場合もあまり難しく考えることはないです。
真ん中に寄せる。
|
1 2 3 4 5 |
div { background: white; width: 50%; margin: 0 auto; } |
これはちょっとしたテクニックなので、あまり気にせず中央寄せしたい場合は『margin:0 auto;』と書きましょう。
大抵の場合はうまくいきます。
余白を入れる
|
1 2 3 4 5 6 |
div { background: white; width: 50%; margin: 0 auto; padding: 30px; } |
文字やテキストを読みやすくするために<div>タグの内側に余白を入れる『padding』を使って『30px』分の余白を指定しました。
画像の大きさを調整
|
1 2 3 |
img { width: 300px; } |
ロゴ画像が大きすぎる気がするので、先ほどの『width』を使用して『300px』に設定しました。値は感覚です。
加えてこの画像も中央に寄せたいのでちょっとしたテクニックを使います。
|
1 2 3 4 5 |
img { width: 300px; margin: 0 auto; display: block; } |
『margin: 0 auto;』と『display: block;』を使うと<img>タグは中央に寄ります。
このテクニックはもう少しCSSを勉強してからの方がいいと思うので、説明は割愛します。
これで完成です。
ろくでもないページにはなりましたが、このような流れでCSSを書いていきます。
今回使用したプロパティ以外にも様々なものがありますので、この辺は実際に手を動かしながら勉強してみてください。
まとめ
HTMLもCSSも先に理論を頭に入れるよりは、このように実際に作りながら覚えていくのが一番上達スピードが速いです。
なのでこの記事を機にどんどんWEBサイトを作ってみてください。
最後に僕のオススメするHTMLとCSSの爆速上達法を以前記事にしましたので、そちらも参考にしちゃてください。
・HTML・CSSスキル上達を”爆速”にするたった1つの方法
質問や意見がありましたらお気軽にツイッターの方へどうぞ。
ユトピのツイッター
@yutopi60pa