タグ

関連タグで絞り込む (13)

タグの絞り込みを解除

CSSに関するGrieverのブックマーク (38)

  • ふと今日は・・・・・・　userContent.css で特定リンクのマウスカーソルを変化させる


    02«|12345678910111213141516171819202122232425262728293031|»04 文字サイズ Firefox 43 より、署名なしの拡張が無効化されることとなりました。 その為、使用できなくなるこのブログ上のすべての拡張は今後更新されることがありません。 これを行うにはまず useContent.css を用意しなければいけない。 プロファイルフォルダ直下のchromeフォルダ以下に、スタイルシートの書き方に添った形で書いたファイルを userContent.css と︵テキストエディタで︶名前を付けて UTF-8Nで保存することで適用できる。 なお、 chrome フォルダには userContent-example.css というサンプルファイルが最初から用意されていますので、このファイル名を変更し、-example という文字を取り除けば、

  • CSSでモーダル・ウィンドウ


    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でモーダル・ウィンドウ
    Griever
    Griever 2011/10/22
    リンク

  • CSS4セレクタ (Selectors Level 4) の新機能

    2018-08-01更新：すっかり古くなってしまったこともあり削除します。公開されていた文章を読みたい場合は、GitHubの履歴をお読みください。セレクタ Level 4仕様 の機能を知りたい場合は、仕様書もしくは有志による日本語訳をご覧ください。

  • IDEA * IDEA

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

    IDEA * IDEA
    Griever
    Griever 2011/06/17
    リンク

  • @supports @documentに関する覚え書き


    ﹁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ルールは、ユー
    @supports @documentに関する覚え書き
    Griever
    Griever 2011/06/14
    リンク

  • Mozilla 2.0 / Firefox 4.0 theme changes - Page 19 - mozillaZine Forums

    Griever
    Griever 2011/05/02
    @media や擬似クラスで OS のテーマ毎にスタイルを当てるのに必要
    リンク

  • @-moz-document - MDC Docs

    Griever
    Griever 2011/04/30
    -moz-document で正規表現が使えるようになるのか。CSS で正規表現ってのも斬新ですね
    リンク

  • Google ChromeでＭＳ ＰゴシックをArial+メイリオに置換する


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

  • メディアクエリー - CSS: カスケーディングスタイルシート | MDN

    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: カスケーディングスタイルシート | MDN
    Griever
    Griever 2011/04/03
    メディアクエリ
    リンク

  • マウスカーソルを変えてみた。


    マウスカーソルを変えてみたって何？マウスポインタの形状に関する私見 上記の記事を読んで初めて気づいたのですが、Operaだけが本文のマウスカーソルがデフォルトのままで、少しびっくりしました。(参考) このBlogはOpera大好きな変人が運営していますので、早速先の記事を真似てbodyにcursor:default;を記載しました。 Opera以外のブラウザを使っている方は参考リンクの本文と比較してみて下さい。 今回のCSSの修正で、どのブラウザで見てもOperaで見てるっぽい雰囲気が出るようになりました。 もちろん、それで違和感を感じる人は少ないと思います。 (実際、僕は違和感を今まで感じていなかった) もう少し書かせて今まで見落としていた箇所でしたが、今後CSSを書く時はマウスカーソルの状態も考えながら書いてみたいと思いました。 でも、文字選択時はI字のカーソルになっちゃうんですよね。
    Griever
    Griever 2010/08/23
    bodyにcursor:default;は常識（ぇ http://d.hatena.ne.jp/Griever/20090212/1234457464
    リンク

  • RedLine Magazine : CSS セレクタ総復習 （2010年5月版）


    CSS セレクタ総復習 ︵2010年5月版︶ CSS3のプロパティにも興味津々なのですが、その前にまずセレクタを全部まとめて総復習しておこうかな、と。本来1ページに書くべきではない内容量なので読み込み遅いと思います。ごめんなさい。 Selectors Level 3 http://www.w3.org/TR/css3-selectors/ 選択子 http://zng.info/specs/css3-selectors.html　(日本語訳) ※下記内容で、サンプルページを用意したセレクタもあるんですが、当然、各セレクタに対応しているブラウザとそうでないブラウザがあります。対応していないブラウザでサンプルページを見ても再現できません。 目次 *　(汎用選択子) E　(型選択子) E[foo] (属性選択子) E[foo="bar"] (属性選択子) E[foo~="bar"] (属性選択子
    Griever
    Griever 2010/05/11
    リンク

  • Latest topics > CSS Transitions（CSSだけで簡単なアニメーション）の使い方・覚え方のまとめ - outsider reflex


    Latest topics > CSS Transitions︵CSSだけで簡単なアニメーション︶の使い方・覚え方のまとめ 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画﹁シス管系女子﹂を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « Ubuntu 9.10からUbuntu 10.04にアップグレードしたMainタブバーの縦置き・横置きをタブの数に応じて自動で切り替えたい︵A new option to switch the position of the tab bar by the number of tabs.︶ » CSS Transitions︵CSSだけで簡単なアニメーション︶の使い方・覚え方のまとめ - May 02, 2010 いろんな人がいろんな解説を既に書いてるみたいだけど、ツリー型タ
    Griever
    Griever 2010/05/03
    リンク

  • Firefox 3.6以降でＭＳ Ｐゴシックを無効にする


    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:
    Firefox 3.6以降でＭＳ Ｐゴシックを無効にする
    Griever
    Griever 2009/11/22
    この機能が欲しかった！
    リンク

  • もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife


    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
    もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
    Griever
    Griever 2009/05/04
    リンク

  • CSSでHTMLタグの可視化 - os0x.blog


    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
    CSSでHTMLタグの可視化 - os0x.blog
    Griever
    Griever 2009/04/25
    リンク

  • Wikipediaの脚注をその場で見るCSS - by edvakf in hatena

    こんな感じですかね。 .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集積蔵

    Wikipediaの脚注をその場で見るCSS - by edvakf in hatena
    Griever
    Griever 2009/02/22
    お～便利♪
    リンク

  • グローバルなユーザーCSSいくつか：by edvakf in hatena


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

  • userChrome.cssの設定（ブラウザの外観） - 10press

    Tools & Flow HTML CSS Step Up Material HOME © 10press rights reserved. ｜  Last Modified： 2008-06-21T14:52:33

    Griever
    Griever 2008/12/19
    ポップアップのこの背景画像の使い方は思いつかなかった
    リンク

  • GoogleReaderのUser.CSS書いた - MOMIZINE


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

  • Operaの履歴Opera:historyのCSSを書いた - MOMIZINE


    最近、自分の振り返りとしてブラウザの履歴を見る機会が多くなりました。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
    Operaの履歴Opera:historyのCSSを書いた - MOMIZINE
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.