html/css

html,body{height:100%}でブラウザー表示領域一杯まで広げたブロック要素に、余白やborderを含ませつつ100%におさめる方法

こんな感じのレイアウト

box-sizingでheight100%のブロック要素にラインを引く

tableを使わないと不可能だと思ってたけど普通にできちゃうんだねぇ
サンプル

css3のbox-sizingを使った

box-sizing-CSS3リファレンス
[css]
/*初期値 paddinもborderも含めない*/
box-sizing:content-box;

/*paddingとborderを含める*/
box-sizing:border-box;
[/css]

どっちにしろmarginは含ませる事は出来ないのでレイアウトによってはちょっとした工夫や無駄な要素が必要になるかも。

対応ブラウザ

firefox以外のモダンブラウザーには実装済みで
そのfirefoxもベンダープレフィックスをつければ使える。

ブラウザ 確認したバージョン ベンダープレフィックス
safari 5.1.2 不要
chrome 20.0.1132.52m 不要
firefox 13.0.1 必要(-moz-box-sizing: border-box;)
opera 11.64 不要
IE 9 不要
IE 8 不要

他の手段を使って同じように組む事も出来るのかな?

html5で隙間

sectionとarticleの違いがよく分からないまま
ちょいちょいhtml5でコーディングを始めた
そんなこんなで画像の下に隙間ができる。

firebugを見上がら、なんだっけなーこれって思ってたけど
reset.cssのimgの指定がこうなってた

[css classname=”css-sh”]
img{border:0;}
[/css]

なのでvertical-align:bottom;を追加してみたら隙間が消えた。
[css classname=”css-sh”]
img{border:0;vertical-align:bottom;}
[/css]

昔、vertical-align:bottom;を指定してたと思うのだけれど、
なんで今入ってないんだろう
何か理由があって削除したのかな?

思い出せない

iframeに開くページを、location.searchで受け取った値で変更させちゃっても問題ない?

iframeを持つ1つのhtmlを使い回して
中身だけを変更したいんだけど何かいい方法はないかね?と聞かれて
iframeの中身をバラバラに作るくらいならiframeやめなよと答えたけど
気になったので少し考えて
location.~が使えそうじゃない?と以下のソースを書いた

親(index.html
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ|親ページ</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />

</head>
<body>
<ul>
<li><a href="after.html?http://www.google.com">googleを開く</a></li>
<li><a href="after.html?http://www.yahoo.com">yahooを開く</a></li>
</ul>
</body>
</html>[/html]

子iframeがあるhtml(after.html
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>乱雑モックアップ|子ページ</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
window.onload=function(){
var innerUrl=location.search.substring(1);
document.getElementById("innerFrame").src=innerUrl;
}

</script>
</head>

<body>
<iframe id="innerFrame" src="" frameborder="0" width="640" height="480"></iframe>
</body>
</html>

[/html]

これで、親ページのリンクの?以下の名前
(after.html?http://yahoo.co.jpならhttp://yahoo.co.jp)のファイルを
子のiframeで開けるのだが
これ、大丈夫なんでしょうか?

?javascript:alert('alert');

でalertがでるけど、alertを任意に使えるって事は何か別の事がされるんだろうか?
パスワードなんかを扱わないページは気にしなくていいのだろうか。
という感じで使えるものかわからんので教えてない。

メモ / YUIフォントを使うときにやっておくと役立つ事

[image]YUI 3: CSS Fonts

font-size、
pxで指定するとIEで拡大縮小できなくなる、font-size。

ブラウザやOSやフォントによって大きさも変わるしって事で
bodyに85%くらいを指定するくらいでおしまい、って感じに
結構ぞんざいに扱っていました。

そんな人間なのに、最近意味もなく
「YUI CSS Resetを使ってるし、YUI CSS Fontsも使ってみようかな」と思い立ち
YUI3.3をダウンロードしたはいいけど忙しくて放置してところに
素敵なタイミングで以下の良エントリーがっ。

YUI 3のCSS Fontsを使っている場合のフォントサイズ対応表をCSSのコメントに書いておくと便利ですよね :: 5509
※cssコメントの対応表あり

みんな、pxに対応する%を覚えて使ってんのかなぁ、すげぇなぁ。。。と思ってたけど、コメントいれちゃった方が優しいっすよね。
さっそくパクろう。

YUI 3: CSS Fontsのダウンロードや対応表

YUI 3: CSS Fonts
解凍後以下のフォルダの中にあるよ

YUI Library\yui\build\cssfonts

fonts-context.cssってなんだろ

追記
使い方間違ってたっ!!

任意のfont-sizeをYUI CSS Fontsを読み込んだあとの
bodyに指定してたので次のような事になってた。

font-familyを変更したらサイズが合わない?

[css]body{
font-family:"メイリオ", Meiryo;
font-size:93%;
}[/css]
としたら12pxにならなかった。

確認用の画象(20110424.png)をつくって、
[image]サイズチェック用画象

確認用のソースを用意して
[html]<style type="text/css">
body{
font-family:"メイリオ", Meiryo;
font-size:93%;
}
.test{
padding:20px;
position:relative;
}
.text{
position:absolute;
top:88px;
left:30px;
color:#f33;
}
</style>
</head>

<body>
<div class="test">
<p>メイリオで12px</p>
<p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div>
<div class="test">
<p class="text">メイリオで12px</p>
<p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div></body>[/html]

textを重ねてチェックしてみたら、15pxになってるぽい。
表示結果
[image]93%で15px

検索すると理由が書いてありました
YUIのfonts.css[to-R]
bodyにfont-sizeを指定するとyuifontsの指定が上書きされちゃうのね
そりゃそうだ。

上記cssを以下のように変更してチェック
[css]<style type="text/css">
body{
font-family:"メイリオ", Meiryo;
}
.test{
font-size:93%;/*←ここに移動*/
padding:20px;
position:relative;
}
.text{
position:absolute;
top:29px;
left:31px;
color:#f33;
}
</style>
</head>

<body>
<div class="test">
<p>メイリオで12px</p>
<p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div>
<div class="test">
<p class="text">メイリオで12px</p>
<p><img src="20110424.png" width="145" height="115" alt="" /> </p>
</div></body>[/css]

表示結果
[image]今度は12px

最初にリンク貼った徳田さんとこのサンプルソースもそうゆう風に書いてあるのにね。

safariで微妙に太く表示されるフォントを、他のブラウザに合わせる。

どうも-webkit-font-smoothing:というプロパティがあるようで
safariはデフォルトでsubpixel-antialiased;があたっているようです(windowsは)。

でもってその値にantialiased;を指定すると
他のブラウザと同じような細さになるようなならないような。

確認用スクリーンショット

[image]-webkit-font-smoothing適用スクリーンショット

確認用ページ

※safariで見ないと意味ないよ。
-webkit-font-smoothingでsafariの文字の太さを他のブラウザと合わせる。

プロパティと値

[css classname=”css-sh”]
-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
[/css]

noneを指定したら、それ以降が激しく文字化けしたので
確認用ページから外した。

参考にしたサイト /

Maxvoltar – -webkit-font-smoothing

firefoxでmargin-bottomがmargin-top

[追記 / 20110323] コメント欄に別の対処法が2件あるよ

[image]firefox / 上にmarginが付いてh1との間に隙間があいてる

理由がわからないんだけど
Firefox(3.6.15のみ確認)でmmargin-bottomがmargin-topになるのです。

[html classname=”html-sh”]<h1>h1-text</h1>
<div id="primary">
<div id="secondary">
<ul>
<li>list</li>
<li>list</li>
<li>list</li>
</ul>
</div>
</div>
<p>text</p>
[/html]
[css classname=”css-sh”]
/*すでにresetしてあるとして*/
body {
padding:20px;
}
h1 {
background:MistyRose;
}
#primary {
background:olive;
}
#secondary {
background:lavender;
margin-bottom:20px;
}
li {
float:left;
background:darkorange;
margin-right:10px;
}
p {
background:dimgray;
}
/* clearfix
————————- */
ul {
/zoom : 1;
}
ul:after {
content : ”;
display : block;
clear : both;
height:0;
}
</style>
[/css]

スクリーンショット

chrome

こうなって欲しい
[image]chrome / h1と#primaryに隙間は開かない

IE8

こうなって欲しい
[image]IE8 / chromeと同じ

Firefox

なのにこうなる
[image]firefox / 上にmarginが付いてh1との間に隙間があいてる

原因と解決法を考える

結論から先に書くと、上記の構成の場合
ulにdisplay:inline-block;を追加して意図した表示に出来た。
[css classname=”css-sh”]
ul{
display:inline-block;
}
[/css]
あれ、display:tableでも平気か?

Firefox

display追加するとこうなった。
[image]firefox / display:inlin-block;追加

けど理由が全くわからない。

どんな状況で発生するのか試してみると
liにposition:absolute;でも同じ現象が起きたので
浮動体に問題がありそうな感じ

多分Firefoxが間違ってるんだろうけど
firefoxの仕様が正しいのか他のブラウザーの仕様が正しいのか知りたい

ここら辺を理解できたら解決するのだろうか。。。?
Visual formatting model
Box model / 8.3.1 Collapsing margins

ulにborderを付けてもmargin-topみたいな隙間は消える
[image]border付けた
border使えない時はこれじゃダメだ。

rollover2.jsとoperaと色々復習

凄く滑らかなロールオーバーを超お手軽に実装できるrollover2.jsというものがあるんですが
クロスフェードするロールオーバー処理をお手軽に実装するJavaScript – KAZUMiX memo
クロスフェードするロールオーバー処理 動作サンプル – XHTML サンプル | KAZUMiX memo

これ、imgにvertical-align:bottom;や
vertical-align:top;を指定してある場合、
operaでpositionの基準点がうまくいってないような感じの
とんでもない表示になってて(v10.50以前は確認してないけど)

例 / positionの基準点がうまくいってない感じの表示
[image]左がfirefox、右がopera

今気づいたけど
aタグの中にrollover2.jsのロールオーバー対象になるimgだけが入っていると
おかしくなる。

aタグの中にimgの他に、テキストが入っているとおかしくならない。

蛇足 / imgにvertical-align:bottomしたい(してる)理由

ご存知vertical-alignの初期値はbaselineなので
アルファベットのg,j,p,q,yの下に飛び出る部分(ディセンダって名称らしい*1)の余白が確保され、テキストと並べた時にimgの下に隙間ができちゃう

この隙間を埋めるには、vertical-align:text-bottomを指定するのが定石みたいなんだけど
operaだとテキストの位置がズレてたので(10.50以降?)、
いつしかbottomで指定するようになって
しばらくしてbottomを指定するようになった理由を失念してました。

[image]text-bottomとbottom
今確認してみたらbottomも表示が変だった><;;;なんだこれ。

とりあえず
vertical-align:text-bottomを指定しとけば
operaでクリック出来なくなるくらい表示が崩れる事はないのかな?

ここから先は失敗を含む試行錯誤メモ

続きを読む

li内のaをdisplay:blockした時IE6でmargin-bottomぽいところが広がる

liの中のaタグにdisplay:blockを指定して
クリック出来る部分を広げた時
IE6で下marginが広がってしまった。

みた感じaタグのmargin-bottomが拡張されている風だけど
marginを0にしても消えない。

どうもこれは、hasLayoutがtrueじゃないから起こるみたいで
普段はaタグにwidthを指定してるから発生してなかった。
(widthに値が入ってればhasLayoutがtrueになる)

今回は_zoom:1を追加して対処。

他にhasLayoutをtrueにするには
hasLayout Property (A, ABBR, ACRONYM, …)

CSS property Value
display

inline-block
height

any value
float

left or right

position absolute
width any value
-ms-writing-mode tb-rl

zoom any value

IE6 CSS Fixer

ie6fixer – onderhond.com
普通のcssからIE6用のcssを吐き出してくれるサービス、現在バージョン0.95。

例えば

IE6だと左右のmarginが40pxになってしまう以下の記述
[css classname=”css-sh”]
#test{
margin:20px;
float:left;
}
[/css]

これをie6 css fixerで変換させると
(select your master stylesheetのpaste your complete master stylesheetを選択してgive me my ie6 fixesをクリック)
[css classname=”css-sh”]/* add display:inline to floated elements */
#test {display:inline;}[/css]
なんてcssを吐き出してくれる。

これを保存してコンディショナルコメントでie6だけ読み込むようにすれば対策完了。

でもって、最初からdisplay:inline;が付けてる場合は、新たにdisplay:inline;を吐き出さないのかな?と試してみたけどdisplay:inline;を吐き出してた。

というか、[css classname=”css-sh”]
#test{
float:left;
}
[/css]
を変換すると
[css classname=”css-sh”]/* add display:inline to floated elements */
#test {display:inline;}[/css]を吐き出してた。
むむむ?