memo.xight.org

日々のメモ

カテゴリ : CSS

1ページ目 / 全4ページ

userstyles.org - Gmail Fixed Font Monospace

Summary

以前作成したGmailの固定幅フォントカスタムCSSが、
userstyles.orgのユーザが削除されてしまったようで編集ができなくなった。

font-family, font-size, line-height を選択、カスタマイズできるようにして、再度投稿してみた。

Reference

userstyles.org - Gmail Fixed Font Monospace
https://userstyles.org/styles/165480/gmail-fixed-font-monospace

userstyles.org - Gmail Monospace (monospace)
https://userstyles.org/styles/103015/gmail-monospace-monospace

userstyles.org - Gmail Monospace (Osaka-Mono)
https://userstyles.org/styles/103014/gmail-monospace-osaka-mono

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