Web Designer’s Checklist
おお～サイトも綺麗でとっても見やすい！
HTML5とCSS3ってこんなことも出来るんや～とちょっと感動しました。

CSS3 Generator

これもスゴイ！！
Generatorですよ。まさにジェネレーター！
CSS3で新しく実装されたものだけのピックアップなのかなぁ？
みんなすごいね。すごいの作るね。

最後はHTML5もCSS3も関係ないけど・・・・
IEのみタグの考え方の違いを一覧にしてくれています。
Internet Explorer User Agent Style Sheets
すでにIE9が載ってるとこがすげ～

便利なサイトはいっぱいあるなぁ。。

関連する投稿

• 関連する投稿はありません。

HTML側のソース

<div id="Navigation">
<ul>
<li class="b1"><a href="/aboutus.php"><img src="navi.jpg" alt="TOP" /></a></li>
<li class="b2"><a href="/campaign.php"><img src="navi.jpg" alt="MENU" /></a></li>
<li class="b3"><a href="/faq.php"><img src="navi.jpg" alt="CONTACT" /></a></li>
<li class="b4"><a href="/voice.php"><img src="navi.jpg" alt="ABOUT US" /></a></li>
</ul>
</div>

CSS側のソース

#Navigation{
	clear:both;
	margin:0;
	padding:0;
	height: 40px;
	width: 600px;
}

#Navigation ul{
	margin:0;
	padding: 0px;
	list-style: none;
}

#Navigation ul li{
	margin: 0;
	padding: 0px;
	height: 40px;
	overflow:hidden;
	position:relative;
	float:left;
}
#Navigation ul li a{ position:relative; }
#Navigation ul li a:hover{ border:none; }

#Navigation ul li.b1{ width:120px; }
#Navigation ul li.b1 a{
	top:0;
	left:0;
}
#Navigation ul li.b2{ width:135px; }
#Navigation ul li.b2 a{
	top:0;
	left:-120px;
}
#Navigation ul li.b3{ width:155px; }
#Navigation ul li.b3 a{
	top:0;
	left:-255px;
}
#Navigation ul li.b4{ width:190px; }
#Navigation ul li.b4 a{
	top:0;
	left:-410px;
}
#Navigation ul li a:hover{ top:-40px; }

今いるページでナビの画像をマウスオーバー時に指定したい場合は、
Navigationのdivより前で各ページ名のクラスで包み込んで、以下のソースをcss側に追加です。

#Navigation ul li.b1 a:hover,
.Top #Navigation ul li.b1 a{
	top:-40px;
	left:0;
}

#Navigation ul li.b2 a:hover,
.Menu #Navigation ul li.b2 a{
	top:-40px;
	left:-120px;
}

#Navigation ul li.b3 a:hover,
.Contact #Navigation ul li.b3 a{
	top:-40px;
	left:-255px;
}

#Navigation ul li.b4 a:hover,
.Aboutus #Navigation ul li.b4 a{
	top:-40px;
	left:-410px;
}

関連する投稿

• [Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい！
• [Cording] Cssだけでディスプレイの真ん中に表示するTips
• [CSS]　タイトルの並び、右寄せでテキストなどを配置する方法
• [CSS] リスト「li」を使ったデザインTIPS
• [CSS] floatで一列にしたリスト等を中央配置にする方法

ずばり。
ｄｌタグに”display:inline-block;”を付ける。

はい。これだけ。
うそん～まじで～って感じです。

”display:inline-block;”　っていまいち使いどころがわからなくて、なじみがなかったのでついでに調べてみました。

• IE 6, IE 7 の inline-block 考察

うう・・・よくわからない・・・・

• ページ送りナビゲーションには display:inline-block が超便利
• display:inline-blockを使った中央寄せ

あ、これは便利かも～ハックいっぱい入れなきゃだけど。

また使いどころがはっきりしたら記事を書きたいと思います。。

関連する投稿

• [CSS]　タイトルの並び、右寄せでテキストなどを配置する方法
• [CSS] リスト「li」を使ったデザインTIPS
• [CSS] 画像置換を使わないマウスオーバーテクニック　position指定編
• [CSS] floatで一列にしたリスト等を中央配置にする方法
• [CSS] cssだけでImage Galleryを作る

h4{
position:relative;
}
h4 em{
display:block;
float:right;
line-height:1.4;
position:relative;
*position:absolute;
*right:6px;
font-style:normal;
font-size:85%;
font-weight:normal;
}

h4タグの中に右寄せにしたいものを 　<em>　タグで囲ってください。
するとそれだけpositionの指定どおりに動いてくれます。
ちなみに上記のh4には実際は背景があって、paddingをある程度とっている配置になっています。
特にIEハックの　*right:6px;　や　line-height:1.4;　なんかは自分のデザインによって変更する必要がありますヨ。
また、画像を右寄せにする場合は、 　<em>　の調整が必要になると思いますが、基本は　position　でやっていけます。

これ変じゃない？ってとこあったら、こっそり教えてくださいませ・・・

関連する投稿

• [Cording] Cssだけでディスプレイの真ん中に表示するTips
• [CSS] リスト「li」を使ったデザインTIPS
• [CSS] 画像置換を使わないマウスオーバーテクニック　position指定編
• [CSS] floatで一列にしたリスト等を中央配置にする方法
• [CSS] dtとddをfloatで横並びをすると、dlの背景が消えてしまうバグの回避方法

HTML側はこんな感じ

        <ul id="gallery">
            <li>
                <a href="#"><img src="images/gallery_img2s.jpg" alt="gallery thumbnail" /><span><img src="images/gallery_img2.jpg" alt="gallery image" /></span></a>
            </li>
            <li>
                <a href="#"><img src="images/gallery_img3s.jpg" alt="gallery thumbnail" /><span><img src="images/gallery_img3.jpg" alt="gallery image" /></span></a>
            </li>
            <li>
                <a href="#"><img src="images/gallery_img4s.jpg" alt="gallery thumbnail" /><span><img src="images/gallery_img4.jpg" alt="gallery image" /></span></a>
            </li>
            <li>
                <a href="#"><img src="images/gallery_img5s.jpg" alt="gallery thumbnail" /><span><img src="images/gallery_img5.jpg" alt="gallery image" /></span></a>
            </li>
        </ul>

listの中に大きい画像と小さい画像が同時に格納されています。
大きい画像がで囲われているのがポイントです。

CSS側 はこんなんです。

ul#gallery, ul#gallery li{
	margin:0;
	padding:0;
	list-style:none;
}
ul#gallery{
	background:url(../images/gallery_bg.jpg) no-repeat right top;
	width:690px;
	min-height:300px;
	height:auto !important;
	height:100%;
	position:relative;
}
ul#gallery li{
	margin-right:190px;
	margin-bottom:10px;
	zoom:1;
}
ul#gallery li a span{
	display:none;
}
ul#gallery li a:hover{
	background:transparent none repeat scroll 0 0;
	z-index:100;
}
ul#gallery li a:hover span{
	display:block;
	position:absolute;
	width:500px;
	min-height:300px;
	height:auto !important;
	height:100%;
	top:0;
	left:190px;
}

左にサムネイル。右にプレビュー画像のレイアウトになります。
レイアウト関係はpositonで簡単に動かせると思うので、サムネイルを下やら上やら、色々使ってみようと思います。

このテクニックも参考サイトがあるんですけど、
参考にさせてもらったサイト様で出ていたソースそのままだと、IE6がうまく動きませんでした。
どうもdisplayプロパティの順番だとかで、IE6だけマウスオーバーが効かなかったりしたっぽいのですが、
理由はなんだかわかりません。

関連する投稿

• [CSS] dtとddをfloatで横並びをすると、dlの背景が消えてしまうバグの回避方法
• [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.3 （背景画像編）
• [Cording] IEでmin-heightやmax-widthを使えるようにするJavascript
• [Cording] IE6用に透過pngを使用する場所によってのタイプ別JS　Vol.1

下記のようなリストで作ったナビゲーションがあったとします。

<ul class="pageNavi">
  <li>Page-1-</li>
  <li>Page-2-</li>
  <li>Page-3-</li>
  <li>Page-4-</li>
</ul>

CSSにこれを付け加えちゃいましょう。

.pageNavi{
  position:relative;
  overflow:hidden;
}
.pageNavi ul{
  position: relative;
  left: 50%;
  float: left;
}
.pageNavi ul li {
  position: relative;
  left: -50%;
  float: left;
}

pageNaviのクラスにpositionかけておくのはIE6対策らしいです。
これですっきり、中央配置！！

————————-　09/11/18　追記　————————-

上記の方法ではまったくうまくいきませんね・・・がせっぽくなってすみません。
IEでもうまくいく方法を追記させてもらいます。

<div  class="pageNavi">
<ul>
  <li>Page-1-</li>
  <li>Page-2-</li>
  <li>Page-3-</li>
  <li>Page-4-</li>
</ul>
</div>

CSSはこうです。

.pageNavi{
  position:relative;
  overflow:hidden;
  width:100%;
}
.pageNavi ul{
  position: relative;
  left: 50%;
  float: left;
}
.pageNavi ul li {
  position: relative;
  right:50%;
  float: left;
}

ulタグをdivで囲って、その囲ったものに対して各々position指定です。
囲った本体（上記サンプルではクラスの【pageNavi】）にはwidthの100%を指定しておいて、左と右で相殺させます。
別途ulなどには装飾を施してくださいね。

上の方法は業務で使いましたので、大丈夫のはず・・・・です・・・・

関連する投稿

• [CSS] リスト「li」を使ったデザインTIPS
• [Cording] Cssだけでディスプレイの真ん中に表示するTips
• [Photoshop]　WEB用画像を書き出す際png8でギザギザを減らす方法
• [CSS]　タイトルの並び、右寄せでテキストなどを配置する方法
• [CSS] 画像置換を使わないマウスオーバーテクニック　position指定編

こんな少しの工だけでできてしまうなんて・・・・・あんなに悩んでいたのに・・・・

では実装方法です。

HTML側

<div id="links">
    <ul>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
      <li><a href="#" title="Text">Link Heading One
        <em>Description of link.</em>
        <span>Date posted</span></a></li>
    </ul>
  </div>

CSS側

#links ul {
        list-style-type: none;
        width: 400px;
} 

#links li {
        border: 1px dotted #999;
        border-width: 1px 0;
        margin: 5px 0;
}

#links li a {
        color: #990000;
        display: block;
        font: bold 120% Arial, Helvetica, sans-serif;
        padding: 5px;
        text-decoration: none;
}

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}

#links li a:hover {
        background: #ffffcc;
}

#links a em {
        color: #333;
        display: block;
        font: normal 85% Verdana, Helvetica, sans-serif;
        line-height: 125%;
}

#links a span {
        color: #125F15;
        font: normal 70% Verdana, Helvetica, sans-serif;
        line-height: 150%;
}

IE用のハックが入っていますね

 * html #links li a {  /* make hover effect work in IE */
	width: 400px;
}

でもこれだけ。これだけで平気なの？？って感じですが、元ネタサイトのSmiley Cat Web Design様でDEMOを用意してくれています。
IEでアクセスしてみましょう～

見事実装できています！！
タグもきれいだし、これは実際使っていけそうです！！

関連する投稿

• [Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい！
• [CSS]　タイトルの並び、右寄せでテキストなどを配置する方法
• [CSS] リスト「li」を使ったデザインTIPS
• [CSS] 画像置換を使わないマウスオーバーテクニック　position指定編
• [CSS] floatで一列にしたリスト等を中央配置にする方法

CSSのみでボックスをページの真ん中に設置するポジショニング方法[CSS]

いたって簡単！！
ボックス指定で一旦left:50%指定を入れてあげて、
でもこれだとボックスの右端からの真ん中を選びに行ってしまって、ボックス中央からの50%になっていないので、さらに、
このボックスの中にleft:50%を指定する別のボックスを入れ子にする。

実際のソース見て、
「ああ、そうだよね。そりゃそうだ」と気づくも、言われるまでわからない・・・・切ないです。

body {background:#eee;}
#Wrapper,
#Container {
	height: 500px;
	width: 600px;
}
#Wrapper {
	bottom: 50%;
	right: 50%;
	position: absolute;
}
#Container {
	left: 50%;
	position: relative;
	top: 50%;
	background:#fff;
}

<div id="Wrapper">
  <div id="Container">
    <p>ココに内容を書いていきます。</p>
  </div>
</div>

関連する投稿

• [CSS]　タイトルの並び、右寄せでテキストなどを配置する方法
• [CSS] リスト「li」を使ったデザインTIPS
• [CSS] 画像置換を使わないマウスオーバーテクニック　position指定編
• [CSS] floatで一列にしたリスト等を中央配置にする方法
• [Cording] Divなどで囲ったボックス内すべてをリンク先として指定したい！

CSSの組み方によってはかなり使いどころがたくさんのタグですよね？

いままで私が使ったTipsをこの際まとめたいと思います。

１．目次のような表現

以下のようにHTML内でリストを設定。（CSS側も同時に変えるならもちろんolでもOKですよ）

<div id="Menu">
  <ul>
    <li><a href="#"><strong>最近の記事１</strong><em>2009/06/01</em></a></li>
    <li><a href="#"><strong>最近の記事２</strong><em>2009/06/01</em></a></li>
    <li><a href="#"><strong>最近の記事３</strong><em>2009/06/01</em></a></li>
  </ul>
</div>

以下のようにCSSを設定。

ポイントは文字の行間設定とbackground-imageのポジションとfloatの使いどころかな？？

#Menu ul{
 margin:0;
 padding:0;
}
#Menu ul li{
 clear:both;
 list-style:none;
 text-align:right;
 background:url(../images/line.gif) repeat-x 0 0.6em;
 margin:0 0 5px;
 padding:0;
 line-height:1.2em;
 font-size:1em;
}
#Menu ul li a{
 display:block;
 text-decoration:none;
}
#Menu ul li strong{
 float:left;
 font-weight:normal;
 background:#fff;
 display:block;
 padding-right:5px;
}
#Menu ul li em{
 font-style:normal;
 background:#fff;
 padding-left:5px;
}

私的には、難しく考え過ぎるとどんどんはまっていくタイプのTipsですかね。

２．backgroundで指定したlistイメージだけが左に飛び出る

まずHTML側

<div class="Navi">
  <ul>
    <li><a href="#">test 2段目</a></li>
    <li><a href="#">test</a></li>
    <li><a href="#">test</a></li>
  </ul>
</div>

そうしてCSS側

.Navi ul{
 margin:0;
 padding:0;
}
.Navi ul li{
 list-style:none;
 margin:0 0 5px 0;
 padding:0 0 5px 15px;
 text-indent:-15px;
 background:url(../images/line.gif) repeat-x bottom;
}
.Navi ul li a{
 text-decoration:none;
 background:url(../images/ul_li.jpg) no-repeat 0 3px;
 padding-left:15px;
}

3.リストでボタンを表現

この使い方がまぁ一番多いんでしょうけど、枠一杯までリンク範囲を広げる手っ取り早い方法です。

HTML側

<ul class="menuLink">
  <li><a href="#">Top</a></li>
  <li><a href="#">Menu</a></li>
  <li><a href="#">Access</a></li>
</ul>

続いてCSS側。
ポイントはaタグでのline-heightと枠の大きさを決めるheightのpxを同じにすること。これだけだったんだねぇ・・・って感じのTipsです。

ul.menuLink li a{
	display:block;
	line-height:30px;
	height:30px;
	text-decoration:none;
}
ul.menuLink li a:hover{
	background:#F39803;
	color:#fff;
}

関連する投稿

• [CSS] floatで一列にしたリスト等を中央配置にする方法
• [Cording] Cssだけでディスプレイの真ん中に表示するTips
• [Photoshop]　WEB用画像を書き出す際png8でギザギザを減らす方法
• [CSS]　タイトルの並び、右寄せでテキストなどを配置する方法
• [CSS] 画像置換を使わないマウスオーバーテクニック　position指定編