DoCoMo、au、SoftBankの主要3キャリアと、iPhoneやAndroid端末でアクセスした際、そのキャリアを判別し、キャリアごとにリンク先を振り分けるスクリプトです。Perl（CGI）とPHPの二種類をご用意しました。環境に合わせてご選択ください。Perlの場合viewsourceprint?01$agent=$ENV{'HTTP_USER_AGENT'};02 03if($...続きを読む

tableの諸要素（thやtdなど）の幅をwidthで指定した際、IEなどで表示すると、上手く幅指定が出来ていない場合があります。そういった場合の対処法についてご紹介します。HTMLviewsourceprint?01<tableclass="sampleTable">02  <tr>03    <thwid...続きを読む

floatで画像などを左右に回り込ませたとき、逐一marginの幅を指定せずとも文字が画像の下に回り込まないようにするテクニックです。HTMLviewsourceprint?1<divclass="sample01">2<divclass="sampleImg"><imgsrc="./sample.jpg"alt="サンプル画像"/></div>3&...続きを読む

PC用サイトからモバイル用サイトへ誘導する際に便利なのがQRコードですが、意外とその実態について知っている方は多くはないのではないでしょうか。そこで、QRコードについての情報と、お手軽にQRコードを作成する方法をご紹介します。QRコードとは1994年にデンソーの開発部門が開発したマトリックス型二次元コードであり、いわばバーコードの発展系です。バーコードが横方向にしか情報を持たないのに対し、QRコー...続きを読む

inline-blockを用いることで、ulやfloatを使わずに、横に並べた要素を中央に寄せることができます。HTMLviewsourceprint?1<ul>2  <li><ahref="#"><<前へ</a></li>3  <li><ahref="#">1&...続きを読む

iPhoneとAndroidに搭載されているブラウザは同じWebkitですが、バージョンの違いから表示が若干異なる部分があるようです。そこでiPhoneで表示された場合はbodyにclass="iphone"、Androidで表示された場合はbodyにclass="android"を付与するjavascriptをご紹介します。サンプルサンプル※iPhone/Androidで見てみてください。ダウン...続きを読む

iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptをご紹介します。※androidでも動きます。サンプルサンプル※iP...続きを読む

CSS3は通常のWebサイトでは、IE6～8が高いシェアを持っているため現状ではあまり使われません。しかし、iPhoneとAndroidのブラウザはwebkitという同じHTMLレンダリングエンジンが使われているため、古いブラウザを気にせずCSS3(*1)を使うことが出来ます（IEを気にせずコーディング出来るなんてちょっとうれしいですね！）。ということで、スマートフォンで積極的に使っていきたいCS...続きを読む

何だか周りにiPhoneを持ってる人が増えてきたなぁと思う今日この頃です。それにつれてiPhone用のサイトをコーディングする案件も増えて来ましたので、コーディングするときのポイントをまとめました。iPhoneの特徴まずは、iPhoneの特徴を見てみましょう。一つの端末で複数の解像度を持つiPhoneの特徴の一つとして、縦持ち・横持ちのときで横幅の解像度が変わります。例えば、縦持ちのときは320p...続きを読む

HTML5には「頻繁に書く必要のあるものは簡単に書けるように」という考えがあり、これまで書いていたコードがより簡単になります。たとえば、HTML5において、DOCTYPEは「標準モードへのスイッチ」という役割でしかありません。そのため、DOCTYPE宣言以下のように短くなっていきます。viewsourceprint?1<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1...続きを読む