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 不要

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

自動改行(word-break・word-wrap・white-space プロパティ)をコントロールして、テキストがボックスから飛び出さないようにしたい。

ん~、違いがようわからん。

テキストがボックスからはみ出る

上記3プロパティの動作確認用ページ (ポップアップで開く)
Firefoxはどれを指定しても、連続した半角英数が長いとtableが伸びちゃうなぁ。

以下、自分の解釈メモ ( なので正しいかどうか怪しいです )。

続きを読む

css3の:nth-last-child(n)や:nth-last-of-type(n)で均等配置

ひとつ前の記事中に使った画像のサイズを勘違いして作成してしまい、テーマによっては段落ちが発生してた。

並んでたり並んでなかったり。
それがどんな勘違いだったかというとそりゃもう酷い話で、
まず、本文のwidthが480pxの所へ画像を2枚横並びで入れようとした。
その時画像のmarginを10pxとして考えて、横幅235pxでサムネイルを作った(235px*2(画像2枚)+10px(margin)=480px)。

けれども実際は両方の画像に右marginがつく為、本当のところmarginは2倍。
さらに画像には1pxのborderがついてたので1画像につき+2px、合わせて4px。
もう全然無理。

そこでサムネイルを小さく作り直せばいいのに、先日のie-css3.jsを思い出してE:nth-last-child(n)を使って2個目(最後)の画像のmarginを消してしまおう!となんか良い事を閃いた気になる。

そしてE:nth-last-child(n)とE:nth-last-of-type(n)の練習をしてから、いざ乱雑モックアップのcssをよく見てみると画像周りのmarginは10pxじゃなくて1emだった。

6pxしか余裕がないところに1emもmarginがあったら右側のmarginを削除しても段落ちするし、marginを5pxくらいにすると狭すぎるしで、結局今回はサムネイルのサイズを変更するのが一番簡単な修正方法でした。

前置きが長くなったけど、:nth-last-child(n)や:nth-last-of-type(n)の均等配置

乱雑モックアップ|nth-last-childなどで均等配置テスト
html
[html]<h1>E:nth-last-child(n)</h1>
<div id="content" class="lastchild">
<div class="main">メイン画像</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
<div class="sub">
<p>サブコンテンツ<br />
サブコンテンツ<br />
サブコンテンツ</p>
</div>
</div>[/html]
css
[css]body {
font-size:80%;
}

p {
padding:10px;
margin:0;
}

#content {
width:380px;
padding:10px 10px 0 10px;
border:1px solid SteelBlue;
}

.main {
width:380px;
text-align:center;
line-height:234px;
color:black;
background:LightSkyBlue;
margin-bottom:10px;
height:234px;
}

.sub {
width:120px;
margin:0 10px 10px 0;
background:aliceBlue;
float:left;
}

#content:after{
content:"";
display:block;
clear:both;
}

/* ここでmargin0 */
.lastchild .sub:nth-last-child(1){
margin-right:0;
}
[/css]

以前書いたこれ -> 横並びにしたリストを(手動だけど)簡単に均等配置ぽく見せるは、marginを左にとる必要があって今回はダメで。
marginを右にとる方法を使うにしても今回は親要素が一個たりないからダメなはず(たぶん)。

こちらもあーだこーだやってます-> E:nth-last-child(n)とE:nth-last-of-type(n)で均等配置

それにしてもこんな使い方よりもっと別な何かで協力に威力を発揮するんじゃないだろうかって思うんだけどその何かが思いつかない。勿体無い。

続きを読む