memo.xight.org

日々のメモ

カテゴリ : CSS

1ページ目 / 全4ページ

Stylish で Gmail + Monospace font

Summary

Gmailの新規メールの作成画面が新しくなり、monospace font で表示されなくなった。
.editable クラスに font-family指定をしたら monospace で表示が可能になった。

Osaka-Mono 指定

@-moz-document domain("mail.google.com") {
.ii, textarea {
	font-family: Osaka-Mono !important;
	font-size: 0.9em !important;
	line-height:1.3 !important;
}

.editable {
	font-family: Osaka-Mono !important;
	font-size: 0.9em !important;
	line-height:1.3 !important;
}
}


monospace 指定

@-moz-document domain("mail.google.com") {
.ii, textarea {
	font-family: monospace !important;
	font-size: 0.9em !important;
	line-height:1.3 !important;
}

.editable {
	font-family: monospace !important;
	font-size: 0.9em !important;
	line-height:1.3 !important;
}
}


Reference

Gmail Monospace (monospace) - Themes and Skins for Google - userstyles.org
https://userstyles.org/styles/103015/gmail-monospace-monospace

Gmail Monospace (Osaka-Mono) - Themes and Skins for Google - userstyles.org
https://userstyles.org/styles/103014/gmail-monospace-osaka-mono

章、節、項で自動連番

Summary

<ol> タグのネストで自動連番を行ないたい。
counterを利用して実現する。

Source

ol {
	counter-reset: item;
}
ol li {
	display: block;
}
ol > li::before {
	content: counters( item, "." )". ";
	counter-increment: item;
}


章番号を10番から開始したい場合

ol {
	counter-reset: item 9;
}
li ol {
	counter-reset: item;
}
ol li {
	display: block;
}
ol > li::before {
	content: counters( item, "." )". ";
	counter-increment: item;
}


Reference

今日もガクリ - CSS content プロパティで counters 自動連番
http://blog.zodiac.vc/?p=61

LESS - 変数・代入・ネストが使えるCSS生成ライブラリ

Summary

変数・代入・ネストが使えるCSS生成ライブラリ。
Ruby製。
gemでインストール可。

# gem install less


style.less にソースコードを書いて、ジェネレート。

$ lessc style.less


Reference

LESS - Leaner CSS
http://lesscss.org/

nagomu.me - 2010-02-13 - (今さらだけど) 「LESS - Leaner CSS」を試してみた
http://www.nagomu.me/archives/2010/nagomu100213.html

よろずや - 2009-06-22 - Rubyによる構造化CSSライブラリ「Less」
http://sst0001.blog117.fc2.com/blog-entry-93.html

コリス - 2009-06-17 - 変数などを使用してスタイルシートの記述ルールを拡張できる -LESS
http://coliss.com/articles/build-websites/operation/css/extension-to-css-less.html

CSSセレクタの高速化

Summary

セレクタは右から左に解釈される
子孫セレクタは遅い
idやclassには要素名をつけないほうが高速

可読性を考慮しつつ、セレクタの解釈を高速に行わせることが重要。

Reference

CSSセレクタの高速化の話し - Webtech Walker
http://webtech-walker.com/archive/2010/05/18162034.html

続・ハイパフォーマンスWebサイト

ユニバーサルセレクタを利用せず,デフォルトのCSSをリセットする

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 Web - *{ margin : 0 }はもう古い!?
http://www.lllcolor.com/archives/200702/margin0.html

Yahoo! UI Library: Reset CSS
http://developer.yahoo.com/yui/reset/

CSS Tab Designer - CSSによるタブメニューを生成するソフトウェア

Summary

CSSによるタブメニューを生成するソフトウェア.
予めテンプレートが登録されているため,簡単にメニューが生成可能 .

Reference

OverZone Software - CSS Tab Designer
http://www.highdots.com/css-tab-designer/

via

MOONGIFT - CSS Tab Designer - CSSによるメニューを簡単に作成
http://fw.moongift.jp/intro/i-2867.html

MOONGIFT - CSS Tab Designer レビュー
http://fw.moongift.jp/review/i-2868.html

CSS の line-height の値は単位なしが良い

Summary

line-height の値に単位をつけて 1em とした場合
p {
	font-size: 16px;
	line-height: 1em;
}
p em {
	font-size: 24px;
}


line-height の値に単位をつけずに 1 とした場合
p {
	font-size: 16px;
	line-height: 1;
}
p em {
	font-size: 24px;
}


line-height の継承に差が発生する.

line-height の値に単位をつけて 1em とした場合
p {
	font-size: 16px;
	line-height: 1em = 16px;
}
p em {
	font-size: 24px;
	line-height: 16px;
}


line-height の値に単位をつけずに 1 とした場合
p {
	font-size: 16px;
	line-height: 1 = 16px;
}
p em {
	font-size: 24px;
	line-height: 24px;
}


Reference

Lucky bag::blog: line-height の値には単位なしが良いとされる理由
http://www.lucky-bag.com/archives/2006/04/unitless-line-heights.html

Lucky bag::blog: line-height の値には単位なしが良いとされる理由サンプル
http://www.lucky-bag.com/appendix/line-heights-sample.html

via

日本の総理大臣の演説をタグクラウド化: blog.bulknews.net
http://blog.bulknews.net/mt/archives/002078.html

XHTML + CSSのテンプレート集

Summary

Jimmy Lin による XHTML + CSSのテンプレート集.
1段組, 2段組, 3段組の固定幅,流動幅(リキッドレイアウト)のテンプレート集.

対応ブラウザ

Internet Explorer 5.0+
Firefox 1.5
Opera 8.5
Safari 2

Reference

Jimmy Lin - Templates
http://www.jimmylin.info/templates.html

via

phpspot開発日誌 - 2006-09-19 - ValidなCSS/XHTMLテンプレート集
http://phpspot.org/blog/archives/2006/09/validcssxhtml.html

リンク先の拡張子に応じて自動的に画像を付加

Summary

<a>タグの href属性の末尾が '.pdf' , '.doc' ,'.zip'の要素をピックアップ.
対象の<a>タグにclass名を付加する.

例では,pdfLink , docLink, zipLinkというclass名を使用.
各々のclassには,拡張子と対応する画像が指定してある.

Source

リンク先がPDF,Wordファイル,Zipファイルの<a>タグに,class名を付ける.

function fileLinks() {
    var fileLink;
    if (document.getElementsByTagName('a')) {
        for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
            if (fileLink.href.indexOf('.pdf') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'pdfLink';
            }
            if (fileLink.href.indexOf('.doc') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'docLink';
            }
            if (fileLink.href.indexOf('.zip') != -1) {
                fileLink.setAttribute('target', '_blank');
                fileLink.className = 'zipLink';
            }
        }
    }
}
window.onload = function() {
    fileLinks();
}


a:hover {
    text-decoration: none;
}
.pdfLink {
    padding-right: 19px;
    background: url(pdf.gif) no-repeat 100% .5em;
}
.docLink {
    padding-right: 19px;
    background: url(doc.gif) no-repeat 100% .5em;
}
.zipLink {
    padding-right: 17px;
    background: url(zip.gif) no-repeat 100% .5em;
}


Reference

maratz.com - 2005-01-13 - PDF Links Labeling
http://www.maratz.com/blog/archives/2005/01/13/pdf-links-labeling/

maratz.com - PDF Link Labeling Example
http://webdesign.maratz.com/lab/pdf_links_labeling/

Webページにソースコードを表示するには

方法

1. <textarea>
Ctrl+A で Copy & Paste が楽.

2. <pre> + CSS

3. <pre> + <code> + CSS

4. <textarea> + dp.SyntaxHighlighter[2006-06-12-7]

CSSの例

pre.code {
	font-family: monospace;
	white-space:pre;
	overflow:scroll;
}


vimの設定

.vimrc に記述
" html escape function
:function HtmlEscape()
silent s/&/\&/eg
silent s/ silent s/>/\>/eg
:endfunction


対象範囲を選択後,
:call HtmlEscape()


Reference

i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://www.ideaxidea.com/archives/2006/09/post_129.html

404 Blog Not Found:ソースを貼付ける50の方法
http://blog.livedoor.jp/dankogai/archives/50621177.html

hail2u.net - Weblog - pre要素へのスタイル指定
http://hail2u.net/blog/webdesign/styling-pre.html

2xup - 2006-09-07 - pre 要素のスタイル定義とマークアップ
http://2xup.org/log/2006/09/07-0056

hxxk.jp - 2006-09-06 - Re: i d e a * i d e a - ブログにコードを貼り付ける方法で悩むの巻
http://hxxk.jp/2006/09/06/2210

i d e a * i d e a - 2006-09-07 - ソースの貼り付け方法その後
http://www.ideaxidea.com/archives/2006/09/post_131.html

背景画像に透過GIFを利用して,背景の更新を楽にする

Summary

背景画像に透過GIFを利用することで,
背景色を変えるだけで様々なパターンのデザインが利用できるようになる.

CSS

body {
	background: #fa0 url(stripe_1px.gif);
}


Sample

斜線 (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample01.html

斜線 (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample02.html

市松模様 (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample03.html

市松模様 (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample04.html

ストライプ (1px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample05.html

ストライプ (2px)
http://www.lucky-bag.com/appendix/background-pattern/background-pattern-sample06.html

Reference

Super Stripes
http://webdesign.maratz.com/lab/superstripes/

Lucky bag::blog: 背景画像に使える透過 GIF
http://www.lucky-bag.com/archives/2006/09/background-patterns.html

CSSを利用した画像置換による懸念事項

CSSを利用した画像置換によるアクセシビリティ上の懸念

CSSによる画像置換は「CSSが有効,かつ画像は非表示」という閲覧環境で,文字も画像も表示されなくなる.

ナローバンドでインターネット接続をしているユーザが,帯域を有効活用するため,
「CSSが有効,かつ画像は非表示」の設定を行っている可能性がある.

ミツエーリンクスの意見は

コンテンツとして有意な画像,文字情報を含んでいる画像については,
CSS側から表示を制御するよりも,img要素として (適切なalt属性値とともに) マークアップしたほうが,
アクセシビリティ的には好ましいでしょう.


CSSを利用した画像置換によるSEO上の懸念

非可視化されるテキストの内容が,置き換えられる画像の内容が等価ではないと考えられる場合,
SEOスパムとして認められる可能性がある.

テキストと画像の内容が等価であれば問題はない.
また,画像が表現している情報とテキストの内容の等価性を機械的かつ自動的に検証することは困難.

よって,CSSを利用した画像置換を利用しても問題ないと考えられる.

Reference

ミツエーリンクス - Web標準Blog - 2005-06-10 - 画像置換という手法
http://standards.mitsue.co.jp/archives/000038.html

ミツエーリンクス - Web標準Blog - 2006-02-24 - 画像置換とSEOスパム
http://standards.mitsue.co.jp/archives/000153.html

456 Berea Street - 2005-10-21 - Google, SEO and using CSS to hide text
http://www.456bereastreet.com/archive/200510/google_seo_and_using_css_to_hide_text/