この記事は、[暴満館]さんの「JavaScriptによるCSSの操作」と[IT戦記]さんの「getComputedStyle について調べてたら深みにハマったのでメモ」を参考にさせて頂きました。
外部CSSファイルなどから適用されているCSSのスタイル（や値）を取得するスクリプトです。 通常、Javascriptからstyleを操作する場合、「element.style.marginLeft = '15px'」などと記述すると思います。 しかしこれ、「style = element.style.marginLeft」などとしても、Javascriptで値を設定したあとでないとうまく値を取得できません。
ということで、今回はJavascriptを使って、外部（内部）CSSや、直接指定されているスタイルなどの値を取得するスクリプトの紹介です。
「現在適用されているCSSの値をJavascriptで取得する」サンプル
【追記】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です。
前回のエントリーに引き続き、-webkit-transitionを使ってアニメーションのCSSについて書きたいと思います。
-webkit-transitionのアニメーションについては前回の記事「CSS3はアニメーションも指定できる！」を参照ください。動画キャプチャ入りで簡単に説明してます。
今回は、-webkit-transitionを使ってアニメーションで表示されるプルダウンメニューを作ってみたいと思います。
下位階層があるメニューにマウスオーバーすると、下位階層のメニューがフェードインとともに下にスライドしながら出てくる、というものです。
とりあえず言葉で説明しても、百聞は一見にしかずなので、サンプルを見てください。以下に動画サンプルも表示してます。
（※実際のサンプルは、webkit系が実装しているCSSを使用しているので、Safariかwebkit以外で見ると、通常のプルダウンメニューになります。また、IE6では動作しません）
「CSSだけでアニメーションプルダウンメニューを作る」サンプル（Safariでご覧ください）
先日、CSS Reloadedというイベントに参加してきました。
そこではCSS3の可能性を示唆していました。
内容としてはとても刺激的で、将来、現在あるJavascriptライブラリのほとんどが必要なくなるのではないかと思わせるほどでした。
ただ問題点として、対応ブラウザがwebkit系（Safari）しかないこと。
また、正式にCSS3として勧告されているわけではないこと（今Safariでできることが実装されない可能性）。
などがあります。
ただそれでも、ぜひ実装してほしいと強く願うほど、とてもすばらしいプロパティがありました。
ということで今回は、あまり実用性はないものの、この感動を知ってもらいたいということから、CSS3について書きたいと思います。
ちなみに、これから書く内容は、上でも書いた通りSafariでしか実行できないため、サンプルを見る際にはSafariで見てください。（Safariのダウンロードはこちらから）
↓実際に動いているところを動画でキャプチャしたところ。
まずはサンプルを見てください。↓
サンプル
こういった、「枠からはみ出した画像を配置する」というデザインは多々あると思います。
これを、position: absoluteなどで配置するのは簡単ですが、ドロップシャドウなど半透明部分を使用しないと配置がむずかしい画像の場合、少々やっかいだったりします。
そこで、position: absoluteを使わずに、背景を使用して設定する方法を書いてみたいと思います。
アルバムや写真ギャラリーなど、画像をリストにして横並びに配置したいときがあると思います。
すべての画像が同じサイズであれば特に問題ないと思いますが、それぞのれ画像のサイズが違う場合、特に高さが小さい画像などが含まれる場合、縦方向に中央に配置するのがむずかしいと思います。
(テーブルを使えば比較的簡単にできますが、いちおうCSS関連のブログなのでCSSで実現する方法でｗ)
例えばこんな感じ↓
今回のテクニックの肝は、displayのプロパティである「table-cell」「inline」「inline-block」の3つを複合的に使うところです。
ちなみにこのテクニックは、自分が愛読している「CSS HappyLife」さんのところの「画像とかの横にあるテキストを上下中央に」というエントリーを参考にさせてもらいました。
異なるサイズの画像を縦横中央配置にしてリスト状に並べるサンプル(IE互換モード)
異なるサイズの画像を縦横中央配置にしてリスト状に並べるサンプル(IE準拠モード)
最近使っている背景の使い方なんかを紹介してみようと思います。
内容は簡単で、極端に大きい背景を作って、それを固定配置にすることで実質のコンテンツの伸縮に対応する、というものです。
それほど凝った背景じゃなかったり、コンテンツのおおよその最大値が分かるときなんかに使えるテクニックです。
▼解説は以下から
サンプル
2行追加するだけで、簡単にIE6でもmin-heightを実現する方法サンプル
Internet Qualityさんの所の紹介エントリーにあったサイトで、IE6だけにうまくCSSを適用しているサイトがあったので、自分のメモとしてもエントリー。
Example: margin: 20px !important; margin: 10px;
サンプルを見ると、ごく簡単な処理になってます。
通常、importantを指定したスタイルが適用されますが、どうやらIE6の場合、同じセレクタ内の場合はimportantで書かれていても、そのあとに書かれた同じスタイルが適用されてしまうようです。
なので、IE6だけに適用したいものなんかは、ハックを使わずにこんな感じで適用するとスマートかも。ただし、imporantを使ってるので、他のところで上書きしようとしてもできないので、通常のハック同様、乱用は禁物ですが・・・。
RedLine MagazineさんのCSS3 :target擬似クラスでイメージギャラリーを見て、ふと思いついたのでサンプルを作ってみた。
▼サンプルはこちら
:target擬似クラスを使ったプルダウンメニューサンプル
内容は、:target擬似クラスを使った、windowsのメニューバーのようにクリックしたらメニューが現れるタイプのメニュー。
それを、JavascriptなしでCSSのみでやってしまおう、というのが今回の主旨。
※追記[2008/09/25]
説明に表示していたHTMLに誤りがあったため、修正しました。
以前にふたつほどプルダウンメニューについて書きました。
▼参考エントリー
なぜCSSのみで実現できるのか理由までは分かっていませんが、これで動く、というところまで紹介したいと思います。
CSS Happy Lifeさんの記事で、目からウロコ的な記事を見つけたので、自分でも備忘録的にCSSを書いてみました。
※すいません、ちょっとIE6でレイアウトが崩れてたので修正しました(;´д｀)
「3カラムすべてで背景の長さを揃える2」のサンプルはこちら
「3カラムすべてで背景の長さを揃える」のサンプルはこちら
大雑把に説明すると、3カラムすべてを囲ったボックス要素に、overflow:hidden;を適用させて3カラムすべてに大きな下paddingを設定し、さらにそれをネガティブmarginで相殺する、というもの。
<h1 id="title" class="ico bg">test</h1>
えぇ、以前、CSSだけでポップアップヘルプを実現するというエントリーを書きましたが、若干IEなどで表示がうまくいかないなど問題があったのでそれを改良してみました。
サンプルはこんな感じ。
これはテストテストテキスト。です。
これはテストテストテキスト。です。
以前、中央を可変でのリキッドレイアウトについて書きましたが、とあるmixiのコミュ内で、両端を可変にするリキッドレウアウトについて書かれていたので、面白くて自分も作ってみました。（mixiコミュのがもっと高度でしたが）
3カラムレイアウトで、両端を可変にする。（リキッドレイアウト）サンプル
▼解説は以下から。
関連エントリー
このあとのエントリーで、「CSSのみでプルダウンメニューを作る」を書いてます。
IE6にも対応しているので、参考にしてみてください。
前回、CSSによるポップアップメニューでポップアップメニューを作成したけど、今度はそれをさらに発展させて入れ子のポップアップメニュー（プルダウンメニュー）を作ってみた。（というか、案件でそういうのを作ることになって、サンプルを作ったのでアップしてみただけだけどｗ）
ただ、IEでも動作するようにするため、Javascriptを介入させている。
IEを省いて、モダンブラウザのみで動けばいい、ということであればCSSだけでも実現できるようだ。
faLogさんを参考にしたので、CSSだけで実現させたい場合は参考にしてください。
ちなみに、入れ子を複数指定しても大丈夫なように作ってます。
<li>要素の中に<ul>要素を入れ子にしていくだけで、階層構造が作れるようになってます。
<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>
関連エントリー
すべて固定幅の3カラム構成はよく見ると思います。
しかし、左と右にメニューなどを置き、真ん中だけ可変（リキッドレイアウト）にしたい場合もあると思います。
マイナス値のmarginによる現象を利用してこれを実現しちゃいましょう。
今回は、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
↑サーバ解約したため、サンプルが消えてしまいました(；´д｀)
時間をみて再アップします・・・。
さてさて、透過PNG画像。使えるととても便利で、
デザインの幅も広がります。
しかし、Win IEでは透過機能が使えないという大問題がっ。
（またおまえか！ とか思いますねw）
まぁIE7になればちゃんと表示されるようになるみたいですが。
しかしながら、Win IEでもなんとか見れる方法があります。
それが今回の記事の主題です(*'-')
ソース解説を追記しました(*'-')
CSSによる画像を使ったロールオーバーです。
すでに色々なところで言われていて、結構ポピュラーなことだと思いますが、
まぁ備忘録ってことでお付き合いくださいｗ
通りすがりさんに指摘されたので追記です。
ここで紹介しているテクニックは、「背景画像を使用した」テクニックです。
そのため、画像をOFFにして閲覧している人がいた場合、
通常の画像であれば、alt属性に書かれている内容が表示されるため問題ありませんが、
このテクニックの場合、メニューになにも表示されなくなってしまうので注意が必要です。
▼サンプルはこちら
CSSによる画像を使ったロールオーバーのサンプル
新しくサンプルを作りなおして再アップしました。
