iPhone iOS の CSS対応 ブレース内の間違えは…

CSSのコードを一文字でも間違えていると、iOSはその間違えたところから閉じブレースカッコまで無視する。

スマホの幅に合わせる

ページの中身をたとえば1000pxにそろえて、いっぱいに表示しようとするとき、スマホではうまくいかないことがある
そういった時には

body,html{
    min-width:1000px;
}

をためしてみる。

スマホの幅いっぱいの（はずの）画像がはみ出たとき

imgのwidthの設定を画面より多きくしてしまって、ブラウザがふらつくのを治すには、「max-width」などを使うのだが、ただ単に設定変更してブラウザの再読み込みをしただけでは「WIDTH = 100%」にはならない。
iPhoneだけかもしれないが、リロードしてからブラウザをシュリンクして一度小さくしてやる必要がある。

CSS 「img」の下に隙間が…

vertical-alignのデフォルト値は、IEなどのメジャーなブラウザではbaselineに設定されているから

gとかjとか下にはみ出るアルファベットのはみ出た長さの分だけ隙間ができるわけです。

なので、

img{ vertical-align:bottom; }

とすると、「img」の下の隙間がなくなるのです。


参考サイト
http://webtech-walker.com/archive/2007/03/01143619.html

CSS フッターの下に隙間ができたときの対処

ページの中身が少なくフッターが浮いた状態になってみっともないことがある。
そんなときの解決方法。

FOOTERをWRAPPER の中に入れているときにはFOOTERの上にダミーのボックスを置き、それにFOOTERの高さと同じだけ「padding-bottom」するのが味噌。セレクターは「contents」とした。
それとWRAPPERは「position」を「relative」 に、FOOTERは「position」を「absolute」にしておく。
あとは普通にHTML、BODYとWRAPPERを「width: 100%」しれば完成。

参考にさせてもらったサイトはこちら
https://liginc.co.jp/designer/archives/6435

-----------------------------------

html,body{
     height:100%;
}
#wrapper{
     width: 100%;
     position: relative;
     height:auto !important; /*IE6対策*/
     height: 100%; /*IE6対策*/
     min-height: 100%;
}
#contents{
     padding-bottom:140px; /*フッターの高さと同じ*/
}
#footer{
    height:140px;
     position:absolute;
     bottom:0;
}



しかし、FOOTERが400pxとか500pxとかデカい場合、この方法ではCONTENTの「padding」の分、空白部分が400pxとか500pxとかデカくなるのでみっともない。その場合は「background」か何かでごまかすしかなくなる。

div のhoverに「before」適用

HOVERにもコロンを二つ「::」つけることで疑似セレクターが適用できる

.contents-element a:hover::before{
content: "- > ";
}

投稿一覧にアイキャッチ

WordPressを使い始めたころからお世話になっている

「管理画面の投稿一覧にアイキャッチを表示する」スクリプト。


今回も使わせていただきました。


「野良プラグイン化」したものはダウンロードできなかったのですが、


functions.php　に記述する方で実装しました。


なぜデフォルトで実装されていないのかと不思議に思うほど実用的な機能です。


「 林家次男」さんのブログ
http://hayashikejinan.com/wordpress/tips/964/