CSSテンプレート

floatした画像にborderで枠をつけた時に出る隙間を無くすには？

自分用メモ。

Firefoxなどで見た時に、画像を回り込ませ、border指定をしてpaddingで余白を設けた時に、下部分だけ指定した値と違って、ちょっと大きくなってしまう事があります。

そんな時に役立つのが下記のスタイル。

img {
	vertical-align:bottom;
}

コレで指定した通りに表示されます。

今回のエントリーもちゃんとサンプル用意して実際の画面を出そうと思ったのに再現出来ず...なんでだろう。

bodyに設定しておくと便利な3つのポイントとおまけ

CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。

むしろこのサイトの方向性的に有った方が便利だよなーと。
書くきっかけを頂き、感謝いたします。

ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。

最初にbodyに指定しておくと便利だと思う3つを。

body {
	background:#FFF url(../img/share/bg.gif) no-repeat left top;
	font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif;
	font-size:80%;
}

じゃあ、詳細について色々書きまする。

2/12 21：45頃にチョット修正入ってます。

Firefoxのスクロールバーの有無でセンタリング位置がズレる件を解消

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

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

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

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

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

html {
	overflow-y:scroll;
}

簡単っすね。

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

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

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

パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種

普通のエントリー久々な気がする今日この頃。

今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。

サンプルの前に

#main .entryBody #topicPath_01
とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。

見出しの横などにボタンを配置

<$MTEntryTitle$>のイメージ結構見かける、見出しなどの横に配置されているボタン。

ウチのサイトでも、NEW ENTRYの横にRSSボタンをつけてます。

他に、続きを読むやMoreなんかが見出しの横にボタンやテキストとして配置されているケースが多いと思います。

このデザインを実現する際に、floatかpositionのどちらでも可能ですが、この場合はpositionの方が楽な上に柔軟に対応できる（と思う）のでオススメ。

画像の周りなどに1pxの破線を引く

画像の周りなどに1pxの破線を引く場合に、borderを使う事があると思います。
borderで破線を引くと、ブラウザにより表示が異なり何か気分が悪いですよね？

その際、画像を使えばOKなんですが、サイズが固定なら画像でも簡単に枠が作れますが、画像サイズがバラバラで、かつ同じ枠線を引くとなるとちょっと面倒な感じがします。

ソコで、結構簡単な方法で解決できるぷちテクニックのご紹介。

背景の真ん中にテキストを配置

↓こんな画像があったとして。
背景の真ん中にテキストを配置

コノ中にテキストを入れる場合、真ん中に合わせるのがビミョーに面倒だったりします、、、よね？
そんな時にチョットだけ便利なテクニック。

何かのタイトル

こんな感じで真ん中に来ます。
上のサンプルで指定しているスタイルはこちら↓

 margin:0;
 padding:0;
 border-left:0;
 background:url(bg_hearts.gif) no-repeat center top;
 text-align:center;
 line-height:80px;

今回、横幅300pxの縦80pxの画像を背景にしているんですが、その真ん中に持ってくるために、line-heightを画像の縦幅と同じにしてます。
コレでイチイチpaddingで調整しなくてもキレイに真ん中に来るって寸法です。

今回のような、縦幅固定の画像を背景にしようする場合とかだと中々便利に使えて良いです。
ただしコレには大きな欠点があって、複数行には対応出来ません。

メニューなど、テキストが基本的に変更されない時など、使えると思います。
最近仕事の方でチョコチョコ使ってたりします。

・・・結構修正が入って、組みなおしって落ちが多いんですけどね...

dlのdt dd を横並びに

何かと便利な定義リスト。
用語集や、Q&Aなど使いどころは沢山あるけれど、同じ行にしたいと思うことがしばしば有るかと思います。
しかし、中々思うように横並びが出来ないのが定義リスト。

今回はそんな厄介な定義リストのサンプルを作ってみました。

↑上に行くよ