coloredlists.comcoloredlists.com 2024 著作権. 不許複製 プライバシーポリシー
セレクタ - CSS Dencitie
この章では、各種セレクタについて解説します。セレクタとは、その宣言をどの要素に適用するか、つまり、後に続く宣言ブロックで指定されているスタイルをどの要素に使うか、という事を決定する為のものです。 例を見てみましょう。以下のような規則集合があったとしましょう。 th { color: red } この場合、すべての th要素 の 'color' の値を red にします。つまり、すべての th要素 が赤色の文字で表示されます。この th の部分がセレクタ文字列に相当します。ここでは、そのセレクタ文字列の書き方を解説します。 CSS2では8種類のセレクタ、全称セレクタ・タイプセレクタ・子孫セレクタ・子セレクタ・隣接セレクタ・属性セレクタ・クラスセレクタ・一意セレクタがあります。 このうち属性セレクタは、更に4つに分かれます。広く見れば、クラスセレクタや一意セレクタも属性セレクタの一種と言えます
CSSセレクタのパフォーマンスへの影響 | warikiru
2009-10-07 CSSセレクタのパフォーマンスへの影響 ラベル: performance ASCII.jp：30分でできる！Webサイトを高速化する6大原則 高速化する6大原則として『4.CSS セレクターは短く最適化せよ！』とこの記事では挙げられているのですが、原則というのはちょっと言い過ぎではないかと。少なくとも『3.HTTPリクエストは最小にせよ！』などと同列に考えるのは避けた方が良いかもしれません。 というのも、ハイパフォーマンスWebサイトの著者であるSteve Soudersはこんなことを言っています。 CSSセレクタを最適化するために時間を費やすのは価値のあることだとは思わない。もし、明日起きて世界中のサイトのCSSセレクタが奇跡的に最適化されていたのなら、私は遠くに行ってこう叫びたい。『誰も気づいてないですやん！！』 High Performance Web Site
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
できない→できない→妥協→できないものみたいだ→実はできる→鬱
OperaのUserCSSイジりメモ。 やりたいこと : "_blank"以外のtarget属性が付いた変なリンクにアイコンを付けるなぜなら、既にUserCSSによって_blankを潰しているから_blankは除外するのさ。 CSSその1以下のUserCSSを書く。[target][href]:not([target="_blank"])::before{ content: url('data:image/png;base64, ... ') !important; } 結果。 <a href="aaa">targetなしリンク</a>アイコンなし<a href="aaa" target="_blank">_blankリンク</a>アイコンなし<a href="aaa" target="aaa">aaaリンク</a>アイコンありまさにやりたかった通りの挙動。 CSSその2たまにtarget
これが決定版！JS＋CSSでお手軽に「target= _blank」なリンクを一目で判断させる
先日「target="_blank"」の設定されているリンクを簡単に判別できるようにする、という内容のエントリを書きました。 CSSのみで「target="_blank"」のリンクを一目で判別できるようにする これは最終的に「CSSの属性セレクタ」＋「手動class設定」という形に落ち着いたんですが、予想したとおり「class設定するの面倒だよね」(意訳)という指摘が。私自身はエディタとツールを使っているのでclassを設定するのはそんなに大変でもないのですが、一般的に考えれば面倒であることは間違いありません。FirefoxやGoogle Chromeならclass設定は不要なのですが、シェアトップのIE6(7)が対応してないのではやはり意味はないでしょう。 というわけで、今度はCSSとJavaScriptの両方を使って、classを設定しないでIE6(7)にも対応させ、「target="
target="_blank"を使わずに別ウィンドウで開く｜CSS HappyLife
[an error occurred while processing this directive] 通常外部リンクなどを別窓で開く際に、target="_blank"を使うと思うのですが、コレは非推奨となっているので、もうちょっと美しく別窓で開くにはどうしたらいいか？ と何度か考えた事がありますが、適当にぐぐると、JavaScriptを使うものが何点かあるけど、ソレもイマイチスマートじゃない。 例えば下記で紹介されているような。 http://allabout.co.jp/internet/hpcreate/closeup/CU20040118A/ コレはコレで今までの問題を解決するにはいいのかなーと思うのですが、ボクが個人的に求めているのはもうちょっとスマートなやり方。 今まで、この問題に関して深く調べた事が無かったのですが、雲のむこうの人からこういう方法もあるよ。 って教わっ
CSSのみで「target="_blank"」のリンクを一目で判別できるようにする
このBlogもそうなのですが、外部サイトへのリンクに「target="_blank"」を使って新しいタブ(ウィンドウ)で開く設定にしている人は多いのではないでしょうか。この「自動でタブ(ウィンドウ)を開く」という挙動には賛否両論あるものの、少なくとも私はこちらの方が好きなので利用しています。 さてこのタブを開く挙動、機能自体はいいのですが、残念なことに「一見してタブを新しく開くのか再使用するのかわからない」という欠点があります。ほとんどのブラウザの場合、target="_blank"を設定していてもデフォルト状態では見た目の違いはありません。 ところが、日本では非常にマイナーなブラウザ一つのLinuxのKonquerorは、デフォルト状態でもtarget="_blank"が設定されていると一目でわかるような仕掛けが存在します。アイコンの形が変わるのです。 VM Wareで上手くスクリーンシ
Star Wars Episode IV: A NEW HOPE
I’m very proud of this technological terror I’ve constructed. I’m done: the Star Wars opening crawl, built using only HTML & CSS. Caveats: It only works in Safari 5 and the WebKit Nightly. Nothing else supports the CSS and 3D transforms and animations I used (yet), but I just wanted to see if it could be done. Here’s how it works: The first step is setting up the stage where the opening crawl will
文字の大きさ
最適な文字の大きさは人それぞれです 文字の大きさの好みは、人によってそれぞれ違います。 ホームページを閲覧した時に表示されるフォントサイズには標準というものは存在せず、今もなお議論されているほど実は難しい概念です。 仮に文字のサイズを標準化したとしても、閲覧する環境によって文字の大きさが異なるため、異なる環境下での調整は難しいとされています。 環境によって表示される文字の大きさは異なる ホームページを閲覧する環境は、OSの違いや、ブラウザの違い、ブラウザの諸設定があり様々です。 この環境の違いにより、同じホームページを閲覧した場合でも、表示される文字の大きさは異なります。 例えば、WindowsとMacの場合、画面の解像度が異なります。 Windowsは96dpi、Macは72dpiです。 この違いによって、フォントサイズを指定しない場合でも表示される文字の大きさは異なってしまいます。 詳
font-size指定 | d-spica
font-size指定 2007-03-10 0 0 XHTML/CSS CSS, font-size 数で合理的にデザインする - サイズ編 で少し書いたfont-sizeについての補足です。 どのくらいの文字サイズで見られているかは，ブラウザとその設定によってまちまちです。でも，せめてデフォルトの状態では意図したレイアウト，フォントサイズで見てもらいたい，という願いもないわけではありません。font-sizeの指定をどうするか，ちょっと考えてみました。 font-sizeは%で font-sizeをpx，pt，inなどで絶対指定すると，Win IEで文字サイズの変更が出来なくなるのをご存じの方も多いでしょう。文字サイズを固定してしまうのはアクセシビリティ上少々問題があります。font-sizeはem，ex，%で相対指定（基準になるものとの比率で指定）するのがよいとされています。 Win
FirefoxやSafariでmargin（マージン）が空かない、詰めて表示される場合
Webデザイナーが日ごろ仕事をする上で見つけた情報を書き綴っています。HTML、CSS、素材、技術等のおぼえがきです。無料素材の配布も。 ウェブデザイナーのおぼえがき HOME 当ブログについて RSS 2.0 カテゴリ タグクラウド CSS Firefox google HTML IE IE6 margin Photoshop PHP PS3 safari SEO W3C Web2.0 Web2.0無料素材 web2.0風 YouTube まとめサイト アイコン アフィリエイト ウェブデザイナー オークション キーワード サイト スクリプト スマートフォン タイトルバー トラブル トレンド フィット フッター フリーソフト マイクロソフト メニュー ヤフオク 作品 作成 写真 写真素材 携帯サイト 日本 検索エンジン 無料 無料アイコン 無料写真素材 無料素材 素材 背景画像 透過PNG
サイトのアクセシビリティをチェックしてくれる「アクセシビリティチェックサイトHAREL」
アクセシビリティとはWEBサイトにおいて、どの程度広く使いやすいかを示すもので、利用しやすさといった意味合いで使われる言葉ですが、今回紹介「HAREL」はURLを入力するだけで、サイトのアクセシビリティをチェックしてくれるWEBサービスです。 チェック結果は得点で表示され、どのくらい優れているかわかりやすく表示されます。ざっくりと下判定の他に「マークアップおよびスタイルシートは適切に使用すること 」、「ナビゲーションの仕組みを明確に提供すること 」などカテゴリ別に細かなアドバイス付きの評価も見ることができます。 詳しくは以下 問題になっている部分は該当行と言うところで、どの部分の事を指摘されているのかもわかり、サイトの改善には非常に役立つツールになっています。 WEBサイトは見ると言う要素も強いのですが、使うものなので、広く普及した今、デザインとともにアクセシビリティを非常に重要な要素だと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.favorite-labo.org/archives/243.html
IDEA * IDEA
スタイルシート（カラー・フォント）
http://homepage.mac.com/mikihiro/md/web/font.html
テキスト指定例リスト : 8. 各種フォントサイズとブラウザ互換性
[CSS]Mac OS Xのドック風のバブルエフェクトを実装するスタイルシート | コリス
http://bizcaz.com/archives/2009/01/18-055214.php