Web Page を作る際に、よく要素を横で並べたりするので、リストを使うと、通常縦並びになりますが、このとき、li に float: left をつけると、横並びに変わります。もちろん、li の width を注意しなければならない。一般的に親要素の 100% width を割り算して、設定します。例えば、三つ li の場合、width を 33.33333% に設定します。
ですが、 float になった要素はポジションとして height が計算されないから、他の要素が上にかぶるとか、親要素が高さが足りないとか、そういうことがたびたび見かけます。
このとき、親要素の height を設定しましょう。または li:first-child に float: none を設定して、位置とサイズをちゃんと与えましょう。自分の後ろの方法が好きですけど。
clear: both も一つの方法です。ul の後ろに、div clear の要素を挿入することで、ちゃんと境界が作れいます。通常 div に内容がない場合、height と width がともに 0 ですので、見えないです。 clear : both というのは float の要素と別に、次のブロックを始まります。
それでは。
2014年2月16日日曜日
2014年2月3日月曜日
CSS Tips 2: z-index
複雑な Web App を作るときに、必ず overlay や、ダイアログなど、ある要素の上に他の要素を表示するケースが出てきます。このとき、CSS の z-index をよく使います。
z-index は名前とおり、レイヤーを定義する属性です。例えば、z-index を 200 を指定すると、z-index の値がそれ以下の要素の上に、対象要素が表示されます。
注意すべきところは z-index が position 属性と関係あります。いわば、 position が static 以外の要素しか z-index が効かないのです。
position については前の記事をご参考ください。
つまり、何で z-index が効かないと思ったら、要素の position を確認してから z-index を数字を確認すべきです。
IE6 からこういう動きですので、現在のブラウザもその通りに動きます。知らないのはちょっと面倒なことになりますので、メモしておきます。
z-index は名前とおり、レイヤーを定義する属性です。例えば、z-index を 200 を指定すると、z-index の値がそれ以下の要素の上に、対象要素が表示されます。
注意すべきところは z-index が position 属性と関係あります。いわば、 position が static 以外の要素しか z-index が効かないのです。
position については前の記事をご参考ください。
つまり、何で z-index が効かないと思ったら、要素の position を確認してから z-index を数字を確認すべきです。
IE6 からこういう動きですので、現在のブラウザもその通りに動きます。知らないのはちょっと面倒なことになりますので、メモしておきます。
2014年1月21日火曜日
CSS tips 1：position:relative, absolute, fixed
CSS には color などの属性以外、いろんなルールがあります。今までちょっといたい目にあったことをまとめておきました。↓
1 position : absolute, relative
HTML のエレメントはブラウザのウィンドウのどこに表示するかはいろいろルールがあります。一般的にこれはブラウザ自身が決まります。例えば、div がブロック要素なので、display 属性を指定しないと、次の行から表示されます。
要素のポジションを変えたい場合は、position を使います。もし position を指定しないと、デフォルトの値が static になります。
position:relative の意味は 親と static の位置より、left/top/right/bottom で指定した値に従って、相対的に移動します。相対位置になります。
position:absolute の意味は親の位置より、left/top/right/bottom で指定した値に従って、表示されます。absolute というのは絶対位置です。
position: fixed はちょっと違います。Fixed は一般的にブラウザの document より位置が決まります。エレメントを常に表示したいときは使います。
今までのプロジェクトでは relative と absolute はよく使います。なぜなら、デザインより、要素を位置を変えたいから。当たり前ですけど。
注意すべきところは、親の位置から relative / absolute になります。この親は必ず position が static ではない親です。もし見つからなければ、 body エレメントに参考して、位置を決めます。
例として、ツールチップを実現したいですが、 js ライブラリを使いたくない場合、css の hover で display 属性を none/block で切り替えます。ツールチップ span エレメントで定義している場合、この span の位置を変えたい場合、親の position を relative にして、left/top/right/bottom を指定しない場合は、 static と同じ位置になりますが、 span はこの親により位置が決まります。
それでは。
1 position : absolute, relative
HTML のエレメントはブラウザのウィンドウのどこに表示するかはいろいろルールがあります。一般的にこれはブラウザ自身が決まります。例えば、div がブロック要素なので、display 属性を指定しないと、次の行から表示されます。
要素のポジションを変えたい場合は、position を使います。もし position を指定しないと、デフォルトの値が static になります。
position:relative の意味は 親と static の位置より、left/top/right/bottom で指定した値に従って、相対的に移動します。相対位置になります。
position:absolute の意味は親の位置より、left/top/right/bottom で指定した値に従って、表示されます。absolute というのは絶対位置です。
position: fixed はちょっと違います。Fixed は一般的にブラウザの document より位置が決まります。エレメントを常に表示したいときは使います。
今までのプロジェクトでは relative と absolute はよく使います。なぜなら、デザインより、要素を位置を変えたいから。当たり前ですけど。
注意すべきところは、親の位置から relative / absolute になります。この親は必ず position が static ではない親です。もし見つからなければ、 body エレメントに参考して、位置を決めます。
例として、ツールチップを実現したいですが、 js ライブラリを使いたくない場合、css の hover で display 属性を none/block で切り替えます。ツールチップ span エレメントで定義している場合、この span の位置を変えたい場合、親の position を relative にして、left/top/right/bottom を指定しない場合は、 static と同じ位置になりますが、 span はこの親により位置が決まります。
それでは。
2013年12月11日水曜日
Cross-browser CSS バグなどいろいろ
CSS なんで、たまに難しいですな。IE はそのように表示して、Firefox と Chrome はあのように表示するかはなぞなぞです。 orz
ただ、今まで、わかって来たことは Chrome は一番 HTML 標準を準じているとのことです。 Firefox も結構いいですが、たまにこれはちょっと違うなと思われます。
バグなおしの経験：
1 IE 6, 7, 8 である要素をクリックすると、ブラウザの画面が下または上に飛ぶ。
これは大体クリックされた要素の position は relative か、absolute で、しかも親要素の position は何も設定されてないためです。
要素の position は「初めて position は static ではない親」の位置から決めます。もし親要素の position が設定してなかったら、デフォルトは static になります。そうすると、ブラウザは上まで一つ一つ探して、body まで見つからなかったら、body の位置を参照して、要素の位置を決めます。
そうすると、ある position 設定されている要素をクリックすると、もし親の position が何も設定されてなかったら、 body の位置と参照して、ブラウザが要素を表示しようとして、ウェブページが飛ぶようになります。
IE9 と IE10 はこのバグがなおされたようです。
2 IE の haslayout 関係
古いバージョンの IE は悪魔です。。。 具体的に下記をご参照：
3 Firefox と Chrome で要素の default padding などの設定が違う。
そうすると、div や、button のデフォルト大きさが違います。
4 ブロック要素と インライン要素
div, p などはブロック要素で、span などはインライン要素です。ブロック要素の中にはブロック要素を含むと、ブラウザが内包したブロック要素の前に終了タグを挿入します。そうすると、たまに、一つ段落の中にスペースができたりします。
このブロック要素中のブロック要素をインライン要素に変更したら、自動的に変なスペースがなくなります。
5 IE, Firefox 4〜, opera では button type=image の値が submit されない。
イメージボタンは便利なものですが、その中の value が submit されないので、label + image タグを使った方がいいです。
これは W3C 標準の解読が違うため、イメージボタンはクリックされた位置だけ送信されるようになっています。
元々、Firefox 3 は送信しましたけど、 4 からは他のブラウザと同じように送信されなくなりました。
Chrome は大丈夫です。：）
6 IE で要素が Float 位置が間違う問題
これは大体 IE7, IE8 で発生します。float を display: inline-block; zoom: 1; に直せば、問題が解消されます。
続いて、IE の CSS Hacks:
HTMLタグだったら：
これも
IE7 では文字列は slice 関数が持ってないから、エラーになります。 IE8〜, Chrome などはちゃんどあります。
cross browser は本来一つ一つのブラウザをみて、少しずつ調整することです。
あ、後一つ
IE 7 から quirks モードの設定はメニューに追加されて、イントラネットのウェブページだったら、自動的に quirks モードになります。
そうすると、Layout が大体崩れます。そのチェックを外した方がいいです。
ふろしき.js
そうすると、div や、button のデフォルト大きさが違います。
4 ブロック要素と インライン要素
div, p などはブロック要素で、span などはインライン要素です。ブロック要素の中にはブロック要素を含むと、ブラウザが内包したブロック要素の前に終了タグを挿入します。そうすると、たまに、一つ段落の中にスペースができたりします。
このブロック要素中のブロック要素をインライン要素に変更したら、自動的に変なスペースがなくなります。
5 IE, Firefox 4〜, opera では button type=image の値が submit されない。
イメージボタンは便利なものですが、その中の value が submit されないので、label + image タグを使った方がいいです。
これは W3C 標準の解読が違うため、イメージボタンはクリックされた位置だけ送信されるようになっています。
元々、Firefox 3 は送信しましたけど、 4 からは他のブラウザと同じように送信されなくなりました。
Chrome は大丈夫です。：）
6 IE で要素が Float 位置が間違う問題
これは大体 IE7, IE8 で発生します。float を display: inline-block; zoom: 1; に直せば、問題が解消されます。
続いて、IE の CSS Hacks:
- body {
- color: red; /* all browsers, of course */
- color : green\9; /* IE8 and below */
- *color : yellow; /* IE7 and below */
- _color : orange; /* IE6 */
- }
HTMLタグだったら：
<!DOCTYPE html> <!--[if lt IE 7]> <htmlclass="no-js ie ie6 lte9 lte8 lte7"><![endif]--> <!--[if IE 7]> <html class="no-js ie ie7 lte9 lte8 lte7"><![endif]--> <!--[if IE 8]> <html class="no-js ie ie8 lte9 lte8" ><![endif]--> <!--[if IE 9]> <html class="no-js ie ie9 lte9"><![ endif]--> <!--[if gt IE 9]><html class="no-js ie gtie9"><![ endif]--> <!--[if !IE]><!--> <html class ="no-js not-ie"> <!--<![endif] -->
これも
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">IE7 では文字列は slice 関数が持ってないから、エラーになります。 IE8〜, Chrome などはちゃんどあります。
cross browser は本来一つ一つのブラウザをみて、少しずつ調整することです。
あ、後一つ
IE 7 から quirks モードの設定はメニューに追加されて、イントラネットのウェブページだったら、自動的に quirks モードになります。
そうすると、Layout が大体崩れます。そのチェックを外した方がいいです。
ふろしき.js
登録:
投稿 (Atom)