WEBサイトをメイクアップ!お母さんにもできるCSS入門【第2回】

a2928f6452cd25b0dea8baaa94d018c6_s


前回のCSS入門ではなるべく簡単にCSSの書き方などについて説明していきました。
今回はCSSの書く場所と実践を交えながら解説していこうと思います。 

3種類のCSSを書く場所

fb23fac488ee1ba23caf69a566493b33_s

さっそくCSSを書きていきたいところですが、まずCSSの書く場所について説明していきます。


お母さん
テキトーなところに書いたらダメなの?

ユトピ
ダメ!適当なところに書いたら管理が大変になっちゃうよ!


CSSを書く場所は3種類あります。

  1. HTMLファイルに直接書き込む。
  2. タグに直接書き込む。
  3. 別にCSSファイルを作り、読み込ませる。


1つ1つ説明します。

HTMLファイルに直接書き込む。


名称未設定-1_02

このようにHTMLのファイルの中に直接書き込みます。

結果は以下です。

css2_02

<p>タグで挟まれたテキストが全て赤くなります。
HTMLファイル内にCSSを書き込む際は<style>タグを使用してその間に書いていきます。

しかしこの方法だと、HTMLとCSSが一つのファイルに書かれており、コードがとても長くなってしまいます。
なのであまりオススメはしません。


タグに直接書き込む。


html2_02


このようにCSSを適用したいタグに直接書き込みます。

書き込む際は半角空白を入れ、『style=””』と書き、『””』の間にCSSを書きていきます。セレクタは必要ありません。

結果は以下です。

html3_02

この場合はCSSを書き込んだタグのみ文字が赤くなります。他のタグにはCSSは適用されません。
この方法は1の方法よりもさらにHTMLとCSSが混在し、管理が面倒になるので、こちらも必要が無ければ避けた方がよいです。


お母さん
HTMLが長くなっちゃうとどこに書いたかを探すのが大変になっちゃうわね。。。

ユトピ
だから基本的にはこの書き方はしない方がいいよ!


別にCSSファイルを作り、読み込ませる。


これが一番オススメで一般的な書き方です。
まずはCSSファイルを作成します。
CSSファイルを作成する際はHTMLと同じメモ帳でも作ることができます。

css4_02

このようにCSSのみを書けば大丈夫です。


お母さん
HTMLみたいに絶対必要なタグみたいなのはないのね。

ユトピ
基本的にはいきなりCSSを書き始めても大丈夫だよ!



css5_03

保存する際は便宜上「style」という名前にします。ですが基本的には好きな名前で大丈夫です。
名前のあとにはCSSファイルということを表すために「.CSS」を付けて保存します。


css6_02


CSSファイルが出来たら、HTMLファイルの<head>~</head>の間にファイルを読み込むタグを入れます。
<link>タグを使用します。relのところには「stylesheet」と書き、「href」の部分にはCSSファイルのある場所を指定します。このファイルの指定の仕方にもやり方があるのですが、これは別の機会に説明していきます。


結果は以下です。

css2_02

1の『HTMLファイルに直接書き込む。』と同じ結果になりました。
セレクタで<p>タグすべてを指定していましたので、このように赤くなりました。


一番主流なのは3つめの『別ファイルとして読み込ませる』です。
HTMLとCSSを別々に分ければ管理が楽になります。コードが混在することもないので一般的にはこちらの方法が使われています。

CSSを書いてみよう

d14cad816c5defc5346f41d1a48c1857_s

やっと本番です。
前回HTML編で作ったファイルにCSSを使っていこうと思います。

hmtl7_02

html_01

前のままだと文字だけで少しつまらないので、うちのサイトのロゴも置いときました。またボックス要素を作る<div>タグを挿入しました。
このHTMLだけで作られたファイルをCSSによって以下のようにしていきます。

html13_02


お母さん
くそページ。

ユトピ
うるせ。


全体の背景をグレーにする。


html6_02

すげぇ色。
<body>タグに背景の色を変えるプロパティ『background』を使って『gray』にしました。


お母さん
これは『<body>タグで囲まれたところの背景を灰色にして!』って言ってるのね!


<div>タグの背景を白にする。


html8_02

ロゴや文字のある部分を<div>タグで囲ったので、背景が白くなりました。

幅を調節する。


html9_02

<div>タグの幅が全体に広がっていましたので、幅を調整する『width』使い、ブラウザの幅の半分という意味の『50%』に指定します。
また一つのセレクタに複数のプロパティを指定する場合は、『;』の後にそのまま他のプロパティと値を指定します。
わかりにくいように見えますが、こちらも我流日本語訳にしてみると、

『どこに』=<div>タグに
『なにを』=背景の色と幅を
『どのように』=白と50%に

といった感じになります。
複数指定する場合もあまり難しく考えることはないです。


ユトピ
一つのタグにたくさん命令したいときはこうやって書こう!


真ん中に寄せる。


html10_02

これはちょっとしたテクニックなので、あまり気にせず中央寄せしたい場合は『margin:0 auto;』と書きましょう。
大抵の場合はうまくいきます。



お母さん
だんだん見やすくなってきたわ!


余白を入れる


html11_02

文字やテキストを読みやすくするために<div>タグの内側に余白を入れる『padding』を使って『30px』分の余白を指定しました。

画像の大きさを調整


html12_02

ロゴ画像が大きすぎる気がするので、先ほどの『width』を使用して『300px』に設定しました。値は感覚です。

加えてこの画像も中央に寄せたいのでちょっとしたテクニックを使います。

html13_02

『margin: 0 auto;』と『display: block;』を使うと<img>タグは中央に寄ります。
このテクニックはもう少しCSSを勉強してからの方がいいと思うので、説明は割愛します。

これで完成です。
ろくでもないページにはなりましたが、このような流れでCSSを書いていきます。
今回使用したプロパティ以外にも様々なものがありますので、この辺は実際に手を動かしながら勉強してみてください。

まとめ



お母さん
これがサイトのメイクアップのやり方なのね。ちょっと慣れが必要かも。

ユトピ
こうやって説明を聞くだけじゃやっぱり身につかないもんね。どんどんやってみないとだよ!



HTMLもCSSも先に理論を頭に入れるよりは、このように実際に作りながら覚えていくのが一番上達スピードが速いです。
なのでこの記事を機にどんどんWEBサイトを作ってみてください。

最後に僕のオススメするHTMLとCSSの爆速上達法を以前記事にしましたので、そちらも参考にしちゃてください。

・HTML・CSSスキル上達を”爆速”にするたった1つの方法



質問や意見がありましたらお気軽にツイッターの方へどうぞ。


ユトピのツイッター
@yutopi60pa

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です