2012-03-02から1日間の記事一覧

paddingプロパティでリンクエリアを拡張する

ナビゲーションボタンの縦幅は44px以上が望ましいとされているが、14px~16px程度の文字に<a>タグでリンクを貼る場合も多い。そのようなときに有効となるテクニックが、paddingで<a>タグのタップ可能領域を広げてやること。文字サイズを維持しつつ、ユーザビリティ</a></a>…

Mobile Safari 向けクリアフィックス

・html <nav class="nav-topicpath"> <ul> <li>a</li> <li>b</li> (ここに擬似要素が入る) </ul> </nav> ・CSS.nav-topicpath ul:after{ ←擬似要素セレクタ「:after」でul要素の終了タグの直前に擬似要素を挿入 content: ""; ←contentプロパティで擬似要素として""(中身なし)を挿入 display:block; clear:both;}なお、…

HTML5 CSS3 クラスセレクタを使って「保険」をかける

nav, headerのようなHTML5の新要素をcssで装飾する際は、header nav{ padding:10px; }のように要素名をセレクタにするのが普通のやり方だが、これではマークアップするタグを変更する時(nav→div)や、新要素が廃止になってしまった時に、HTMLとCSSの双方を…

Mobile Safari CSS HTML5の新要素をブロックレベルにする

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display:block;}HTML5で追加された新要素の場合、ブラウザーによってはdisplayのデフォルト値がセットされていないことがある(Firefox3.6で…

iPhone webページの表示領域を広げるJavaScript

window.addEventListener('load', function(){ setTimeout(function(){ scrollTo(0,1); },100); }, false;※↑にはミスタイプの可能性があるのでコピペは非推奨参考書籍:HTML5+CSS3で作る 魅せるiPhoneサイト

HTML5 head要素の定義 iPhone対応版

<html lang="ja"><meta charset="utf-8" /><title></title> ←文字コードより後に配置すること。<meta name="format-detection" content="telephone=no" /> ←電話番号認識の無効化<link rel="apple-touch-icon" href="img/home.png" /> ←ホーム画面用アイコンの指定<link rel="stylesheet" href="css/iphone.css" media="screen" /> ←スマートフォン向けのmedia…</link></link></meta></meta></html>