問題 以下のようなスタイルシートとHTML文書の組み合わせについて、表示結果がどのようになるかを確認しました。(sample) * { font-size:100%; font-style:normal; } p { color: #666; font-size:2em; font-style:italic; } p:first-letter { color:#c00; } <p>THIS IS A TEST.</p> 結果 Firefox 2.0, Opera 9.01, IE6, IE7で確認し、以下のような表示となりました。 Firefox Opera IE6 IE7 考察 注目すべき点は、IE6, IE7がどちらも最初の"T"を斜字体にしていないことでしょう。p要素に対しては font-style:italic; が適用されているため、この結果は全称セレクタ(*)に対するスタイル規
2006-09-07T00:56:49+09:00 なにやら pre 要素に CSS でどういったスタイル定義をしているのか、また、pre 要素をどのようにマークアップしているのか、様々な意見がでている模様。 ブログにコードを貼り付ける方法で悩むの巻(i d e a * i d e a - Lifehacks by 100SHIKI.COM) pre要素へのスタイル指定(hail2u.net - Weblog) Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻(hxxk.jp) 情報共有と新たな発見を期待して、どのようにスタイル定義・マークアップしているのか公開することに。まずは注意しているポイントを挙げてみます。 Macintosh 版 Internet Explorer では、div 要素以外に値が visible (初期値) 以外の overf
Internet Explorer 7日本語正式版 Internet Explorer 7(IE7)の日本語正式版がリリースされた。現在はまだダウンロードしてインストールする必要があるが、2007年4月をめどに、Windowsの自動アップデートで「優先度の高いアップデート」として配布される予定だ。「IE7ではWebページの表示が崩れる」といった問題が出る場合、それまでには対応を済ませておきたい。 そこで本稿では、IE7 beta2のCSS実装検証を元に、IE7日本語正式版における変更点やバグをまとめる。また、IE6以下との下位互換やモダンブラウザとの互換性を保ちながらバグを回避する方法、CSSハックについても検証する。 新規対応機能一覧 未対応機能一覧 修正済みバグ一覧 未修正バグ一覧 CSSハック一覧 参考 CSS実装徹底検証! そこが知りたいInternet Explorer 7 なお
WinIEではフロートや位置指定されたボックスのコンテナブロックに幅が指定されていないと「ひどいこと」になりがちです。 コンテナにwidth: 100%で直るとはいえ、それだとボーダーやパディングを同時指定できない。 幸い（?）Quirksモードではwidthがborder-boxで計測されるので、「IE Quirksのみにwidth: 100%」でうまくいく。 でもこの方法では「ブラウザ振り分け」とか「Standardsモードで崩れる」とかあってなんとなくイヤだった。 実はこういう場合、height指定でも直るらしい。 しかも、heightを%単位にすれば、CSSを仕様どおりに解釈できるブラウザには無害というのが素晴らしい。 height: n%;の正しい仕様 つまり、親要素（コンテナの親）のheightがauto（初期値）の場合、その子（コンテナ）でheight: n%とやっても、（ま
height: n%;の正しい仕様 CSSでは例えばheight: 100%;と書いた場合、実際にどういった高さとなるかご存じでしょうか? この算出値は親要素に左右されるのですが、 よく勘違いされている方がいるので正しい仕様を紹介しておこうと思います。 なおここでは話を分かりやすくするために通常フローの場合であることを前提に記述しています。 通常フローでは無い要素の場合、親要素を包含ブロックに読み替えてください。 親要素の高さが明らかな場合 多くの方はこの場合の仕様のみをご存じのはずです。 説明する間でもなく、親要素の高さのn%がその要素の高さとなります。 例えばheight: 300px;の要素の子要素が height: 50%;だった場合、その算出値は150pxになります。 親要素の高さが'auto'の場合 heightプロパティの初期値はautoです。 つまり、明示的にheight:
Go to information W3G - World Wide Web Guide W3G について 当サイトは、初学者を対象とする World Wide Web（ワールド・ワイド・ウェブ）における情報技術の解説サイトです。ウェブサイトの作り方などの基本・基礎から応用のウェブサイトの品質を高める方法など SEO対策（検索エンジン最適化・ウェブページ最適化）と Web標準（Web Standards）にフォーカスしたウェブサイトの作成情報を中心に扱っています。ただし、作者の知識が偏っているため扱っている内容も偏っています。 免責事項 w3g.jp 配下で公開しているリソースは、その正確性に万全を期すよう努力しておりますが、その内容の正確性、有用性、安全性等については、いかなる保証を行うものでもありません。また、当サイトの利用者が掲載情報に基づいて下した判断および起こした行動により、いか
三段組で遊ぼ 次の条件を満たす段組をCSSでレイアウトしやがれ。今作れ、すぐ作れ、直ちに作れ。 3カラムのリキッドデザインであること。 両端のカラムは固定幅とし、中央のカラムのみ可変幅にすること。 HTMLソースでは中央のカラムを他のカラムより先に記述すること。 position: absoluteは使用禁止。floatでデザインすること。 では作ってみようか、と思ったけどCSSによる段組（マルチカラム）レイアウト講座のメインカラム幅可変、サイドバー幅固定 3カラムに解説があるので、そちらを参照のこと。 「三段組でメインコンテンツを先に書いてみるテスト（rtmr）」ではレイアウト講座とは違ったやり方で実現しています。 .main-w { float: left; width: 100%; margin-right: -100%; } margin-right: -100%;というのが大胆で
IEには様々なバグが報告されていますよね。 もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに... 背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。 こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。 その他、IE独自拡張のzoomを使った方法なんかもあります。 今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。 と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。 ソレはhasLayou
content プロパティを使って、CSS2.1 の counter による自動連番の挿入っつうマニアック気味なちょっとした実験で気付いたことがあったのでメモ。どうやら、ブラウザによっては、counter のリセットを明示しなくても良いものや、リセットしないと連番にならないものがあるっぽい。 サンプルを作成して実験 下記のような定義リストを用意して、これの dt 要素（記事タイトル部分）の頭に上から連番で番号を振っていきたいと思ったとする。 <dl> <dt>記事タイトル</dt> <dd>記事の概要</dd> <dt>記事タイトル</dt> <dd>記事の概要</dd> <dt>記事タイトル</dt> <dd>記事の概要</dd> <dt>記事タイトル</dt> <dd>記事の概要</dd> </dl> とりあえず、::before 疑似要素使って content プロパティで coun
Apples To Oranges ? San Francisco Bay Area Visual and Experience Design Studio CSSオンリーでクールなグラフを書くサンプル集。 3つほど紹介されていてどれもクールで実用的。 1. まず、次のようなグラフを書くサンプル。 実際のHTMLコード <style> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height
またFirefoxは短縮形で取得しようとすると、設定していないプロパティにデフォルト値が入った状態で返ってくるので注意する。 getStyleValue( "div.hoge", "background" ) //Mozilla : rgb(17, 34, 51) none repeat scroll 0% 0% ルールを削除する function deleteRule( index, sheetindex ) { if( sheetindex == undefined ) sheetindex = 0; document.styleSheets[ sheetindex ].deleteRule( index ); } 全てのルールにはインデックスが振られており、それを指定することでルールから消すことができる。 ただ、同じセレクタで上書きするのとほとんど変わらないので、あまり必要にならない
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
2006-12-20T02:12:30+09:00 今回のリニューアルでは、これまで px で指定していたコンテンツの幅の値の単位を % と指定変更。 いわゆる liquid (リキッド) レイアウトというものにしました。ユーザが閲覧しているブラウザの幅に合わせてコンテンツの幅も変化します。 div#container { width: 80%; } px で指定していたコンテンツの幅を、% での指定に変更し、リキッドレイアウトに変更したものの、ウィンドウサイズの 80% の幅という指定ですので、ウィンドウサイズを広げればいくらでも大きくなります (もちろん小さくもなります)。それでも問題ないのですが、できればコンテンツの幅に最大幅と最小幅を指定し、小さくなりすぎてレイアウトが崩れるような事もなく、一行あたりの文字数を目で追える程度の幅をキープできればと考え、いろいろ試してみました。 fl
文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。 単位ありと単位なしの違い 手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
