すこし上級者むけのCSS

すこし上級者むけのCSS
慣れてくるとこんな状況になってきます。
•
たくさん<p>があるけど、この段落だけ赤くしたい。
•
見出し<h>のなかでこの見出しだけ大きくしたい。
•
ココらへん全部、まとめて右に寄せたい
いままでは特定のタグだけだったけど、
より自由に指定したい！
これの {この要素 : こんな風に ;}
“これの”の部分を状況に合わせて自由に
CSSで指定できる方法があります。
そこで登場。classとid
<p class=”すみれ” > さくらぐみの皆さんはこんなデザイン</p>
<p id=”すみれ” > さくらぐみの皆さんはこんなデザイン</p>
いつものPタグですが、Pの隣に何
class/id は名札みたいなもの
<p class=”すみれ” > さくらぐみの皆さんはこんなデザイン </p>
<p class=”もも”> ももぐみの皆さんはこんなデザイン </p>
<p id=”たけしくん”> たけしくんはこんなデザイン </p>
ass/idで区切れば、いろんなデザイン指定が
classは組
すみれ組さん
は
たくさん混在していても、同じクラスにしたもの
はーーい
<h2 class=”すみれ” >
<h2 class=”すみれ” >
<h2 class=”もも” >
<h2 class=”もも” >
<h2 class=”すみれ” >
<h2 class=”さくら” >
すべてが一気に変わる。
id は、なまえ
おおまえくん
は
色々ある要素のなかで、idはたった一つのものに
はーーい
<p id=”おおまえけんいち” >
<p id=”うえのたいき” >
<p id=”いちずみそうげん” >
しか指摘できない。
class /id の使い方
HTML
<xx class=”xx”> みだし</xx>
CSS
.xx{font-size:20px;}
HTML
<xx id=”xx”> みだし</xx>
CSS
#xx{font-size:20px;}
class /id の使い方
HTML
<h2 class=”xx”> みだし</h2>
CSS
h2.xx{font-size:20px;}
HTML
<h2 id=”xx”> みだし</h2>
CSS
h2#xx{font-size:20px;}
pとかhとかだけでなくて、webサイトの中の
一定の範囲をまとめてCSS指定できたら便利ですよね？
見出し
見出し
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文
DIVの中の本文
セレクタその5 div=特殊
division=区分けって意味。特殊なセレクタ。グループを作ってその中全体を指定します。
div class=”xx”{xxxx:xx}
div id=”xx”{xxxx:xx}
＝透明な箱のようなもの。
divってなに？
div
divタグで囲ったものは一切合切ぜん
見出し
ぶ影響をうける。
div自体にはこれといった効果はない。
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文 DIVの中の本文 DIVの中の本文
DIVの中の本文
divってなに？
div
たった一個の要素ももちろんOK!
divの使い方
HTML
<div class=”xx”> divで囲った要素 </div>
CSS
div.xx{font-size:20px;}
HTML
<div id=”xx”> divで囲った要素 </div>
CSS
div#xx{font-size:20px;}
捕捉：
今回一番むずかしいところ
h2のﬂoatの問題
なぜh2が画像に回りこまないの？
!
h1, h2, h3, h4, h5, h6 {font-weight:normal; clear: both; }
実はみなさんが触れないファイルに こんなCSSがあります。
clear: both;の意味は？
!
このセレクタに対しては、回り込みをしないでね。
という意味のプロパティと値です。
これがあるせいで、h要素はちゃんと同じ位置
に（この場合は左はじ）に固定されているわけ
今回はここのh2だけ例外にしたい
そこで、divタグを使い、透明な箱に囲ったh2に対しては、
回りこみを特別に許可するCSSを書きます。
こんな風に書きます。
clear : none ;
クリアしたものを
ナシにしてね
HTMLはこちら
<div id="onamae">
<h2>
BBTTRavelの管理人はわたしです。
</h2>
</div>
CSSはこちら
#onamae h2{clear:none;}

Download Report