タグ

cssに関するecluciferのブックマーク (362)

  • CSSセレクタの高速化の話し - Webtech Walker

    続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった(というか全然知らなくてちょっとびびった)ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。(#fooをとるとより高速) 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して

    CSSセレクタの高速化の話し - Webtech Walker
    eclucifer
    eclucifer 2010/05/18
    「セレクタは右から左に解釈される」というのは知らなかったなあ。
  • dwa-net.com - dwa net リソースおよび情報

    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.

    eclucifer
    eclucifer 2010/05/18
    昔好きだった Web tips サイトさん、いつの間に復活なさっていたのかと!! 『情報古い』とあるけど、その古さが当時を思い起こさせて懐かし楽しいなあ。
  • pixivのユーザ装飾を無効にするユーザCSS*Firefox+Stylish

    ネットなどの備忘録なブログ。たまに創作ネタメモとか? ※当サイトではアフィリエイト広告を掲載しています。詳しくはPrivacy Policyをご覧ください。 Do NOT Reupload & No AI training. この記事は15年経過しています。当時とは状況が変わっている場合があります。 水色で目に優しいpixivカラーですが、ユーザ装飾で目が死ぬ配色ばかりなので固定させていただきました。背景が薄オレンジで文字が白とか勘弁…。 /* プロフィールのユーザCSS無効 */ @-moz-document url-prefix(https://www.pixiv.net/member.php?id=){ table.prof_table, table.ws_table{ border:1px solid #B7B7B7 !important; } table.prof_table .

    pixivのユーザ装飾を無効にするユーザCSS*Firefox+Stylish
  • 少しのコードで実装可能な20のCSS小技集

    少しのコードで実装可能な20のCSS小技集CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能な CSS 小技集 シリーズ【第 2 弾】少しのコードで実装可能な 20 の CSS 小技集【第 3 弾】少しのコードで実装可能な 15 の CSS 小技集まずは CSS 基礎編1. div を中央揃えにするほとんどのサイトが基準となる div を画面の中央揃えに設定しています。左右の margin を auto にして中央揃えに。 3. 複数のクラスを指定実はクラスは一度に複数指定できます。スペースを空け

    少しのコードで実装可能な20のCSS小技集
    eclucifer
    eclucifer 2010/04/28
    ボーダーの色を短く指定|リンクの点線を消去|透明度を変更|ブラウザー毎にCSSを変更|マウスオーバーで画像を変更|画像の好きな部分を切り抜く|長いURLを途中で折返す|逆に途中で折り返さず、次の行に
  • [CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法

    ブラウザのウインドウサイズに合わせて、スタイルシートを変更し、レイアウトを最適化する方法をCSS-Tricksから紹介します。 Different Stylesheets for Differently Sized Browser Windows デモではブラウザのサイズを変更すると、それに応じてレイアウトが変わります。

  • 各行の右端も揃う!両端揃えで表示する方法 - [ホームページ作成]All About

    両端揃えで表示させるスタイルシートソース 以下のように、2行を記述します。 text-align: justify; text-justify: inter-ideograph; 1行目が、行揃えを均等割付にする記述です。 2行目が、均等割付の形式を指定する記述です。 ※備考※ IEで使えるtext-justifyプロパティは、今のところIEの独自拡張です。 IE8からは、(IEの独自拡張であることを示す)「-ms-」をプロパティ名の先頭に付加して、「-ms-text-justify」と記述するようになりました。 -ms-text-justify: inter-ideograph; 上記のように書くよう推奨されていますが、この記述だけだとIE7以下では解釈されません。 また、(少なくとも現在の)IE8では、先の記述方法(「-ms-」を付けない記述方法)でも解釈されます。 各ブラウザでの

  • [css] contentプロパティで挿入できるコンテンツ – WebTecNote

    clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、 ::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。 しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、 今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。 ※2019年現在は全ブラウザ対応しています。 挿入出来るモノ 大きく分けると3つです。 テキスト プロパティの値 画像 content:”テキスト” 半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。 日語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。 例:タイトルの前に★マークを

    [css] contentプロパティで挿入できるコンテンツ – WebTecNote
  • スタイルシートチェンジャー

    スタイルシートチェンジャーはサイトのスタイルシートを訪問者が選択して切り替えられるようにするスクリプトです。訪問者は、サイト作成者が用意した外部スタイルシートから好きなものを選択して、好みのデザインで閲覧できるようになります。JavaScriptでスタイルシートを切り替えるものがありますが、これはPHPのスクリプトによって、各ページに外部スタイルシートを指定するlink要素を直接挿入して切り替えます。v1.00からUAに応じてCSSを自動で切り替えられるようになりました。 とりあえず試してみる。↓ スタイルシートチェンジャーEXはスタイルシートチェンジャーに日にちや時間によって自動的にスタイルシートを切り替える機能を追加したものです。○時から○時まではこのCSS、○月○日から○月○日まではこのCSS、のように設定しておけば勝手にCSSを切り替えます。サイトデザインを変更する機会が多ければ少

  • 【インフォシーク】Infoseek : 楽天が運営するポータルサイト

    日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。

  • ハイパフォーマンスCSSの記述方法 : Weblog : SimpleIsm

    CSS すでにいろいろ出回っていますが、そういった情報は1つだけあれば良いわけではなく、それらの情報をまとめたり、精査していって、さらにより良いものになっていくのがWebの良いところだと思います。業務を行う中でメモしていたものが貯まってきたので、その理由とかを調べてみたのでまとめます。まぁ前置きはこれぐらいにして題。 CSSをシンプルに効率良く書くということは、ネットワーク転送量の低下、パース速度の向上、そしてHTMLとのマッチング効率化に繋がります。そしてそれは即ち、ページのパフォーマンスを向上させることに繋がります。 また、「効率的なスタイル指定をする」と考えながら臨むと肩に力が入ってしまいますが、「非効率なスタイル指定をしない」という視点で考えていけば、自ずと軽量で効率的なCSSを記述することができると思います。 パターンマッチング(Pattern matching)について 「非

  • hxxk.jp - IE 7 の :first-letter 擬似要素の font-size の算出

    記事データ 投稿者 望月真琴 投稿日時 2006-10-25T22:31+09:00 タグ CSS Firefox IE Opera スクリーンショット バグ 仕様 概要 ユニバーサルセレクタにて font-size を指定しており、かつ擬似要素の方で font-size を指定しなかったら、 IE7 は擬似要素の元となった要素の font-size ではなくユニバーサルセレクタの font-size を元にするみたいです。 リプライ リプライはまだありません。 IE 7 だけ文字が小さいぞ ? IE 7 での表示確認を目下行っている最中ですが、 hxxk.jp では大きな表示崩れは起こっていないようです。 まあ、 IE 6 でもバグ対策で一部の border を表示しないといった対応を採っていた以外は同じような表示になっていたので崩れるとは思っていませんでしたが。 しかし、 MOMENT

  • Mozilla Re-Mix: Firefox 3.6のサイドバー背景色を変更する方法。

    FirefoxやThunderbirdはWEBユーザーの必須アイテム。 初心者からヘビーユーザーまで使える!便利でクールなFirefox拡張機能(アドオン)の使い方やカスタマイズ、Mozilla関連情報をどうぞ。 Adobe 「Flash Player」を緊急アップデート。 by hoge (07/16) Adobe 「Flash Player」を緊急アップデート。 by H.I. (07/16) ウェブページから余計なコンテンツを排除して読みやすく表示できるFirefoxアドオン「Tranquility Reader」 by しんちゃん (07/11) YouTubeのHTML5動画に表示される広告をブロックしてくれるFirefoxアドオン「YouTube Advertisement Blocker」 by はち (06/17) ウェブページ上の不要なリンクを非表示にできるFirefox

  • duree dpe

    Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par

  • caramel*vanilla » Blog Archive » WordPressでLightboxを超簡単に使ってみる

    Belanja di App banyak untungnya: Banyak Vouchernya Produk Eksklusif di App Rekomendasi Hanya Untukmu Paling Pertama Dapat Promo

  • CSS セレクタに関するおさらい 3

    前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関して... 前回の続きです。今回が最終回、擬似要素を中心にまとめています。 擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、「:」 を 2回使って、「::」と記述することが定義されています。CSS2 までに準拠してコーディングする場合は従来どおり、「:」 1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基になる予定ですので、今回は仕様書に合わせて 「::」 と記述しています。 この 「::」 方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。 擬似要素 (pseudo-element) E::first-line

    CSS セレクタに関するおさらい 3
  • CSS セレクタに関するおさらい 2 | WWW WATCH

    前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス (Structural pseudo-classes) E:root ドキュメント内のルート要素である E という要素にスタイルを指定します。CSS3 で定義。(X)HTML においては、ルート要素は html 要素になるので、 :root { margin:0; padding:0; } とすれば html 要素にスタイルが適用されます。XML の場合は、DTD で指定されたルート要素に対して適用されます。 E:nth-child

    CSS セレクタに関するおさらい 2 | WWW WATCH
  • CSS セレクタに関するおさらい | WWW WATCH

    CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTMLCSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説

    CSS セレクタに関するおさらい | WWW WATCH
  • BOS138 - Bandar Game Gacor Asia Mode Spin BarBar Ala Big BOS

    BOS138 - Bandar Game Gacor Asia Mode Spin BarBar Ala Big BOS BOS138 adalah bandar permainan digital yang menjadi destinasi Utama meraih maxwin dengan mudah di seluruh asia tenggara. Dapatkan bocoran spin barbar agar ikut kecipratan hoki dari para big bos!

    eclucifer
    eclucifer 2009/11/16
    画像の下に回り込みをしない|横並びのブロック要素の配置の調整|リストの最初だけ border を消す|ページ分割ナビゲーション|リンクが途中で折り返しされるの防ぐ|IEでテキストエリアの縦スクロールバーを非表示
  • WinとMac共通のフォント < サイト制作 < Alumnat

    2007-07-21 Sat 17:10 CSS  以下のフォントWindowsMac に標準で入っているため、CSSに用いた時に同じように表示される。 serif ひげつき。印刷に適している。 Times Times New Roman Century Georgia sans-serif ひげなし。画面での表示に適している。 Helvetica Arial Verdana cursive 筆記体。 Zapf Chancery Comic Sans MS Monotype Corsiva fantasy 装飾文字。 Cottonwood alba monospace 等幅。プログラムのソースコードなどに適している。 Courier Courier New Andale Mono Lucida Console serif ABCDEFGHIJKLMNOPQRSTUVWXYZ a

    eclucifer
    eclucifer 2009/11/03
    Helvetica は Windows になかった気がするのだが。
  • font-familyで指定できるフォント名一覧

    総称ファミリ名分類のフォント名一覧 font-familyプロパティで指定できるフォント名・総称ファミリ名を総称ファミリ名と各OS標準の和文フォントで分類し一覧表にしました。 sans-serif serif monospace fantasy cursive 和文フォント sans-serif abcdefg hijklmn opqrstu vwxyzABCDEFG HIJKLMN OPQRSTU VWXYZ0123456789あかさたなはまやらわアカサタナハマヤラワ零壱弐参肆伍陸漆捌玖拾 UAの初期値