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

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

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ソースはこんな感じ↓
  1. function cssChange(o){
  2. var linkObjs = document.getElementsByTagName('link');
  3. var selObj = o;
  4. for(i=0; i<linkObjs.length; i++){
  5. if(linkObjs.item(i).href.match(/\/theme\//)){
  6. linkObjs.item(i).disabled = true;
  7. }
  8. }
  9. for(i=0; i<linkObjs.length; i++){
  10. if(linkObjs.item(i).href.match(/\/theme\//) &&
  11. linkObjs.item(i).href.indexOf(selObj.value) != -1){
  12. linkObjs.item(i).disabled = false;
  13. }
  14. }
  15. }
動作は単純で、まずdocument.getElementsByTagName('link')でlink要素をすべて取得します。取得されたリストを元に、最初のfor文でthemeフォルダに格納されているCSSのみをdisabledをtrueにします。

こうすることで、一端すべてのthemeフォルダ内のCSSを無効化し、次のfor文で選択されたthemeのCSSを適用させます。(disabled = false)

【補足】
ひとつ目のfor文ですべての処理を一括してもいいのですが、
なぜかIE6、7ではalternate stylesheetがあらかじめ読み込まれていないのか、
1回目の変更ではCSSが有効になりませんでした。
なので、一回目のfor文ですべてを無効、という処理を入れることで
alternate stylesheetを認識させています。(と思ってますw)

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

以前にふたつほどプルダウンメニューについて書きました。
▼参考エントリー
  1. 入れ子のプルダウンメニューを作る
  2. プルダウンメニューをさらに作り込んでみた
でも、IE対策としてJavascriptを併用したものでした。
が、なんとCSSのみでもIE6にまで対応したプルダウンメニューが実現できるとのことで、ちょっとサンプルを作ってみたのでアップしてみたり。

▼サンプルはこちら
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などで表示がうまくいかないなど問題があったのでそれを改良してみました。

サンプルはこんな感じ。
【サンプル】
------------------------------------------------------------------------------
------------------------------------------------------------------------------
【サンプルHTMLコード】

<div>
<p>
これは<a href="#" class="toolTip">テスト<span>テストテキスト。</span<>/a>です。
</p>
<p>
これは<a href="#" class="toolTip">テスト<span>テストテキスト。</span></a>です。
</p>
</div>

【サンプルCSSコード】

<style type="text/css">
.toolTip{ position: relative; }
.toolTip span{
display: block;
border: solid 2px #999;
background-color: #eee;
color: #666;
text-decoration: none;
position: absolute;
top: 20px;
left: 10px;
padding: 5px;
visibility: hidden;
width: 150px;
}
a.toolTip:hover,a.toolTip:hover span{ visibility: visible; z-index: 100; }
</style>

設定はごく簡単です。
a要素にclassを指定し、「toolTip」を適用するだけ。
そして、ポップアップさせたい文言を<span></span>の中に書いてください。
通常時はspan要素内の文字は隠れていて、該当のリンクにマウスオーバーしたときだけ説明文が表示されます。

内容としては、a:hover spanで、:hover時のみにスタイルを適用する点です。
ただ、以前のエントリーでは、表示位置によりポップアップ部分が文字の下に入り込んでしまう
(下の文章がポップアップの文章にかぶる)状態になってしまっていたので
それを修正した形です。

修正内容としては、a:hover,a:hover spanの両方にz-indexを設定した点。
なぜか、a:hoverにz-indexを設定しないと文字の下に入り込んでしまうようです。(IE7、6)
また、同じ理由でvisibilityも同時にvisibleに設定しないと表示もおかしくなるようです。

【参考コード】

a.toolTip:hover,a.toolTip:hover span{ visibility: visible; z-index: 100; }

確か、heightとかzoomとかを設定すると入るスイッチのようなものが
IEにはあるとかで、そのあたりのせいなんですかね。
ちなみにFirefoxではIEのような現象はありませんでした。

※動作チェック:Firefox2.0.3, IE7, IE6

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

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コミュのがもっと高度でしたが)

ちなみにサンプルはこちら

*{ margin: 0; padding: 0; }
#wrapper{
background-color: #5f5;
width: 100%;
}

#wrappr{
zoom: 1; /* for IE5.5-7 */
}

#wrapper:after{
content: ".";
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}

#centerContent{
float: left;
width: 800px;
}

#leftSide{
float: left;
width: 50%;
margin-right: -400px;
}

#leftSide p{
background: #f55;
margin-right: 400px;
}
#rightSide{
float: right;
margin-left: -400px;
width: 50%;
}

#rightSide p{
background-color: #55f;
margin-left: 400px;
}

簡単に説明すると、左側のbox、中央のbox、右側のboxをそれぞれdivで定義。
そして中央にだけ固定幅を設定し、両端のboxには幅50%を指定。
そして左側boxと、中央boxにfloat:leftを定義。右側boxにはfloat:rightを定義。

ただ、これだけではカラム落ちしてしまうので、ここでちょっと工夫をします。
まず、左側と右側の中にp要素を配置します。
そして、左側boxのdivにネガティブマージン(margin: -○px)を設定。
(※○は、固定幅にした中央boxの幅の半分の値)
さらに、左側box内のp要素に上で設定したネガティブマージン分、今度は普通にマージンを取る。

そうすることで、中央boxの中身が左側にかぶさってきます。
ただ、pに対してマージンを取らないと内容が重なってしまうため、pに対して通常のマージンを取ることでこれを回避します。

あとは、右側にこれとまったく逆の設定をするだけです。
まとめると、両端の幅を50%に設定したあとで、中央box分の領域を無理矢理こじあけることで、両端がリキッドレイアウトになる、ということです。

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

2006年12月14日 10:38

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

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

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

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

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

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

2006年12月13日 15:30

前回、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による現象を利用してこれを実現しちゃいましょう。

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


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

▼サンプルはこちら
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でも動いているので
実用に耐えられそうだ。