カテゴリー: html

HTMLのhttps対応

■内部に読み込むファイル
httpsから始まるアドレスで書く。以下の文字列を全文検索かけてみよう。

<link rel="
src="

■外部へのリンク
httpから始まるアドレスで書く。以下の文字列を全文検索かけてみよう。

<meta property="og:url"
<meta property="og:image"
href="

ヘッダーがfixされてるページのページ内アンカー

例えばちょうどいい位置が画面上端から100pxだったらこうする。
多分、パディングの上端がアンカーの位置として計算されているんだろうな。
それだと見た目が正しくならないから、マージントップで調整する、と。

.sample{
padding-top:100px;
margin-top:-100px;
}

参考
http://depthcode.com/2011/02/header-fixed.html

％の指定について

％の指定について

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

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

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

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

画像を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