CSS3

[iOS]inputの内側の影を消したい

border:noneでも影

Q)
上の画像みたいに、borderがあると影が出来る(border:noneだと消える)
任意のborderを指定しつつ影を消したい

A)
[css]-webkit-appearance:none;[/css]を指定する。

 -webkit-appearance:none;

display: table-cell;内にtext-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった話。

失敗

display: table-cell;で縦中央させてる要素内のテキストに
text-overflow: ellipsis;で「…」付けようとしたらwidthが消えちゃった。

text-overflow: ellipsis;で「…」付ける為の条件

text-overflow – CSS | MDN
[css]
p {
white-space: nowrap;
width: 100%; /* IE6 では width の指定が必要 */
overflow: hidden; /* "overflow" の値は "visible" 以外のものを指定する */

text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
}
[/css]

使用html

[html]
<div class="tablecell">
<ul>
<li class="left">左</li>
<li class="right"><p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右石右右右右右右右右右右右右右右右右右右右右右右右右</p></li>
</ul>
</div>[/html]

使用css

[css]
.tablecell{
display: table;
width: 400px;
margin: auto;
border: 10px solid #000;
}
.left,.right{
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
padding: 1rem;

}
.left{
width: 100px;
text-align: center;
background: #999;

}
.right p{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
}
[/css]

こうすると.leftのwidthが消滅するという現象が起きた

IE6で必要って書いてあるwidthを逆に消せばいいのか?と
.right pのwidthを消しても駄目だった。

次にpxで指定してみたら「…」が表示され.leftのwidthも復活した

成功

まとめ

text-overflow: ellipsis;側のwidthはpxで指定する。

横幅が変動する要素をセンタリングする。

センタリング

通常、ブロック要素をセンタリングさせるには

1)横幅を指定
2)左右のmarginをauto

[css]
width:100px
margin:0 auto;
[/css]

するけど
横幅を指定しちゃうから、内容に合わせて横幅が伸縮するような要素をセンタリングさせられません。

けど、widthの代わりにdisplay:tableを使うと
横幅が変動する要素をセンタリングが可能にッ!!!

[css]
display:table;
margin:0 auto;
[/css]

display:table;はIE8も理解してくれます

[html]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #f33;
}
.contentA{
width: 640px;
margin: 1em auto;
background: #fff;
padding: 1em;
}
.contentB{
background: #fff;
padding: 1em;
display: table;
margin: 1em auto;
}
</style>
</head>
<body>
<div class="contentA">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="contentB">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

<div class="contentB">
<p>いろはにほへと ちりぬるをわかよたれそ<br />つねならむうゐのおくやま<br />けふこえてあさきゆめみし ゑひもせすん</p>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
</body>
</html>
[/html]

TOWER RECORDS

左側に傾くイタリック体
トップページだとカスタムフィールドの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 不要

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