こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！
今回は、タグとclassを効率良く使ってスタイルを記述する方法をご紹介します。
YouTubeにもアップしていますので、見ていただけたら嬉しいです！
タグとclass（id）を使う理由
前回の#5では、idとclassについて解説しました。
そのidとclassですが、とても便利でコーディングには必ず必要になるのですが、最初は使い過ぎてしまって、コードが汚くなって管理しにくいコードになってしまいます。
なので、タグも上手く使って、綺麗で管理しやすいコードにする必要があります。
記述の仕方
それでは、記述の仕方を解説します。
前回#5のhtmlとcssを使用します。
まず、htmlを編集します。
<body>
<div class="text-01">
<h1>タグを使ってhtmlコーディングしよう！</h1>
<p>
こんにちは<br>
ユウです！
</p>
</div>
<div class="text-02">
<h1>タグを使ってhtmlコーディングしよう！</h1>
<p>
こんにちは<br>
ユウです！
</p>
</div>
</body>同じテキストを使うことはあまりありませんが、分かりやすいように、divタグで囲まれていたものを複製して、それぞれ違うclassをつけています。
次は cssを編集します。
@charset "utf-8";
div {
width: 100%;
max-width: 1000px;
margin: 0 auto 30px;
}
.text-01 h1 {
text-align: center;
color: #ff0000;
font-size: 40px;
margin: 50px 0 30px;
padding-bottom: 30px;
border-bottom: 1px solid #cccccc;
}
.text-01 p {
font-size: 18px;
text-align: center;
}「.text-01 h1」「.text-01 p」に変更しました。
保存してブラウザで確認すると、「.text-01」のclassがある子要素だけスタイルが適用されています。
cssをもう少し編集します。
@charset "utf-8";
div {
width: 100%;
max-width: 1000px;
margin: 0 auto 30px;
}
.text-01 h1 {
text-align: center;
color: #ff0000;
font-size: 40px;
margin: 50px 0 30px;
padding-bottom: 30px;
border-bottom: 1px solid #cccccc;
}
.text-01 p {
font-size: 18px;
text-align: center;
}
.text-02 h1 {
text-align: center;
color: #0000ff;
font-size: 20px;
margin: 50px 0 30px;
padding-bottom: 30px;
border-bottom: 1px solid #cccccc;
}
.text-02 p {
font-size: 12px;
text-align: center;
}「.text-02 h1」「.text-02 p」と追加して、色とフォントサイズを変更してみました。
保存してブラウザで確認すると、text-01とは違うスタイルが適用されていると思います。
解説
htmlは、親要素にclassをつけ、子要素にはつけていません。
cssは、「.text-01 h1」のように、親要素のclass名と、子要素のタグを記述しています。
こうすることで「text-01の中のh1タグに対して」という書き方ができます。
なので、text-02のh1タグはスタイルが適用されません。
逆に「.text-02 h1」は、text-01のh1タグにスタイルは適用されません。
cssの記述方法は、htmlの親子関係と合わせて、半角スペースを入れて記述します。
これだけでスタイルを適用させることができるので、h1タグにもpタグにもclassをつけなくても表現することが出来るようになります。
「別にどっちでもそんな変わらないんじゃ？」と思うかもしれませんが、1ページをコーディングするとなると、htmlもcssも結構なボリュームになります。
ひとつひとつのタグ全てにclassをつけると、それだけ記述量が多くなります。
コーディングスピードも遅くなるし、コードが多く管理も大変になってしまいますので、極力無駄のないコードになるよう心掛けましょう。
「>」も解説
タグのclassの記述方法ですが、もうひとつ便利で重要なものがあります。
「>」なのですが、コードを使って解説します。
以下のようなhtmlがあったとします。
<div class="text-03">
<p>1番目のテキスト</p>
<div>
<p>2番目のテキスト</p>
</div>
</div>cssは以下のように記述します。
.text-03 > p {
font-size: 20px;
text-align: center;
}保存してブラウザで確認してみると、「1番目のテキスト」のみスタイルが適用されていると思います。
これは、「>」を入れることで「親要素のすぐ下の子要素に対して」という書き方ができます。
2番目のテキストは、ここでは2階層したの孫要素になるので、スタイルが適用されません。
「>」を削除してみると、どちらのテキストにもスタイルが適用されます。
こうすることで、より細かくスタイルを指定することができます。
最後に
以上、タグとclassを効率良く使ってスタイルを記述する方法をご紹介しました。
最初は、親要素とか子要素とか、混乱してしまうと思いますので、無理にやらなくても良いと思います。
コーディングに慣れてきたら、記述の仕方を変えてみたり、色々試していけば自然と身についていきます。
次回は、ここまで解説したhtmlとcssを使って、実際にどんな感じでコーディングするかを解説したいと思います。
最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。
コメント