cssフレームワークの紹介です。最近使っているのはIVORY Frameworkです。
グリッドレイアウトが簡単にできるところがいいですね。スマートフォンからも崩れることなくそこそこ読めます。TableやFormも統一したデザインになります。
使い方は簡単です。デモページにを参考にdivタグのclassを指定していくだけです。ただ、複雑なことをしようとすると、レイアウトに関する記述をclassにたくさん詰め込むことになり、インラインでスタイルシートを記述するのと同じようになってしまいます。そうすると、cssでレイアウトに関する情報をせっかく別にしたのにその意味が無くなってしまいます。このあたりは注意が必要ですが、サイトを作る前にちょっとテストをしたい場合などにはお勧めです。
Webフォントの使用が流行っているようですが、転送速度などを考えると、ちょっと二の足を踏みます。
それでもデフォルトではどうも読みにくいので、手軽な設定変更で少しだけ本文を読みやすくしてみました。
cssのfont-familyを探して、以下のように設定しました。
font-family:メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “ＭＳ Ｐゴシック”, “MS PGothic”, sans-serif;
フォントには好みもあると思いますが、少しだけ読みやすくなったと思います。
jQuery + PHPでサイトを構築するときに便利なのがjsonです。jQueryからPHPにpostしてその結果をjson形式で取得するとjQuery(javascript)で簡単に配列にすることができます。
デバッグや開発中のときには配列の内容をキーとともに表示したいときがあります。PHPの場合はprint_rを<pre>タグと一緒に使うことで表示できます（以前の参考記事）が、javascriptの場合は少しだけ工夫が必要です。
今回使わせていただいたのはJKL.Dumper です。以下のようにすることでダンプを出力できます。PHPの時のように<pre>タグを使うとより見やすくなります。
事前にjkl-dumper.jsを読み込んでおきます。
<script type="text/javascript" src="jkl-dumper.js"></script> id=’dump’にjQueryで表示させます。
jQuery('#dump' ).html('<pre>'+(new JKL.Dumper().dump(data))+'</pre>');
Webサイトの作成でやっかいなのがS-JIS（シフトJIS）の取り扱いです。以前はPCの文字コードがS-JISだったり、ケータイサイトはS-JISしか使えなかったりしていましたが、現在ではUTF-8等を使うことが多いと思います。
PHPで文字コードの変換にはmb_convert_encodingを使いますが、このとき、以下のようにすると一部の文字で文字化けが生じます。
mb_convert_encoding($str, 'utf8', 'sjis');
どうやら、拡張文字の扱いで文字化けが生じるようです。以下のようにすると、解決します。
mb_convert_encoding($str 'utf8', 'sjis-win');
具体的に影響のある文字として、「髙」「黑」「①」「Ⅰ」などがあります。
3/14にリリースされたFirefox11のWeb開発が結構便利です。
プラグインなどを追加することなく、左上のメニューから、「Web開発」、「調査」と進むだけです。
CSSのプロパティをチェックボックスでオンオフしながらレイアウトを確認したり、要素の重なりを3D表示したりできます。
入れ子になっている要素の流れもビジュアルにわかります。
レイアウトの確認やフォントの切り替えに便利だと思います。
スマートフォンやタブレットが普及したことで、画面サイズは千差万別になりました。
サイトのスマートフォン対応は必要性は感じるものの、いままでのサイトにスマートフォン版を追加するのか、サイトの設計をし直すのかいずれにしろ面倒な問題です。
WordPressをサイト構築で使用している場合は、テーマを変えることで、スマートフォンに対応することができます。
有料のテーマは数多くありますが、こちらのBizVektor.comのテーマはGPLライセンス（無料）で配布されています。
ビジネス向けのレスポンシブルデザインなので、画面サイズの大小に関わらず、きれいに表示することができます。テーマをインストールして設定をするだけで、簡単にブログ対応、スマホ対応のサイトを構築できます。
スマートフォン向けのサイトでは、画面の横幅が小さいため、PC向けのものよりも、横に表示する情報を少なくすることがあります。
iPhone3GS等(iPod)のディスプレイの横幅が320pxです。デフォルトでは980pxを1/3の320に縮小して表示するので、600px程度のコンテンツでは、画面の2/3程になり、ずいぶん小さい表示になってしまいます。
解決にはメタタグでviewportの設定を行います。
<meta name="viewport" content="width=640, ">
と指定すると、640pxを画面いっぱいに表示するようになります。
スマートフォンは画面を回転させることがあるので、PCの用に「とりあえず1000pxくらいならよさそう」というように決め打ちできませんが、viewportを指定すれば、あとはブラウザが勝手に綺麗に表示させてくれます。
WEBサイトのテスト等で簡単にHTMLを書いていたときに日本語のフォントが少々おかしくなってしまいました。読めないわけでもありませんし、テストだから別にいいやとも思いましたが、なんとも気持ちが悪い状態でした。エンコードはUTF-8です。最近よく使うようになったOpera(11.51)で起きました。Firefox、Chrome、IEでは問題ないようです。文字コードを指示しても変化はありませんでした。 
続きを読む Operaで日本語のフォントが輸入雑貨の説明書のようになってしまった。 (HTML)
