ブログ練習帳スクリーンショット

スクリーンショット

ネガティブマージンでリスト並べに挑戦

ネガティブマージン、いろいろいじってみたくなりました。リストを並べるのに利用してみます。

XHTML


<ul>

<li class="box1">Box1</li>

<li class="box2">Box2</li>

<li class="box3">Box3</li>

<li class="box4">Box4</li>

</ul>

背景つきでリストにしてみました

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
}
.box3{
	background-color:#0CF;
}
.box4{
	background-color:#FF3;
}

左にマージンをつける

左側にマージンつけました

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
}

line-heightで高さを決める

lineheightで高さを与える

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	line-height:50px;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
}

2行目のボックスに上にネガティブマージンをline-height分(高さ)与える

2つ目のボックスの上部にネガティブマージン

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	line-height:50px;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	margin-top:-50px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
}

3行目、4行目にも同様にネガティブマージンを与える

残りのボックスにも上部にネガティブマージン

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	line-height:50px;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	margin-top:-50px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
	margin-top:-50px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
	margin-top:-50px;
}

高さの与え方はline-heightでもheightでもOK

高さをheightで指定してもOK

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	height:50px;
}
.box1 {
	background-color:#0F6;
}
.box2{
	background-color:#F96;
	margin-left:100px;
	margin-top:-50px;
	
}
.box3{
	background-color:#0CF;
	margin-left:200px;
	margin-top:-50px;
}
.box4{
	background-color:#FF3;
	margin-left:300px;
	margin-top:-50px;
}

これを応用すると、画像も張れて、リスト画像もフロートいらず？

画像ファイルを指定してもOKだ！

XHTML


<ul>

<li class="box1"><img src="btn01.gif" width="100" height="50" alt="" /></li>

<li class="box2"><img src="btn02.gif" width="100" height="50" alt="" /></li>

<li class="box3"><img src="btn03.gif" width="100" height="50" alt="" /></li>

<li class="box4"><img src="btn04.gif" width="100" height="50" alt="" /></li>

</ul>

CSS


* {
	margin:0;
	padding:0;
}
li {
	list-style-type:none;
	height:50px;
}

.box2{
	margin-left:100px;
	margin-top:-50px;
	
}
.box3{
	margin-left:200px;
	margin-top:-50px;
}
.box4{

	margin-left:300px;
	margin-top:-50px;
}

ネガティブマージン、だんだん面白くなってきた見習いです。

2011年11月17日1:00 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)

CSSのカスケード(2)詳細度の計算

ということで、もっとCSSのカスケード、実験ですう。

今回つかうHTML


<div><div><div><div><div><div><div><div><div><div><div>

<div><p class="p_class">あいうえお</p></div>

</div></div></div></div></div></div></div></div></div></div></div>

CSS No.1


div div div div div div div div div div{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

あかい文字

上は、すべて1点の要素が10で、10点、下は11点。で、下のあか。

CSS No.2


div div div div div div div div div div div{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

あかい文字

上は、すべて1点の要素が11個で、11点。下は10+1の11点。単純に足すと同じ11でも、下のあか。この上のほうの11点って、16進法的に言うなら、bと書いたほうがいいのかも。だから、a点と11点で、11点が大きいと。

CSS No.3


div div div div div div div div div div div div p{
	color:#090;
	background-color:#000;
}
p.p_class{
	color:#F00;
}

あかい文字

上は、1点の要素が13個で、13点。でも、これって16進法的にいうならd点。下は、11点。で、下のあか。

CSS No.4


div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p{
	color:#090;
	background-color:#000;
}
p#p_id{
	color:#F00;
}

あかい文字

上は、クラスが12個あるので、120点。でも、これって、10の桁が12個で16進法的にいうならc点。それに要素が13個あるので、13点だけど、これはd点。だから、ここは133点っていうより、cd点というほうがいいのかな。下は、101点。で、比較の結果、下のあか。

CSS No.5



p#p_id{
	color:#F00;
}


div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p{
	color:#090;
	background-color:#000;
}

あかい文字

上は、101点。下は、cd点。やはり、上のほうが点数が高い。あか色です。No.4が、あかだったのは、あとから書かれているほうに上書きされたからじゃないようです。

CSS No.6



p#p_id{
	color:#F00;
}

div.c1 div.c2 div.c3 div.c4 div.c5 div.c6 div.c7 div.c8 div.c9 div.c10 div.c11 div.c12 p.p_class{
	color:#090;
	background-color:#000;
}

あかい文字

上は、101点。下は、クラスが13個、要素が13個で、dd点。で、上のあか。

CSS No.7



.p_class {
	color:#f00;
}
div div div div div div div div div div div div {
	color:#090;
	background-color:#000;
}

あかい文字

上は、クラス1つで10点。下は、要素12個で12点だけど、c点。で、上のあか。

CSS No.8


.p_class {
	color:#f00;
}
div div div div div div div div div div div div.c12 {
	color:#090;
	background-color:#000;
}

あかい文字

上は10点。下はクラスが1個で10点、プラス、要素が12個。だから、下は、1c点。ということは、下のほうが点が高い。のに、あれー。上のあかだ。

CSS No.9


.p_class {
	color:#f00;
}
div div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

みどりの文字

上は、10点。下は、クラスが1個で10点、プラス、要素が13個。だから、下は、1d点。あれ、今度は、下のみどりになってる。

CSS No.10


div div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

.p_class {
	color:#f00;
}

みどりの文字

No.9と詳細度は同じですが、順序を上下逆にしても同じ。あとからきたのが、上書きってわけじゃないみたいだ。

CSS No.11


div div div div div div div div div div div.c12 p{
	color:#090;
	background-color:#000;
}

.p_class {
	color:#f00;
}

みどりの文字

今度は、順序はNo.10と同じですが、上のdivを1つ消して、クラスが1個で10点と、要素が12個で、1c点。下はクラス1個で、10点。クラスと要素の数の関係や点数はNo.8と同じなのに、挙動が違う。上のみどりです。

見習い、もう、わかりません。W3Cのサイトも、日本語のページも、ほかの方のサイトも、一生懸命探したけど、これについての記述がどうにも見つかりません。「点数で、10進数に見立てるなら」という部分についての記述は、ところどころに書いてあるのですが、この、最後の部分のNo.8以降のところについては、説明が見つかりませんでした。探し方が、悪いんでしょうか・・・。ただ、ちょっと思ったのですが、今、私が書いたHTMLでいうと、P要素についてのスタイルを決めようとしています。だから、「詳細度」という意味で言うなら、「どれだけくどく書いているのか、特定しようとしている意図が強いのはどれか」ということが「詳細度」と考えると、P要素に言及したセレクタの書き方をしているほうが、詳細度が高いと考えるのでしょうか・・・。はて。

追加　念のため追記ですが、ブラウザによって挙動が違う?と思い、チェックしてみました。IE8と、FireFox5.01で見ましたが、はやり同じです・・・。

2011年11月6日5:32 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)

CSSのカスケート(1)スタイルの優先順位

CSSを書くとき、IDとかclassで指定していきますが、思うような動きをしてくれないときがあります。スペルミスとかできちっとCSSが指定できてないってことはないのに、なぜか、うまく反応してくれない・・・。はてー。となります。とりあえず、指定するセレクタを長くしてみると、反応した、っていうこと、結構あって、なぜにぃ～と思います。基本は、後から書いたほうが上書きするとか、クラスやIDに点がついててその足し算したのが、関係してるらしい、ということまではなんとかなったんですが・・・。で、調べなきゃ、永遠に「駆け出し」も「見習い」も取れないよー、と勉強ですぅ。

ということで、前々から気になっていた、本家本元のW3Cのサイトを見てみました。ひぇー、英語じゃん。って当たり前ですね。すんません。翻訳サイトとかも見ながら、英語、読んでみました。

スタイルの優先順位(CSS2.1の場合)

ブラウザ＜ユーザー＜製作者＜important付き製作者＜important付きユーザ
セレクタの詳細度がより高い方が、詳細度が低いほうを上書きする。
セレクタの詳細度が同じ場合、あとからかかれたものが優先される。

詳細度の計算方法は、セレクタを点数付けすする。点数は、style=””で記述した場合、1000点、ID属性ひとつあたり100点、その他の属性および擬似クラスがひとつあたり、10点、要素および擬似要素ひとつあたり1点。これを足し算して、大きいものが優先順位が高くなるということです。

ただ、ここで、気がついたのですが、これを100点、とか、10点とか、考えないほうがいいような気がしてきました。本家サイトによると、style=””で決めたら、A、IDでB、その他の属性等でC、要素等でDとして、それをABCDのように4桁の数字に並べるのだと書いてあるようです。だから、たとえDである要素が10個集まっても、繰り上がってCのクラスと同等になるということではないような・・・。

ということで実験です。

HTMLのソースはこちら


<div id="d_id" class="d_class"><p id="p_id" class="p_class">

あいうえお</p></div>

CSS No.1


p{
	color:#F00;
}

あかい字

まず、最初、文字が赤いです。

CSS No.2


p{
	color:#F00;
}
p.p_class{
	color:#090;
}

みどりの字

上は、1点、下は1+10で11点。で、下のみどり。

CSS No.3


p.p_class{
	color:#090;
}
p{
	color:#F00;
}

みどりの字

上は、11点、下は1点。で、上のみどり。

CSS No.4


p#p_id{
	color:#090;
}
p{
	color:#F00;
}

みどりの字

上は、101点、下は1点。で、上のみどり。

CSS No.5


p#p_id{
	color:#090;
}
p.p_class{
	color:#F00;
}

みどりの字

上は、101点、下は11点。で、上のみどり。

CSS No.6


p#p_id{
	color:#090;
}
div.d_class p.p_class{
	color:#F00;
}

みどりの字

上は、101点、下は22点。で、上のみどり。

CSS No.7


p#p_id{
	color:#090;
}
div#d_id p.p_class{
	color:#F00;
}

あかい字

上は、101点、下は112点。で、下のあか。

CSS No.8


p#p_id{
	color:#090;
}
div#d_id .p_class{
	color:#F00;
}

あかい字

上は、101点、下は111点。で、下のあか。

CSS No.9


p#p_id{
	color:#090;
}
div#d_id p{
	color:#F00;
}

あかい字

上は、101点、下は102点。で、下のあか。

CSS No.10


div#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

あかい字

上は、102点、下は101点。で、上のあか。

CSS No.11


div#d_id {
	color:#F00;
}
p#p_id{
	color:#090;
}

みどりの字

上は、101点、下は101点。で、下のみどり。

CSS No.12


#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

みどりの字

上は、101点、下は101点。で、下のみどり。

CSS No.13


div#d_id p{
	color:#F00;
}
p#p_id{
	color:#090;
}

あかい字

上は、102点、下は101点。で、上のあか。

CSS No.14


div#d_id p{
	color:#F00;
}
div p#p_id{
	color:#090;
}

みどりの字

上は、102点、下は102点。で、下のみどり。

と、いくつも例題をやってみることで、なんとなく、見えてきたような。ということで、こんどは、もっといろいろといてみようと、思う見習いですが・・・。乞うご期待？

2011年11月6日3:37 AM| カテゴリー： HTMLとCSSのコード,スクリーンショット,見習い奮闘記| コメント (0)

« 古い記事新しい記事 »

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

ブログ練習帳

ネガティブマージンでリスト並べに挑戦

CSSのカスケード(2)詳細度の計算

CSSのカスケート(1)スタイルの優先順位

カテゴリー

私のサイト

サイト内の検索にご利用ください

このサイトへのアクセスにご利用ください

ブログ練習帳の管理人への連絡