【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
[CSS]画像をクリップや額縁でデコレーションするスタイルシート
Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。
[CSS]画像に枠線やウォーターマーク、キャプションをつけるスタイルシート
TORRANCE WEB DESIGNのエントリーから、画像に枠線やウォーターマーク、キャプションをつけるスタイルシートを紹介します。
[CSS]クロスブラウザ、マルチカラム対応のフッタを下部に固定表示するスタイルシート
New CSS Sticky Footer - 2009 demo 主な対応ブラウザは、IE6/7/8, Fx2/3, Op9.6/10, Safari3.2, Crome1となっており、他にも多くのブラウザに対応しています。 対応ブラウザリスト New CSS Sticky Footerは、同じくフッタを下部に固定表示する「CSS Sticky Footer」の空divの使用を排除しHTMLをよりクリーンにし、マルチカラム対応にしたものとのことです。 仕組みはシンプルで、下記が最小の構成になります。 HTML マルチカラムの場合は、「id="main"」のdivに配置します。 <textarea name="code" class="html" cols="60" rows="5"> <div id="wrap"> <div id="main" class="clearfix"> </d
[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート
グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea>
CSS Spritesのすべて - 技術解説、採用事例、ツールリンク | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webページ高速化テクニックのひとつにCSS Spritesがある。これはWebページで使われる画像を1枚のマスター画像にまとめて使おうというもの。画像の表示にはCSSの機能が使われる。すでに多くのサイトで採用されており、先日、Yahoo!ニュースでも同テクニックが採用された旨がブログで報告された。簡単で効果的な方法だ。 アイコンから写真データまでWebページには複数の画像が使われていることが多い。画像ごとにHTTPリクエストが発生するため、画像が増えればそれだけHTTPリクエストが発生することになる。同時読み込みには制限があるため、画像が増えるごとに表示が遅くなるという状況になる。この問題を解決するテ
Yahoo!ニュース高速化の方法、PNG8移行時期は今 | エンタープライズ | マイコミジャーナル
Yahoo! JAPAN Tech Blog Yahoo! JAPANは27日、Yahoo!ニュースをリニューアルした。従来よりも高速にページが表示されるように改善が施された。従来は3秒から5秒ほどかかることもあった表示時間を1秒以内のレスポンスタイム実現を目指して各種最適化が実施されたと説明されている。 どういった最適化が実施されたのかがYahoo! JAPAN Tech Blog Yahoo!ニュース高速化へのサイトデザイン側からのアプローチで説明されている。サイトデザイン側の高速化アプローチとしておもに次の技術を活用したという。 CSS Spriteの採用 PNG8の採用 Optpix WebDesignerを使いPNG8の減色処理を実施 Smush.itを活用しPNG8の余分なチャンクを削除 興味深いのは、これらテクニックはYahoo!のエンジニアでありYSlowの開発者、Stoy
JavaScriptを使わないでIE6で透過PNGを使う方法 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers YSlow, Stoyan Stefanov氏によればWebページに採用する画像の種類は写真データにはJPEGを採用し、それ以外にはPNG8にするのが妥当だとされている。しかしPNG8に透過データを含める場合には注意が必要だ。Net Applicationsの報告によれば2008年11月現在でIE6のシェアは22%弱はある。純減を続けているとはいえ、それでもなお第2シェアのFirefoxの合計シェア21%弱よりも多い。このIE6はPNG8の透過情報をうまく扱えない。 IE6で透過データを含んだPNG8を表示すると、GIFと同じように透過かそうでないかまで透過表現が低下してしまう。このため透過情報を含んだPNG8をIE6で表示する場合には何らかの追
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials — Smashing Magazine
CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time t
[CSS]ブラウザ間の差異を無くすリストのスタイルシート | コリス
Konstruktors Notesのエントリー「How to Create Beautiful and Elegant HTML Lists Using CSS」から、CSSを使用して美しくエレガントなリストを制作する方法を紹介します。 How to Create Beautiful and Elegant HTML Lists Using CSS 各ブラウザによるリストのレンダリングの差 リストにmarginやpaddingを指定した場合、「Internet Explorer」と「Gecko, Webkit and Opera」の各ブラウザで、レンダリングが異なります。 <textarea name="code" class="css" cols="60" rows="5"> ul, ol{ margin:auto -3em 1em 0; padding:0; position:rel
[CSS]複数行のテキストを天地左右中央に配置するスタイルシート
Vertically Center Multi-Lined Text demo デモでは、一行、複数行ともに中央に配置されています。 仕組みは、吹き出しに「display: table;」、その中のパラグラフに「display: table-cell;」を指定し、天地左右中央に配置します。 HTML <div class="area"> <div class="bubble"> <p>To look best, text should really be centered inside this bubble both vertically and horizontally.</p> </div> </div> CSS .area { width: 300px; height: 300px; background: url(../images/abe-bg.png) no-repeat;
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]クロスブラウザ対応のフリーのナビゲーション集 -Styled Menu
[CSS]ボタンやナビゲーションを実装するスタイルシートのチュートリアル集
[CSS]軽快に動作するタブコンテンツを実装するスタイルシート
[CSS]クロスブラウザ対応、ドロップダウン型ナビゲーションのフリーのテンプレート集 -LWIS.NET
[CSS]上級者向け、スタイルシートのテクニック集
[CSS]シンプルでスタイリッシュなナビゲーションを実装するチュートリアル