ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

レスポンシブデザインのmedia属性をcssでなくhtmlに記述するようにしてみた

豚丼

レスポンシブデザインではページにアクセスしたデバイスの幅によってデザイン(レイアウト)が決まります。今まではこの@media only screen and~をcssに記述していたのですが、今回からhtmlに記述するようにしてみました

ソースコードを見てみよう

ソースコード

↑ボクはレスポンシブデザインにおいて1つのcssで振り分けるのでなく、読み込むcssファイルで振り分けています。今までは各cssファイルに

@media only screen and (ここに幅の条件)

↑このように記述していました。しかしこの方法だと「読み込む必要のないcssも無駄に読み込んでいるのでは?」と思いました。たとえばパソコン用のpc.cssを読み込むとき、その前にあるmobile.cssを読み込む → pcの条件でないから飛ばす → tablet.csssを読み込む → pcの条件でないから飛ばす、みたいな感じです。これ、無駄じゃね??

一方今回のように初めからhtmlにレスポンシブデザインの条件を記述しておけば、先ほどのように無駄なcssファイルを読み込むことがない!はずです。これによって

まずstyle.cssを読み込む → アクセスしたデバイスに合ったcssを読み込む、と2つのcssファイルを読み込むだけになる...はずです。4つのcssファイルを用意してあるけど、実際に読み込むのは2つだけ。少しは処理の効率が良くなったんじゃないかな~

ちなみにモバイル用とタブレットの境目が761pxになっているのはiPad miniのDOR(デバイス・ピクセル比)である768pxで条件分けできるようにしているからです。768pxギリギリよりも少し余裕を持つようにしています。

タブレットをパソコンの境目は、単純にパソコン用のレイアウトを基準にしています。

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです