ブログ|静的志向

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

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

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

思い描いていたcssの設計が完成しました

雪像

一昨日の記事(cssの大改修をやっているんだけど終わる気配がないで嘆いていたcssの大改修がやっと終わりました。ブログの更新も滞っていましたが、今日から復活できそうです。月をまたいだのでずいぶん時間たっちゃったな~って思っていたのですが、ブログ書いていなかったのは3日間なんですね。いや、3日って十分長いか...

cssの重複内容を解決したかった

このサイトは完全にレスポンシブデザイン(スマホやタブレットに最適化されていること)になっています。そのやり方は1つのcssでスマホ・タブレット・パソコン用と振り分けるのでなく、mobile.css、tablet.css、pc.cssの3つを各デバイスで読み込むようにしています(1つのcssにまとめると@medhia only screen and ()が多くなりすぎてサイトのメンテナンス性が損なわれると判断したため)。また文字の色や大きさの倍率など、デバイス間で同じものを使いまわせるデザインはstyle.cssに記述していました。

今回ボクが進めていたことは、スマホ・タブレット・パソコンで同じ内容を記述するものはすべてstyle.cssに記述して、各デバイスのcssからはその内容を削除していくことです。これにより

まずstyle.cssを読み込み → 画面の大きさに応じてmobile,tablet,pc.cssのどれか1つを読み込むことが効率よくできるようになりました。今までは重複した内容も読み込んでいたので、特に画面の大きさをブラウザで変更したときに無駄に読み込む記述があったのですが、それがなくなったのです。

いや、そもそもPCでそんなに画面の倍率を変える人もいないでしょう。一番進歩したことはスタイルシートの共通項をまとめたことで「デザインの変更がstyle.cssの記述を変えるだけでスマホ・タブレット・パソコンのすべてに適応させることができる」ようになったことです。

たとえば今まででしたらスマホのフッターのナビゲーションメニューを色を変えたいと思ったとき、mobile,tablet,pc.cssの3つのファイルの中身を変更する必要がありました。もうね、こんなのメンドくさ過ぎてやる気がおきません。

ところが現在はstyle.cssの中のnav li aのbackground-colorを変えるだけで、各デバイスにも変更内容が反映されるのです。いや~メンテナンスが楽になりました!ボクがやりたかったことは、こういうことなのです。

欠点としては、スタイルシートの中身を確認するとき常にstyle.cssも参照しなければならないことです。ってことでまず画面の小さいノートパソコンでは厳しいです。デュアルモニターを使って2つ以上のスタイルシートを同時に見ることができなければ、今回のように複数のcssファイルで管理することは無理でしょう。ボクのPCは自作パソコンなので、モニターはまだまだ増やせるし問題ありませんが(ちなみに現在3枚のモニターを使っています)

それと今回、amazonなどへ商品リンクを貼るcssも作りました↓

日本人が知っておくべき「戦争」の話

僕らのじっちゃん、ばっちゃんの名誉のために! 著者:Kazuya
日本人が知っておくべき「戦争」の話

↑こんな感じ。各ストアのリンクボタンをもっと見やすくしたいですね。この辺はもっとcssの勉強が必要でしょう。グラデーションをつけたりとかね。

以上、完全なる自己満足日記でした~でもこういったブログもそのうち「静的htmlでの自作ブログの作り方」のページを作るときに役立つはずです。

↓鋭意制作中↓

ダイエットエラミカ

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

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

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

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

Sponsor Link

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