Kinopyo Blog

プログラマとしてRuby, Rails, iPhone, iPad,Macなどなどと向き合う日々のログポース

Posts Tagged ‘CSS’

開発者ブログに便利なキーワードや言語シンタックスなどを強調するCSS

2011年10月18日

開発者のブログではよく各言語に関する変数名やメソッド名などのようなキーワードを強調して表示する必要がありますね。「AV女優.com 開発者ブログ」を見るとき「これだっ!」と思ったCSSをから借りました、@sunomaruさんに感謝です!

CSS


em {

    font-weight: normal;

    font-style: normal;

    white-space: nowrap;

    border: 1px solid #ccc;

    padding: 0.1em 0.6em;

    background: #f9f9f9;

    border-radius: 3px;

    -webkit-border-radius: 3px;

    -moz-border-radius: 3px;

}

DEMO

emタグで囲めばいいですよ〜どうでしょう〜!

iPhone safari(webkit-base browser)のcheckboxのサイズを調整

2011年09月30日

Webkit-baseのブラウザ(Safari, Google Chrome)に適用します。

普通のcheckboxはiphoneのようなスマートフォンで見るときとても小さいです。checkboxはcssでheightやwidthを指定しても効かないためちょっとしかトリックが必要です。

input[type=checkbox] {
  -webkit-transform: scale(2,2);
}
view raw gistfile1.css This Gist brought to you by GitHub.

実機ではこんなふうになります。2.0, 1.5, 1.0の3つのサンプルです。

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

2010年05月08日

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

Googleの各アイコン

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

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

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

background-position: -117px -117px;


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

それが狙いですね。


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

background-position-スタイルシートリファレンス

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

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

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