背景を重ねたり、画像文字に使用したりと、何かと便利な透過PNGですが、実はIE6には対応していません。そこで今回は、CSSのみを使って透過PNGをIE6で表示させる方法をご紹介します。 HTML
最近のトレンドの一つでもある背景画像をブラウザの枠いっぱいに表示する実装方法はたくさんあります。その中から、理にかなった最新のテクニックや、より多くのブラウザに対応させるテクニックを紹介します。 Perfect Full Page Background Image [ad#ad-2] 下記は各ポイントを意訳したものです。 各デモはページ下部のDownload Files」で、まとめてダウンロードできます。 背景画像をブラウザの枠いっぱいに表示するテクニックとは CSS3を使ったテクニック CSSだけで実装するテクニック：その1 CSSだけで実装するテクニック：その2 jQueryを使ったテクニック 背景画像をブラウザの枠いっぱいに表示するテクニックとは 前提として、下記のポイントが挙げられます。 画像でページをいっぱいにします。 空きは無いようにします。 画像のサイズは必要があれば調整しま
Building a 3D Cube With HTML5 and CSS3 デモ [ad#ad-2] 画像はdiv要素で実装されているため、CSSオフ時は上のキャプチャの左のように表示されます。 使用している画像はサイズ100x100の3枚で、下記のようになります。 画像のキャプチャ 実装は、下記のようになります。 HTML HTMLには、HTML5を使用しています。 <div class="cube"> <div class="face top"><img src="img/WPN-P.png" width="100" height="100"></div> <div class="face left"><img src="img/WPN-W.png" width="100" height="100"></div> <div class="face right"><img src="i
画像を大量に配置するECサイトなどに便利そうな、スタイルシートのテクニックをCSSplayから紹介します。 CSS play - F.a.S.T - Fit and Shrink Technique デモ サイズはばらばらで、しかもサイズの指定をおこなっていない画像を一定の幅と高さのボックスにアスペクト比を維持したまま真ん中に表示します。 上記のキャプチャはスケールを変えているので、ぜひ元サイトのデモをご確認ください。 対応ブラウザはIE7/8, Fx, Op, Safari(PC), Chromeなど主要なブラウザのほとんどで動作します。 IE6では画像の元サイズで表示されてしまい、しかもボックスの真ん中には表示されない、とのことです。
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
ちょっとしたトリックを使用して、テキストを画像の下に回り込ませないようにするスタイルシートをNO Margin No Errorから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <div class="content"> <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" /> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum
コンテンツボックスに影などの背景を付けたい場合、bodyにbackground-imageをcenterに指定して表示させると思います。しかし、この方法ではブラウザの大きさを変えたりすると、背景が1pxずれて表示されちゃうことがあります。それを回避するための方法。 文章じゃわかりにくいけど、IEなどブラウザの大きさを変更するとこんな状態になったりします。 これを回避するには、コンテンツボックスを背景用のdivで囲む方法がありますが、ただ背景を表示させる為だけに無駄なdivで囲むのはどうだろなーということで以下の方法を使用します。 まず、解決策としてbodyに [padding-left:1px] を指定して、1pxずれたところを修正。しかし、これでは正常に見れていたFirefoxなどでズレる恐れがあるので、CSSハックでIEのみに [padding-left:1px] を指定してあげます。
横並びの画像や inline-block の要素を、均等配置 (justify) にするための CSS コードです。 IE 6, Firefox 2, Opera 9.6, Safari 3 で意図したとおりに表示されることを確認しました。 動作確認用の demo 説明 以下のようなコードを準備します。 HTML のソースコード例 <ul class="images"> <li><img src="img01.png" width="100" height="100" alt="" /></li> <li><img src="img01.png" width="100" height="100" alt="" /></li> <li><img src="img01.png" width="100" height="100" alt="" /></li> </ul> この HTML ソースコ
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
