Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

skwbr
Director / Designer
1pac
「デジタル・インタラクティブ領域」に強みをもち、クライアントの課題解決のための仕組みづくりをサポートするクリエイティブプロダクションです
https://1pac.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした