2012-02-01から1ヶ月間の記事一覧

iPhoneからのアクセスをJavaScriptで振り分ける

<head><script>if(navigator.userAgent.indexOf('iPhone') != -1) { location.href="http://www.hogehoge.com/iphone/";}</script></head>↑のコードをデスクトップ向けトップページ(index.html)のhead要素内に記述しておくと、iPhoneから「http://www.hogehoge.com/」にアクセスした時に、…

Mobile Safariの制限

・ファイルのアップロード/ダウンロードができない・「マウスオーバー」の表現ができない・Flash等のプラグインに対応していない・フレーム表現ができない・日本語フォントは1つだけ参考書籍:HTML5+CSS3で作る 魅せるiPhoneサイト

Viewportで画面に合わせたサイズを指定する

Viewportとは、表示領域のサイズを指定するプロパティのこと。Viewportはmeta要素を使って下記のように定義する。<meta name="viewport" content="値" />content属性には、width, height, initial scale, user-scalable, minimum-scale, maximau-scaleを指定できる。(横幅、縦幅、ページ読み込み</meta>…

CSS3 擬似クラスセレクタ

擬似クラスセレクタでは、「最初の要素」「最後の要素」といった条件によって、自動的に対象の要素を選ぶことができる。 ・主な擬似クラスセレクタ(要素名 スタイルが適用される要素):first-child 親要素の最初の子要素となる要素:last-child 親要素の最後…

HTML5セマンティックマークアップ

section:章や節の単位をマークアップする。見出しと本文で構成される1つのまとまりをマークアップするために使う。 article:ブログやニュースの記事のように、その部分だけを切り離しても独立したコンテンツとなるような箇所に利用する。nav:ページ内の主…

iPhone向けサイト設計のポイント

・ページサイズは横幅320pxを基準に設計・文字サイズは14~16px、行間は1.4~1.6・ページの左右には10pxの余白を作る・ナビゲーションリンクの縦幅は44px前後参考:iOSヒューマン インターフェイス ガイドライン(pdf) 参考書籍:HTML5+CSS3で作る 魅せるiPh…

読書メモ『「旬」なサイトに学ぶ76のデザイン・エッセンス』

<文字デザインのエッセンス>☆読みやすさを最優先に考える・ゴシック系のフォント・本文の色は、濃い目のグレー(地とのコントラストを抑える)・本文の背景は、白または明るい色☆シンプルさの中で、ディテールに凝る・文字が床面に反射・ガラス調のボタン…