Category Archives: Cssメモ

最近は、li要素を横並びにするときに、
display:inline-block;
をよく使うように。

ネットショップなどで、商品を並べるときに、
高さが違っても崩れないから便利。

その時にできてしまう隙間を消す方法。
liを横並びにした場合のメモ。

ul {font-size:0px;}

float:leftで右マージン20pxで並べたとき、
一番右のボックスは、右マージンいらないというCSSメモ。
 

#home02_box {
	width: 890px;
	overflow: hidden;
}
#home02_box ul {
	margin-right: -20px;
	width: 910px;
}
#home02_box ul li {
	width: 435px;
	margin-right:20px;
}

熱はないけど、喉の痛みがひどくて、本日のマルシェワンダーランド行きを断念。
1日おとなしく、おうちで家事&お仕事することに。しょぼん。
でも、家族はみんな留守だから、キママに過ごそう日曜日。

今日は、2件のメモ。

最近、最初からレスポンシブデザインで制作することが多いけど、そうじゃない場合。
PCでは気づかないんだけど、スマホなどで見ると、背景が切れてしまう件。
背景画像をXにリピートしたときなどにそうなる。

背景を指定してあるdivは、もちろん width:100%に指定してあっても、
その内側のdivに固定サイズの900pxなどを指定している場合。
横幅900px以下のブラウザで閲覧すると、背景が切れてしまう。

解決方法は、背景をしているdivに、
min-width:900px; を指定。
その外側のdivがある場合は、そちらで解決もあり。

もうひとつ。
スマホ等で、PCサイトを見たときに、画面幅=コンテンツ幅では、ちとみにくい。
そんなときは、こちら。
ビューポートの設定で、コンテンツ幅が960pxのとき、例えば…

<meta name="viewport" content="width=1000,user-scalable=yes,maximum-scale=1.0">

content=”width=1000の値を、実際のコンテンツ幅より、広く指定すると、
とりあえず、見やすくなる。

メモメモ
背景画像を指定してるCSSに追加するだけ。

background-size:contain;

フロート使わずに、フロートさせて、
そして、縦の中央配置。
どんな高さでもOK!

あ〜まいりました。

letter-spacing:normal;
vertical-align:middle;
display:inline-block;