プログラマ向けデザイン勉強会の内容を参考にして妻のパン屋のWebサイトをリニューアルしてみた」の続編3本目(最終回)です。このエントリでは妻の店のWebサイトを作成する際に僕が遭遇した問題や、開発上のTipsをいくつか紹介します。iPhoneで見ると一部のフォントが妙に大きい特にiPhone用のViewは用意していないので、iPhoneで見てもPCと同じように表示されるようにしているのですが、iPhoneでページを開いてみると、なんか雰囲気が違うことに気付きました。PCiPhoneあれ?ロゴ画像が小さい・・・ではなくて、「小さな手作りパン工房」と「クープバゲット」に文字が妙に大きく表示されているのです!これはiPhoneが勝手に文字を大きくしているせいです。気を利かせてくれているのかもしれませんが、ちょっと余計なお世話なので、この最適化(?)をオフにしましょう。以下のCSSを入れると、この最適化を無効にすることができます。none;}これで表示がPCと同じになりました。Windowsで見ると「〜」が汚い何かとよく使う「〜」ですが、いくつか似たような文字があるようで、Macで入力した時の「〜」とWindowsで入力した時の「〜」は別物みたいです。同じように表示されればいいのですが、Macで普段通り「〜」を入力すると、Windowsではなんか汚い「〜」になります。いうわけで、Windowsユーザーのことも考慮して、Webサイト上ではWindowsの「〜」を使うようにしました。面倒ですが、「〜」の代わりに文字コードを指定します。0795-27-7032</address></dd>[f:id:JunichiIto:20130120053227p:plain]こうしてやると、Windowsでもきれいな「〜」が表示されます。ちなみにMacだと、どちらで見てもあまり違いはありません。頑張って使いこなしたいブラウザの開発ツール他のWebサイトの構造を研究したり、思ったように表示されない自分のサイトを修正したりするときに便利なのが、ブラウザの開発ツールです。Chromeだと、調べたい部分を右クリックして「要素の検証」を選択すると、画面の下側にタグの構造や設定されているCSSのプロパティが表示されます。タグやCSSの設定を確認するだけでなく、その場で値を変更してみたり、設定値の有効/無効を切り替えたりすることで、表示崩れの原因調査などをしたりすることができます。開発ツールの使い方をここで説明しだすとキリがないですし、僕自身もまだまだ使いこなせていない機能がたくさんあったりするので、詳細な説明は割愛します。開発ツールの使い方を習得するための一番効率的な方法は、経験豊富な上級者と一緒にペアプロ(ペアデザイン?)することだと思います。上級者と一緒に開発すると、「そんな使い方があったんだ!」と驚くようなテクニックをたくさん盗むことができますよ。まとめというわけで、今回のエントリではデザインでもIEでもRailsでもない、雑多なマークアップ関連の話題の話題を書いてみました。今回でいちおう「妻の店のWebサイトシリーズ」は完結です。最初は全部一本のエントリで書こうとしたのですが、全然話がまとまらなくてすぐ挫折しました。関連性の高いトピックごとにエントリを分割して書くことにしました。いやあ、ブログのエントリも「凝集度」って大事ですね〜。店のWebサイトを作りながら学んだことを色々とまとめてみたので、こうした情報がみなさんのお役に立てば幸いです。何か新しい発見があればブログに書きますんで、よろしくお願いします。バゲット妻の店のWebサイトはこちらです。このエントリでも書いた通り、RailsとHerokuで動いてます。try妻の店のWebサイト関連のエントリ・その1です。try妻の店のWebサイト関連のエントリ・その2です。try妻の店のWebサイト関連のエントリ・その3です。今日は妻の誕生日です。はてなブログPro株式会社ソニックガーデンで働くRubyプログラマ。2017年11月に「プロを目指す人のためのRuby入門」を出版。blog)はてなブログをはじめよう!JunichiItoさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。