[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
複数の画像を一つにまとめてCSSで表示·SmartSprites MOONGIFT
Webサイトでは一度の表示であっても、複数のコネクションで様々なデータが送信される。JavaScript、CSS、画像、Flashなどなど。コネクションが増えればそれだけ表示に時間がかかり、ユーザビリティは悪くなる。 コマンドラインで実行して連結する GoogleやAmazonでは回避策として複数の画像を一つにまとめ、CSSを使ってずらして表示する手法が使われている。それを実現するのがSmartSpritesだ。 今回紹介するオープンソース・ソフトウェアはSmartSprites、画像を連結してコネクションを改善するライブラリだ。 SmartSpritesはJava製のソフトウェアで、別途PHP版も提供されている。ルートディレクトリを指定すると、そこ以下にある画像ファイルを探索し、それらを結合してくれる。同時にそれを元のように表示するためのCSSも生成される。後は画像をそのまま表示する代わ
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
テキストをハイライトすると絵が出てくる！ - sta la sta
※Firefox（推奨）またはSafariでご覧ください。(未確認ですがFlockでも良いようです。) via http://metaatem.net/highlite/ まずは以下のテキストをマウスでハイライトさせてみてください。（あるいはCtrl+Aでテキスト全選択ですね。） One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches int
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
