レスポンシブデザインのWebサイトを作る際、CSSが長くなりすぎて読みにくい場合に試してみたい対策方法 | Garney.Web

レスポンシブデザインのWebサイトを作る際、CSSが長くなりすぎて読みにくい場合に試してみたい対策方法

スポンサーリンク

20150327_1

レスポンシブデザインのWebサイトを作る時に、CSSファイルに@mediaルールを用いてブレークポイントを設定するかと思うんですけど。ブレークポイント毎にまた同じプロパティ名で違うスタイルを記述しないといけない場合が多いですよね。
そうなってくると、スタイルシートが異様に長くなってしまって後でファイルを開いた時、変更したいプロパティを探すのにかなり苦労します。えぇ、しました。

「クロームのデベロッパーツールを使えば直ぐ場所わかるじゃん」分かるよ。でもその為にいちいちデベロッパーツールで一旦探してってやるのも面倒。直ぐ探せるんですけどね数回やったら別に良いんです。何十回何百回なってくるとさすがに「もっと良い方法あるやろ。」って思ってくるのです。

CSSにコメントして対策

20150327_3

クロームのデベロッパーツールだけに頼らずに、別の方法も組み合わせていきましょうよ!ってことで、CSSにもちゃんとコメントしていきます。

<br />
/*<br />
PC style<br />
tablet style<br />
sp style<br />
*/</p>
<p>/*PC style*/<br />
@media screen and (min-width: 1024px) {<br />
   /*ここにPC用のスタイルシート*/<br />
}</p>
<p>/*tablet style*/<br />
@media screen and (min-width: 768px) {<br />
   /*ここにタブレット用のスタイルシート*/<br />
}</p>
<p>/*sp style*/<br />
@media screen and (min-width: 480px) {<br />
   /*ここにスマホ用のスタイルシート*/<br />
}<br />

こんな感じにブレークポイントの記述をする手前にコメントを打っておく。そしてスタイルシートの一番上に目次のような物を作っておくと便利。

後からスタイルシートを開いたときに、コピペして文字検索すれば簡単にブレークポイントまで飛ぶことができます。ただこれは探しやすくはなりましたけど、スタイルシートはやっぱり長くなる一方です。なので・・・

ブレークポイント毎にスタイルシートを分ける

20150327_2

ブレークポイント毎にスタイルシートを別に作って分けておくと更に便利です。

「んじゃーコメント要らんやん」な感じですけど、そうでもなくって。他にも色んなスタイルを記述するのだから、そこにコメントを書き込んでおけばいいんです。例えば

<br />
/*<br />
box style<br />
list style<br />
*/</p>
<p>@media screen and (min-width: 1024px) {</p>
<p>  /*box style*/<br />
 .box_style{<br />
     width:500px;<br />
     border:solid 1px #FF0000;<br />
     margin:0 auto 30px;<br />
  }</p>
<p>  /*list style*/<br />
 li.list_style{<br />
      margin-left:10px;<br />
     list-style-type:none;<br />
      float:left;<br />
  }</p>
<p>  li.list_style:first-child{<br />
      margin-left:0px;<br />
  }</p>
<p>}<br />

こんなに短いスタイルシートで実際はコメントは書かないですが、こんな風にしておけばPC用のスタイルシートを開いた時にどこに何が書いてあるか人目で分かります。リストのスタイルを変更したいときは、list style をコピーして文字列検索をすれば、そこに飛ぶことができるので、簡単に変更可能です。いちいちデベロッパーツールを使わなくても分かります。

またブレークポイント毎にスタイルシートを分けていないで同じようなことをするとどうなるかと言うと。
list styleで検索しますよね、そしてlist styleの記述がある箇所へ飛びます。しかし飛んだ所がPC用のlist styleなのか、スマホ用なのか、タブレット用なのか混乱します。ちょこっと更新するだけだったら良いんですが、何度もPC用を更新して調整して、スマホも調整して、「あ!やっぱりPCはこうしておこう」と思って、PCを再度調整してってやってるうちに混乱するんですよ。

だからこそ、一つのCSSファイルに、PC、タブレット、スマホと全部入れるんじゃなくて、一つ一つ分けてファイルを作成して管理したほうが混乱も避けられるので良いかなと思うのです。因みにもちろん、レスポンシブデザインのWebサイトの制作以外でもこの方法は使えます

どうでしょうこの方法。もっと良い方法あれば教えて欲しいですねー

もっと自転車旅を知りたい人向け有料マガジンやってます。

もっと自転車旅を知りたい人向け!
有料マガジンやってます。

自転車世界一周マガジンについて詳しくはこちら

スポンサーリンク

フォローする

ツイッターやっています。


Profile

プロフィール

Profile びゃす

名前 びゃす
現在自転車で世界中旅しています。
スタートはアメリカ合衆国アラスカ州。
南米最南端を目指して毎日ひたすら前進中!。

自転車を漕ぎ、見た世界について感じたことをブログで発信しています。
詳しいProfileはこちら


Instagram
follow us in feedly
Followボタンからお気に入りブログを
登録する方法