[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
背景画像をブラウザいっぱいに表示するスタイルシートのシンプルなテクニックを紹介します。 デスクトップだけでなく、スマフォやタブレットにも対応、しかもたった一行なのでスニペットに加えておくと便利です。 デモを幅480pxで表示 コンセプト 「background-size」をビューポート全体をカバーするために使う 「background-size」はレスポンシブ対応にする時に非常に有効なプロパティです。値に「cover」を使うことで、背景画像を相対的に自動で調整します。 ※IE8以下はサポートしていませんが、後述のスクリプトを使用するとbackground-sizeが機能するようになります。 「Media Queries」をスマフォ対策として使う スマフォなどの小さいサイズのスクリーン用にMedia Queriesを使って、小さいサイズの画像ファイルを使うことができます。もっともこれはオプシ
注目すべき極上アート。日本アニメの背景をひたすら愛でるTumblrが登場
注目すべき極上アート。日本アニメの背景をひたすら愛でるTumblrが登場2013.05.02 18:006,380 背景が｢背景｣と呼ばれるのには理由があります。それは、多くのシーンにおいてキャラクターよりフォーカスが当たりづらいから。それならば...と立ち上がったTumblrが｢Anime Backgrounds｣。このサイトは｢最高のアートとは、ときにキャラクターの背後から発掘されるのだ｣ということを見事に証明しています。 私たちがアニメのストーリーに気を取られている間も、そこにたたずむ背景たち。｢Anime Backgrounds｣ではその美しい佇まいが様々な作品からピックアップされています。このTumblrを運営する匿名クリエイターさんは｢西洋のアニメに特化したブログは山ほどある気がする。だから、このブログは日本のアニメや西洋以外のアニメを中心に紹介していく予定｣とのこと。 実際に
背景いっぱいに画像を表示、スライドショー化にも対応した軽量なjQueryプラグイン・BACKSTRETCH
同じようなの沢山あるのですが、 軽量って言葉に弱い。背景一杯 に画像を表示、スライドショー 化も可能なjQueryプラグインで す。圧縮版なら2KBほどですの で導入しやすいですね。 背景一杯に表示出来るやつでスライドショーにも対応で軽量です。圧縮して2KBくらい。しないで5KBくらいです。 似たようなのは一杯あるので他にも探してみてください。個人的にはこれはカスタマイズしやすそうだったのでちょっと使ってみようかなと思います。 IE7でもOK。6だとfixedが効かないので、ちょっとアレです。 コード<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.backstretch.min.js"></script> <script>
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
