ドットインストール代表のライフハックブログ
CSSで、『position:absolute』を指定した場合、 その要素の中のテキストを選択できないことがあるそうです。 今まで何度か不思議に思っていたんですが、 直しようもないしなーと思いつつ、放置していました。 しかし、先ほど、コメントへの返事を書こうとしたときにその不便さを実感。 引用できないじゃん… で、原因を探るべく検索してみたら、 hxxk.jpさんの記事がヒットしたというわけ。 IE 6.0 では position: absolute; が指定されたブロック内のテキストを選択できない現象が発生することがあります。そして、 Movable Type のデフォルトのスタイルシート ( style-site.css ) では position: absolute; を使用しているので、たびたびその現象が発生しているようです。そういった場合の対処法をいくつか考察。
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
jQuery Browserは、スクリプトでブラウザの種類を検出して、CSSのセレクタとして実装できるスクリプトです。 jQuery Browser jQuery Browserは、ブラウザのもつplatformやuserAgentから、OSやブラウザの情報を取得し、セレクタを利用して、ブラウザごとのスタイルシートを適用することが可能です。 jQuery Browserでのスタイルシートの記述例 <textarea name="code" class="css" cols="60" rows="5"> div#browser-test{ border: 2px solid #000; padding: 10px; } ■Internet Explorer用 div#browser-test.msie{ background-color: #f00; } ■Firefox用 div#brow
CSS属性フォーマットをお使いの方へ 『CSS属性フォーマット』は名称を変え、今後は『CSSプロパティーフォーマット』としてリリースされることになりました。今現在の所、CSS属性フォーマット Version 0.2.0とCSSプロパティーフォーマットVersion 0.2.1には機能的差異はございませんが、将来的にはCSSプロパティーフォーマットに機能追加をしていく所存です。 なお、Extension Managerを使用して、CSS属性フォーマットをアンインストール後、CSSプロパティーフォーマットをインストールされることをお奨めいたします。 CSSプロパティーフォーマットとは CSSベースのサイト制作をしていると、ついCSSのプロパティーの順番がバラバラになってしまうことが多々あります。プロパティーの順番がバラバラだと、そのセレクタでどのようなプロパティーが定義されていて、その結果、ど
Note: Several sections of this specification have been updated by other specifications. Please, see "Cascading Style Sheets (CSS) — The Official Definition" in the latest CSS Snapshot for a list of specifications and the sections they replace. The CSS Working Group is also developing CSS level 2 revision 2 (CSS 2.2). This appendix is informative, not normative. This style sheet describes the typic
Yahoo! UI Library: Fonts CSSを知ってから、CSSを書く際にfont-sizeは大体このライブラリを読み込ませてから使っています。ただし、Operaで表示する際には、気をつけたほうがよさそうな点があったので、メモしておきます。 Fonts CSSはどういう構造になっているのか詳細は分かりませんが、とりあえずクロスブラウザで同じフォントサイズを実現してくれる摩訶不思議なライブラリ。デフォルトのフォントサイズ、つまりfont-size: 100%;は13pxになっており、それからfont-sizeをパーセントで指定することによって、pxでフォントサイズを指定するような感覚で、フォントサイズを指定することができます。 ただし、Operaにおいては、フォントサイズを100%以下、つまり12pxなどにするときはフォントがほかのブラウザより、小さく表示されるバグがあるようです
CSSがWebページデザインの主要技術になってから、WebデザイナはCSSの振る舞いに頭を抱えなかったことはない。もっとも悩ましいのは、同じCSSでもWebブラウザごとに表示が異なるところにある。なるべく同じ表示を実現しようと、一見すると奇っ怪にみえる設定を加えたり、意味がないような行を加えたり、背景色と同じ色の画像を調整用に追加したり、涙ぐましい努力は後を断たない。 世界中のWebデザイナやフロントエンドデベロッパが同じ悩みを抱えているから、Webブラウザ間の互換性を実現するCSSライブラリがいくつも登場したり、ベストプラクティスをまとめたCSSリファレンスドキュメントが登場したり、CSS擬似クラスといったテクニックが紹介されたり、IEのCSS/HTML非準拠に対処するライブラリが登場するといったことが相次いで起こっているわけだ。 しかし、ほかのライブラリに依存せずにいちから自力でCSS
offspring.js 更新日：2008年2月6日｜公開日：2008年2月6日 追記 指摘がありました。 offspring.jsがあっても、IE6とIE7でCSSの擬似クラスを使えないとの事です。 このライブラリはIEのcss実装の不備を補完するものじゃなく、最初の子要素に自動的に追加されます。クラスが追加されるだけで擬似クラスをjsで実装してるわけではないようです。offspring.jsを読み込んでも、cssファイルに書いた、:first-child{….}はie系では無視されます。offspring.jsの作者は、ブラウザ間で実装の有無がある:first-childのような擬似クラスは「使わない」ことを提案しているようです。 今現在、CSSの擬似クラスをサポートしているのはSafari 3だけらしいのですが、IEなどでもCSSの代替え策として最初の子要素に自動的にclassを追加
よく、バグが多いバグが多いと嘆かれ続ける、業界ナンバーワンシェアの我らがふぁっきんIE様。 で、今日もまた恒例のバグに直面したわけです。それがタイトルにあるとおり、コンテンツ内容が複製されるバグというやつ。どうにか無事解決も出来たので、今回もメモがてらに書いてみます。内容は長くなるので以下に。 コンテンツ内容が複製される、別の言い方をすると、最後の内容物のゴーストが作成されるとでも言うのでしょうか。もしくは分身とか残像とかそんな感じ。 言葉だけだとわかり辛いので、画像を用意してみました。 Opera9で見た場合 IE6で見た場合 こんな感じでIEの方では最後の内容物の文字が複製されて下にはみ出してます。ちなみに、これが文字じゃなくて背景画像だった場合、背景画像が複製されることもあるそうで。 でサンプルソースはこんな感じ。 <body> <div id="container"> <di
趣旨 要素を描画する位置や大きさに関係する重要な 3 つのプロパティがある。display, position, float である。この3者は複雑に絡みあっていて、いつも頭が爆発しそうになる。今日は、これを整理することから始めたい。 注意事項 まず注意。 私は W3C CSS 2.1 を勉強中の身で、すべての項目にわたってきちんと理解しているとはとてもいえない。したがって、誤りも多く含まれると思うので、その点を留意してほしい。逆に間違っている場所を教えていただけると助かります。ただ、CSS 2.1 はあまりに複雑で、そのままでは頭に入らないので、「なぜこのルールは存在するのか？」ということを常に考えながら勉強していこうと思っている。これからの文章で「このルールってこういう趣旨だよな〜」とかブツブツ言っているかもしれないが、読みたい人は読めばよし、読みたくなければスルーしてほしい。 用語定
YUI Fonts CSS The foundational YUI Fonts CSS file offers cross-browser typographical normalization and control. Fonts CSS: Offers full A-grade browser support. Provides consistent font sizing and line-height. Provides appropriate cross-OS font-family degradation paths. Supports user-driven font-size adjustment in the browser, including cross-browser consistency for adjusted sizes. Works in both "Q
> HTMLでルビを表示するタグはあります。 > ただし、私が試した限りではIEではルビが表示されず、Opera、Firefoxではチャンと表示されました。 HTML の ruby タグは Win,Mac IE のみが対応していたはずです。逆ではないでしょうか？ IE であれば文字の上部にルビが表示されます。 （ただし、CSS などで行間を指定していた場合に文字の重なる場合や隠れる場合があるかもしれません。） http://www.htmq.com/html/ruby.shtml > ついでに、もし可能でしたらNetscapeでもお願いします。（これはオープンソースじゃないから無理だと思いますが） Netscape も Gecko を使用していますから Firefox のように拡張機能を使うことは可能です。 （利用可能な種類が多くないにしても） Netscape から派生したものが Fir
MdNでお馴染みの著者やトップクリエイターなどが登壇！最新のノウハウ＆実践的なテクニックを学ぶ「MdN ✕ Bau-yaの教室」 2021.8.23 MON
17日から下書き状態だったエントリー、、、沢山用意する予定だったけど色んな都合で増えない予感なんで公開。 ずいぶん昔にフッターの区切りっぽいサンプルを作ったけど、ヘッダーは作ってなかったので、ヘッダーのサンプルを作ってみましたよっと。 というか、ヘッダーのサンプルって見かけたことがほっとんど有りません。（必要とされてないから？ ヘッダーって作るの大変というか、厄介だったりしませんかね。 全部画像ならがっちり固定しちゃえば、文字サイズ変更されても耐えられますけど、一部テキストがあったりした場合とかに文字サイズ変更するとレイアウト崩れてしまったりっていうアレが厄介だったりするのです。 文字サイズ変更しても崩れないようにする事を、DDTT対応っていうんでしたっけ。 今回のサンプルデザインは、一部弊社デザイナーにお願いしてつくってもらいました。 感謝感激でございまする。 デザイン提供してくれた方は
Web Designer Wallにエントリーされている、テキストにグラデーション効果をつけるスタイルシートの紹介です。 CSS Gradient Text Effect 仕組みは、見出し要素(h1)に空のspanを記述し、グラデーションの背景画像を表示しています。 デモページでは、下記のようなさまざまなグラデーションをつけたテキストがあります。 CSS Gradient Text Effectのデモページ 利点としては、下記のような点が挙げられています。 テキストなので、ブラウザからのサイズの拡大・縮小が可能。 背景画像を変更することで、グラデーションを変更することが可能。 見出し画像をいちいち作成する必要がない。 数が多い場合、作成時間・帯域の節約になる。
子孫セレクタをうまく使うことで、スタイルのためだけに ID や クラスを付与することなんかを避けることが出来るわけだけど、状況によっては深い階層の要素を指定するために子孫セレクタがとんでもなく長くなる場合がある。例えば、最近見た他人が書いたコードで一番長かった子孫セレクタなんかは、こんな感じ。 #content-body div.collapsing-block.pseudo-collapsed .collapsing-btns .toggle-collapse { property: value; } 基本的に、セレクタ内には空白文字を挿入することが可能なんだけど、改行やインデントも空白文字のひとつに含まれる。そこで、長いセレクタに改行、インデントをうまく使うことで、視認性を高めることができるかもよってのが今回のアイデア。上記の長い子孫セレクタに改行・インデントを取り入れてみると、こんな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く