Kinopyo's Blog

I love this game.

Posts Tagged ‘CSS’

各画像を一つにまとめてbackground-positionで指定するのは?

2010年05月08日

まずGoogleが実際使っている画像ファイルを見てみましょう。

Googleの各アイコン

いろんな画像、アイコンが混じっていますね。

そして実際使うときはCSSのbackground-positionで表示するモノを指定しているようです。

例えば検索結果の星マークのCSSを見ると

background-position: -117px -117px;


Webサーバとのコネクションが1回で済むので、

それが狙いですね。


background-positionに関しての説明は:

http://www.htmq.com/style/background-position.shtml

ちなみにこういることをやってくれるライブラリもあるようです。

使ったことはまだないですけど。

http://csssprites.org/

HTML Formの間隔(余白)をmarginで調整

2009年11月03日

目的

f:id:kinopyo:20091103224149g:image

f:id:kinopyo:20091103224150g:image

f:id:kinopyo:20091103224151g:image

見たの通りform前後の余白を消しました。

これはフォームがテーブルなどを跨がる場合に

レイアウトを調整するのに非常に役に立ちます。

方法

formのmarginを0pxに設定します。

<form style="margin:0px;">

またmargin-topmargin-bottomでなどで詳しく指定できます。

マイナス値も入力でき、さらに間隔を縮むめることができます。

参考となったサイト:http://www.1uphp.com/con1/form/form1style.html

Get Adobe Flash playerPlugin by wpburn.com wordpress themes