pointer-eventsプロパティでnoneを指定すると最前面に置いた要素を無視して普通にページ操作が可能になります。なので、そういう風にしておいた要素をopacityプロパティで非表示にしておけば、普段は見えないけど特定の操作で最前面に飛び出すモーダル・ウィンドウとかも簡単に出来ます。pointer-eventsプロパティってこういう使い方するためにあるの？ Demo: Pure CSS Modal Window .window { opacity: 0; pointer-events: none; } で、見えない・操作できないウィンドウが作れるので、:target擬似クラスで表示の切替を行えばOKです。 .window:target { opacity: 1; pointer-events: auto; } 簡単！　デモのようにposition: fixed;とかしておくとよりら

ドットインストール代表のライフハックブログ

「CSS Conditional Rules Module Level 3」にあるFeature queriesとDocument queriesの簡単な説明と覚え書きです。 Media-specific style sheets（@media）は色んなところで解説されてるのでここではやりません。 この記事を書いている時点で、「CSS Conditional Rules Module Level 3」はEditor’s Draft 7 June 2011が最新版ですので、それに従って説明したいと思います。 内容は今後アップデートされるでしょうし、これはあくまでも簡単な覚え書きですので、ぜひ原文もご参照ください。 CSS Conditional Rules Module Level 3 Feature queries: the ‘@supports’ rule@supportsルールは、ユー

最近のブラウザではWebフォントの利用を可能にする@font-faceをサポートしており、使われているサイトもよく見かけるようになった。@font-faceはWebフォントの利用に限らず、ローカルのフォントの再定義にも使えるので、ユーザースタイルシートで利用すればＭＳ Ｐゴシックをメイリオに置換することが出来る(Chromeでも)。これに留まらず@font-faceデスクリプターのunicode-rangeプロパティを利用すれば、英数字はArialで日本語部分はメイリオで置換するなどというわがままなことが出来る。 unicode-rangeプロパティはグリフのコードを範囲指定することによってsrcプロパティで指定されているフォントのどの部分を利用するかを決定するもの。つまりArialから英数字(PDF: Basic Latinと呼ばれる範囲)を取ってきてＭＳ Ｐゴシックを置換する場合はGo

CSS チュートリアル CSS の基本 CSS の第一歩 CSS の第一歩の概要 CSS とは何か CSS 入門 CSS の全体像 CSS の働き 評価課題: 経歴ページのスタイル設定 CSS の構成要素 CSS の構成要素の概要 CSS セレクター Type, class, and ID selectors Attribute selectors Pseudo-classes and pseudo-elements Combinators カスケードと継承 Cascade layers ボックスモデル 背景と境界 書字方向の操作 内容のはみ出し CSS の値と単位 CSS における大きさの指定 画像、メディア、フォームの要素 表のスタイル付け CSS のデバッグ CSS の整理 評価課題: CSS の基本的な理解度 評価課題: 素敵なレターヘッドの便箋の作成 評価課題: かっこいいボック

CSSの@font-faceではユーザーがインストールしていないフォントをウェブ上に用意してやりそれをダウンロードさせてページ上で利用することを主眼としているが、ローカルのフォントを置換、つまりＭＳ Ｐゴシックをメイリオに置換するなどということもできる。Firefoxでは3.6から可能になった(Beta版でももちろん可能)。ユーザー・スタイルシートでの利用が中心になると思う。 ＭＳ Ｐゴシックをメイリオに置換する場合は以下のようにuserContent.cssに記述する(userChrome.cssではない)。 @font-face { font-family: "ＭＳ Ｐゴシック"; src: local("メイリオ"), local("Meiryo"), local("ＭＳ Ｐゴシック"); } @font-face { font-family: "MS PGothic"; src:

class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent

CSSのcontentで、insタグやdelタグの可視化ってのは少し前からやってたんだけど、 del:after{ content:"[DEL:" attr(datetime) "]"; } ins:after{ content:"[INS:" attr(datetime) "]"; } del:after, ins:after{ color:#888888; font-size:85%; } より多くのタグを可視化してみた。まあ、ネタのひとつです。UserCSSにしてみる(http://gist.github.com/101046)と面白いけど、すごく重いしすごく崩れるのでお勧めはできない。 ただ、「可視化しても可読性を損なわない、むしろ読みやすくなるHTMLを心がける」というのは良いことだと思う。 さすがにpとliあたりはクドイので、その辺りは消した。 del:before{ cont

こんな感じですかね。 .references li:not(:target){ display:none; } .references li:target{ position:fixed; background-color:yellow !important; bottom:-2px; left:220px; /* width:100%; 消した */ right:0; } .references li{ list-style-type:none; } 脚注を消すにはブラウザの「戻る」を押すか、脚注の頭の ^ を押せばいいんでないかな。 参考 CSSの:target擬似クラスによるクリックで開くフッター - 0x集積蔵

上の記事の続き。 僕の知っている「グローバルなユーザーCSS」を紹介。 usercss.ru Night.cssを公開しているサイトにはまだ他にもいろいろある。のでそこから見ていく。 特定の文字列を含むURLのリンクを非表示にする URL-block.css 小さい文字で"url-block.css"と書いてあるリンクからダウンロード。 画像リンクだけじゃなくて、GoogleのAdSenseなんかのテキスト広告もブロックしてくれる。 "ads"という一発で広告な名前から、"pay.asp"なんていうグレイゾーンのものまで過激さに応じて並べてあるので、不要と思うところは消すかコメントアウトすればいいと思う。 普段は無効にしておいて、広告の酷いページなどにきたら有効にするという手もある。 Opera,Safari,Firefox対応。ただし、Operaではブロックした要素は読み込まなくなるらし

id:edvakfさんの記事「Jon Hicks作のGoogle Reader用スキン、HelvetireaderとOpera」を読んで自分の使いやすいGoogleReaderにスキンデザインを変更してみた。 http://d.hatena.ne.jp/edvakf/20081127/1227769381 変更箇所 左カラムを「すべてのアイテム」「トレンド」「記事一覧」に。トレンドは読まないフィードの削除とPipesが巡回したかチェックなどに利用しています。検索ボックスを左寄せして登録フィードを右寄せ、フォルダ設定なども右寄せにしました。 最大の特徴は極力ボールドを利用しないということです。フィードリーダーなんだからフォントいじりなんてどうでもよくて、そのあたりGoogleReaderはclassやidは無視するのに、style="hogehoge"には反応する。そうすると2chまとめさい

最近、自分の振り返りとしてブラウザの履歴を見る機会が多くなりました。Operaにはopera:historyという素晴らしい機能があり自分のログをガツガツためることができます。しかしフォントサイズも微妙に小さく自分には使いにくかったのでスタイルシートを書き換えて読みやすくしてみました。画像は変更後のイメージ。 Opera:history変更方法 mb-history.cssをダウンロード opera:config#History Style Fileの項目をダウンロードしたmb-history.cssに書き換えて保存 opera:historyを開くと変わっている という簡単な感じです。 今の登録アイコン、mixi、wiki、fc2、ZAKZAK、Opera、はてな各種、グーグル関係、LDRとかそんな感じです。アイコンは自分がよくみるサイトから地道に追加しているので、ダウンロードURLのC