IE6とモダンブラウザにmin-widthを疑似的に指定する方法｜web bibo
/* CSS（スタイルシート）に関する知識・テクニックなどの備忘録 */ 文字サイズ 大 中 小 現在のページ： HOME » CSS レイアウト・ボックス » IE6とモダンブラウザにmin-widthを疑似的に指定する方法 IE6はmin-widthに対応していませんが、Javascriptを使わず、CSSだけで擬似的にmin-widthを指定できるのでご紹介します。 min-heightを指定したい場合は、「IE6にもmin-heightを疑似的に実現させる方法」をご覧ください。 HTML <div class="wrap"> <div class="content">指定の幅まできたら、ウィンドウを縮めても、ボックスはそれ以上は縮まりません。このボックスだと幅500pxより小さくなりません。</div> </div> CSS /* モダンブラウザ向け */
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
css-eblog.com - このウェブサイトは販売用です！ - css eblog リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
RedLine Magazine : display:table関連を使って横並び均一配置
display:table関連を使って横並び均一配置 IE8でdisplay:table関連が使えるようになったとのことで実験。これ、素直にCSSだけで実現できたらいいなーと思ってる。あと何年後？って話だけど。（IE的な意味で）先に書いておきますが、全然実用性はないです。単なる実験というか練習というかやってみたいだけというか、好奇心の塊です（何 以下のサンプルはFirefox、IE8 Beta2、Safari、Operaで確認しました。 幅の決まってる親ボックスの中に均等に並べたい ※当然IE6.7ではまったく効いてないけど、今回それはスルーで。 サンプル・その1 横並びの画像を均等配置 少し前にこちらの横並びの画像を均等配置する | ヨモツネット（←こちらはIE6にも対応）を拝見してこれ素敵すぐる！と思ったので趣旨はその延長。まずは横並びの画像を均等配置してみる。 >>サンプルその1 画
JavaScriptを使わずにやるimg要素のロールオーバーサンプル
本題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら？（テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます） 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン＋テキストという組み合わせの場合に、アイコンを背景として使う。 その他、本来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
日本語の均等割付 text-align: justify; - えむもじら
Firefox1.5リリース後に期待していること - WebStudio 日本語のサイトでもtext-align: justify;を使うサイトが増えて欲しい。自分で修正しておいてなんだが、この修正が一番のお気に入り。 ということなので、早速えむもじらにも導入して試してみました。（中野さんの策にはまったという感じがしなくもないですが、、、） 以下のスクリーンショットはこちらのページの冒頭部分を示すものですが、Firefox 1.5 の均等割付はなかなか良く出来ています。 Opera 8 はアルファベットには対応しているものの、日本語には効かないようです。それどころか、折り返し位置がおかしくなっています。禁則処理が悪さしているような気もします。 IE 6 は完璧に対応しています。ただし、text-align－スタイルシートリファレンスによると、IE の場合、text-justify : in
ちょっとマシな画像置換
「画像置換」の最大の欠点を克服し、CSS有効かつ画像非表示の環境ではもとのテキストが表示される方法。 まもるべき条件はつぎの2つ。 HTMLに手を加えず、CSSの変更だけで実現できること CSS有効かつ画像非表示の環境では、もとのテキストが表示されること 一番目の条件はもとのHTMLがどんなだったかに依存しますが、ここでは公式テンプレのcfdn_09を例にします。 サイドバーのh3要素「Categories Archives」「Monthly Archives」「Links」を画像に変換します。 該当箇所の（X）HTML <div class="secondary-column"> <h2>Appendix</h2> <div class="section" id="categories-archives"> <h3>Categories Archives</h3> <ul> <li><a
CSS だけでフォトギャラリー - lucky bag
CSS だけでフォトギャラリーっぽいのを作ってみるテスツ。「stu nicholls | CSS PLaY | CSS photo-gallery hover and active」あたりを参考に、ちょっとやってみた。サムネールにマウスオーバーで拡大画像を表示。サムネールクリックで拡大画像を固定。別の場所をクリックすると元に戻る。ってな挙動。最低限のブラウザでしかチェックしてないんで、まともに動かない環境もあるかも知んない。 gallery.html (X)HTML は下記のように、画像を順不同のリストで並べている。 <ul id="gallery"> <li><a href="#empty-anchor"><img src="01.png" /></a></li> <li><a href="#empty-anchor"><img src="02.png" /></a></li> <li>
hxxk.jp - アーカイブテンプレートとパンくずリスト
アーカイブテンプレートにパンくずリストを配置する これは weblog に限ったことではありませんが、現在表示されているページが、そのサイトのどの位置にあたるものなのかよく分からなくなるということがあります。 それを防ぐために、サイトのトップページから現在表示されているページへの経路のリンクを並べるという手法があります。 これは一般的にパンくずリストと呼ばれ、大抵はページ上部などの見易い位置に配置されます。 実は HTML / XHTML には link 要素というものが用意されていて、これを適切に記述すればこのようなパンくずリストは不要……というか蛇足となるのですが、現状では大部分のブラウザが対応しているわけではないというところです。 今回はそのパンくずリストについての論議はともかく、どういった形式のリストを作るか、それをどうテンプレートに組み込むかを解説しようと思います。 また、この部
hxxk.jp - 引用文と cite 要素と cite 属性
記事データ 投稿者 望月真琴 投稿日時 2005-10-19T00:18+09:00 タグ HTML XHTML ブックマークレット 仕様 引用 拡張機能 概要 引用元の情報を示す cite 要素および cite 属性のそれぞれの定義と、その使用方法について。 リプライ 4 件のリプライがあります。 cite 要素か cite 属性を使うとより適切ですよ 引用タグ作成Bookmarklet(Win版IE用) : ポトフの散歩道 -北国tv むだづかいにっき♂：引用文作成用ブックマークレット <div class="quotetitle"> ～ </div> や <address> ～ </address> というように、適切な要素 ( または属性 ) が定義されているのにそれが使われていないので、適切な要素を使った方が良いですよ、というお話。 まずは仕様を見てみましょう。 HTML の現時
IEBlogより：お使いのCSSハックを一掃してください | Web標準Blog | ミツエーリンクス
2005年10月13日 Kimberly Blessing著 （この記事はWeb Standards Project（WaSP）における投稿記事「IEBlog: Clean up your CSS hacks」を翻訳したものです。当Blogは翻訳の正確性を保証いたしませんので、必要に応じ原文を参照ください。） IEBlogは本日付で開発者に対し、IE7のStrict（厳格）モードにおいて機能しなくなるCSSハックの数々を「一掃する」呼びかけを掲載しました。 IE開発チームを手助けすることに興味があろうとなかろうと、次のことを考えてみてください。ソースコードのレビューは、悪いCSSハックの代わりに良いCSSハックを使うことのできる箇所を見極めるうえで、役立つかもしれません。以下の場合においても、レビュー（そしていくつかのドキュメントも？）は、あなたを助けるかもしれません。 しばらくの間ソース
コラム・雑感 DreamweaverのCSS機能を徹底解剖／セレクタ編／T-STUDIO
DreamweaverのCSS機能。Web標準実装が増えてきている中で、沢山の所で紹介されています。今回は、そんな中で結構知られていないかもしれない機能（知ってる人がいたらごめんなさい）を紹介しましょう。どんな機能かというと、実はDreamweaver、子供セレクタや隣接セレクタ、属性セレクタに対応しているって知ってました？では、見ていきましょう。 Dreamweaverと子供セレクタ 子供セレクタとは、ある要素の直接の子供に対して適用されるセレクタで、例えば次のような場合を示します。 <h1>T-STUDIO.COM</h1> <p>このサイトは、DreamweaverとかContributeとかの情報を提供しています。</p> <div class="note"> <p>コラムでは、ケータイの話題を提供しています。</p> </div> このとき、セレクタで、body > p { co
HugeDomains.com
Captcha security check extype.com is for sale Please prove you're not a robot View Price Processing
hxxk.jp - :before 擬似要素 / :after 擬似要素の活用例 (3)
:before 擬似要素 / :after 擬似要素の活用例 (3) http://hxxk.jp/2005/09/20/2022 前の記事 : Movable Type 3.1x と 3.2 Beta の違いを探る 次の記事 : Movable Type 3.2 Beta 2 の華麗な div 捌きを見よ ! 記事データ 投稿者 望月真琴 投稿日時 2005-09-20T20:22+09:00 タグ CSS Firefox HTML XHTML デザイン 拡張機能 配布 概要 主な XHTML 1.0 の要素の class 属性と id 属性を視覚化し、また div 要素に対して border を表示することでボックスモデルも視覚化するスタイルシートを作ってみました。 リプライ リプライはまだありません。 これ自体は副産物ですが http://hxxk.jp/common/css/pre
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
My Top Ten CSS Tricks [CSS Tutorials]
CSS can be complex, and as each new browser version is released, you may well find yourself struggling to keep up with the latest tips and hacks. But those tips and hacks will save your sanity! Here, I’ve put together the ten tips that I find most helpful, to save you the hassle of scrounging around the Web for solutions when time is tight. 1. Block vs. Inline Level Elements Nearly all HTML elemen
![My Top Ten CSS Tricks [CSS Tutorials]](https://cdn-ak-scissors.b.st-hatena.com/image/square/e3fa475ce943a48db21acc256784b5c7fc17ab77/height=288;version=1;width=512/https%3A%2F%2Fwww.sitepoint.com%2Fwp-content%2Fthemes%2Fsitepoint%2Fassets%2Fimages%2Ficon.html-css.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IE6 でアンカー上に CSS で指定した背景が消えるのを防ぐ - Enjoi Blog
http://www.cybergarden.net/blog/2005/11/heading_of_a_list.html