タグ： cssの付いた投稿

iPhoneを縦から横にしたときにフォントサイズが大きくなってしまう件

2011/08/24 @10:29 | レスポンシブWebデザイン

最近iPhoneでモバイル対応のサイトを作っていて気づいたんですが、iPhoneを縦（Portrait）から横（Landscape）表示に変更した際、フォントサイズが大きくなってしまうんですね。。。

「これは困った」と、思って調べてみたら、簡単な解決策がありました。

iPhoneの横表示の時のみに指定されるように、Media Queriesを使って以下のように記述すれば良いはずです。

@media screen and (min-width: 360px) {
  * { -webkit-text-size-adjust: none; }
}

参考

Preserve HTML font-size when iPhone orientation changes from portrait to landscape – Stack Overflow

アイコン画像などをCSSスプライトにまとめる方法

2011/06/19 @11:27 | 制作・運営・ノウハウ

現在作業中のサイトでは「CSSスプライト」という手法を使って、アイコンやロゴなどの画像表示の最適化を試みようと思っています。アイコンなどの小さな画像が数多くあると、その分ダウンロードする際にサーバへの接続回数（HTTPリクエスト）が多くなってしまい、ページ表示速度を遅くさせてしまう可能性があります。そこで、CSSスプライトを使った方法では、それら複数の画像を一つにまとめて必要な部分のみをCSSで表示させます。

CSSスプライトの方法にもいろいろあるようですが、ここではGoogleやFacebookが採用しているアイコン画像を縦と横に並べた、よりコンパクトなスプライト画像を使う方法についてまとめてみます。※現段階ではIE6、IE7未対応 続きを読む

Reset CSSについてのまとめ：リセットするべき?しないべき？

2011/01/11 @6:35 | 制作・運営・ノウハウ

「CSS制作のワークフローについて考える」で触れた「リセット・スタイルシート（Reset CSS）」についてまとめてみました。まず、結論から言ってしまうと、

  • Reset CSSの使用は、そのメリット・デメリットを理解したうえで
    プロジェクトごとに考えるべき

だということです。 続きを読む

CSSのフォーマットを自動化してくれるCodaのCSS Toolsプラグイン

2010/10/05 @5:54 | ウェブ制作・運営に役立つツール

Macでは定番のHTMLエディター、Codaの面白いところはプラグインが使えるところ。前の投稿の「Zen Coding」もそうですが、他にも便利なプラグインがいろいろあります。その一つがこのCSS Tools Plugin。CSSのフォーマットを自動化してくれます。 続きを読む

 1 2 次へ