お寿司か焼き肉食べたい

まじめな事からしょーもない事まで
めにゅーを開く(投げやり)

見える・・・見えるぞ!!!!

表示の仕方とか諸々についてのCSSです。
結構重要な所にやってきました。

今回のCSS

  • ・要素からはみ出た時どうするか
  • ・要素タイプを変えてみる
  • ・重ねた時の順番を何とかしたい!
です。

要素からはみ出た場合ってどうすれば?

とある要素内の要素が親要素よりも大きくなってしまう場合があります。
身近な例でいえば、スライドショーとか実はそうなのです。

そのままはみだし(デフォルト)うおああああああああああああああああああああああああああああああああああああああああああああああああ
はみ出した部分は表示しないうおああああああああああああああああああああああああああああああああああああああああああああああああ
はみ出した部分はスクロールで見えるように











.testClass
{
  overflow:visible; // はみ出して表示、初期値
  overflow:hidden; // はみ出した部分は非表示
  overflow:scroll; // はみ出した部分はスクロールで見れるように
}

ちょっとこの例では、パッと見、分からないかもしれないですが
親要素よりも子要素のwidthを大きく設定しています。 そして、親要素に対してCSSをかけている形になります。

ブロック要素なのにインライン要素

一番最初にhtmlのタグには、【ブロック要素】【インライン要素】【インラインブロック要素】があるとお話しましたが
その前提をなかったことにしてしまうCSSが存在しています。

通常、aタグはインライン要素の為、幅高さの指定ができません。
下記例ではwidth height を設定していますが、全て無視されます。

しかし、今回のCSSを適用させると、以下のようにリンク範囲が広がります。

.testClass
{
  display:XXXX;
}

display:XXX;のような指定を行います。
指定する値は少し数が多いので以下にまとめます。
使用頻度が高そうなものをまとめています。

スタイルの指定方法 効果
inline インライン要素になります。
これが初期値です。
divにdisplay:inlineを指定
divなのに横並び
divなのに横並び
block ブロック要素になります。
インラインブロックである画像をブロック要素にしてみると、横並びにはできなくなります
block適用
none 非表示状態になります。

オンドゥルルラギッタンディスカー!

33-4 なんでや!阪神関係ないやろ!

そう(焼肉屋でご飯頼んだら)なれば、そう(おなかいっぱいに)なるやろ

おれの怒りが有頂天になった

黄金の鉄の塊

本能的に長寿タイプ

たまに良くある

どちかというと大反対だな

汚いなさすが忍者きたない

仏の顔を三度までという名セリフを知らないのかよ

マジで親のダイヤの結婚指輪のネックレスを指にはめてぶん殴るぞ

inline-block inline-block要素になります。
あああああ
いいいい
table-cell td要素のような表示となります。
わーいわーいうれしいなぁーヾ('A`)ノ
tdって言われてもって感じですが、
td要素にはvertical-alignが効きますので
divなのにvertical-alignが効いちゃうって事です

表示順をかえる!

サイト構築をしていると、とあるときに要素が被ってしまう時があります。
その時に、この要素が常に上に来るようにしたい事があります。
そんな時の指定方法です。
また、指定がない場合は、htmlの記述順、つまり後の方が上にのる形となります。

指定なし

最初に記述した要素
【関西人が家に遊びに来たときに必ず聞く事ってネタ』
おじゃましまぁ~っすってなんや綺麗な部屋やん~全然散らかってへんやん~
で、
たこ焼き機ドコ?
2番目に記述した要素
「クククッ…来たぜ…ぬるりとな…」
待ちに待った字牌【中】をツモる
「これでお前に勝ち目はない。西を捨て、リーチだ!」
「あ、それロンな?国士無双13面待ち。ダブル役満な。」
「なんだとっ!」ぐにゃぁ~

表示順を変えた時

最初に記述した要素
【関西人が家に遊びに来たときに必ず聞く事ってネタ』
おじゃましまぁ~っすってなんや綺麗な部屋やん~全然散らかってへんやん~
で、
たこ焼き機ドコ?
2番目に記述した要素
「クククッ…来たぜ…ぬるりとな…」
待ちに待った字牌【中】をツモる
「これでお前に勝ち目はない。西を捨て、リーチだ!」
「あ、それロンな?国士無双13面待ち。ダブル役満な。」
「なんだとっ!」ぐにゃぁ~
.testClass
{
  z-index:XXXX; // 数値もしくはautoで指定

  // 数値を指定した場合は、0を基準として大きい程上に重なります。
  // autoを指定した場合は、親要素と同じ階層になります。
}

z-indexはpxとかそんな単位はありませんので数値のみの指定となります。
数値が大きいほど、上に乗ります。
デフォルトは0、最大数は2147483647、21億4748万3647でございます。
そんな使うか?みたいな感じに思いますが
どうあがいても一番上にしたい時とか、9999とか当てちゃったりします。

普通に実装しているとこのz-indexは使わないに等しいです。
cssのpositionを使うと結構使ったりします。
positionについては、次回予定ですよ。

もう少しだけ…
先ほど最大値って話をしましたが、最低値もあります。
-2147483647が最低値、マイナスの指定もできます。
ちなみに32ビットの範囲って事です。32ビットについて説明するwiki先生

【ちょっとだけ重要】

A要素:z-index:-1;
B要素:z-index:1;
C要素:z-index:0;
の時の重ね順はどうなる?

B要素:z-index:1;
C要素:z-index:0;
A要素:z-index:-1;
と思うのが性なのですが、実はこれ間違いです。

B要素:z-index:1;
A要素:z-index:-1;
C要素:z-index:0;
が正解。0が常に一番した。

0「俺以外でやってくれ。一番したにいるから」
その他「おっしゃ。0以外で数値の低いやつから順番に重なっていけ」

って感じ。何故かって、それはもう【そういうもんなんだ】と割り切ってください。

ややこしい話が続いていますが、まだ最後にもうイッコだけ…

親要素のz-indexを継承する

A要素:z-index:-5;
Aの子要素1:z-index:100;
Aの子要素2:z-index:-100;
B要素:z-index:10;
C要素:z-index:1;

で重なった時!!!!
Aの子要素1:z-index:100;
B要素:z-index:10;
A要素:z-index:-5;
C要素:z-index:1;
Aの子要素2:z-index:-100;

こうやろ!!!!!

んん!!!!ちがいます!!!!!(アブゥ・・・)

AとBとCは同じ階層同士の要素です。
で、親要素にz-indexが指定されている場合は、子要素のz-indexとは比較せず、親同士のz-indexで判断されます。
なので、

B要素:z-index:10;
A要素:z-index:-5;
Aの子要素1:z-index:100;
Aの子要素2:z-index:-100;
C要素:z-index:1;
が正解!!!

ほっほ~うなるほどねぇ~で終われば良いんです。本当にいいんですが…

例外がありますよ!!!
これ書いてる時に知りました。

A要素:z-index:auto;
Aの子要素1:z-index:100;
Aの子要素2:z-index:-100;
B要素:z-index:10;
C要素:z-index:1;

変わった所は赤字部分、z-index:autoが指定されています。
さて、これはどうなるかと言いますと

Aの子要素1:z-index:100;
B要素:z-index:10;
C要素:z-index:1;
A要素:z-index:auto;
Aの子要素2:z-index:-100;

こうです。もう頭痛い。へぇーって思ってていただいてOKです。
これも、【そういうもんなんだ】と割り切ってください。すいません。こうなるからしょうがないじゃないか…


【z-indexのまとめ】
1:数値が大きいほど、上になる
2:32ビットの数値で指定できますよ
3:0が一番下。マイナスは0の上
4:同階層でのz-index判定をします。

これだけで大丈夫です…
IEやらなんやらありますが、時間的にもヤバいので割愛。

練習問題的な

z-indexはposition時に行いますので、今回はoverflowとdisplayです。
ミッションは以下
1:pタグをインライン要素にする。
2:大き目のdivを作り、子要素としてaタグを入れる。
  aタグはblock要素にして、親要素のより大きく設定する。
  また、親要素にははみ出した場合はスクロールにする。
  →スクロールバーが出ればOK
  →スクロール内全体がリンクエリアになればOK
3:ブロック要素をテーブルセル要素にし、中の文字列を、上下左右中央にしてください。

参考