articles

2010 年 8 月 5 日

HTML CSS イメージ要素の隙間について

CATEGORYCSSHTML  TAG 1:45 PM

イメージ要素の隙間についてはいつも

#sample img {
 display:block;
}

として回避していましたが、

#saple img {
  vertical-align:bottom;
  height:100px;
}

とするやり方もあるようです。

heightは無理にいれなくてもよさそうです。
imgを強引にblock要素にするよりは素直っぽいです。

これからはvertical-align:bottom;を使っていきます。

勉強になりました。

2010 年 3 月 4 日

CSS3 テキストの選択色を指定する。これもcss3か!

CATEGORYCSS  TAG 12:16 PM

とあるサイトで、選択したテキストの背景がサイトのデザインと
マッチしていて素晴らしいなと感じました。

ソースを見て行くと

::selection{}
::-moz-selection {}

とありました。
これで指定するんですね。

Mozilla の独自拡張は使うべきではないらしいのですが。
http://www.mozilla.gr.jp/standards/webtips0001.html#c1

2009 年 6 月 5 日

cssのborderショートハンド

CATEGORYCSS  TAG 12:06 AM

ホントに知らない事って多いんですね。

/*ボーダーの幅設定*/
border-width: 2px 3px 1px 2px;
border-style:dotted solid solid dotted;
border-color: red #999 red #0c5633;

/*こんな書き方も*/
border-right-color: #999;
border-bottom-color: red;
border-left-color: #0c5633;

2009 年 5 月 24 日

!important

CATEGORYCSS  TAG 12:20 AM

Style sheet designers can increase the weights of their declarations:

H1 { color: black ! important; background: white ! important }
P  { font-size: 12pt ! important; font-style: italic }

In the example above, the first three declarations have increased weight, while the last declaration has normal weight.

A reader rule with an important declaration will override an author rule with a normal declaration. An author rule with an important declaration will override a reader rule with an important declaration.

http://www.w3.org/TR/REC-CSS1/#important

要するに、! importantがある属性は、後からのオーバーライドを無視します
といった内容だと。

syntaxhighlighterのCSSを変更しようと試みたときにふと気づきました。
!importantってなんじゃらほいと。
よくみるのですが、CSSをずいぶんおざなりにしていたせいでしょうか。
すっかり存じ上げませんでした。