カテゴリー: css

％の指定について

％の指定について

http://parashuto.com/rriver/responsive-web/sub-pixel-rounding-browser-problem

どうやらPCでのコーディングでは、％指定時に小数点以下の値を使わない方が無難らしい。

あとIE6、IE7でカラム落ちを防止するには、
0.5px分を幅から引くのだそうだ。
たとえば100pxの親要素に入った要素の場合、0.5 ÷ 100 = 0.5%を幅の指定値から引く、と。

リンク時に画像の周囲に表示される点線を消去

リンク時に画像に表示される点線を消去。outline:none;
ブラウザにもよるので気が付かないことも多い。
reset.cssにでも入れておいていいかもしれない。

a:link{ color:#ffffff; text-decoration:underline; outline:none;}
a:visited{ color:#ffffff; text-decoration:underline; outline:none;}
a:hover{ color:#ffffff; text-decoration:none; outline:none;}
a:active{ color:#ffffff; text-decoration:none; outline:none;}

伸縮する画像をスマホで表示

画像を16個並べた状態で、綺麗に伸縮するソースを書くのに手こずったのでメモメモ。
結局tableが一番美しいな。あんまりレイアウトに使うの良くないのだけど。
cssのdisplay:tableうんちゃら;でもいいのかもしれないが、html5のブロック要素まわりの改変がまだよくわからないので、避けておいている。


		<div class="div_Wrap clearfix">
			<table id="photoAllWrap" cellpadding="0" cellspacing="0">
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
				<tr>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
					<td><a href="#"><img src="img/dummy02.gif" alt=""></a></td>
				</tr>
			</table>
		</div>

#mainWrap .div_Wrap {
	width:94%;
	max-width:600px;
	margin:auto auto 30px auto;
}

#mainWrap #photoAllWrap {
	width:94%;
	margin:auto auto auto;
}

#mainWrap #photoAllWrap tr td{
	width:25%;
	padding:2px;
	background-color:#ffffff;
}

#mainWrap #photoAllWrap img {
	width:100%;
	border:2px #999999 solid;
}

スマホで dl dt dd を横並びに

スマートフォンではこれでOKなことを確認しています。
PCでは、古いブラウザでバグる、かも。

#allWrap{
	width:100%;
	background:#ffffff;
}

#allWrap dl{
	width:88.4%;
	font-size:77%;
	padding:10px 0 20px;
	margin:auto;
}

#allWrap dl dt{
	float:left;
	width:15%;/*dlに入れたい文字全体の横幅　em指定でもいいかもしれない*/
	padding:0;
	clear:both;
	font-weight:bold;/*お好みで*/
}

#allWrap dl dd{
	margin-left:15%;/*dlに入れたい文字全体の横幅　em指定でもいいかもしれない*/
	padding:0 0 5px 10%;
	width:85%;/*全体の横幅から、dlとpaddingの値を足した値を引いたもの*/	
}

IE7や6でもhrを画像にしたい！

いろいろやり方があるのです。

水平線画像を繰り返しにしない場合はコチラを使おうと思う。
http://www.hrtag.info/hrcssimg

水平線画像を繰り返しにする場合は、こちらの方法を参考に。
ちょっとソースが煩雑になるけど。
http://internet.designcross.jp/2010/09/csshr.html