Kinopyo's Blog

I love this game.

Archive for the ‘HTML’ Category

各画像を一つにまとめて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/

IE6でSSL(https)に接続する時、src属性なしのiframeを使うとセキュリティの警告が出る

2010年04月27日

現象

IE6を使ってSSL(https)経由で接続する時に以下の警告が出るなら

iframeのsrc属性をまずチェックしてください。

security-info


このページにはセキュリティで保護されている項目と保護されていない項目が含まれています。

ダメな書き方

<iframe />
<iframe src="" />

解決策

src属性にちゃんと値を設定するか、javascriptでfalseを指定する

<iframe src="/dummy.html" />
<iframe srec="javascript:false" />

存在しないファイルを指定するとサーバ側のログにエラーが出るかもしれないので、

設定する場合は実際存在するファイルを設定してください。

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