[B! CSS] at-akaのブックマーク

Google ChromeでCSSがSassの何行目に記述されているか確認する方法

Google ChromeでCSSがSassの何行目に記述されているか確認する方法 Google Chromeでは表示しているサイトのCSSがSassの何行目に記述されているか簡単に確認することができます。 Sassで作られたサイトのCSSをGoogle Chromeで確認しようとするとインスペクタには以下のように表示されます。このままだと、どのSassファイルの何行目に記述した内容が反映されているかわからないですね。これを次のように変更します。Sassというか私は基本的にCompassを利用しているのconfig.rbを以下のように変更しコンパイルします。 sass_options = { :debug_info => true } output_style = :expanded #output_style = :compressed 次にGoogle Chromeのインスペクタの

at-aka 2013/03/22

Google Chrome にそんな機能が!

リンク

ブログをきれいに印刷してもらうために - Blogger ブログに印刷用 CSS を導入する方法

at-aka 2013/03/03

印刷用の CSS。素敵。Blogger がデフォールトで用意してくれると助かるのに。

Blogger
CSS

リンク

すげー便利！ドメイン別にスタイルシート（CSS）を当てる方法。

ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー（iframe）の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }

at-aka 2013/02/26

知らなんだ。勉強になった。

CSS

リンク

http://www.res-system.com/weblog/item/472

at-aka 2009/05/01

CSS

リンク

ユニバーサルセレクタを利用せず，デフォルトのCSSをリセットする - memo.xight.org

Summary 以下のように，ユニバーサルセレクタを用いたCSSのリセットは，レンダリング速度の面で問題． * { margin: 0; padding: 0; } 使用するタグのみをリセットすると良い． html, body, { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl, address { margin: 1em 0; padding: 0; } YUI Reset CSSの例 body,div, dl,dt,dd,ul,ol,li, h1,h2,h3,h4,h5,h6, pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } Reference Emotional We

at-aka 2007/02/22

CSS

リンク

TRANS [hatena] - 印刷用CSSをまとめてみた。

以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

at-aka 2006/12/27

CSS

リンク

小粋空間: IE7 の CSS ハック

「IE7 で閲覧すると表示が異なるのですが」というご質問を頂いたので、CSS ハックを利用して、IE7 のスタイルのみを変更する方法を紹介します。結論だけ述べますと、IE7 に異なるスタイルを適用する（=他のブラウザと表示を合わせる）場合、該当のセレクタの前に *:first-child+html を付与します。例えば、IDセレクタ #banner に適用させる場合、 *:first-child+html #banner { ： [IE7用のスタイルを記述] ： } となります。なお、それ以外のブラウザのために、元の #banner の設定は、この追加したセレクタより前方に記述します（下記）。この順番を間違えると期待する表示にならないのでご注意ください。 #banner { ： [IE7以外のスタイルを記述] ： } *:first-child+html #banner { ： [IE7

at-aka 2006/11/17

リンク

ソースコードにスタイル指定

at-aka 2006/11/05

CSS

リンク

Lucky bag::blog: ピュア CSS なプレゼン用スライドショー

前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。ピュアCSS なプレゼン用スライドショーサンプル <div id="section-01" class="section">  … </div> <div id="section-02" class="section">  … </div> <div id="section-0

at-aka 2006/11/03

スタイルシートを OFF にすると、構造が分かって、理解が深まる。

CSS

リンク

http://neta.ywcafe.net/000681.html

at-aka 2006/11/02

CSS

リンク

Firefox2.0でサイドバーを右側にする userChrome.css

■ Firefox2.0でサイドバーを右側にする userChrome.css なんか前のが動かなくなっていたので調べてみた。これで平気。でも hbox#browser でも良さそうなんだけど、どっちがいいんだろうか…。 #main-window > stack > hbox { direction :rtl; } #main-window > stack > hbox > * { direction :ltr; } ついでに、テーマの影響で検索バーに未入力時の文字の色(検索エンジンの名前)がグレーアウトされなくなってたんだけど、自分だけ直した。 #searchbar[empty="true"] .searchbar-textbox { color: GrayText !important; direction: ltr !important; } あー、これ white とかにすると昔の

at-aka 2006/11/01

Firefox
CSS

リンク

BlogU

at-aka 2006/11/01

CSS
Blogger

リンク

targetにスタイルを指定

Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する最近、:hoverや:first-lineなどを利用したCSSを書いていたのですが":target"もあるんですね。前に書いた「動きのあるメニューをCSSだけで」はマウスカーソルを置いているときしかメニューが展開されませんでしたが、コレを使えばクリックされたメニューを開いたままにできますね。サンプル1 逆にコレだけだと「動きのない」メニューですが、:hoverと:targetを両方使えば、マウスをポイントして開き、クリックするとピンを打つように開いたままにする、なんてこともできます。サンプル2 蛇足ですが、サンプル2ではリンクをわかりやすくするために"親x"の部分だけAタグで挟んでいます。当然DIV全体をAで挟んで下線と文字色を変えてしまえばAタグを使っていることを意識させないようにも見せ

at-aka 2006/10/29

CSS

リンク

Lucky bag::blog: CSS3 の target 疑似クラスで脚注を動的に表示する

文書の URI の後に #foo などの識別子（id）をつけたアンカーから、その文書内の当該箇所へジャンプできるのは周知の通り。ただ、スクロールもせずに移動するんで、閲覧者が一瞬戸惑ったりるすわけで、CSS3 では、そのターゲットとなる要素をハイライト表示させたりすることが可能な :target 疑似クラスってのが用意されている。現在、:target 疑似クラスに対応しているブラウザは、Firefox などの Gecko 系と Safari、Konqueror とか。IE や Opera は未対応。 Selectors 6.6.2. The target pseudo-class :target そんな :target 疑似クラスを利用して、文書下部に用意した脚注を動的に表示させてみるの試み。ちなみに、サンプルは未対応な IE でも再現できるように、Suckerfish :target |

at-aka 2006/10/29

CSS

リンク

スタイルシートを分けて管理する方法をまとめる - 2xup.org

comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co

at-aka 2006/10/20

CSS

リンク

Blogger beta のコメント欄にインデント

Blogger beta のテンプレートの中には、コメント欄が読みづらいものがあります。そこで今回は、Blogger beta のコメント欄を少し読みやすくする方法をご紹介。たとえば、こんなの（クリックで拡大）。上の画像は、うちの実験用 Blogger beta ブログのコメント欄なんですが、コメント投稿者名、コメント本文、投稿日時が、全て同じインデントで並んでいて、読みにくいのです。そこでコメント欄をこんな感じ（クリックで拡大）にしちゃおうという訳です。手順 Blogger beta 管理画面「Template ＞ Edit HTML」で表示されるテンプレートから