社会不適合者の目線でWEBフリーランスで生きてきた経験を語ります。運営者情報サイトマップお問い合わせレスポンシブWEBデザインのCSSの書き方!CSS今、自分用のレスポンシブWEBデザインのテンプレートを作成しています。その中で、「レスポンシブデザイン用のCSSの書き方はどうするのが一番良いのか?」とちょっと悩んだ部分がありました。今回はその内容を記事にしたいと思います。2014.07.25こんにちは!今、自分用のレスポンシブWEBデザインのテンプレートを作成しているのですが、テンプレートを作成している中で、「レスポンシブデザイン用のCSSの書き方はどうするのが一番良いのか?」とちょっと悩んだ部分がありました。今回は備忘録も兼ねて、その内容を記事にしたいと思います。主なCSSでの書き方!各デバイスに合わせてCSSファイルを分ける方法!感想!1ファイル内に各デバイスごとに記述する方法!感想!メディアクエリー(@media)を使用して、各パーツごとに記述する方法!感想!結局、一番良さそうな書き方は?対応ブラウザとデモページ!最後に!主なCSSでの書き方!各デバイスに合わせてCSSファイルを分ける方法!各デバイスに合わせてCSSファイルを読み込む方法は以下のようになります。htmlのhead内に記述します。href="smartphone.css">上記を説明すると、ブラウザの横幅が769px以上の場合は「all.css」ブラウザの横幅が768px以下の場合は「tablet.css」ブラウザの横幅が480px以下の場合は「smartphone.css」が適用されます。感想!各デバイスごとにCSSを分けることができますし、CSS内に@mediaを記入せずに済むのでCSSのコードが綺麗です。各デバイスごとにCSSを分けているので検索はしにくいです。管理、運用面はよくないかもしれません。1ファイル内に各デバイスごとに記述する方法!1ファイル内に各デバイスごとに記述する方法は以下のようになります。480px」の部分にスマートフォン用のCSSを記述します。感想!1つのCSSに全てをまとめて記述でき、各デバイスごとに管理できます。各デバイスごとにCSSを全て記述するので、CSSが膨大になり、管理、運用面はよくないかもしれません。メディアクエリー(@media)を使用して、各パーツごとに記述する方法!メディアクエリー(@media)を使用して、各デバイスごとにレイアウトが変わるパーツごとにCSSを記述します。}}上記のCSSを説明すると、レイアウトが変わるパーツごとにCSSを記述します。480px」のスマートフォンの場合は、「side」のCSSが変わります。感想!1つのCSSに全てをまとめて記述できますし、パーツ単位で記述していますので管理しやすいです(Sassを使用すれば変数で管理できます)。常にパーツ単位でメディアクエリー(@media)を記述する必要があります。結局、一番良さそうな書き方は?私は「メディアクエリー(@media)を使用して、各パーツごとに記述する方法!」でCSSを記述していくことにしました。他の方法だと、あまりにも色んなところにスタイルがあり過ぎて、探すのに苦労しそうです。各パーツごとに記述していれば、まず管理しやすいと思いますし、Sassを使用すれば、変数でブレイクポイントの管理もできます。対応ブラウザとデモページ!上記のCSSの書き方で、テンプレートを作成してみました(まだ完全ではないですが)。以下より実際に作成したテンプレートの「対応ブラウザ」と「デモページ」をご確認頂けます。zipファイルもダウンロードできるようにしています。下記のブラウザで動作チェック済です。「IE8」は捨てました。9(Windows)上記の設定をしたデモページを作成しました。>>デモページはこちら!デモページのサンプルファイルはこちらよりダウンロードできます。>>サンプルファイルはこちら!最後に!自分の中でレスポンシブWEBデザインの組み方がまとまったら、細かい作り方なども記事にしてみたいと思います。現在までのテンプレートを見て「ここは違う」とか「ここはこうした方が良い」とかあれば、ご意見頂ければ有難いです。レスポンシブWEBデザインの組み方の正解って何なんでしょうかね。以上「レスポンシブWEBデザインのCSSの書き方!」でした!それではまた。Adsenseを読み込む度に背景色が一瞬、黄色になっていました。調べてみると原因は無料で配布されているリセット用のCSSにありました。原因となっているタグをコメントアウトすることで解決できました。CSSWordPressのおすすめコメントアウトの方法!WordPressのファイルは「html」「PHP」などが混在しているので、非常にコメントアウトが面倒です。そんな時におすすめのコメントアウトの方法を記事にしました。WordPressでのコメントアウトはこれが一番便利です。CSSSSLを設定したらIE8でCSSが効かない!コーディング作業をしていると突然、IE8のヘッダーとフッター部分のCSSが効かなくなってしまいました。その原因はを調べてみると、どうやら「SSL」が関係していることが分かりました。解決策は記事をご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。社会不適合者のWEBフリーランス生活をフォローするサイト運営者:MPD(エムピーディー)当サイト運営者のMPDと申します。5年ほどWEB制作会社で働き、WEBフリーランスとなりました。基本は社会不適合者です。WEBフリーランスとして働く、社会不適合者のリアルな生活をお伝えします。言って、生活も収入も社会の最底辺ですが、割とこの生活は気に入っています。社会不適合者のWEBフリーランス生活.。