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

表示タイプ
リスト表示へ
ボックス表示中

現在適用されているCSSの値をJavascriptで取得する

2008年9月25日 00:35

この記事は、[暴満館]さんの「JavaScriptによるCSSの操作」[IT戦記]さんの「getComputedStyle について調べてたら深みにハマったのでメモ」を参考にさせて頂きました。

外部CSSファイルなどから適用されているCSSのスタイル(や値)を取得するスクリプトです。 通常、Javascriptからstyleを操作する場合、「element.style.marginLeft = '15px'」などと記述すると思います。 しかしこれ、「style = element.style.marginLeft」などとしても、Javascriptで値を設定したあとでないとうまく値を取得できません。

ということで、今回はJavascriptを使って、外部(内部)CSSや、直接指定されているスタイルなどの値を取得するスクリプトの紹介です。
「現在適用されているCSSの値をJavascriptで取得する」サンプル

不特定の数の横に並ぶブロック要素をセンタリングさせる

2008年9月 2日 13:55

【追記】CSSソースの記述順序が間違っていました。正しくは、「display: -moz-inline-box; display: inline-box;」の順で記述します。説明ではこの順序が逆でした。
順序が逆だと、Firefox3でも -moz-inline-boxが適用されてしまい、場合によっては表示が異なることがあります。(サンプルではFirefox3でも2でも特に問題はありません)

今回はページングなど、システムで動的に数が変わるような横に並ぶブロック要素のセンタリングを実現するCSSを紹介します。

「不特定の数の横に並ぶブロック要素をセンタリングさせる」サンプルの表示

「不特定の数の横に並ぶブロック要素をセンタリングさせる」サンプル

普通、ブロック要素を中央寄せする場合、IEは「text-align: center」、そのほかのモダンブラウザは「margin: 0 auto」を使って実現します。
しかし、これは同時に「width」に明示的に数値を指定しないとうまく動作しません。

また、モダンブラウザ向けの中央寄せの場合、ひとつのブロック要素がセンタリングされるのを想定してのCSSの指定です。ブロック要素を並べようとすると、floatを使うことになりますが、floatしてしまうとmarginで左右にautoを指定しても中央寄せにはならなくなってしまいます。

そもそも、複数のブロック要素をfloatによって並べたらセンタリングされません。
ではどうしたらいいでしょうか。その答えは、inline-blockです。

CSSだけでアニメーションプルダウンメニューを作る

2008年8月19日 18:37

前回のエントリーに引き続き、-webkit-transitionを使ってアニメーションのCSSについて書きたいと思います。
-webkit-transitionのアニメーションについては前回の記事「CSS3はアニメーションも指定できる!」を参照ください。動画キャプチャ入りで簡単に説明してます。

今回は、-webkit-transitionを使ってアニメーションで表示されるプルダウンメニューを作ってみたいと思います。
下位階層があるメニューにマウスオーバーすると、下位階層のメニューがフェードインとともに下にスライドしながら出てくる、というものです。

とりあえず言葉で説明しても、百聞は一見にしかずなので、サンプルを見てください。以下に動画サンプルも表示してます。
(※実際のサンプルは、webkit系が実装しているCSSを使用しているので、Safariかwebkit以外で見ると、通常のプルダウンメニューになります。また、IE6では動作しません)

「CSSだけでアニメーションプルダウンメニューを作る」サンプル(Safariでご覧ください)

CSS3はアニメーションも指定できる!

2008年8月10日 00:34

先日、CSS Reloadedというイベントに参加してきました。
そこではCSS3の可能性を示唆していました。

内容としてはとても刺激的で、将来、現在あるJavascriptライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。

ただ問題点として、対応ブラウザがwebkit系(Safari)しかないこと。
また、正式にCSS3として勧告されているわけではないこと(今Safariでできることが実装されない可能性)。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。

ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通りSafariでしか実行できないため、サンプルを見る際にはSafariで見てください。(Safariのダウンロードはこちらから

↓実際に動いているところを動画でキャプチャしたところ。

実際の『CSS Transition』のサンプルはこちら

枠からはみ出す画像をpositionを使わずに配置するテクニック

2008年7月 4日 17:29

まずはサンプルを見てください。↓

サンプル

こういった、「枠からはみ出した画像を配置する」というデザインは多々あると思います。
これを、position: absoluteなどで配置するのは簡単ですが、ドロップシャドウなど半透明部分を使用しないと配置がむずかしい画像の場合、少々やっかいだったりします。

そこで、position: absoluteを使わずに、背景を使用して設定する方法を書いてみたいと思います。

異なるサイズの画像を縦横中央配置にしてリスト状に並べる

2008年5月25日 16:53

アルバムや写真ギャラリーなど、画像をリストにして横並びに配置したいときがあると思います。
すべての画像が同じサイズであれば特に問題ないと思いますが、それぞのれ画像のサイズが違う場合、特に高さが小さい画像などが含まれる場合、縦方向に中央に配置するのがむずかしいと思います。
(テーブルを使えば比較的簡単にできますが、いちおうCSS関連のブログなのでCSSで実現する方法でw)

例えばこんな感じ↓ 異なるサイズの画像を縦横中央配置にしてリスト状に並べるイメージ画像

今回のテクニックの肝は、displayのプロパティである「table-cell」「inline」「inline-block」の3つを複合的に使うところです。
ちなみにこのテクニックは、自分が愛読している「CSS HappyLife」さんのところの「画像とかの横にあるテキストを上下中央に」というエントリーを参考にさせてもらいました。

サンプル

異なるサイズの画像を縦横中央配置にしてリスト状に並べるサンプル(IE互換モード)
異なるサイズの画像を縦横中央配置にしてリスト状に並べるサンプル(IE準拠モード)

理論的なHTML構造だけで角丸背景を実装する

2008年5月18日 14:58

最近使っている背景の使い方なんかを紹介してみようと思います。
内容は簡単で、極端に大きい背景を作って、それを固定配置にすることで実質のコンテンツの伸縮に対応する、というものです。
それほど凝った背景じゃなかったり、コンテンツのおおよその最大値が分かるときなんかに使えるテクニックです。

サンプル

理論的なHTML構造だけで角丸背景を実装するサンプル

サンプルダウンロード

「理論的なHTML構造だけで角丸背景を実装するサンプル」のダウンロード

▼解説は以下から

2行追加するだけで、簡単にIE6でもmin-heightを実現する方法

2008年3月27日 15:11

CREAMUさんのところで書かれていたCSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』を参考に、サンプルを作ってみました。

自分でも覚えておきたいので備忘録的にもエントリーw
ちょっと前に書いた『CSSの1行でできるIE6対策(ハック)』と同じテクニックを使ったものです。
IE6で下のサンプルを見てもらうとわかると思いますが、見事にmin-heightと同じ挙動をしています。

サンプル

2行追加するだけで、簡単にIE6でもmin-heightを実現する方法サンプル

解説は以下から。

CSSの1行でできるIE6対策(ハック)

2008年3月 5日 17:33

Internet Qualityさんの所の紹介エントリーにあったサイトで、IE6だけにうまくCSSを適用しているサイトがあったので、自分のメモとしてもエントリー。

Example: margin: 20px !important; margin: 10px;

サンプルを見ると、ごく簡単な処理になってます。
通常、importantを指定したスタイルが適用されますが、どうやらIE6の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまうようです。

なので、IE6だけに適用したいものなんかは、ハックを使わずにこんな感じで適用するとスマートかも。ただし、imporantを使ってるので、他のところで上書きしようとしてもできないので、通常のハック同様、乱用は禁物ですが・・・。

初心者が陥りそうなCSSの7の間違い

2008年3月 1日 17:40

ということで、かなり独断と偏見によってこのエントリーを書いてますがw
Yahoo!知恵袋のような質問系のところでたまに見かける問題や、
以前自分で陥った間違い(勘違い)についてまとめてみました。
知ってると大したことない問題でも、知らないとその修正にかなりの時間を費やしたりします。
そういう人たちに知っておいてもらいたいことを7個ほど書き出してみました。

書いていくうちに、すごい長くなってしまいました(;´д`)

  1. デフォルトCSSを初期化しよう
  2. ブラウザごとのCSSの解釈の違い
  3. CSSが適用されない!
  4. floatした子ボックスを持つ親ボックスの背景が表示されない
  5. 画像の下に不明な余白ができる
  6. リストをCSSで装飾すると不明な余白ができる
  7. 100%幅によるカラム落ち

CSSのみでアコーディオンメニューを実現する

2008年2月18日 00:49

前回のエントリー「:target擬似クラスを使ったプルダウンメニュー」とややかぶる気がするけど、若干違う感じなので勘弁、ってことでw

この:target、使い方によってはonclickなどのjavascriptの代替としてかなり使えそうな予感。
しかも、物によってはページ内リンクとして動くので戻るを使って戻っても、移動する前と同じように見えたり、外部からも直接ページ内リンクも含めてリンクすることで見た瞬間にその項目を表示しておく、といった使い方もできそう。

さて、今回のサンプルはアコーディオンメニューです。
今まではjavascriptなどで実現していたものを、CSSのみで実現してしまおう、というのが今回の趣旨です。

▼サンプルはこちら
CSSのみでアコーディオンメニューを実現するサンプル

:target擬似クラスを使ったプルダウンメニュー

2008年2月15日 11:33

RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。

▼サンプルはこちら
:target擬似クラスを使ったプルダウンメニューサンプル

内容は、:target擬似クラスを使った、windowsのメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavascriptなしでCSSのみでやってしまおう、というのが今回の主旨。

DIV要素を縦横中央に配置する

2008年1月31日 11:09

とあるCSSによるLitebox的表現のエントリーを見ていて、以前に書いたエントリーよりも
簡潔なCSS(とHTML)で縦横垂直が実現できそうだったので書いてみた。

▼サンプルはこちら
DIV要素を縦横中央に配置するサンプル

まず最初にまとめを話してしまうと、
絶対配置にしたDIV要素を、縦横50%の位置に移動する。
するとボックスの左上が画面中央にくるので、さらにその後ネガティブマージンを使って
ボックスの中央を画面中央に合わせる、というものです。

Javascriptによる外部CSSファイルの切り替え(書き直し)

2008年1月28日 22:56

以前同じ記事を書いたんですが、サンプルデータが消えてしまったのと、
紹介があまり詳しくなかったので書き直してみました。
(たまたまこれを利用する機会もあったのでw)

▼とりあえずサンプルはこちら
Javascriptによる外部CSSファイルの切り替えサンプル

肝はjavascriptのみです。Javascriptソースはこんな感じ↓

CSS講座 - 目で見るボックスレイアウト

2008年1月20日 21:34

CSSのボックスレイアウトって色々複雑だよなぁと思っていて、もし自分がそれを、まだ理解してない人に教えるならなんて教えるかな? とか考えてるときがありました。
元々、なにかに例えて説明するのが好きなので、身近なものでなにか説明できないかと考えたわけです。
出した答えがこれでした↓

CSSのボックスレイアウトを家を例えに説明した図

すべてを家に例えるわけです。
まず、widthは「家の幅」、paddingは「庭の範囲」、borderは「家の壁の厚さ」、marginは「隣の家との距離」と。
そう説明した上で、「庭の範囲(つまりはpadding)は自分の好みが反映される(つまり背景)。そして自分の敷地は壁までの範囲(つまりwidth+padding+border)。そして隣の家との距離はmargin」

こう例えると、なんとなくpaddingとmarginの違いがわかりやすいのかなぁと思ったわけです。
さらに、実際のボックスの幅がwidth+padding+borderとなる理由も、上記の説明でなんとなくイメージできるかなと。

そんなこんなを考えていて、ついに人にそれらを教える機会があり、参考資料として上の図と、下のツールを作るに至りました。
分かる方から見ても、この説明が分かりやすいか、分かりづらいか、そういった意見を頂きたいなぁと今回の記事を書いてみました。
もっといい説明があるよ!とか、なんでもいいのでコメントもらえたら幸いです。

ちなみにツールのコンセプトは「よくボックスレイアウトについて分かっていない人でも、動的に見ることでなんとなくでも概要をつかんでくれるかなー」と。
おかしい部分なんかありましたらコメントでももらえるとうれしいです(;´д`)

▼作ってみたツール(Javascript)
[ツール] CSS講座 - 目で見るボックスレイアウト(Javascript)

CSSのみでロールオーバー・まとめ(IE6含む)

2007年12月20日 10:36

わりと「ロールオーバー」で検索される方が多かったので、自分で書いたエントリーや
使ったことのあるロールオーバーの方法なんかをまとめてみました。

ロールオーバー時の画像変更と、プルダウンメニューなどのロールオーバー(マウスオーバー)のアクションなんかもまとめてます。

「CSSのみでロールオーバー・まとめ(IE6含む)」コンテンツ

SEO対策になるCSSロールオーバー?

2007年12月16日 00:42

ふと思いついたので書いてみました。
overflow: hidden以外使わない、スパムになりそうもない手法で、さらに無駄なタグを挿入せず、かつCSS OFF、画像OFFでもなんとか情報が消えないように工夫したCSSロールオーバーを作ってみました。

▼サンプルはこちら
「SEO対策になるCSSロールオーバー?」のサンプル

今回のサンプルの肝は、「overflow: hidden」です。

CSSのみでプルダウンメニューを作る

2007年11月30日 09:42

※追記[2008/09/25]
説明に表示していたHTMLに誤りがあったため、修正しました。

以前にふたつほどプルダウンメニューについて書きました。
▼参考エントリー

  1. 入れ子のプルダウンメニューを作る
  2. プルダウンメニューをさらに作り込んでみた


でも、IE対策としてJavascriptを併用したものでした。
が、なんとCSSのみでもIE6にまで対応したプルダウンメニューが実現できるとのことで、ちょっとサンプルを作ってみたのでアップしてみたり。

ユウさんに指摘されて、縦バージョンのサンプルも作成してみました。

▼サンプルはこちら
CSSのみでプルダウンメニューのサンプル
CSSのみでプルダウンメニューのサンプル(縦)

なぜCSSのみで実現できるのか理由までは分かっていませんが、これで動く、というところまで紹介したいと思います。

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

2007年11月27日 12:31

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

※IE7の場合、DOCTYPEを宣言しないとposition:fiexdが効かないみたいでした・・。ので、それを追加したのでIE7でも同様に動作するようになっています。
※Firefox2、Safari3、Opera9で動作確認してます。それ以外ではposition:fixedがうまく動かない模様・・。
そのため、IE6 、7は挙動を少し変えてます。
「CSSのみでタスクバー風メニュー」のサンプルはこちら

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

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

2007年10月31日 09:57

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

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

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

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

2007年8月 9日 19:50

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

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

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

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

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

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

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

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

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

2007年5月28日 12:07

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

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

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

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

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

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

<h1 id="title" class="ico bg">test</h1>


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

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

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

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

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

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

2007年4月24日 14:41

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

サンプルはこんな感じ。

サンプル

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

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

2007年2月 7日 09:30

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

「ヘッダ、フッタの固定」サンプル

概要を話すと、縦幅100%表示にしたコンテンツボックスの上と下に、positionを絶対指定にして固定配置したもの。肝は、bodyとhtml部分にoverflow:hiddenを設定するところかな。
  1. html , body {
  2. background-color: #fff;
  3. color: #333;
  4. overflow: hidden;
  5. height: 100%;
  6. }
  7. #wrapper {
  8. border: solid 1px;
  9. margin: 0 auto;
  10. position: relative;
  11. width: 800px;
  12. height: 100%;
  13. }

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

ヘッダとフッタに関しては
  1. #header {
  2. background-color: #5f5;
  3. position: absolute;
  4. top: 0;
  5. left: 0;
  6. width: 785px;
  7. height: 80px;
  8. z-index: 2;
  9. }
  10. #footer {
  11. background-color: #ccc;
  12. position: absolute;
  13. bottom: 0;
  14. left: 0;
  15. width: 785px;
  16. height: 50px;
  17. z-index: 2;
  18. }

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

最後にコンテンツ部分です。
  1. #mainContents {
  2. background: #55f;
  3. overflow: auto;
  4. position: relative;
  5. margin-left: 160px;
  6. width: 640px;
  7. height: 100%;
  8. z-index: 1;
  9. }
  10. #mainContentsInner {
  11. padding: 105px 0 50px;
  12. }

メインコンテンツ部分は、ふたつのボックスからなります。
まず、コンテンツを表示する部分。ここにoverflow: autoを設定し、溢れた物をスクロールできるようにします。
そして内包するボックスに対してpaddingを設定します。
この値は、上下のヘッダ、フッタ部分にかぶらないように余白を設定しているものです。
(今回のサンプルではヘッダ、フッタと同じ手法で左側にメニューをおいているため、左側にも余白を取っています)

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

2006年12月29日 09:00

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

サンプル

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

▼解説は以下から。

プルダウンメニューをさらに作り込んでみた

2006年12月14日 10:38

ということで、連日同じエントリーですが。
もう少し作り込んで、今回は別ページでサンプルをアップしてみました。

変更点としては、前回の物に比べ、色などのスタイルを修正。
加えて、下に階層が含まれているメニューについては、右端に▲のマークを
自動で追加するようにしてみました。
動作テストは「WinIE6、Firefx1.5、2.0」です。

※干し梅さんより指摘を頂き、サンプルを修正しました。
XHTMLがValidになるように修正しました。
>>サンプルページ
>>サンプルダウンロード

※サンプルダウンロードには、htmlファイル、cssファイル、jsファイルと、中で使われている画像ファイルが含まれています。

まだまだ改変の余地ありなので、改変や使用は完全フリーです。(というか、ダウンロードしてくれる人がいるんだろうか?w)
ただ、できればコメントとかくれるとさらにやる気がでるのでうれしいですw
(なんか変なとことかあったら言って下さい…)

入れ子のプルダウンメニューを作る

2006年12月13日 15:30

このあとのエントリーで、「CSSのみでプルダウンメニューを作る」を書いてます。
IE6にも対応しているので、参考にしてみてください。

前回、CSSによるポップアップメニューでポップアップメニューを作成したけど、今度はそれをさらに発展させて入れ子のポップアップメニュー(プルダウンメニュー)を作ってみた。(というか、案件でそういうのを作ることになって、サンプルを作ったのでアップしてみただけだけどw)

ただ、IEでも動作するようにするため、Javascriptを介入させている。
IEを省いて、モダンブラウザのみで動けばいい、ということであればCSSだけでも実現できるようだ。
faLogさんを参考にしたので、CSSだけで実現させたい場合は参考にしてください。

ちなみに、入れ子を複数指定しても大丈夫なように作ってます。
<li>要素の中に<ul>要素を入れ子にしていくだけで、階層構造が作れるようになってます。

▼サンプルの解説

【サンプル】

DIV要素を垂直方向に中央寄せする

2006年12月 6日 08:51

PHPSPOT開発日誌

こんな記事を見つけた。
BOX要素を垂直方向に中央寄せするには、テーブルくらいしかできない。
そんな中、CSSでそれを実現してしまおう、というのがこの記事だ。
中を読んでみたけど、わりと強引な感じ。

ソースサンプル

<html>
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div#shiv {
background: transparent;
width: 100%;
height: 50%;
margin-top: -50px;
float: left;
}
div#blueBox {
background: blue;
width: 100px;
height: 100px;
clear: both;
position: relative;
top: -50px;
}
/* Hide from IE5mac *//*/
div#shiv {
display: none;
}
html, body {
height: auto;
}
/* end hack */
</style>
</head>
<body>
<div id="shiv"></div>
<div id="blueBox"></div>
</body>
</html>


簡単に説明すると、まずhtmlとbody要素にheight:100%を指定。
これでどのブラウザでも画面の縦いっぱいにBOXが展開されます。
そして、その中にDIVをheight:50%で配置。
こうすることで、このDIV要素の下端が画面の中央になります。
また、heightと一緒に上marginに「中央寄せしたいBOX」の高さの
半分の値を設定します。

そしてさらに、そのDIV要素の下にDIVを配置。
そこへ想定している高さを指定し配置することで中央寄せとなります。
つまり、最初のDIVで画面中央までBOXを生成し、
さらに次のDIVの高さの半分だけ上にBOXを押し上げることで
結果的に中央寄せになる、というものですね。
かなり強引な上に、高さの決まったものしか中央寄せできないので
実際に使えるかは未知数ですが…。

てか、なぜBOX要素の垂直方向への中央寄せがないんでしょうかね?
結構必要だと思うのですが…。
次のCSS3に期待しましょうw

クリアするウラワザ

2006年11月 7日 17:27

float、結構思惑通りに動かなくて苦労しますよね。
CSS触り立てで陥るのが、floatによって親ボックスが正常にしたまで伸びない、ということ。
(まぁ、動作的にはそれで正しいですが、直感的に言うとやや違和感ありますよね)
しかし、最初は「なにごと?!」と思ってしまいます。

自分のイメージで簡単に説明します。
まず、輪ゴムを想像してください。(え? とか思わないでw)
さらに、タバコとかなんでもいいので箱(ボックス)を想像してください。
さて、その輪ゴムをその想像した箱にくくり付けてください。
輪ゴムは、箱の形になって伸びますよね?
これが、いわゆる通常時の親ボックスの形です。

さて、今度はその箱から輪ゴムをとってください。
すると輪ゴムは元の形にもどって小さくなりますよね?
これが、float(浮いた)したボックス(タバコの箱)と親ボックス(輪ゴム)の関係です。
つまり、子ボックスが浮いてしまったために、親ボックスの中には何もない状態となってしまった、というわけです。

だから、いきなりボーダーが変になったーと思っても、それが正常の動作(輪ゴムが元に戻るのと同じ)なのです。

さて、ではどう対処したらいいか?

floatしたボックスのあとに、floatをclearするボックスを挿入しても解決されますが、ただそれだとHTML的に汚くなってしまうので、CSSだけで解決しましょう。

floatを囲っている親ボックスに対して以下のプロパティを追加してください。
  1. #box:after { /* for modern brouser */
  2. content: ".";
  3. clear: both;
  4. display: block;
  5. height: 0;
  6. visibility: hidden;
  7. }
  8. * html #box { /* for IE */
  9. /*\*/height:1%;/* for WinIE*/
  10. display: inline-table;/* for MacIE*/
  11. }
さて、簡単に上記を説明すると、まず:after疑似クラスを認識するブラウザに色々と読み込ませます。content: "."; でボックスの最後にドットを表示させ、かつそれをblock要素に変換します。(display:block;)

さらに、それを画面上に表示してしまうと都合が悪いので、色々保険をかけて非表示にします。
(height:0;、visibility: hidden;)

最後に、そのblock要素に対してclearを指定すれば完成です。
こうすることで、floatして正常に見えなくなったボックスの最後にclearを追加し、ボックスを正常に表示させる、というものです。

ただ、いくつか問題があるので、そのあとに続くハックでそれを回避しています。
まず、:after疑似クラスがIEでは認識されないので、IEに対してのハックを行います。
まず、Win、Mac双方のIEにのみ読み込ませるように「* html #box」と指定して他のモダンブラウザを排除します。
その上で、WinIEにのみ「height: 1%;」を、MacIEに「display: inline-table;」をそれぞれ追加します。
これで完成です。

peek-a-booバグ

2006年9月25日 10:02

いないいないばぁバグ、と言われるものだそうです。
WinIEで発生するバグで、ボーダーや背景がスクロールしたときに消えるバグだとか。
再読み込みすると出て来たりするのでいないいないばぁと呼ばれてるんでしょう。
解決策は、問題の出る要素に対して「heigh:1%」を指定するだけ。
WinIEの場合、高さを指定しても内容によって勝手に高さが変わるので問題ありません。
(他のモダンブラウザでは、高さ指定するとそれに固定されるため、WinIEのみに適用させるようハックを使う必要があります)

とある案件でこれが出て、また1からCSS見直さないといけないのかなーと凹んでたので
簡単に解決してよかったです。(本当に)
とりあえず備忘録的に書いてみました。
初耳だったので他の人の参考にもなればな、とも思い。
とりあえず久々の更新ですがこれだけです(´・ω・`)

CSS管理についての考察

2006年8月18日 16:04

前にも書いたけど、CSS管理についての考察を再び書いてみようと思う。
なぜこれを書くに至ったかは、ひとつ現状で試していることがあるからだ。
また、これを見た人(どれくらいいるかは分からんけどw)も試すか、もしくは使い勝手や、管理する際の利便性などについて考えてコメントをくれるととても嬉しい。

まず、結論から言ってしまうと「TAGを設ける」ということだ。
最近、色々なオンラインサービスでTAGが目につく。
そしてあとあとその情報を呼び出すときに、そのTAGを指定する、というものだ。
これの便利なところは、ひとつの要素に複数のTAGをつけられる点。
これによって、その情報がなにに属するのか、を複数定義付けられる。

だから例えば、音楽CDを例に取ると、まず「CD」というTAGが考えられる。
また、それが自分の好きなアーティストのアルバムだったとしたら「アルバム」や「お気に入り」、もしくはそのアーティスト名そのものでもいい。
こうして複数のTAGをつけておくことで、もしそれが情報の中に埋もれてしまっても、検索の際にその中のどれかのTAGをキーワードに検索すれば結果に表示されることになる。

さて、なにがいいたいか、というと、CSSにはコメントという機能がある。
そのクラスやIDが一体どういった役割なのか、またファイルの先頭に更新日などを書く場所を設けてもいい。
とにかく、後から見た時に分かりやすくするための情報を付与できる、ということだ。

このコメント、今まではわりと適当にしか使っていなかったが、これの大事さが今になって分かって来た。
できるだけ詳細にコメントを書くことで、それがどういった目的で書かれたのか、またそれ以外の要素についての説明もされていると、そこからさらに別の場所に誘導することもできる。
(例えば、これの中にはem要素が含まれる旨を書き、記述先がこれより下にあることを明示することで検索性があがる)

最近意識していることは、できるだけ詳細に書く事。また、それがboxを定義するものであれば、それの中に一体どんな要素(クラスやID、それ以外のセレクタなど)が含まれるのかも書いている。
実際、場合によっては使用しないクラスなども出て来てしまうが、誰かが編集する際に、新しく追加する項目用のCSSがすでに定義されているのか、また未定義なのか分からない。
それがコメントに書かれていれば、新しくクラスやIDを定義する手間も省けるし、無駄にCSSが増えて行くこともなくなる。

さて、コメントについていくつか自分なりの使い方を書いて来たが、その中で一番使えるのでは? と思っているのが「TAG」だ。

印付きリストを実現する。

2006年8月 9日 09:07

知ってはいたのに、忘れていてついめんどくさい作り方をしてしまったので、備忘録的にも書いてみたいと思います(*'-')
今回も:before疑似クラスとcontentプロパティが出てきますが、一体いつになったらこれを気兼ねなく使えるようになるんだ…。

さてさて、みなさんは印付きリストを作成するときはどうやって作っていますか?
ナカグロ(・)や、数字、ローマ数字ならばul要素やol要素をそのまま使うだけで事足ります。
しかし例えば、「■」や「●」などを頭に置きたい、という場合もあるんじゃないでしょうか。
例えばこんな感じ。

http://www.green.dti.ne.jp/~edo/web-test/test13/

(WinIEで見ている場合は、上のリストの「●」が表示されていませんが、WinIEが:beore疑似クラスに対応していないためです)

CSSの運用・管理を模索してみる。

2006年7月26日 12:51

CSSの運用・管理には毎回悩まされる。
案件ごとに違ってくるのはしょうがないとしても、
同じような内容でもそのときどきで「これがいい」と思うことが
自分の中でも違うのが問題だ(;´д`)
とまぁそんなこんなで少しだけガイドラインぽいものを作ってみた。
とりあえずこれをたたき台にして、徐々に追加・修正を行って
ブラッシュアップしていこうと思っている。

もしこれはちょっと…とか、こうしてみたら?
なんていうありがたい意見がある場合はぜひぜひコメントくださいませ(*'-')

ドロップキャプスを表現する

2006年7月13日 16:16

雑誌などでよく見かけるドロップキャプス(記事の一番最初の文字だけおっきくなってるやつです)
をwebで実現する方法です。
まぁぶっちゃけ、これもよく記事で見かけますがw

サンプルはこちらです↓

http://www.green.dti.ne.jp/edo/web-test/test12/

未だかつて仕事で使った事のない「:first-letter」疑似クラスを使ったものと、
それを使わないで表現したものとふたつ載せてみました。
なんでかって?

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

2006年7月10日 16:19

すべて固定幅の3カラム構成はよく見ると思います。
しかし、左と右にメニューなどを置き、真ん中だけ可変(リキッドレイアウト)にしたい場合もあると思います。
マイナス値のmarginによる現象を利用してこれを実現しちゃいましょう。

サンプル

3カラムレイアウトで、中央を可変にする(リキッドレイアウト)サンプル

CSSだけでポップアップヘルプを実現する

2006年7月 5日 01:25

今回は、CSSのみを使ってポップアップヘルプを実現してみました。
どんなものかというと、特定の語句に説明をつける際、
ポイントしたときにヘルプ表示がポップアップで出てくるようなのを
見かけたことはありませんか?
あれを、javascriptを使わずに、しかも使い回しができるように
CSSで作成してみました。

サンプルはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test10/

CSSはこちら↓
http://www.green.dti.ne.jp/edo/web-test/test10/index.css
↑サーバ解約したため、サンプルが消えてしまいました(;´д`)
時間をみて再アップします・・・。

Win IEで透過PNG画像を使う

2006年6月30日 13:44

さてさて、透過PNG画像。使えるととても便利で、
デザインの幅も広がります。
しかし、Win IEでは透過機能が使えないという大問題がっ。
(またおまえか! とか思いますねw)
まぁIE7になればちゃんと表示されるようになるみたいですが。

しかしながら、Win IEでもなんとか見れる方法があります。
それが今回の記事の主題です(*'-')

CSSによる画像を使ったロールオーバー

2006年6月27日 00:07

ソース解説を追記しました(*'-')

CSSによる画像を使ったロールオーバーです。
すでに色々なところで言われていて、結構ポピュラーなことだと思いますが、
まぁ備忘録ってことでお付き合いくださいw

通りすがりさんに指摘されたので追記です。
ここで紹介しているテクニックは、「背景画像を使用した」テクニックです。
そのため、画像をOFFにして閲覧している人がいた場合、
通常の画像であれば、alt属性に書かれている内容が表示されるため問題ありませんが、
このテクニックの場合、メニューになにも表示されなくなってしまうので注意が必要です。

▼サンプルはこちら
CSSによる画像を使ったロールオーバーのサンプル

新しくサンプルを作りなおして再アップしました。

CSSによるポップアップメニュー

2006年6月23日 23:30

この後のエントリーで「CSSのみでプルダウンメニューを作る」を書き足しました。こちらではJavascriptを使わずにIE6を含めたすべてのブラウザでプルダウンメニュー(ポップアップメニュー)を実現しています。

FlashやJavascriptで実現されるポップアップメニューをCSSで実現するやり方を考えてみたり。
結局、IEにあわせるとJavascriptを介さないといけなくなるんですが、
いちおうFirefoxでならばJavascriptを使わないで実現することはできました。

▼サンプルはこちら
CSSのみでプルダウンメニューのサンプル
http://www.green.dti.ne.jp/edo/web-test/test6/←サーバ移転のため削除されました。

簡単に解説すると、ひとつのボックス要素の中にポイントするとポップアップする部分のメニューを書きます。
それのボックス要素内にdisplay:noneをもつ要素(これがポップアップで出る部分)を書き、通常時には隠れるようにしておく。
そして最初に書いたメニュー部分(サンプルではli要素)に:hover擬似属性を設定する。(li:hover)←これがIEだと使えないんですよねー。

li:hover div{ display: block; }

のように、:hover時にのみblock要素になるように設定を追加します。
そうすることで、:hover時だけ姿を現す、まさにポップアップメニューになります。
とりあえず、今回はIEにも対応させようってことでJavascriptのonmouseoverで上のli:hover divの部分の
代用をしてます。

IE7で:hoverが使えるようになるといいなぁ・・。

FirefoxとIE双方に自然な影をつける

2006年6月21日 17:33

png画像はアルファ値を保存できる画像形式で、影などの徐々に透明になっていくような画像を作るときにとても便利な画像だ。
が、これがまたIEのあほが認識しない。透明部分を白く表示するもんだから、違和感この上ないのだ。
背景が一色など、決まったものであれば白くなる部分にその色を敷いて、擬似的にきれいな影を表現できるが、背景が写真や複雑なパターンなどだとそうはいかない。
ボックスを固定すれば問題ないが、それでは柔軟性に欠ける。
そこで、IEとその他のCSSを振り分けることを利用して、別々の画像を読み込ませることでこれを実現してみた。
また、IEには独自仕様で影をつけるフィルタがあったりする。

やり方は簡単、まず振り分けようのCSSを書き、(ここらへんは情報溢れてるので割愛)
IEには影のついていない画像を読み込ませる。そして、そのボックスに影をつけるフィルターを適用する。
そしてIE以外の、png形式を正しく表示できるブラウザ用に、背景としてpng画像を読み込ませる。
これで完成だ。

まぁIE7はpng形式をサポートするみたいだからいらなくなるかもしれないけど、
ま、思いついちゃったからとりあえずのっけとくw

ちなみにサンプルはこちら→http://www.green.dti.ne.jp/edo/web-test/test2/

なんか不具合があったらコメントにでも残しておいてください(;´□`)

CSSでのプログラム的使用の模索

2006年6月20日 00:34

とあるサイトの記事を読んで、以前から考えていたものを実現へと近づけることができた。
それはCSSのみでJavascriptのような動作をさせる、というもの。
つまり、マウスオーバーで隠れていたコンテンツを表示させ、マウスアウトで再び隠す、というもの。
:hoverをうまく利用したものだ。
ただ、IEの場合、:hoverがa要素にしか使えないため、隠す部分をa要素配下にする必要がある。
そのため、どのブラウザでも問題なく表示されるようあれこれ試行錯誤してなんとか形にしたものがこれだ。
http://www.green.dti.ne.jp/edo/web-test/test/

若干、まだ調整の余地があると思われるが、とりあえずwinでもMacでも動いているので実用に耐えられそうだ。