Sassメモ
まあ今更こんな記事ってな感じですが。Sassを使い始めて約1年、自分のブログに記事を書いておくのもひとつの記録かなと思い、メモがてらに記事にしてみました。
【追記】2013/12/26 @functionを追記しました。2013/12/24 @eachを追記しました。
Category HTML/CSS Archive
bodyに指定するfont-sizeやfamilyなど
以前エントリーした記事、IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示から早くも3年近く経っている事にびっくりしました。ブラウザに関する事情は大きく変わってIEの最新版は9で現役のIEは6〜9（IE6を排除するサイトもだいぶ増えましたが）加えてChromeのシ
CSSでdlのdt ddを横並びにする - ネガティブマージン編 -
過去に2回ほどCSSでdlのdt ddを横並びにする記事をこのブログにポストしました。 定義リストdt ddを横並びで表示させる 再び定義リストdt ddを横並びで表示させる 過去の記事は2つともfloatを利用しましたが、ネガティブマージンを使った方がCSSコードもシンプルになるのでおススメです。 まずdl要素のl
CSS3のグラデーションを試してみる
Firefox3.6のベータ版でCSS3のグラデーションが使えるようになりました。グラデーションには線形と円形がありますが、今回は線形のみを試して見ることにしました。
border-collapseについて再度調査してみた
当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。 なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます（画像は2倍に拡大してあります）。 W
New CSS Sticky Footer -CSSでフッターを下に固定する-
CSSでフッターを下部に固定する方法ですが、おそらく有名なのはCSSStickyFooterでしょう。コンテンツ部分のpadding-bottomにフッターのheightを指定してフッターのmargin-topにheight分のネガティブマージンを指定するという物です。 CSSStickyで紹介されている(X)HTM
CSS2~3 ブラウザ対応状況
ネタもとはここらへんです。CSS Browser Support Selector IE8 IE7 IE6 FF3.5 FF3.0 FF2.0 Chrome Op9.0 Mac Saf4 Mac Saf3.2 * ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ E ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ .class ○ ○
olタグでカッコ数字や丸数字を使う
番号付きの箇条書きは通常olタグを使ってマークアップしますが、入れ子になった場合とかにカッコ数字の番号や丸数字を利用したくなったことは無いでしょうか？僕の場合は往々にしてあります。 なので今回はol liでマークアップした場合カッコ数字や丸数字を表示させます。 ol liのデフォルトスタイルであるdecimalを非表示
画像置換 height: 0;バージョン 修正版
以前エントリーした記事、画像置換 height: 0; バージョンで少々不具合があったので修正版をエントリーしておきます。 何が不具合だったかと言うと、a要素にheight: 0、overflow: hiddenを指定していても一部のブラウザでテキストが見えてしまう時がありました。この問題はa要素に指定していたover
IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示
以前エントリーした記事、IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示から1年4ヶ月ほど経ちました。ブラウザの最新版はIE8/FF3/Safari4となったのでフォントのセットを少々変更してみました。 IE8ですが、IE6/IE7と同様にフォントをピクセル指定すると文字の
inline-blockを使ってのマルチカラムレイアウト（段組み）
IE8、FF3、Safari、Opera、Chromeで正式にサポートされているdisplayプロパティの値inline-blockを使ってマルチカラムレイアウトを実装するテストをしてみました。 View Demo 通常2段組み、3段組みなどのレイアウトを組む場合、floatプロパティを使って左右にふったりすると思いま
background-colorについて
もともとマカーなのであまりWindowsのGUIが好きではありません。特にXPのあの青いタスクバーと緑のスタートボタンがどうにも受け付けません。なのでWindowsはVisual Styleを利用出来るようにする「UXTender」と言うものを入れています。 このUX Tender、結構色々なスキンがあって楽しく、Ro
title属性の使い方
先日Twitterで問いかけた所色々な意見が出たtitle属性の使い方について少々まとめてみることにしました。事の始まりはh1を画像で表現したい場合、どのようなマークアップが良いのだろうか？と言う問いかけが発端です。 title = text [CS] この属性は、当該要素に関する助言的情報を提供する。 文書全体に関す
Print用CSS
本日プリント用CSSをゴリゴリと書いていましたが、その時2つほど問題になった点があったのでメモ代わりに書いておきます。 まず一つはナビゲーションやバナーが表示されているサイドバー（div#secondary）をdisplay: noneで消しました。このサイドバーはdiv#secondaryで定義してあり、中にdiv.
overflow:-moz-scrollbars-vertical の罠
今までFirefoxでコンテンツが少ない場合にもスクロールバーを出すのには以下のように記述していました。 html>/**/body { overflow:-moz-scrollbars-vertical; } ある日の事、ページを印刷しようとして印刷プレビューを表示しても1ページしか表示されません。これはhtm
画像置換 height: 0; バージョン
Roll OverのJava Scriptライブラリが普及してる今、画像置換(Image Replacement)を使用するケースは減っているのでしょうか？JSによるRoll Overはお手軽だけど、グローバルナビの配下に属するローカルページを表示している間もグローバルナビの状態をカレントにしておきたい場合
iTunesの曲名表示ウィンドウっぽいCSS
iTunesの曲名が表示されるウィンドウライクなデザインをdivとp、spanタグでマークアップしてデザインしてみました。(X)HTMLコードは以下のようなシンプルなものです。 <div id="window"> <p><span>You Never Give Me Your Mo
再び定義リストdt ddを横並びで表示させる
定義リストの横並びで苦戦したので再びエントリーしておきます。以前のエントリーは1つのdtに対して複数のddを記述すると最初のddがずれると言うものでしたが、ddが折り返された時はずれたままでしたが、今回は折り返されてもずれないようにCSSを調整して行きます。 まず次のような(X)HTMLがあります。 <dl>
IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示
自宅ではMacを使ってますが、職場はWindows環境なので普段はWindows Firefoxをメインに使ってます。 最近メイリオを指定しているサイトがぼちぼちと。ところがFirefoxやIE6なんかで見てるとアンチの切れたメイリオが表示されて非常に読みづらいのです。VistaのFirefoxはどうだかわからないけ
clearfixと言うclass名について一考
ネガティブマージンに関する記事を検索していたらたまたまこのような記事に出会いました。 class名に「表示に関する指示を組み込む」ことについて 要するに『class名に視覚的な内容を示すのはセマンティックに反するので、その要素が意味することが伝えられる名前にしなさい。』とのこと。 clearfixはとても便利で汎用的な
定義リストdt ddを横並びで表示させる
定義リストであるdt ddを横並びにさせたい場合、僕はfloatを使うケースが多いのですが、Windows IE6では最初のddが約0.2emほどマージンを多く取るバグがあります。Windows IE7/Firefox/Opera、Macintosh Safari/Firefox/Operaではきちんと表示されます。
XHTMLタグ一覧ツール
これはめちゃめちゃ便利ですよ！XHTMLタグ一覧ツール XHTML1.0 Transitional/Strict、XHTML1.1に対応でタグの一覧から調べたい要素をクリックすると下段にマークアップ法、使用出来る子要素、親要素などが表示されます。 マークアップ中、この要素って子要素に入れられたっけ？って思うときにちょろ
トピックパスに関して一考
CSS HappyLifeさんの所に面白いエントリー記事が載ってた。 パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種 この中のサンプル3に注目 >を画像にする事で、altに「の中の」を入れ、音声ブラウザなどで『ホームの中のサービスラインナップの中のウェブサイト制作』と読ませるそうな。
floatにmarginを指定した場合
WinのIEはfloatを指定したボックスにmarginの値が指定してあると倍のmargin値として認識するダブルマージンバグが発症するケースが多々ある。（例えばmargin-left: 10px;なんて指定してるのに20pxのmarginになったりする。） floatさせたボックスにmarginを指定しないようにすれ
border-collapse
web creators 11月号に気になる記事があった 統合ボーダーモデルでは、その名の通りボーダーが統合された状態で表示される。各ボーダーモデルはセル間を中心に表示されることになる。テーブル上下左右にはボーダーの半分がはみ出すので注意が必要だ。 今まで統合ボーダーモデルを選んだ時のtableにかかるborderはt
複数のclassを適用させる
Movable TypeのCSSをいじってるて気がついた事。（今更？かもしれないけど）class属性は1つの要素に複数適用させる事が出来るって事。 <div class="sidebar pkg"> <p>class属性は一つの要素に複数適用させる事が出来る。</p> &l
フォントの指定
今まで良く使ってたフォントの指定 body { font-family: "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", sans-serif; } このようなセットを使っていました。 Safariは2バイト文字のフォント指定に対応していない。したがってSafariでヒラギ
Validotor
自分のために構文チェックサイトをまとめてみた。 W3C Markup Validation Service W3C CSS Validator Another HTML-lint gateway WDG HTML Validator feed Analyzer
id/class命名規則
CSSでサイトを組むにあたって悩むid/classの命名規則。はてなブックマークを見てたらCSS Flightでのpurprinさんのプレゼン資料を見つけた。 日本でも海外でも結構ばらつきがあって中々面白いなと思った。特にサイドバーとかは#sidebarとか#beta、#left、#subBox、#rightrail、
Firefox1.5で長い点線を出さない方法
Firefox1.5ユニバーサルバイナリが発表されてインストールしてから数日、自分の作ったサイトで画像置換を使ったリンクをクリックすると、フォーカスされた点線が画面外に向かって表示されてしまう事に気づいた。 どうやらtext-indent: -9999px;で画面外に飛ばしたテキストを拾ってるらしいのは分かるのだが、対
IE7で使えなくなるハック
IE7のβ版が出て数ヶ月。情報をちらほら集めだしてみたら適応されなくなるハックが数種類あるみたい。例えばスターハックやアンダースコアハック、プロパティの後に空コメントを入れるハックなどが使えなくなるらしい。そもそもスターハックやアンダースコアハックは構文的にも認められる記述ではないからね。けど構築したサイトでスターハッ
floatを解除する - clearfix -
floatを使って画像にテキストを回り込ませて解除する時 clear:both;やclear:left;などを使うけど、テキストの量が少ないと上手く解除されない。 例えば...... 画像にテキストを周りこませる。 この状態から回り込みを単純に解除するには空のdivタグやbrタグにclear: both;プロパティを与