Igaloglog

画像をそのまま<img />タグで入れて、それに続けてテキストを入れた場合、通常は以下の図のように表示されます。

これはこれでありだと思いますが、例えばこれを縦方向で中央揃えしたいとします。
その場合は、CSSでvertical-alignプロパティを使用します。

img {
	vertical-align: middle;
}

これで縦方向中央寄せです。

これはこれで完成です。しかし、vertical-alignプロパティって使える値が多いんですよ。8つもある。多いよ。
この、vertical-alignプロパティって使える値が多くて訳わからなくなるんですよ！という心の住人のキレ気味の文句を受けて、備忘録的に一覧図を置いておくことにします。

ちなみに、vertical-alignプロパティは、インライン要素とテーブルセルにしか使えませんのでご注意あれ。
続きを読む »

つまり、こういうことです。

普通にテーブルがあって、マウスが乗っかった行の背景色が変わります。
今どこ見てるのかっていうのがわかりやすくていいですな。
長ーい表を見ているうちにゲシュタルト崩壊起こさないためにも、こういう細かい配慮は欲しいところです。

んで、こういう動作的なものは、ajaxとかjavascriptとかそういう小難しいプログラムを使ってやってるんだと思ってましたが、実はCSSの:hoverでやっているらしく。今頃知りました。
続きを読む »

要は、フッターなどでこういうデザインを実現したいときってことです。

text自体は左寄せで、p要素は右寄せ。そいでそのp要素の左側に画像を背景として配置する、ということです。

こいつのHTMLはこうなっています。

<div id="footer">
<p>仙台で働くウェブ屋さんの技術メモ<br />
Copyright (C) 2008 igarashi of MagicalRemix&Co.</p>
<!--/footer--></div>

span や div を使ってみようかとも思いましたが、装飾のためにHTMLに記述増やすのは本末転倒じゃね？と脳内神から神託が下ったので、HTMLはそのままでCSSでどうにかしました。
その分ちょいと迷いましたが、まぁ、わりとあっさり解決できたほうなんじゃないのかな？
続きを読む »