カテゴリー:CSSテクニック

リスト表示へ

コンテンツが足らない場合でもフッターを表示領域最下部に配置する

2009年4月13日 13:58

ちょっと昔の記事ですが、「lucky Bagさんで紹介されていたテクニックをご紹介。n

コンテンツが足らない場合でもフッターを表示領域最下部に配置するデモ

サンプルを見てもらうと分かりますが、コンテンツがブラウザの表示領域より少なくてもフッターが下部にくっつくように配置されていると思います。
動的にコンテンツを生成するようなサイトだったり、テンプレートがあって掲載するコンテンツ内容が少ないページが存在してしまうようなケースで使えるテクニックです。n

CSSのインラインブロック要素で作る100%積み上げグラフ

2009年4月 1日 23:30

インラインブロック要素で作る100%積み上げグラフ サンプル画像

最近インラインブロックが大好きになってきました。なんていうか使いやすい。n

ということで、インラインブロックを使って、積み上げ棒グラフを作ってみました。

インラインブロック要素で作る100%積み上げグラフ デモ

マウスオーバー時に、レイアウトを崩さずに画像にborderを表示するテクニック

2009年3月24日 23:06

CSS-Tricks というサイトで、画像のマウスオーバー時に 画像の内側に border を表示して、しかもレイアウトが崩れない、という面白い記事を見つけたので自分でも作ってみました。また、ごく簡単に実装できる別タイプも作ってみました。(こっちは多少表示が異なります)n

マウスオーバー時に、レイアウトを崩さずに画像に border を表示するテクニック デモ

説明は以下から。n

CSSだけで触れるとポップアップするフッターを作る(IE6対応)

2009年3月19日 16:44

「CSSだけで触れるとポップアップするフッターを作る(IE6対応)」サンプルイメージ

前回のエントリー、CSSのみでIE6にposition:fixedを対応させる を使用して、下部に固定配置しつつ、マウスオーバーで Windows のタスクバーのように飛び出すフッターを作ってみました。

このサンプルは、IE6 にも対応しています。

Windowsのタスクバーのように触れるとポップアップするフッターデモ

サンプルダウンロード

解説は以下から。

CSSのみでIE6にposition:fixedを対応させる

2009年3月16日 13:09

[2009/08/14 修正]
内容が若干分かりづらかったので加筆しました。全体的な内容は変わっていません。
[2009/03/22 修正]
サンプルの問題の修正に合わせて、記事を書き直しました。

今回は IE6 でも、CSS だけでposition: fixedを実現するテクニックです。
通常、IE6 ではposition: fixedをサポートしていないため、普通に指定するだけでは固定配置されません。

今回紹介するテクニックは、いくつかの IE6 のレンダリングの誤差を使って巧みに position: fixed を実現する方法です。
まずは以下のデモを IE6 で見てみてください。ちゃんと右下に固定配置されているのが分かると思います。

IE6 に position: fixed を適用させるデモ

大きく分けると、実現するための方法としての要点は 5 つ。

  1. 標準準拠モードで動作するよう、DOCTYPE 宣言を記述する。
  2. html, body 共に height: 100% を指定する。
  3. スクロール対策として、全体をくくる div 要素を追加する。
  4. 固定配置したい要素に対して position: absolute を指定する。
  5. 固定配置したい要素を、全体をくくっている div の外に配置する。

上記 5 点を踏まえて HTML、CSS を書くと以下のようになります。

画像を一切使わずにCSSだけで吹き出しツールチップを実装する

2009年3月 6日 17:40

CSSだけで吹き出しツールチップのサンプル画像

マイコミジャーナルの「"吹き出し"を画像使わずにCSSで作る方法」で紹介されていた"CSS だけで吹き出しを作る方法"を利用して、CSS だけで作る吹き出しツールチップのデモを考えてみました。

今回のサンプルでは、画像も使っていません。
CSS による border の生成のされ方をうまく使って三角形を作り出します。
以下にデモと、今回の肝である画像を使わずに三角形を作り出すことについて書きたいと思います。

CSSだけで吹き出しツールチップを実装するデモ

IE6で背景が表示されない際にチェックすること

2009年2月 4日 23:44

さて、今回はやや趣向を変えて IE6 に絞って話をしたいと思います。
先日、久々に IE6 で自分のブログを見たらなんだか微妙に変な感じに。n

よく見てみたら、各タイトル部分の背景が所々表示されていませんでした。
この「背景が表示されない」というバグ、IE6 では時折見かけます。
以前書いた peek-a-booバグ というのもそのひとつ。n

今まで自分が経験した中で、この背景が表示されない現象を回避したものをいくつか書いてみようと思います。n

clearfix を使う

これは IE6 だけに限った話ではありませんが、float を使用してレイアウトをしていると遭遇する問題です。
子要素がすべて float していると親要素は正常に高さを判別できません。そのため、まるで背景が消失したかのように見えてしまいます。
これの解決には clearfix というハックを用いて対処します。n

なぜ clearfix を使うと背景が表示されるのかについては、初心者が陥りそうなCSSの7の間違い で詳しく説明しています。n

背景が表示されない要素に「zoom: 1;」を指定

zoom は、IE の独自プロパティであり、さらに IE に実装されている hasLayout の値を true にしてくれるプロパティです。
この hasLayout 、該当要素がレイアウト(ボックスモデル?)を持っているかどうか、を判定するもので、これが true になると高さや幅、marginなどの値が適用されるようになります。n

なので、CSSの解釈でFirefoxなどのモダンブラウザと比べてなんか違うな、と思ったらとりあえず指定してみると色々解決するかもしれません。n

背景が表示されない要素に「position: relative;」を指定

IE6の場合、ネガティブマージン(マイナス値の margin)を使うと時々変な挙動をすることがあります。
そのひとつとして背景が表示されない、というものがあります。
これ、まさに自分のブログで起きた現象でした;n

しかも、すべて同じ class の要素なのにもかかわらず、背景が表示されるものと表示されないものがあるのが厄介でした。
よくよく見てみたら、margin-left にマイナスの値を設定していたので、もしや、と思って position: relative を指定してみたところ、正常に背景が表示されました。n

また、これとは別にネガティブマージンを指定した要素内に画像がある場合、本来表示されるべき場所からマイナス方向に移動した分が切れる(本来表示されるべき場所でマスクされた感じ)という現象があります。n

これも同様にして、画像の親要素に対して position: relative を指定することで正常に表示されるようになります。n

画像のマウスオーバーで、離れた位置に拡大画像を表示する

2009年1月14日 23:21

前回の「CSSだけで作るマウスオーバーでの画像の拡大」の応用として作ったサンプルです。

ただ、今回は少し収穫がありました。
a:hover を使っての、a 要素内の position の操作に関する新しい発見です。

画像のマウスオーバーで、離れた位置に拡大画像を表示するデモ

CSSだけで作るマウスオーバーでの画像の拡大

2009年1月13日 21:13

今回は「CSS だけで作るシリーズ」です。

タイトル通り、CSS だけで作るマウスオーバーによる画像拡大です。
どうやら、これから説明する方法だと IE だとクリックが正常に動かなくなるみたいです・・。

ただ、画像の拡大がメインなのでそもそもリンクしないかな、と思ってとりあえずアップしてみました。
ということで、デモは以下の通り。

CSSだけで作るマウスオーバーで画像の拡大デモ

CSS3の数行で作る簡単な3カラムレイアウト

2009年1月 6日 13:12

CSS3で作る3カラムレイアウト

今回は久々に CSS ネタを書いてみようと思います。
最近(自分の中で)注目度の高い CSS3 のネタです。

実用的になるまではまだまだ先の話だと思いますが、CSS3 になるとやたらと簡単にレイアウトができるので面白くてサンプルを作ってみました。

前の10件 1  2  3  4  5  6  7  8  9  10