すこし上級者むけのcss - hoxaigraphicsいままでは特定のタグだけだったけど、...

すこし上級者むけの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>

class/idで区切れば、いろんなデザイン指定が

classは組

<h2 class=”すみれ” > <h2 class=”すみれ” >

<h2 class=”さくら” ><h2 class=”すみれ” >

すみれ組さんは

はーーい

<h2 class=”もも” > <h2 class=”もも” >

たくさん混在していても、同じクラスにしたもの

すべてが一気に変わる。

id は、なまえ

おおまえくんは

<p id=”おおまえけんいち” ><p id=”いちずみそうげん” ><p id=”うえのたいき” >

はーーい色々ある要素のなかで、idはたった一つのものに

しか指摘できない。

class /id の使い方

HTMLCSS

<xx class=”xx”> みだし</xx>.xx{font-size:20px;}

HTMLCSS

<xx id=”xx”> みだし</xx>#xx{font-size:20px;}

class /id の使い方

HTMLCSS

<h2 class=”xx”> みだし</h2>h2.xx{font-size:20px;}

HTMLCSS

<h2 id=”xx”> みだし</h2>h2#xx{font-size:20px;}

pとかhとかだけでなくて、webサイトの中の

一定の範囲をまとめてCSS指定できたら便利ですよね？

見出し

DIVの中の本文 DIVの中の本文 DIVの中の本文



DIVの中の本文

見出し




DIVの中の本文

division=区分けって意味。特殊なセレクタ。グループを作ってその中全体を指定します。

div class=”xx”{xxxx:xx}

div id=”xx”{xxxx:xx}

セレクタその5 div=特殊

divってなに？＝透明な箱のようなもの。

divタグで囲ったものは一切合切ぜん

ぶ影響をうける。

div自体にはこれといった効果はない。

見出し




DIVの中の本文

div

divってなに？

たった一個の要素ももちろんOK! div

divの使い方

HTMLCSS

<div class=”xx”> divで囲った要素　</div>div.xx{font-size:20px;}

HTMLCSS

<div id=”xx”> divで囲った要素　</div>div#xx{font-size:20px;}

今回一番むずかしいところ

h2のfloatの問題

捕捉：

なぜ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;}

すこし上級者むけのcss - hoxaigraphicsいままでは特定のタグだけだったけど、...

Documents