LoginSignup
194
194

More than 5 years have passed since last update.

コーディング中はブラウザにガイドを引こう

Last updated at Posted at 2014-12-02

PSD上でどんなに1px単位でこだわってもマークアップ時に再現されなければPSDは「絵に描いた餅」ですし、
むしろPSD上でのゴネゴネの時間をCSSの微調整に当てるべきと思っています。

そんな時、ブラウザ上で任意のガイド線を得るために自分は下記のようなやり方をしています。

コーディング中だけbodyにid="guide"とでもつけておく
<body id="guide">
こんなscssを用意しコーディング中だけimportする
body:target {
  //ガイド線
  .area-main {
    &::before { //水平方向の中心線を引く
      display: block;
      position: absolute;
      width: 1px;
      height: 100%;
      background: cyan;
      left: 50%;
      top: 0;
      z-index: 10000;
      content: "";
      margin-left: -1px;
      box-shadow: -493px 0 0 0 cyan, 493px 0 0 0 cyan; //中心からのオフセット
    }
    &::after { //垂直方向の中心線を引く
      display: block;
      position: absolute;
      height: 1px;
      width: 100%;
      background: cyan;
      top: 50%;
      left: 0;
      z-index: 10000;
      content: "";
      margin-top: -1px;
      box-shadow: 0 -352px 0 0 cyan, 0 352px 0 0 cyan; //中心からのオフセット
    }
  }
}

URLに#guideとハッシュをつけた時だけ

guide.png

こんな感じで好きにガイドが表示されます。
bodyのtarget擬似クラスに対するbefore/after擬似要素を使用しています。
もちろん同じことはSASSでなくCSSでもできますね。

上の例では1024x768みたいな決められた画角にガイドを引いている例ですが、
スクロールのある普通のページのガイド線なら、position: fixed;にするとよいでしょう。

さらにセクショニングやブロック要素にアウトラインを出しておきたいときは

scss
body:target {

  //アウトライン
  main, section, nav, aside {
    outline: cyan 1px solid;
  }

  div, ul, ol, nav, dl {
    outline: red 1px solid;
  }
  div div, p, a, li, span, strong, em {
    outline: yellow 1px solid;
  }

}

みたいなことを書くのですが、一気に見づらくなります。

コーディングが終わったら、
@import 'guide'; をやめて、bodyからid="guide"を消します。
bodyの方は結構消すの忘れます...。

補足

この手法ですが、数年前にGoogle Chromeのウェブサイトのソースを見てた時に#gridでグリッドを敷いていたのが残っていたのを偶然見つけて自分のコーディングスタイルに取り入れたものです。現行のサイト(https://www.google.co.jp/chrome/ )ではもう使われてないようですが、その時の名残で、bodyにid="grid"が残ったままになっています。

補足2

続編を投稿しました。

"CSS3 - 【続】コーディング中はブラウザにガイドを引こう - Qiita"
http://qiita.com/volkuwabara/items/c1c97ac2526e3effcade

194
194
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
194
194