macaroni-works notes» CSS http://blog.macaroniworks.net Just another WordPress weblog Wed, 16 Feb 2011 07:27:11 +0000 ja hourly 1 http://wordpress.org/?v=3.0.4 HTML CSS イメージ要素の隙間について http://blog.macaroniworks.net/2010/08/html-css-%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8%e8%a6%81%e7%b4%a0%e3%81%ae%e9%9a%99%e9%96%93%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/ http://blog.macaroniworks.net/2010/08/html-css-%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8%e8%a6%81%e7%b4%a0%e3%81%ae%e9%9a%99%e9%96%93%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#comments Thu, 05 Aug 2010 04:45:54 +0000 admin http://blog.macaroniworks.net/?p=1377 イメージ要素の隙間についてはいつも

#sample img {
 display:block;
}

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

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

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

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

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

勉強になりました。

]]> http://blog.macaroniworks.net/2010/08/html-css-%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8%e8%a6%81%e7%b4%a0%e3%81%ae%e9%9a%99%e9%96%93%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/feed/ 0 CSS 0に単位はいらいない！？ http://blog.macaroniworks.net/2010/06/css-0%e3%81%ab%e5%8d%98%e4%bd%8d%e3%81%af%e3%81%84%e3%82%89%e3%81%84%e3%81%aa%e3%81%84%ef%bc%81%ef%bc%9f/ http://blog.macaroniworks.net/2010/06/css-0%e3%81%ab%e5%8d%98%e4%bd%8d%e3%81%af%e3%81%84%e3%82%89%e3%81%84%e3%81%aa%e3%81%84%ef%bc%81%ef%bc%9f/#comments Wed, 23 Jun 2010 02:58:59 +0000 admin http://blog.macaroniworks.net/?p=1343 0pxなどの場合は、単位を省いてもいいようです。
ずっとぼんやりしてましたが、今日からつけません。

p {
 margin : 0;
 padding : 0;
}
]]> http://blog.macaroniworks.net/2010/06/css-0%e3%81%ab%e5%8d%98%e4%bd%8d%e3%81%af%e3%81%84%e3%82%89%e3%81%84%e3%81%aa%e3%81%84%ef%bc%81%ef%bc%9f/feed/ 0 CSS IEのデフォルトスタイル http://blog.macaroniworks.net/2010/03/css-ie%e3%81%ae%e3%83%87%e3%83%95%e3%82%a9%e3%83%ab%e3%83%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab/ http://blog.macaroniworks.net/2010/03/css-ie%e3%81%ae%e3%83%87%e3%83%95%e3%82%a9%e3%83%ab%e3%83%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab/#comments Wed, 31 Mar 2010 02:48:33 +0000 admin http://blog.macaroniworks.net/?p=1257 http://www.iecss.com/

なにかのエントリーで見ましたが、IEのデフォルトのスタイルがまとめられていました。
これといって役立ちそうなところはないですが、とりあえず。

]]> http://blog.macaroniworks.net/2010/03/css-ie%e3%81%ae%e3%83%87%e3%83%95%e3%82%a9%e3%83%ab%e3%83%88%e3%82%b9%e3%82%bf%e3%82%a4%e3%83%ab/feed/ 0 CSS3 テキストの選択色を指定する。これもcss3か！ http://blog.macaroniworks.net/2010/03/css3-%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%ae%e9%81%b8%e6%8a%9e%e8%89%b2%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e3%80%82%e3%81%93%e3%82%8c%e3%82%82css3%e3%81%8b%ef%bc%81/ http://blog.macaroniworks.net/2010/03/css3-%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%ae%e9%81%b8%e6%8a%9e%e8%89%b2%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e3%80%82%e3%81%93%e3%82%8c%e3%82%82css3%e3%81%8b%ef%bc%81/#comments Thu, 04 Mar 2010 03:16:09 +0000 admin http://blog.macaroniworks.net/?p=1222 とあるサイトで、選択したテキストの背景がサイトのデザインと
マッチしていて素晴らしいなと感じました。

ソースを見て行くと

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

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

Mozilla の独自拡張は使うべきではないらしいのですが。

http://www.mozilla.gr.jp/standards/webtips0001.html#c1

]]> http://blog.macaroniworks.net/2010/03/css3-%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%81%ae%e9%81%b8%e6%8a%9e%e8%89%b2%e3%82%92%e6%8c%87%e5%ae%9a%e3%81%99%e3%82%8b%e3%80%82%e3%81%93%e3%82%8c%e3%82%82css3%e3%81%8b%ef%bc%81/feed/ 0 cssのborderショートハンド http://blog.macaroniworks.net/2009/06/css%e3%81%aeborder%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%83%8f%e3%83%b3%e3%83%89/ http://blog.macaroniworks.net/2009/06/css%e3%81%aeborder%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%83%8f%e3%83%b3%e3%83%89/#comments Thu, 04 Jun 2009 15:06:57 +0000 admin http://blog.macaroniworks.net/?p=358 ホントに知らない事って多いんですね。

/*ボーダーの幅設定*/
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;
]]> http://blog.macaroniworks.net/2009/06/css%e3%81%aeborder%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%83%8f%e3%83%b3%e3%83%89/feed/ 0 !important http://blog.macaroniworks.net/2009/05/important/ http://blog.macaroniworks.net/2009/05/important/#comments Sat, 23 May 2009 15:20:15 +0000 admin http://blog.macaroniworks.net/?p=239

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をずいぶんおざなりにしていたせいでしょうか。
すっかり存じ上げませんでした。

]]> http://blog.macaroniworks.net/2009/05/important/feed/ 0