HTML – トモデジ tomodigi.com

とりあえずイマドキなページを作るときにIVORY Framework

Tomo — Fri, 12 Apr 2013 19:30:31 +0000

cssフレームワークの紹介です。最近使っているのはIVORY Frameworkです。

グリッドレイアウトが簡単にできるところがいいですね。スマートフォンからも崩れることなくそこそこ読めます。TableやFormも統一したデザインになります。

使い方は簡単です。デモページにを参考にdivタグのclassを指定していくだけです。ただ、複雑なことをしようとすると、レイアウトに関する記述をclassにたくさん詰め込むことになり、インラインでスタイルシートを記述するのと同じようになってしまいます。そうすると、cssでレイアウトに関する情報をせっかく別にしたのにその意味が無くなってしまいます。このあたりは注意が必要ですが、サイトを作る前にちょっとテストをしたい場合などにはお勧めです。

ブログのフォントの変更

Tomo — Fri, 25 Jan 2013 19:20:47 +0000

Webフォントの使用が流行っているようですが、転送速度などを考えると、ちょっと二の足を踏みます。

それでもデフォルトではどうも読みにくいので、手軽な設定変更で少しだけ本文を読みやすくしてみました。

cssのfont-familyを探して、以下のように設定しました。

font-family:メイリオ, Meiryo, Osaka, “ヒラギノ角ゴ Pro W3″, “Hiragino Kaku Gothic Pro”, “ＭＳＰゴシック”, “MS PGothic”, sans-serif;

フォントには好みもあると思いますが、少しだけ読みやすくなったと思います。

jsonの内容をダンプ表示（javascript,jQuery）

Tomo — Sun, 21 Oct 2012 19:44:58 +0000

jQuery + PHPでサイトを構築するときに便利なのがjsonです。jQueryからPHPにpostしてその結果をjson形式で取得するとjQuery(javascript)で簡単に配列にすることができます。

デバッグや開発中のときには配列の内容をキーとともに表示したいときがあります。PHPの場合はprint_rを

タグと一緒に使うことで表示できます（以前の参考記事）が、javascriptの場合は少しだけ工夫が必要です。

今回使わせていただいたのはJKL.Dumper です。以下のようにすることでダンプを出力できます。PHPの時のように

タグを使うとより見やすくなります。
事前にjkl-dumper.jsを読み込んでおきます。
  
id=’dump’にjQueryで表示させます。
jQuery('#dump' ).html(''+(new JKL.Dumper().dump(data))+'
');

SJISからUTF-8への文字コード変換にはsjis-winを指定する(PHP)

Tomo — Wed, 27 Jun 2012 19:18:17 +0000

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');

具体的に影響のある文字として、「髙」「黑」「①」「Ⅰ」などがあります。

Firefox11のWeb開発が便利

Tomo — Fri, 16 Mar 2012 08:23:11 +0000

3/14にリリースされたFirefox11のWeb開発が結構便利です。

プラグインなどを追加することなく、左上のメニューから、「Web開発」、「調査」と進むだけです。

CSSのプロパティをチェックボックスでオンオフしながらレイアウトを確認したり、要素の重なりを3D表示したりできます。

入れ子になっている要素の流れもビジュアルにわかります。

レイアウトの確認やフォントの切り替えに便利だと思います。

WordPressのビジネス向けレスポンシブルテーマ

Tomo — Fri, 09 Mar 2012 03:44:02 +0000

スマートフォンやタブレットが普及したことで、画面サイズは千差万別になりました。

サイトのスマートフォン対応は必要性は感じるものの、いままでのサイトにスマートフォン版を追加するのか、サイトの設計をし直すのかいずれにしろ面倒な問題です。

WordPressをサイト構築で使用している場合は、テーマを変えることで、スマートフォンに対応することができます。

有料のテーマは数多くありますが、こちらのBizVektor.comのテーマはGPLライセンス（無料）で配布されています。

ビジネス向けのレスポンシブルデザインなので、画面サイズの大小に関わらず、きれいに表示することができます。テーマをインストールして設定をするだけで、簡単にブログ対応、スマホ対応のサイトを構築できます。

ページレイアウトのちょっとした確認にはXRAYが便利 (CSS,HTML)

Tomo — Wed, 01 Feb 2012 03:15:04 +0000

HTML+CSSでページレイアウトの確認をするときに、サイズを確認したいことがあります。

このXRAYをブックマークレットとして登録しておけば、使いたいときにすぐに使えます。確認したい場所をクリックするだけで、id,classの名称、とwidth,height,margin,paddingが表示されます。

ブログなどで既にレイアウトの基本ができあがっていて、なおかつcssを読み直すのも面倒だという場合に便利です。

ちょっと古いですがASCII.jpの記事も参考にしてください。

iPhone3のSafariは自動で980pxを320pxに縮小します。

Tomo — Mon, 30 Jan 2012 03:50:35 +0000

スマートフォン向けのサイトでは、画面の横幅が小さいため、PC向けのものよりも、横に表示する情報を少なくすることがあります。
iPhone3GS等(iPod)のディスプレイの横幅が320pxです。デフォルトでは980pxを1/3の320に縮小して表示するので、600px程度のコンテンツでは、画面の2/3程になり、ずいぶん小さい表示になってしまいます。

解決にはメタタグでviewportの設定を行います。

と指定すると、640pxを画面いっぱいに表示するようになります。

スマートフォンは画面を回転させることがあるので、PCの用に「とりあえず1000pxくらいならよさそう」というように決め打ちできませんが、viewportを指定すれば、あとはブラウザが勝手に綺麗に表示させてくれます。

Operaで日本語のフォントが輸入雑貨の説明書のようになってしまった。 (HTML)

Tomo — Sat, 01 Oct 2011 06:15:32 +0000

WEBサイトのテスト等で簡単にHTMLを書いていたときに日本語のフォントが少々おかしくなってしまいました。読めないわけでもありませんし、テストだから別にいいやとも思いましたが、なんとも気持ちが悪い状態でした。エンコードはUTF-8です。最近よく使うようになったOpera(11.51)で起きました。Firefox、Chrome、IEでは問題ないようです。文字コードを指示しても変化はありませんでした。

必ず起きるわけでもなく、文章の量を変えるだけで直ってみたり、と原因は不明。今回はそのままにしても，実害はないのですが、「。」が「・」の位置にあったりするので違和感があります。原因はブラウザが中国語？として認識してることだと考えましたので、




･･････

となっているところを、




･･････

とした（htmlタグに lang=”ja” を追加した）ところ、無事に表示されました。