■内部に読み込むファイル
httpsから始まるアドレスで書く。以下の文字列を全文検索かけてみよう。
<link rel=" src="
■外部へのリンク
httpから始まるアドレスで書く。以下の文字列を全文検索かけてみよう。
<meta property="og:url" <meta property="og:image" href="
■内部に読み込むファイル
httpsから始まるアドレスで書く。以下の文字列を全文検索かけてみよう。
<link rel=" src="
■外部へのリンク
httpから始まるアドレスで書く。以下の文字列を全文検索かけてみよう。
<meta property="og:url" <meta property="og:image" href="
例えばちょうどいい位置が画面上端から100pxだったらこうする。
多分、パディングの上端がアンカーの位置として計算されているんだろうな。
それだと見た目が正しくならないから、マージントップで調整する、と。
.sample{ padding-top:100px; margin-top:-100px; }
参考
http://depthcode.com/2011/02/header-fixed.html
cssのheightは親要素の高さに依存するので、親要素を設定してあげる。
html,body{ height: 100%; }
出典
http://loconet.web2.jp/blog/archives/2006/04/cssheight100.html
http://allabout.co.jp/gm/gc/23921/2/
%の指定について
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; }
スマートフォンではこれで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の値を足した値を引いたもの*/ }
いろいろやり方があるのです。
水平線画像を繰り返しにしない場合はコチラを使おうと思う。
http://www.hrtag.info/hrcssimg
水平線画像を繰り返しにする場合は、こちらの方法を参考に。
ちょっとソースが煩雑になるけど。
http://internet.designcross.jp/2010/09/csshr.html
参照元
http://polka-diary.seesaa.net/article/115217597.html
IE6でネガティブマージンを使いたいときは、
position:relative;
をセットで使おう。
<style type="text/css"><!-- #test01 { position:relative; margin:-70px auto auto; } --></style>
参考サイト
http://terkel.jp/archives/2011/08/google-chrome-frame-webmasters-guide/
レンダリングモードを他にを指定したい場合はこっち。
「IE8以降のバージョンでレンダリングモードをmeta要素で指定する時のまとめ」
http://mj-wave.com/post-714/