Cascading Style Sheets: 2007年2月アーカイブ

フッター部分のメニューなどを区切る際のサンプルを適当に。
p要素でやるとこんなヤツです。

Home｜アバウト｜イラスト｜BBS

サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが）

<ul id="sampleFooter">

<li><a href="/">Home</a></li>

<li><a href="/">About</a></li>

<li><a href="/">Gallery</a></li>


<li><a href="/">Blog</a></li>

</ul>

実際の表示です。

* Home
* About
* Gallery
* Blog

htmlはこんな感じに。（｜取って最初のメニューにclassを追加）

<ul id="sampleFooter_02">
<li class="sampleFooterHome"><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Gallery</a></li>

<li><a href="/">Blog</a></li>

</ul>

cssはこんな感じです。

#main #sampleFooter_02 {
	text-align:center;
}
#main #sampleFooter_02 li {
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
	border-left:1px solid #999;
}
#main #sampleFooter_02 li.sampleFooterHome {
	border-left:0;
	padding-left:0;
}

普通に縦線を書いた感じ

* Home｜
* About｜
* Gallery｜
* Blog

普通にhtmlに｜を記述しているのでソースは当然下記のように。

<ul id="sampleFooter">
<li><a href="/">Home</a>｜</li>
<li><a href="/">About</a>｜</li>

<li><a href="/">Gallery</a>｜</li>

<li><a href="/">Blog</a></li>

</ul>

cssはこんな感じです。

#main #sampleFooter_01 li {
	float:left;
	list-style-type:none;
}

floatして、リストのマークを消しているだけ。
主観ですけど、リストでこのやり方をするならp要素で普通に区切った方が良い気がする。

borderを使って区切っているように見せる

実際の表示です。

* Home
* About
* Gallery
* Blog

htmlはこんな感じに。（｜取って最初のメニューにclassを追加）

<ul id="sampleFooter_02">
<li class="sampleFooterHome"><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Gallery</a></li>

<li><a href="/">Blog</a></li>

</ul>

cssはこんな感じです。

#main #sampleFooter_02 {

	text-align:center;

}

#main #sampleFooter_02 li {

	display:inline;

	list-style-type:none;

	margin-right:6px;

	padding-left:10px;

	border-left:1px solid #999;

}

#main #sampleFooter_02 li.sampleFooterHome {

	border-left:0;

	padding-left:0;

}

さっきfloatでやりましたけど、display:inlineでやってセンタリングするとこんな風になります。
見易さの為にli要素毎に改行してますが、改行すると数pxの隙間が出来るので、paddingとmarginを上手い具合に調整してあわせます。
改行しない場合はソースがちと見難いっすけど、paddingとmarginは同じ値でキレイに揃います。

.sampleFooterHome はHomeの左の縦線を消す為に、classを追加してます。

色がすぐに変えれるっていう利点は有るけれど、borderでやってるいじょう縦線が文字の高さより大きくなってしまうのがいけてない。。。

画像で区切ってみる

実際の表示です。

* Home
* About
* Gallery
* Blog

ソースはborderと同じなので割愛。
CSSは以下のようになる感じです。

#main #sampleFooter_03 li {
	float:left;
	list-style-type:none;
	margin-right:10px;
	padding-left:15px;
	background:url(../img/list_subcategory.gif) no-repeat left center;
}
#main #sampleFooter_03 li.sampleFooterHome {
	background-image:none;
	padding-left:0;
}

基本はborderと同じで指定を画像に変えただけです。
画像の1番の利点はやっぱり見栄えですね。
区切りっぽく見える画像なら何でもいいんで、デザインにこだわる場合は背景画像で指定するのが良さげです。

あと、margin-leftとpadding-rightの組み合わせを使わないのは、IEのmargin2倍のバグ対策です。
↓知らない人はここ参照で。

上記のサンプルを隣接セレクタでやる

ントはコレが書きたかっただけなんす。
と、いう事で今までのはこのサンプルを書くための布石みたいなノリです。

実際の見た目は今までと殆ど変わらないです。（IE6はダメですが）

* Home
* About
* Gallery
* Blog

ソースはこんな感じにスマートに。

<ul id="sampleFooter_04">
<li><a href="/">Home</a></li>
<li><a href="/">About</a></li>
<li><a href="/">Gallery</a></li>

<li><a href="/">Blog</a></li>

</ul>

CSSは以下のように。

#main #sampleFooter_04 {
	text-align:center;
}
#main #sampleFooter_04 li {
	display:inline;
	list-style-type:none;
	margin-right:6px;
	padding-left:10px;
}
#main #sampleFooter_04 li+li {
	border-left:1px solid #999;
}

隣接セレクタ（+）で指定する事で、余計なclassを追加せずに済みます。
で、コレがめでたくIE7で対応した訳ですよ。
つまり、もう使っても問題が無いテクニックの一つだと思うのです。

HTML

• List1


• List2


• List3


• List4

強調されてるところが味噌な行。それ以外はとりあえずの見栄えの設定になっています。
コピーペーストですぐに使用できるように作りましたが、id名、marginやcolorプロパティなどはサイトに合わせて適切に変更してください。

CSS

ul#globalNavi {
margin: 0;
padding: 0;
width: 500px;/* 必ずwidthの設定をしてください */
}

ul#globalNavi li a:hover {
color: #000;
background-color: #ddd;
}

れを基本に、背景画像を入れたりpaddingを調整すれば色々作れるはず。
li要素がフロートすることによって、包含ブロックであるul要素は高さの算出する子要素がなくなり、ぺっちゃんこになってしまうので、擬似要素によるクリアをコード中にいれています。もし、MAC IEに対応する必要がある場合は、ul#globalNaviには次のコードを追加してください。

ul#globalNavi {
margin: 0;
padding: 0;
width: 500px;
/* for MacIE5.x \*//*/
overflow: hidden;
/* end */
}

WIN IE6では親要素がposition: absoluteしないと何故かA要素のマウス反応範囲が消えてしまうので、absoluteしない場合はA要素にposition: relative;が必要。

以前のエントリーでユニバーサルセレクタを用いてデフォルトのCSSをリセットするという記事を書きましたが、どうやら海の向こうではもうそれは時代遅れのようです。

今月号(2007年3月)のWebDesigningにも大藤幹さんが同様のことを書いていらっしゃいますね。ユニバーサルセレクタを用いた手法というのは今後すたれていくのかな・・・

何故*セレクタを使った手法が時代遅れなのか？それが気になるところですが、主な理由として挙げられているのは下記のようなもの。

* レンダリングが遅くなる(重くなる)。大きなページは特に。
* 良いデフォルトのスタイルを無駄にしてしまう。(例えばサブミットボタンなど)

確かに一度全てのスタイルをリセットして、再び上書きをするわけですからやり方的にはあまりスマートではないですね。これらを解決する手段としては、使用するタグごとに個別に指定してあげるというやりかたが良いようです。例えば下記のようなもの

html, body, {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6,
p, pre, blockquote,
ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}

Yahoo UI LibraryのYUI Reset CSSを参考にするのも良いかもしれません。YUI Reset CSSでは*セレクタを使ってリセットする代わりに、最初に下記のように書いています。

body,div,
dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}

body {
background-color:#ebebeb;
margin:0 auto;
background-image:url(../img/bg.jpg);
background-repeat:repeat-y;
background-position:top center;}

body #page{background-position:top center;
margin:0 auto;}

cssの中央レイアウト　firefox

cssの中央レイアウトの時に
body{text-align:center;}
としますが、
firefoxでは左寄せになり、テキストだけが、中央になります。
ie7では問題ありません。

firefoxでの中央レイアウトはどうしてますか？

ボックスを中央に作りその中に入れる

body {
text-align:center;
}
#page {
width:600px;
text-align:left;
margin:0px auto;
padding:0px;
border:1px solid #666666;
}

font-weight: normal;

@charset "utf-8";
/*
Share Style [
----------------------------------------------------------- */
* {
margin:0;
padding:0;
}
body {
background:#FFF url(../img/bg.gif) no-repeat left top;
font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
font-size:80%;
}
html {
overflow-y:scroll;
}
h1,h2,h3,h4,h5,h6 {
}
p,li,dt,dl {
line-height:1.6;
}
p {
margin:0 0 1em 0;
}
li {
list-style-type:none;
}
img {
border:0;
}
address {
font-style:normal;
}
.clear {
clear:both;
}

掲載サイトはコチラ

画面の中央にボックスを配置したいと思ったことはありませんか？ 今回は左右の余白だけでなく、上下の余白も均等にとる方法です。 ミニマムなデザインのページを作るときに役立つでしょう

body{
background-image:url(../../img/back.gif);
margin:0px;
padding:0px;
}
div#main{
background-image:url(../../img/sub-back.jpg);
overflow:auto;
height:400px;
width:600px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
}

body直下にID：mainのボックスを配置して作っていくとサンプルのようになります。

解説

最初にposition:absolute;とtop:50%;とleft:50%;を使ってmainボックスの基点を 画面中央に持ってきます。

その後margin-top:-200px;とmargin-left:-300px;をつかってmainボックスの高さと幅の半分だけ、 上と左にずらしてあげれば、見事画面中央に配置されます。これが今回のからくりです。

heightとwidthも%で指定したいところですが、%で指定するとレイアウトが崩れてしまいます。 pxで指定してください。あとoverflow:auto;を指定して内容が多くなった場合に備えることも重要です。

ある程度ならウィンドウの大きさを変化させても対応できますが、あまりにも小さくすると、見えないところが出てきます。

中央配置のデザインで、ページ移動の際にコンテンツの量によってスクロールバーが出たり出なかったりするFirefoxさん。

あのズレ、気になる人っていますよね？

すぐ分かるように簡単なサンプルを用意しました。
http://css-happylife.com/template/11/

あ、当たり前だけど、Firefoxで見て下さいね。

コレを解消する為に以下のスタイルを適用させればズレがなくなります。

html {
overflow-y:scroll;
}

簡単っすね。

で、コレOperaじゃ解決出来ないのが難点。
overflow:scrollでズレないようには出来るけど、下が出ちゃうのはいけてない。

height:100%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。

んーこの辺まで解決したかった…

テーブル全体にボーダーを表示する

table { border-collapse: collapse; }
td { border: 1px solid #808080; }

本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。

引用サイトはコチラ

本日は、実用的なCSS（スタイルシート）のお話。CSSコーディングを始める一番最初にbodyタグに設定しておくと、結構便利かな？と思われるポイントをまとめてみました。。

body {
margin: 0;
padding: 0;
line-height:1.4;
color:#333;
font-family:Arial, sans-serif;
font-size:0.9em;
}

引用サイトはコチラ

●float:leftで並べる
●アクセシビリティ的に良さげなタイプ
●>を画像にする事で、altに「の中の」を入れ、音声ブラウザなどで『ホームの中のサービスラインナップの中のウェブサイト制作』と読ませる。
●classを追加して>を消すタイプ
●:after要素を利用したタイプ
●右寄せバージョン
●display:inlineで並べたバージョン
●ol要素

引用ページはコチラ