最近は、li要素を横並びにするときに、
display:inline-block;
をよく使うように。
ネットショップなどで、商品を並べるときに、
高さが違っても崩れないから便利。
その時にできてしまう隙間を消す方法。
liを横並びにした場合のメモ。
[html]
ul {font-size:0px;}
[/html]
フロートのメモメモ
float:leftで右マージン20pxで並べたとき、
一番右のボックスは、右マージンいらないというCSSメモ。
[html]
#home02_box {
width: 890px;
overflow: hidden;
}
#home02_box ul {
margin-right: -20px;
width: 910px;
}
#home02_box ul li {
width: 435px;
margin-right:20px;
}
[/html]
min-widthとか
熱はないけど、喉の痛みがひどくて、本日のマルシェワンダーランド行きを断念。
1日おとなしく、おうちで家事＆お仕事することに。しょぼん。
でも、家族はみんな留守だから、キママに過ごそう日曜日。
今日は、2件のメモ。
最近、最初からレスポンシブデザインで制作することが多いけど、そうじゃない場合。
PCでは気づかないんだけど、スマホなどで見ると、背景が切れてしまう件。
背景画像をXにリピートしたときなどにそうなる。
背景を指定してあるdivは、もちろん width:100%に指定してあっても、
その内側のdivに固定サイズの900pxなどを指定している場合。
横幅900px以下のブラウザで閲覧すると、背景が切れてしまう。
解決方法は、背景をしているdivに、
min-width:900px; を指定。
その外側のdivがある場合は、そちらで解決もあり。
もうひとつ。
スマホ等で、PCサイトを見たときに、画面幅＝コンテンツ幅では、ちとみにくい。
そんなときは、こちら。
ビューポートの設定で、コンテンツ幅が960pxのとき、例えば…
[html]
<meta name="viewport" content="width=1000,user-scalable=yes,maximum-scale=1.0">
[/html]
content=”width=1000の値を、実際のコンテンツ幅より、広く指定すると、
とりあえず、見やすくなる。
背景画像もレスポンシブ
メモメモ
背景画像を指定してるCSSに追加するだけ。
[html]background-size:contain;[/html]
中央配置［CSSメモ］
フロート使わずに、フロートさせて、
そして、縦の中央配置。
どんな高さでもOK!
あ〜まいりました。
letter-spacing:normal;
vertical-align:middle;
display:inline-block;