Sassメモ
まあ今更こんな記事ってな感じですが。Sassを使い始めて約1年、自分のブログに記事を書いておくのもひとつの記録かなと思い、メモがてらに記事にしてみました。
【追記】2013/12/26 @functionを追記しました。2013/12/24 @eachを追記しました。
CSS の一覧
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
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はお手軽だけど、グローバルナビの配下に属するローカルページを表示している間もグローバルナビの状態をカレントにしておきたい場合
iPhoneはSoftBankから
Twitter経由で知りましたがショック！！すかさずIT Media Mobileで見てみると...ホントダ... CNET Japanにはドコモ側のコメントで「今回の発表は残念」のような記事が書いてあったのけど、iPod情報局では6月9日までまだ分からないよ〜見たいな記事がかかれていました。 ちょっとだけ6月9日に期
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はとても便利で汎用的な