Sassメモ
まあ今更こんな記事ってな感じですが。Sassを使い始めて約1年、自分のブログに記事を書いておくのもひとつの記録かなと思い、メモがてらに記事にしてみました。
【追記】2013/12/26 @functionを追記しました。2013/12/24 @eachを追記しました。
まあ今更こんな記事ってな感じですが。Sassを使い始めて約1年、自分のブログに記事を書いておくのもひとつの記録かなと思い、メモがてらに記事にしてみました。
【追記】2013/12/26 @functionを追記しました。2013/12/24 @eachを追記しました。
以前エントリーした記事、IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示から早くも3年近く経っている事にびっくりしました。ブラウザに関する事情は大きく変わってIEの最新版は9で現役のIEは6〜9(IE6を排除するサイトもだいぶ増えましたが)加えてChromeのシ
過去に2回ほどCSSでdlのdt ddを横並びにする記事をこのブログにポストしました。 定義リストdt ddを横並びで表示させる 再び定義リストdt ddを横並びで表示させる 過去の記事は2つともfloatを利用しましたが、ネガティブマージンを使った方がCSSコードもシンプルになるのでおススメです。 まずdl要素のl
Firefox3.6のベータ版でCSS3のグラデーションが使えるようになりました。グラデーションには線形と円形がありますが、今回は線形のみを試して見ることにしました。
当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。 なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます(画像は2倍に拡大してあります)。 W
CSSでフッターを下部に固定する方法ですが、おそらく有名なのはCSSStickyFooterでしょう。コンテンツ部分のpadding-bottomにフッターのheightを指定してフッターのmargin-topにheight分のネガティブマージンを指定するという物です。 CSSStickyで紹介されている(X)HTM
ネタもとはここらへんです。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 liでマークアップした場合カッコ数字や丸数字を表示させます。 ol liのデフォルトスタイルであるdecimalを非表示
以前エントリーした記事、画像置換 height: 0; バージョンで少々不具合があったので修正版をエントリーしておきます。 何が不具合だったかと言うと、a要素にheight: 0、overflow: hiddenを指定していても一部のブラウザでテキストが見えてしまう時がありました。この問題はa要素に指定していたover
以前エントリーした記事、IE7はメイリオ、IE6/FFはMS Pゴシ、Mac Safari/FFはヒラギノ角ゴを表示から1年4ヶ月ほど経ちました。ブラウザの最新版はIE8/FF3/Safari4となったのでフォントのセットを少々変更してみました。 IE8ですが、IE6/IE7と同様にフォントをピクセル指定すると文字の
IE8、FF3、Safari、Opera、Chromeで正式にサポートされているdisplayプロパティの値inline-blockを使ってマルチカラムレイアウトを実装するテストをしてみました。 View Demo 通常2段組み、3段組みなどのレイアウトを組む場合、floatプロパティを使って左右にふったりすると思いま
もともとマカーなのであまりWindowsのGUIが好きではありません。特にXPのあの青いタスクバーと緑のスタートボタンがどうにも受け付けません。なのでWindowsはVisual Styleを利用出来るようにする「UXTender」と言うものを入れています。 このUX Tender、結構色々なスキンがあって楽しく、Ro
本日プリント用CSSをゴリゴリと書いていましたが、その時2つほど問題になった点があったのでメモ代わりに書いておきます。 まず一つはナビゲーションやバナーが表示されているサイドバー(div#secondary)をdisplay: noneで消しました。このサイドバーはdiv#secondaryで定義してあり、中にdiv.
今までFirefoxでコンテンツが少ない場合にもスクロールバーを出すのには以下のように記述していました。 html>/**/body { overflow:-moz-scrollbars-vertical; } ある日の事、ページを印刷しようとして印刷プレビューを表示しても1ページしか表示されません。これはhtm
Roll OverのJava Scriptライブラリが普及してる今、画像置換(Image Replacement)を使用するケースは減っているのでしょうか?JSによるRoll Overはお手軽だけど、グローバルナビの配下に属するローカルページを表示している間もグローバルナビの状態をカレントにしておきたい場合
Twitter経由で知りましたがショック!!すかさずIT Media Mobileで見てみると...ホントダ... CNET Japanにはドコモ側のコメントで「今回の発表は残念」のような記事が書いてあったのけど、iPod情報局では6月9日までまだ分からないよ〜見たいな記事がかかれていました。 ちょっとだけ6月9日に期
iTunesの曲名が表示されるウィンドウライクなデザインをdivとp、spanタグでマークアップしてデザインしてみました。(X)HTMLコードは以下のようなシンプルなものです。 <div id="window"> <p><span>You Never Give Me Your Mo
定義リストの横並びで苦戦したので再びエントリーしておきます。以前のエントリーは1つのdtに対して複数のddを記述すると最初のddがずれると言うものでしたが、ddが折り返された時はずれたままでしたが、今回は折り返されてもずれないようにCSSを調整して行きます。 まず次のような(X)HTMLがあります。 <dl>
自宅ではMacを使ってますが、職場はWindows環境なので普段はWindows Firefoxをメインに使ってます。 最近メイリオを指定しているサイトがぼちぼちと。ところがFirefoxやIE6なんかで見てるとアンチの切れたメイリオが表示されて非常に読みづらいのです。VistaのFirefoxはどうだかわからないけ
ネガティブマージンに関する記事を検索していたらたまたまこのような記事に出会いました。 class名に「表示に関する指示を組み込む」ことについて 要するに『class名に視覚的な内容を示すのはセマンティックに反するので、その要素が意味することが伝えられる名前にしなさい。』とのこと。 clearfixはとても便利で汎用的な