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

リスト表示へ

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

2008年9月25日 00:35

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

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

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

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

2008年9月 2日 13:55

【追記】CSS ソースの記述順序が間違っていました。正しくは、display: -moz-inline-box; display: inline-box; inline-block;の順で記述します。説明ではこの順序が逆でした。
順序が逆だと、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はアニメーションも指定できる! を参照ください。動画キャプチャ入りで簡単に説明してます。n

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

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

実際に動いている動画サンプル

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

2008年8月10日 00:34

すみません、プロパティの名前が一部間違っていました。-webkit-transition-propaty と書いていたのは正確には-webkit-transition-propertyです。

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

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

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

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

実際に動いている動画サンプル

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

2008年7月 4日 17:29

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

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

余白を設定したdiv内のタイトル要素だけ余白を無視させる

2008年6月19日 18:16

カテゴリごととか、コンテンツごととか、div でひとくくりにして決まったレイアウトで並べていく、というのはよくあると思います。

その中で、ひとつの div 内に h1 要素や p 要素、ul 要素などが混在していると思います。
その div に全体の余白を設定するケースもよくあると思います。

しかし、h1 要素などのタイトル部分には余白を設定したくない、という状況も結構あるのではないでしょうか。(俺だけかな・・)
まぁサンプルを見るのが一番早いので↓こんな感じ。

サンプルタイトル

サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。
サンプル文章、サンプル文章、サンプル文章、サンプル文章、サンプル文章。

ぱっと見はわかりづらいかもしれませんが、全体を囲う div に padding を設定し、タイトル部分だけネガティブマージンで相殺しています。
これに気付く前は、その div からタイトル要素だけを外に出して...みたいなことをやってました。
が、コンテンツが増えていくとソースが見づらい上に編集もなんだかめんどくさい。

で、ネガティブマージンで解決できるだろうってことに気づいて適用してみたものの、なぜか IE では見た目的には余白が消えたものの、なぜか反対の余白がまだ残っているらしく、親ボックスの div の幅が伸びる。
さらに IE の「幅が勝手に伸びる」というバグも手伝って、float しているレイアウトの場合なんかはカラム落ちまでする始末。

なので、しばらくこの方法を封印していたのですが、なんと反対側の部分にもネガティブマージンを設定するときれいに余白が消えることを発見!(当たり前かもしれませんが、気づかなかった・・)
なのでメモ的にエントリーを書いてみました。ソースは以下から。

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

2008年5月25日 16:53

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

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

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

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

2008年5月18日 14:58

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

理論的な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を実現する方法デモ

解説は以下から。

左右に余白のある横並びのリストを親要素の両端にぴったりとくっつける小技

2008年3月11日 16:43

float させてリストを横に並べる機会は結構あると思います。
メニューなんかの場合はそれぞれのリスト要素を余白を空けずに並べたりしますが、
通常のリストなんかの場合は左右どちらかに余白を空けて並べるのが通常だと思います。n

その際、当然 margin を使ってそれぞれのリストとの余白を空けますが、
すべてが同じ CSS が適用されるため、margin を指定したくない(大概は最後の)要素が出てきます。
最後の部分に別途クラスを指定するか、CSS3 であれば 3 回に 1 回の部分は margin を消す、
なんていうフレキシブルな対応ができますが、CSS3 はまだまだ実装されてきているとは言えません。n

そこで、現状でも使えるプロパティのみで親要素の両端にぴったりとくっつくように
リスト要素を収める方法を書いてみました。n

左右に余白のある横並びのリストを親要素の両端にぴったりとくっつける小技デモ

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