anthonyshortのエントリーから、クロスブラウザのためのHTMLとCSSのテクニックの紹介です。 How to get Cross Browser Compatibility Every Time 簡単な意訳なので、詳細やキャプチャは上記エントリーを参考ください。 サマリー doctypeはstrictを使用し、正しいHTML/CSSを使用してください。 スタイルをリセットするスタイルシートを使用してください。 Firefoxでのレンダリングのために、テキストのスタイルシートに「-moz-opacity:0.99」を指定してください。 Safari用には「text-shadow:#000 0 0 0」を使用してください。 画像のリサイズをCSS/HTMLで行わないでください。 全てのブラウザでフォントのレンダリングを確認してください。 「Lucida」は使用しないでください。 テキ
漬物は料理において重要なアクセントを提供します。 その酸味が、食事の味わいを引き締め、新たな深みを加える役割を果たします。 例えば、酢漬けの漬物は、独特の酸味と爽やかさで料理全体を軽やかにし、油っぽさを中和します。 これにより、食べ手の口の中をさっぱりとさせるだけでなく、食欲を増進させる効果も期待できます。 また、塩漬けの漬物もまた重要です。 塩の効果で野菜から水分を抜き、旨味を凝縮させることで、料理に深いコクと風味を加えます。 この塩味は料理全体のバランスを整え、食事を豊かにしてくれます。 漬物の酸味が生む料理のアクセントは、料理の種類や季節によっても異なります。 夏にはさっぱりとした酢漬けの漬物が、冬には塩漬けの漬物が特に重宝されます。 季節感や地域の食材と漬物の組み合わせを工夫することで、料理の魅力がさらに引き立ちます。 漬物は単なる付け合わせではなく、食事の一部としてその重要性を増
本日はTips記事でございます。 Blogなんかで、コメントに番号が付くのってありますよね。 あれをCSSだけで実現してみます。 サンプル 見ての通り、何の変哲もないh3要素に、番号が振られています。 これを指定しているのが、あまり見慣れないcounter()関数 です。 ソースを解説すると、 「h3要素の直前（before）にcontentプロパティで次の値を生成する。 『counter関数でchapterと文字列 .』 」 となります。 ただし、これだけでは数字は増えていきません。 これを増やしていくには、counter-incrementプロパティを使用します。 counter関数の引数chapterと、counter-incrementプロパティの値chapterが対になっているのがポイントです。 counter-increment。 インクリメントと聞くとプログラムのインクリメン
そろそろブラウザの実装レベルに応じたスタイリング分けをしよう 書いた人： hash 投稿日： 2008年06月08日（最終更新：5年6ヶ月と28日前） 読者の皆さんの反応 1 被ブックマーク数： 70 要約：シンプルなマークアップを元に各ブラウザの実装レベルに応じて、様々なスタイリングをしていく方が楽だし、いろんな閲覧者が幸せになれるんじゃないかなと思った次第 全てのブラウザで同じに見える必要はないというのは前から何度か言われていることですが、もう少し具体的な文脈に落として考えてみようかな。 例えば、引用文を引用文ぽくスタイリングしたいとする、こんな感じに。 で、とりあえずGoogle先生で調べてから頭を回してみるわけですが、 Natalie Downe » Blog Archive » Inline image quotes CSSで引用をデザインする。 – DesignWalker 第
CSSの初期化ファイル 2008-05-31 0 0 XHTML/CSS CSS 以前， CSSの初期化 というエントリを書きました。あれからいろいろと試行錯誤し，初期化ファイルがずいぶん変わってきましたので，改めて今ぼくが使っている最新のファイルを紹介したいと思います。 default.css 以下からご覧いただけます。 default.css このファイルは次のような目的で作っています。 各ブラウザが持つデフォルトのCSSをリセットして，レンダリングの違いを解消する。 サイトやページによって書き換えることがほとんどない，基本的な設定を行う。 コーディングが分かりやすくなる初期値を指定しておく。 このファイルをあらゆるサイトで使い回せるようにしておくわけです。 リセット /* Reset */ body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, d
当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いて... 当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いてみますよ。 で、今回はエントリーなんかでリンクを張るときに、当然外部サイトへのリンクと、自分のサイト内へのリンクが混在することになるかと思いますが、このとき外部リンクだけに 「外部リンクですよ」 とわかるようなアイコンを表示させてみたいと思います。 まずは、アイコンを用意しますね。こんなやつ↓ あとは CSS を書くだけですが、ここは 2段階に分けて考えます。どういうことかというと、まずはすべてのリンクにアイコンをつけてしまって、そのあとで、サイト内リンクのみアイコン
CSSファイルの分割 2008-05-23 0 0 XHTML/CSS CSS 見栄えに関わる部分をHTMLから分離してCSSに書いていくと，CSSの分量もかなり増えてきます。サイトの規模が大きくなったり，様々なデザインの要素が加わってくるとなおさらです。 今回は，CSSファイルをいくつかに分け，管理しやすくする方法を考えてみたいと思います。 なぜ分割するのか 1. 余分なものを読み込まなくてすむように。 構造（structure）と見栄え（prasentation）をHTMLとCSSに完全に分離すると，CSSのほうにたくさんの記述をすることになります。その中には，ある特定のページにしか適用されないものも出てきます。 これらのすべてを1枚のCSSファイルに書き，すべてのページで読み込む方法だと，そのページには適用されないものまで相当数読み込むことになってしまいます。 CSSファイルをいくつ
dtをfloatする場合の注意点 2008-05-12 0 0 XHTML/CSS CSS, dl, float dl の定義リストで，dt を float させることがよくあります。このとき注意したい点をまとめておきます。 新着情報のようなところで，更新日を dt で，更新内容を dd でマークアップした場合を想定してみましょう。 まず，XHTMLでのマークアップは次のような感じです。 <dl class="recent"> <dt>2008-05-12</dt> <dd>ページ5を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-10</dt> <dd>ページ4を更新しました。テキストテキストテキスト。</dd> <dt>2008-05-07</dt> <dd>ページ3を更新しました。テキストテキストテキスト...。</dd> <dt>2008-05-06</
画像置換でメニューを作る 前回の画像置換で説明した通り、画像置換を使えばロールオーバーの実装を(javascriptを知らない)デザイナーでも簡単に実装することが可能になります。 ただし、複雑なメニューの場合、整理して書かないと後で大変なことになります。 今回は要点を説明しながらメニューを作って行きたいと思います。 ひとまず、完成系のサンプルに目を通しておいてください。 ベースとなる(X)HTMLソースは以下のようにします。 <ul> <li class="ajaBtn"><a href="/ajax/">Ajax</a></li> <li class="amaBtn"><a href="/amazon/">amazon</a></li> <li class="cssBtn"><a href="/css/">css</a></li> <li class="htmBtn"><a href="
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
Movable Type の、2階層のサブカテゴリーリストで、定義型リスト（dl/dt/dd：または定義リスト）によるマークアップを実現する方法です。ここでは Movable Type によるカスタマイズを記していますが、定義型リストの使い方の参考にもなると思います。 以前、ご質問を頂いたもので、本エントリーで情報展開しておきます。 １．完成例 親カテゴリーに dt 要素、子カテゴリーは全体を dd 要素で括った後、順不同リスト（ul/li）でリスト表示します。 <dl> <dt>親カテゴリーA</dt> <dd> <ul> <li>子カテゴリーA-1</li> <li>子カテゴリーA-2</li> <li>子カテゴリーA-3</li> </ul> </dd> <dt>親カテゴリーB</dt> <dd> <ul> <li>子カテゴリーB-1</li> <li>子カテゴリーB-2</li>
CSSでボックスの最小幅を指定するには通常min-widthを使いますが、IE6はこれに対応していません。 そこで、IE6で擬似的にmin-widthを実現する方法としてボーダーとネガティブマージンを使うものが知られています。 Lucky bag::blog: IE で min-width を指定する方法 外側のボックスのボーダーで最小幅を確保しておいて、 その上に内側のボックスをネガティブマージンで重ねる。 これだけならHTMLとCSSは次のようにシンプルで済みます。 <div> <p>ここは可変幅だけど最小幅をもつ</p> </div> div { border-right:400px solid #fff; } p { margin-right:-400px; } 実際、Firefoxはこれだけでうまくいきます。 ところが肝心のIE6はなぜかボーダー部分まで可変になってしまいます。
「画像置換」の最大の欠点を克服し、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を使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
What is it? Ok, here's the deal. Put your XHTML code below, we will grab it and send over to one of our scientists. He will do his voodoo and in return you will get a corresponding CSS frame. And yup, it's free. More information This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure - each selector and all of its properties and values in one line.
Free CSS Templates Why not download 3552 free website templates. All of the templates have been built using CSS & HTML or XHTML Premium CSS Templates If you can't find a free CSS website template that suits your needs, then why not take a look at the premium templates here. Free CSS Layouts We have tons of website layouts ready for download, sometimes mistaken for CSS templates due to the name.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く