[B! background] go_uetsuharaのブックマーク

Osvaldas Valutis is a front-end developer

Osvaldas Valutis is a frontend developer making websites since 2003

go_uetsuhara 2013/07/11

リンク

background-size－CSS3リファレンス

background-sizeプロパティは、背景画像のサイズを指定する際に使用します。長さやパーセンテージで指定する場合、値を２つ記述すると、それぞれ記述した順に幅と高さを表します。１つだけ指定した場合には、もう１つはautoと解釈されます。負の値を指定することはできません。 ■値 auto 自動的に算出される（初期値） contain 縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する cover 縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する長さ背景画像の幅・高さを指定するパーセンテージ背景領域に対する背景画像の幅・高さのパーセンテージを指定する CSSソースは外部ファイル（sample.css）に記述 p.sample1 { width:300px; height:80px; padding:15px; bo

go_uetsuhara 2012/06/05

リンク

【スマホ用ページ】低解像度、高解像度端末のどちらでもくっきり綺麗に表示しつつ、幅ぴったりにする HTML テンプレート。

こんにちは、ウェブ開発の林です。スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き）こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。追記：ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--

go_uetsuhara 2012/06/05

リンク

MdN Design｜総合情報サイト

iPhone 4はiPhone 3GSと同じ画面サイズのまま、2倍の解像度となった。 Androidでは機種により異なるが、1.5倍のものが多い。同じ画面サイズで表示できるピクセル数が増えたため、細かい文字もくっきりとして読みやすくなった。しかし、コンテンツの1pxをデバイス上の1pxとしてそのまま表示すると、全体的に小さく表示されてしまうことになる。そこで、WebKitをベースとしたブラウザには「devicePixelRatio」というプロパティが用意されている【1】。 devicePixelRatioとは、直訳すると「デバイスのピクセル比率」で、コンテンツの1pxを実際のデバイス上で何pxとして描画するかを示すものである。【1】スマートフォンのdevicePixelRatioと解像度の一例

go_uetsuhara 2012/06/05

リンク

jQueryでマウスオーバーすると全体的にピカーンってなるやつ

jQueryでマウスオーバーすると全体的にピカーンってなるやつマウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。投稿日2011年10月11日更新日2011年10月12日準備 htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。 html <p class="button"><a href="#">ボタン</a></p> その他マウスオーバーしたときの大きめの画像を用意します。ここでは「bg.jpg」という名前で1000×1000の画像を使用します。 bodyのbackgroundを指定する方法一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。 jQueryでimageとpositionの設定をしますので、cssでその他の設定をして