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

リスト表示へ

CSSのみでタスクバー風メニュー

2007年11月27日 12:31

なんとなく思い立って、CSS のみでタスクバー風メニューを作ってみました。
(どちらかというとスタートメニューか)n

※ IE7 の場合、DOCTYPE を宣言しないと position:fiexd が効かないみたいでした・・。ので、それを追加したので IE7 でも同様に動作するようになっています。
※ Firefox2、Safari3、Opera9 で動作確認してます。それ以外では position:fixed がうまく動かない模様・・。
そのため、IE6 、7は挙動を少し変えてます。n

CSSのみでタスクバー風メニューデモ

サンプルページの下の方にちょこっとある白い部分にマウスオーバーするとタスクバーのように現れます。
▼肝の CSS はこんな感じです。n

3カラムすべてで背景の長さを揃える

2007年10月31日 09:57

CSS Happy Lifeさんの記事で、目からウロコ的な記事を見つけたので、自分でも備忘録的にCSSを書いてみました。n

※すいません、ちょっとIE6でレイアウトが崩れてたので修正しました(;´д`)「3カラムすべてで背景の長さを揃える2」のサンプルはこちら
「3カラムすべてで背景の長さを揃える」のサンプルはこちら

大雑把に説明すると、3カラムすべてを囲ったボックス要素に、overflow:hidden;を適用させて3カラムすべてに大きな下paddingを設定し、さらにそれをネガティブmarginで相殺する、というもの。n

透過PNGを使ったレイアウト

2007年8月 9日 19:50

気づけばずいぶん日があいてしまってしまっていました・・。

▼サンプルはこちら
透過PNGを使ったレイアウトサンプル

今回は、調べ物をしていて気づいた透過PNGの使い方を書きたいと思います。
もともと、透過PNGをIE6で使っても、繰り返し処理ができない、という認識でいたので
最初から、透過PNGを除外してデザインなんかを考えていました。

が、今回見つけた(というか知らなかった・・(;´д`))記事によると、
繰り返しではないけれど、画像を要素にあわせて拡大・縮小する機能があるとのこと。

イラストなど、固定の画像にはもちろん使えませんが、
背景などに透明画像を使いたい場合なんかには使えるかも、と思ったのがきっかけです。

そもそも、背景に使うような画像は、繰り返し処理を想定しているため、
ある程度引き伸ばしても問題がない画像である場合が多いと思います。

なので、繰り返しの場所だけは引き伸ばし処理を、角丸なんかの引き延ばしができない部分については、個別に設定することで今回のサンプルのようなレイアウトを実現しました。

色々見ていても、こういった事例を載せているサイトがなかったので書いてみました。
(単純に気づいてないだけ・・?)

レイアウトと構造の分離。CSSでもさらに分離してみる。

2007年5月28日 12:07

HTMLCSS
よく、レイアウトと構造の分離、というのを見ます。
HTML では構造を記述し、CSS でレイアウトを記述する、というものですね。n

それを、CSS でもやってみよう、というのが今回の記事の主旨です。
どんなことかというと、今まで自分はこのタイトル要素の背景はこれで、余白はこれという、その要素のスタイルを記述していました。
でも、タイトル用の記述であっても(たとえば左にアイコンをつけるとか)
他の、タイトルではないところでそのアイコンをつける必要が出てくる場合がありますよね。n

でもタイトル用に定義されたスタイルを適用するといらない余白まで定義されていてうまく使えない場合とかがあります。n

そこで、装飾に使うスタイルとレイアウトに使うスタイルとで完全に分離してしまってはどうか、というのを考えたわけです。(すでにやってる人が多いかもしれませんが・・自分は最近気づいたので(;´д`))n

たとえば、アイコンをつけるクラス.icoと背景に色をつけるクラス.bgがあるとします。
そして、タイトル部分に#titleをつけます。n

このタイトルの位置については#titleで定義し、それ以外の付加要素(アイコンとか背景色とか)はすべてクラスで指定します。n

という具合に。
他にborderをつけたい場合はクラスにそれを追加してやります。
こうすることで、使い回しを容易にし、かつその要素が一体どんなスタイルで表示されるのか、コード上からでも大体の状態を推測することが可能になります。n

これらのことから、ID にはmargin、padding、floatなどのレイアウトに関わる記述を、クラスにはborder、background、colorなど装飾に関わる記述を、というふうにわけることができます。n

もちろん、.font_redのようなスタイルはなしです。あくまで使用する箇所がわかるクラス名にします。
たとえば、.ico_helpなどのように、そのクラスがなにかを単体である程度推測できるものです。n

また、デバッグ用のスタイルを別途定義しておくとコーディングがスムーズに行くかもしれません。
.floatLeft.bdr1pxなどを用意しておいて、クラス名に追加するだけですぐに状態の変化を確認できます。
いちいち直接 style に追加したり、該当のスタイルに追加、なんてことがいらなくなります。n

クラスを複数指定することで、HTML 的に長くなって、CSS だけでレイアウト変更、なんてことがむずかしくなってしまうデメリットがありますが、あまりリニューアルがなく、複数回使う要素がかなりの頻度で出てくる場合のサイトには向いてる記述かなーなんて思います。n

IE7を対象としたハック

2007年5月22日 14:13

今回は CSS ハックのお話。
というのも、IE だけがどうしても言うことを聞いてくれず、なんとかハックを使わずに処置したいなーと思って試行錯誤してたんだけどどうやらそれもつらくなってきたのでしかたなくハックを使ってみた。
IE(7も含む)をはじきたいなーと思って調べてみたらわりとあっさり見つかりました。n

ただ、実際自分で書いて置かないと忘れてしまうのでメモ兼エントリー。

ちなみに Lucky bag::blog さんの記事を参考にしました。
今回参考にしたのは下の 5 つ。n

IE7 を含めるのかそうじゃないのか、でわりと振り分けの必要が出てくると思いますが、とりあえずこれだけ覚えておけばIE対策としてはなんとかなるかもしれません。n

IEのCSSの不具合を直す魔法の言葉「zoom:1」

2007年5月17日 17:50

今回もまた備忘録的なものです。n

IE の CSS 表示で、たまになんだか変な挙動になることありませんか?
高さがおかしくなったり、場所がずれたり。
ちょっとどこで読んだか忘れてしまったんですが、どうやら特定のスタイルを適用すると、レンダリングが変わるんだかなんだかだとか。
hasLayoutONになるプロパティを指定すると、CSS の解釈が変わります。(IE のみ)

なので、たまにheightborderを設定すると表示が改善された、なんてことありませんか?
それらが、その「特定のスタイル」のようです。
だから、それらを設定することで正常に表示されたりするんですね。n

ただ、borderにしろheightにしろ、IE 用に適用させてしまうと、他のブラウザ(Firefox とか)に影響が出ちゃいますよね。n

そんなときにzoom:1です。
これは IE 独自スタイルにも関わらず、上で書いたように「特定のスタイル」の中に含まれます。
なので、heightなどで表示が改善されるような場合、そのスタイルにzoom:1を指定しておけば他のブラウザに影響を与えることなく IE だけにスタイルを適用することが可能となります。n

なんかで行き詰ったら試してみるといいかも?n

ツールチップ(ポップアップヘルプ)を改良してみた。

2007年4月24日 14:41

えぇ、以前、CSSだけでポップアップヘルプを実現するというエントリーを書きましたが、若干IEなどで表示がうまくいかないなど問題があったのでそれを改良してみました。

サンプルはこんな感じ。n

サンプル

------------------------------------------------------------------------------
------------------------------------------------------------------------------

ヘッダ、フッタを固定してみる。

2007年2月 7日 09:30

ひさびさの更新です。
さてさて、今回はとある案件で調べ物をしているときに見つけた手法で、面白かったので自分で作りつつ解説をしてみようと思います。

ヘッダ、フッタの固定 デモ

概要を話すと、縦幅 100% 表示にしたコンテンツボックスの上と下に、position を絶対指定にして固定配置したもの。肝は、body と html 部分にoverflow: hiddenを設定するところかな。

CSSソース

html,body#wrapperheight: 100%を指定することで#wrapperのボックスは縦幅いっぱいに広がります。
また、#wrapperposition: relativeを指定することでヘッダとフッタ部分の絶対配置の基準にします。

ヘッダとフッタに関しては

CSSソース

絶対配置をすること、z-indexをコンテンツのボックスより大きく設定することと、コンテンツ部分のスクロールバーを表示するために右側に余白を設けています。
(余白と書いていますが、幅をコンテンツ部分より 15px ほど短くすることで余白としています)

最後にコンテンツ部分です。

CSSソース

メインコンテンツ部分は、ふたつのボックスからなります。
まず、コンテンツを表示する部分。ここにoverflow: autoを設定し、溢れた物をスクロールできるようにします。

そして内包するボックスに対してpaddingを設定します。
この値は、上下のヘッダ、フッタ部分にかぶらないように余白を設定しているものです。
(今回のサンプルではヘッダ、フッタと同じ手法で左側にメニューをおいているため、左側にも余白を取っています)

合わせて読むと役に立つかもなエントリー

Safari用 CSSハック

2007年1月11日 11:26

こちらはかなり前のversionにのみの可能性があります。(safari2 あたり)
もし適用できないようであれば、他の方法を探してみてください・・。

ということで、なんか案件で Safari だけ挙動がおかしい部分があり、急ぎだったので Safari だけに適用できるハックがないか探していたら見つけました。
内容はこんな感じ。

/* xxxx */でコメントアウトし、さらにhtml:66irst-childを適用させたい CSS の前に追加することで Sarari だけに CSS を読み込ませることができるみたいです。
66fに該当するんだろうか。
文字参照(だっけ?)でも CSS がちゃんと動くってことかな?

3カラムレイアウトで、両端を可変にする。(リキッドレイアウト)

2006年12月29日 09:00

以前、中央を可変でのリキッドレイアウト について書きましたが、とある mixi のコミュ内で、両端を可変にするリキッドレウアウトについて書かれていたので、面白くて自分も作ってみました。(mixi コミュのがもっと高度でしたが)

3カラムレイアウトで、両端を可変にする。(リキッドレイアウト)デモ

▼解説は以下から。n

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