Category CSS Archive

bodyに指定するfont-sizeやfamilyなど

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

以前エントリーした記事、IE8とIE7はメイリオ、IE6/FFはMS Pゴシック、Mac Safari/FFはヒラギノ角ゴを表示から早くも3年近く経っている事にびっくりしました。ブラウザに関する事情は大きく変わってIEの最新版は9で現役のIEは6〜9(IE6を排除するサイトもだいぶ増えましたが)加えてChromeのシェア上昇、Safariは5に、Firefoxに至っては12!でブラウザが乱立する状態になっています。
これだけブラウザの進化が早いと出来る限りハックは使わず...と言うのが安全策だと思います。
どうしても使う場合は極力シンプルに!と言う事で以前はセレクタハックを使っていたのですが、プロパティに記述するハックに切り替えてます。

※基本bodyに指定するフォント関連でのみ使用し、他の場所では極力ハックは使わないようにしています。決してハックを推奨する記事ではありません。

Read more

CSSでdlのdt ddを横並びにする - ネガティブマージン編 -

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

dt_dd_cap.jpg

過去に2回ほどCSSでdlのdt ddを横並びにする記事をこのブログにポストしました。

過去の記事は2つともfloatを利用しましたが、ネガティブマージンを使った方がCSSコードもシンプルになるのでおススメです。

まずdl要素のline-heightプロパティで行の高さを指定します。dd要素のmargin-topプロパティにdl要素で指定したline-heightプロパティと同じ値のネガティブマージンを与えればOKです。

Read more

CSS3のグラデーションを試してみる

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

Firefox3.6のベータ版でCSS3のグラデーションが使えるようになりました。グラデーションには線形と円形がありますが、今回は線形のみを試して見ることにしました。

Read more

border-collapseについて再度調査してみた

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

当ブログの過去のエントリーborder-collapseの内容は2006年当時の内容であるため、検証したブラウザが少々古い物となっています。

なので自分の環境で出来る限りのキャプチャーを取ってみました。検証したブラウザは以下の通りです。クリックするとキャプチャー画像をご覧になれます(画像は2倍に拡大してあります)。

結果はWindows Internet Explorer6,7,8は内側に表示、Firefox2,3,3.5はWindows,Macintoshともに左に1pxは見出す、Safari4はWindows,Macintoshともに内側に表示、Google Chrome,Opera9.6はともに内側に表示されました。

統合ボーダーモデルとはborder-collapseプロパティの値にcollapseを指定した場合を指します。separeteを指定した場合はこのずれは生じません。

Read more

New CSS Sticky Footer -CSSでフッターを下に固定する-

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

css-sticky-footer.gif

CSSでフッターを下部に固定する方法ですが、おそらく有名なのはCSSStickyFooterでしょう。コンテンツ部分のpadding-bottomにフッターのheightを指定してフッターのmargin-topにheight分のネガティブマージンを指定するという物です。

CSSStickyで紹介されている(X)HTMLとCSSだと全体を包むdivがありません。よくあるサイトのデザインとして全体を包んだdivの左右にドロップシャドウをつけた画像を縦軸にリーピートさせるものがあります。今回は このCSSStickyFooterを少々改造して全体を包むコンテナを含んだワイヤーフレームに対応させてみました。

View Demo

Read more