2007年2月

dtの方が高さが有る時のdt dd を横並び

久々に定義リストを横並びにしたら、IE7で上手くいかず、ちょっと苦戦したのでメモめもMEMO。

おそらく、ddがテキスト量などで高さがdtより多い場合は問題が無いんだろうけど、dtの方が高さがある場合、IE7だと上手い具合に回り込みが解決されない（っぽい

dtの方が高さがある場合。っていうのは今回の場合は画像にdtが来て、ソレを定義付ける説明がちょろっとあるようなイメージ。

ニコニコ動画のgifアニ画像一覧が面白い+ウチのサイト更新情報

  • 雑記

ニコニコ動画のロゴの横っちょにあったランダムボタン。
アレ、センスいいよなーとか思ってたんすけど、その素敵さに魅了されたのか、画像を集めてるサイトを発見。

ネットのサラダボウル: ニコニコ動画のアニメーションgifを集めてみました

と、コレだけじゃ寂しいのでココ最近（年明けくらいから？）のウチの更新情報でも。

フッターとかの区切り『｜』のサンプル4種

フッター部分のメニューなどを区切る際のサンプルを適当に。

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>

んでは、いってみますか。

画像が消えたり、繰り返さなかったり系が解決しそうなこと

たぶんこのサイトの何処かを探せば、IE以外で背景が繰り返さないとか、IEだけ文字が消えちゃうとかって類いについて書いてあるはずなんすが、ボク自身も何処に有るのか分からないので、適当に有りがちな部分をまとめてみました。

取りあえず↓こんな状態よくあるかと。

SQ Life 木精占い アタイの守護樹なの♥

上記で指定してるスタイルは下記。

#main .entryBody #sample070219_01 {
	width:200px;
	margin-bottom:1em;
	padding:5px;
	background:#FFF;
	border:1px solid #999;
}
#main .entryBody #sample070219_01 img {
	margin-right:10px;
	float:left;
}

コレはIEだとちゃんと表示されますが、floatの解釈が正しいブラウザでは意図した状態とは違うはずです。（理解している人はコレが意図した状態ですが）

ということで、そういう系を解決してきます。

画像とか用意するの面倒なんで、IE6とFirefox2辺りで見比べていただけたらと思います。

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%とかでもバーが出っぱなしにはなるけど、びみょーに出てはいけないバーまで出てしまう。

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

ボクにとってのCSSの利点

  • 雑記

ネタに困っているボクは会社で「何かネタないっすかー」ってたずねていたら、「hirasawaの視点から見たCSSの利点を書いてよ」って言われたので書いちゃいます。

ちなみに書いてよ。って言ってた人はこの人↓
http://www.seo-service.net/seo-blog/

社内のSEO、SEMで右に出る者は居ないんじゃないかって人です。

と、いう事で追記にてダラダラと。
（実際かなりどーでもいい事ダラダラ書いてますんで。。。）

↑上に行くよ