💁♂️ 【お知らせ】塾専用HP作成サービス
こんにちは！
takafumiです。
『3日で学ぶcssの書き方』の2日目となりました。
2日目の『cssでもっと楽な書き方を学ぼう』では、色々な属性をつかって、要素タグに装飾を追加しました。
そのほかにも、style.css ファイルを作成して、要素タグごとにスタイルを指定する方法についても勉強してきました。
3日目の今日は、class や id について勉強します。
classやidを追加することで、要素のスタイルをもっと簡単に管理・変更できるようになります
レッスンの最後では、margin や padding といったレイアウトに欠かせない属性についても一緒に勉強していきましょう！
目次
classについて
これから一緒に勉強していく、class や id は初心者の人が最も混乱してしまうパートになります。
classについて一言で説明するのは、とーーーっても難しいので、あるサンプルページを例にして説明していきたいと思います。
どんなときにclassを使うの？
See the Pen css-3days-06 by takafumi (@takafoo) on CodePen.0
上のHTMLページをみてください。
htmlファイルの中をのぞいてみると、<h1>タグで3つの見出しが表示されています。
『CSS』をクリックしてみましょう。
cssファイルには<h1>タグが40pxの大きさで赤色になるように記述されていますよね。
その結果、赤文字で3つの見出しが表示されます。
『Result』をクリックして、確認してみてください！
cssファイルで<h1>タグを指定することで、一度にタグの見た目を変えることができます。
でも、次のような場合にはどうでしょうか？
このように、タグ本来のスタイルはそのまま継承して、見た目の一部分だけを変更する場合に class を使います！
classの書き方の流れ
「classの書き方」と聞くと、むずかしく感じてしまうかもしれません。
でもご安心ください。
とっても、簡単です！
classの書き方の流れは次のようになります。
- classの役割を決める
- classの名前を考える
- cssファイル内にclassを定義する
- classに属性を追加する
- 要素タグにclassを割り当てる
一つ一つ説明するよりも、実際に手を動かして勉強していきましょう。
色々なclassをつくってみよう
「classの書き方の流れ」にそって、色々なclassをつくってみましょう。
見出しのclassをつくろう
「それではベスト5の発表です」を表示している、<h2>の見出しタグ用のclassをつくります。
「classの書き方の流れ」にしたがって、一緒にやってみましょう。
(1) classの役割を決める
これから、つくるclassの役割は以下の2点です。
- 要素の周りに灰色の縁の線を追加する
- 要素の背景を薄い灰色にする
このclassを要素タグに割り当てると、「縁が灰色の線で囲まれて、背景色が薄い灰色の要素」になります。
(2) classの名前を考える
classの名前を考えます。
そのclassが持つ役割にあった名前にするのがベストです。
たとえば、今回の場合だったら midashi-border-gray などがいいかと思います。
(3) cssファイル内にclassを定義する
classの役割も名前も決まったので、さっそく midashi-border-grayクラス を定義してみましょう。
定義といっても、むずしい作業ではありません。
私と一緒にやってみましょう。
style.css を開いてください。
次のように、.midashi-border-gray と追加するだけです。
classを定義するときは、class名の先頭に必ず . （ドット）をつけるのを忘れないようにしてください。
(省略)
/* 縁が灰色の線で、背景色が薄い灰色になる */
.midashi-border-gray {
}これで、classの定義は完了です。
(4) classに属性を追加する
.midashi-border-gray の定義は完了しました。
でも、これだと｛ ｝の中は空っぽの状態です。
{ } の中に属性を追加していきましょう！
style.css を開いて、次のようにコードを修正してみてください。
(省略)
/* 縁が灰色の線で、背景色が薄い灰色になる */
.midashi-border-gray {
border: 1px solid #979797;
background-color: #F4F4F4;
}これで属性の追加が終わりました。
(5) 要素タグにclassを割り当てる
classが完成したので、<h2>の見出しタグに .midashi-border-gray クラスを割り当ててみましょう。
割り当てたい<h2>タグに、class=”midashi-border-gray” と追加するだけで、割り当てが完了します。
(省略)
<h2 class="midashi-border-gray">それではベスト5の発表です</h2>
(省略)ファイルを保存して、ページをリロードしてみましょう。
見出し部分が、以前となにも変わっていなければ成功です！
見た目は何も変わっていないですが、つくった.midashi-border-grayによってちゃんと表示されています。
別の視点からみると、html文章中にたくさんある<h2>タグにたいして名前をつける作業ともいえます。
もし文章中に<h2>タグが複数あった場合に、.midashi-border-gray という名前がつけられた<h2>タグだけ、他の<h2>タグとは見た目が変わるということです。
文字の色を変えるclassをつくろう
今回目標とするページのデザインをもう一度見てみましょう。
ページ中に赤文字になっているところが何箇所かありますね。
「世界中から美味しいもの」と「誰にも教えたくないない東京のオススメ飲食店ベスト5」の2箇所です。
text-redクラスを作成しよう
style.cssを開いてください。
これから作成するクラスは text-red という赤文字になるクラスです。
次のようにコードを記述してみましょう。
(省略)
/* 赤文字にする */
.text-red {
color: #F65555;
}
text-redクラスを割り当てよう
text-redクラスが用意できたので、赤文字にしたい要素タグにクラスを割り当てていきます。
<span>タグと<strong>タグに class=”text-red” と追加するだけで終わりです。
こちらを参考にして、コードを修正してみましょう！
(省略)
<p style="font-weight:bold;">
私は東京に住み始めて今年で15年目になります。みなさんもご存知の通り、東京には日本中はもとより、<span class="text-red">世界中から美味しいもの</span>が集まってきます。
</p>
<p>今年で東京在住15年目の私が「<strong class="text-red">誰にも教えたくない東京のオススメ飲食店ベスト5</strong>」をあなただけにコッソリ教えちゃいます。</p>
（省略）
ファイルを保存してページを、リロードします。
text-redクラスを割り当てた要素タグが赤色になったのが確認できます。
idとは？
cssを勉強していくと、idと class の違いや使い分けが分からなくなって混乱してしまいます。
そこで、ものすごーーーく簡単に言うと「idは要素タグに対して、名前をつける」ために使います。
はい、そのとおりです。
class もid も要素タグに名前をつけるという点は同じです。
でも、決定的に違うところがあります！
それは、同じidの名前が付いた要素タグは、2つ以上存在してはいけないというところです。
ちょっと、分かりにくいですよね。。
次の例をみながら一緒に考えてみましょう。
下のサンプルコードをみてください。
ここでは、3つの<h1>タグのうち2つにheadlineというidを割り当てています。
headlineのidには文字が青くなる属性を与えています。
その結果、「Result」をクリックすると青色の3つの見出しのうち、2つが青色になっています。
See the Pen css-3days-07 by takafumi (@takafoo) on CodePen.0
一見すると文字も青色になっているし、「問題ないじゃん」と思いますよね。
でも、このidの使い方は正しくありません。
さきほど、説明したように「１つのページ内に、同じidの名前が付いた要素タグは、2つ以上存在してはいけない」というルールがありました。
今の状態では、1つ目と2つ目の<h1>タグに同じheadline が割り当てられています。
idを使うときは、ページ内で何度も使っていないか注意しながらやっていきましょう！
idタグの割り当てと定義をしてみよう
idの割り当ても、classと同じでとっても簡単です。
たとえば、ページ内にたった１つしか存在しない大見出し用の<h1>タグがあったとしましょう。
その、<h1>タグに top_headline というidを割り当てるときは次のようにします。
<h1 id="top_headline">
今注目の電化製品はこれだ！
</h1>id=”top_headline” を<h1>タグに追加するだけです。
割り当てが完了したら、あとはcssファイル内に top_headline を定義します。
idを定義するときは、先頭に#（シャープ）を追加します。
あとは、｛｝の中に属性を記述するだけです。
#top_headline {
color: green;
font-size: 30px;
}
div でタグをまとめよう
これまで紹介してきた<h>タグや<a>タグなどは、タグそのものが何かしらの機能をもっていました。
<h>タグなら見出しとして目立つように、テキストが太字で大きく表示されました。
<a>タグなら、囲ったテキストがリンクになって別のページに飛べるようになりました。
これから、紹介するdivというタグは他の要素タグとは少し異なり、それ自体が機能をもつタグではありません。
毎度のように、言葉で理解するのは難しいと思うので。。。
私と一緒に手を動かしながら勉強してみましょう！
久しぶりに、index.htmlを開きます。
<body>タグ内にある<h1>タグから<p>タグを、<div>タグで囲ってみてください。
（省略）
<div>
<h1>誰にも教えたくない東京のオススメ飲食店ベスト5</h1>
<img src="images/top.png">
（省略）
<p>以上がベスト5となります。みなさんもお近くにお越しの際は一度足を運んでみてはいかがでしょうか？</p>
</div>
（省略）保存して、リロードしてみましょう。
そうなんです。
divタグはとくに機能を持たないタグなので、見た目には何の変化もありません。
ですが、divタグで囲うことによって、なかに含まれるタグをまとめることができます。
タグをまとめることによって、divタグでまとめられたブロックを１つの要素として扱うことができます。
1つの要素とすることで、親となるdivタグを変えるだけで位置やサイズを簡単に変更できるようになります。
次に進む前に、このdivタグにcontentというidを割り当てておきましょう！
style.css を開いてcontentというidを定義します。
名前の先頭に#を忘れないように気をつけましょう。
（省略）
/* ページのコンテンツ */
#content {
background-color: #ccc;
width: 580px;
}contentのブロックが分かりやすくなるように、幅を580pxに固定して、背景をグレーにしました。
あとは、divタグにcontentを割り当てるだけです。
divの始まりのタグに id = “content” を追加します。
（省略）
<div id="content">
<h1>誰にも教えたくない東京のオススメ飲食店ベスト5</h1>
<img src="images/top.png">
（省略）ファイルを保存して、ページをリロードしてみましょう。
<div>タグで囲まれた部分がひとまとめになっているのが分かると思います。
確認ができたら、#contentのbackground-color属性は削除しておいてください。
marginってなんだろう
margin属性とは要素の外に向かって、余白をつくるものです。
たとえば、上のdivに対して margin : 20px; という属性を追加すると div の外方向に20px分の余白がつくれます。
一定方向にだけ余白をつくろう
marginはある一定の方向にだけ余白を作ることもできます。
style.cssを開いてください。
#contentにmargin-left: 50px; と追加してみましょう。
（省略）
/* ページのコンテンツ */
#content {
width: 580px;
margin-left: 50px;
}
ファイルを保存して、リロードをします。
ちゃんと、#contentブロックの左側に50px分の余白が作られているのがわかりますね！
marginで中央揃えにしてみよう
じつは今のページ少し困った点があります。
それは、ブラウザのウィンドウサイズを横に広げるとわかります。
もう、お分かりですね。
いくらページを広げても、コンテンツ部分が左に固定になってしまうのです。。
やっぱり、ウィンドウの中央に表示されるほうが見やすいですよね。
それも、marginを使うと簡単にできちゃいます。
style.cssを開きます。
#contentのmargin-left: 50px; を削除します。
そして、新たに margin: 0 auto; を追加します。
（省略）
/* ページのコンテンツ */
#content {
width: 580px;
margin: 0 auto;
}
margin属性に２つの値が指定されると、１つめの値は「上下方向の余白」、2つめの値は「左右方向の余白」を指定したことになります。
今回の場合だと、上下方向の余白は0で、左右方向の余白は自動的に調整するという意味になります。
ファイルを保存して、ページをリロードしてみましょう。
ウィンドウのサイズを変えても、コンテンツが中央に表示されるようになりましたね！
paddingってなんだろう？
最後にpadding属性について勉強します。
paddingとmarginは間違いやすい部分なので、しっかりと理解しておきましょう！
marginとは逆で、paddingは要素の内側に余白を作る属性です。
上のdivに対して、padding : 20px; という属性を追加するとdivの内側に向かって20px分の余白がつくられます。
それでは、midashi-border-gray クラスが割り当てらている<h2>タグに注目してみましょう。
どうも、見出しの中のテキストと枠線の間にスペースがないため窮屈な感じがします。
余白をしっかりつくって、見出しをもっと見やすくしてみましょう。
style.css を開きます。
midashi-border-gray クラスの属性に padding: 5px 10px; と追加します。
これは、midashi-border-grayクラスが割り当てられた要素の内側に上下方向に5px、左右方向に10pxの余白をつくることを意味しています。
（省略）
/* 縁が灰色の線で、背景色が薄い灰色になる */
.midashi-border-gray {
border: 1px solid #979797;
background-color: #F4F4F4;
padding: 5px 10px;
}
（省略）保存して、リロードしてみましょう。
見出しの内側に余白ができたことで、タイトルが見やすくなりましたね！
これでレッスンは終わりです！
今日で、一緒にやってきた「3日で学ぶ cssの書き方」は終了です。
これまでの3日間のレッスンで、cssの基本的な書き方や考え方について学んできました。
cssはウェブサイトを作りたい人にも、WordPressでブログを運用したい人にとっても、重要なものです。
レッスンの始めでは、黒一色だけの地味なページがcssを使うことで色味が増えて、魅力的なページになりました。
cssを学ぶだけで、あなたのウェブサイトやブログもより魅力的なものになるでしょう！
それでは、また別のレッスンでお会いしましょう！
