新着記事

カテゴリー

HTMLコーディング時にガイドラインを表示するjsで作業効率化!

HTMLコーディング時にガイドラインを表示するjsで作業効率化!

本日のおすすめ記事

優等と有能の違い。社会には「無能な優等」が多すぎる

僕はWeb制作系の仕事をしています。 その中で「この人はすげー有能だな」と思う事もあれば、「この人は優等だな(ディスり)」と思うこともあり...

この記事はたぶん 4 分で読めます。
ぱっかん
執筆者:散歩ブロガー「ぱっかん(@pakkan316)」福岡散歩ブログも絶賛更新中!

コーディングする時に、「デザイン通りに組み上げる」という当然のことが中々面倒です。
そこで、「フォトショのガイドライン的なものを、ブラウザ上で表示するjs」を作りました。

※グレードアップした「codin-support.js」というのを作りました。是非こちらを使ってください。

まずはdemoをご覧ください。

demoページ

画面左側のボタンを押すと表示切替できます。

cssやhtmlソースなども全てjsに入れ込んでいるので少し長いですが、おかげでhtmlやcssファイルをいじらずに導入できます。

作業完了後、納品前にはちゃんと取り外しておく必要があるので、「最後にjsファイルを消すだけ」という手間の無さにこだわりました。

以下、使い方、簡単な説明です。

●こんなことが出来る

〇コーディング時に役立つ

・コーディング時に(微妙に)面倒な「要素の位置調整」を、フォトショのガイドラインに合わせるような操作感で行える。

読み込むのはjsファイルだけなので、htmlやcssファイルをいじらなくていい

・納品前には、jsファイルに関する記述を削除しておくこと

  

・「コーダーの人がデザイン通りにコーディングしてくれないんですけど!(ぷんぷん)」というデザイナーの鎮静化に繋がる

〇画面操作

・当ページ、画面左側にある「GuideLine」というボタンをクリックで、ガイドラインの表示非表示を切り替え。

「Hide」ボタンクリックで、ボタンそのものを非表示(ページリロードするまで表示されなくなる)

・レスポンシブ対応なので、ウィンドウサイズをスマホサイズくらいまで縮めると、ガイドラインの位置が変わる

※このページでは、PC版は980px幅で固定し、SP版は、”両端からそれぞれ15px”というスタイルで指定。もちろん各々で変更可能。

●使い方(導入方法)

①下記ダウンロードページへアクセスし、「Download Zip」をクリック。
 

「guide-line.js」をダウンロードし、解凍する。

〇ダウンロードページ
https://gist.github.com/maehara000/7a26b092216c731d52d08d3f46b06b0b

②ダウンロードしたguide-line.jsをhtmlのhead内で読み込む。

例:


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/js/guide-line.js"></script>

※「jquery-1.12.1.min.js」は状況に応じて入れる。(良く分からない場合は、まず入れずに試してみて、動かなかったら入れてみる)

※「/js/guide-line.js」のディレクトリは、jsファイルを保存してるパスに合わせて変更する。

ガイドラインとボタンがちゃんと表示されたら次へ↓

③画面操作

・当ページ、画面左側にある「GuideLine」というボタンをクリックで、ガイドラインの表示非表示を切り替え。

「Hide」ボタンクリックで、ボタンそのものを非表示(ページリロードするまで表示されなくなる)

・レスポンシブ対応なので、ウィンドウサイズをスマホサイズくらいまで縮めると、ガイドラインの位置が変わる

※このページでは、PC版は980px幅で固定し、SP版は、”両端からそれぞれ15px”というスタイルで指定。もちろん各々で変更可能。

●jsの設定変更方法

〇PCのガイドライン位置の変更
「guide-line.js」の67行目付近にある

gl_left_css.left = '980px';
gl_right_css.right = '980px';

「980px」を好きな幅に変更する。
デフォルトでは、「980pxでセンター寄せのコンテンツ」で指定しているが、センター寄せでは無い場合は、左右で別々のpxを設定すればOK

〇SPのガイドライン位置の変更
「guide-line.js」の71行目付近にある
gl_left_css.left = ’15px’;
gl_right_css.right = ’15px’;

の「15px」を好きな数値に変更する。
デフォルトでは、「画面両端から15pxずつ内側に入ったところ」で指定している

〇スタイルの根本的な部分を変更したい場合

cssが分かる方なら、「guide-line.js」の9~63行目付近のスタイルをいじっていけばなんとかなります。
状況に応じて変更してください。
そういうの前提のjsなので。

ちなみに通常のcssなら


background-color: #ddd;

という感じで、単語をハイフンで繋ぎますが、jsの場合は「backgroundColor」という風に、キャメルケースで入力する必要があり、そこだけ気を付けていれば大丈夫なはずです。

 

キャメルケースとは、単語の間をハイフン(-)で繋がず、代わりに単語の頭文字を大文字にする記法です。

まとめ

もし改善点、ご要望があればコメントください。
jsはまだまだなので、勉強がてら頑張ります。

※追記:
ついでに今、「”キャプチャ画像等をページ全面に表示させる”」というjsを作ってます。
これが完成すれば、別タブで開いてるデザインデータの書き出しjpegと照らし合わせる必要が無く、細かい余白等の再現度も高くなるはず。
そう信じて戦っています。

ソース全貌



本日のおすすめ記事

優等と有能の違い。社会には「無能な優等」が多すぎる

僕はWeb制作系の仕事をしています。 その中で「この人はすげー有能だな」と思う事もあれば、「この人は優等だな(ディスり)」と思うこともあり...

2 件のコメント

  • プラスの機能として、Photoshopみたいに任意の位置でさらにガイドが引けるようになればありがたいです。
    可能なら改善お願いします。

  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    この記事をこねた人

    名前:ぱっかん(@pakkan316
    一人が大好きなぼっちブロガー。
    働き方、生き方、日々思った事、クッソどうでもいい事などをつづってます。
    孤独との向き合い方や、孤独の楽しみ方をメインに情報発信しています。

    【運営してるメディア】
    ぱっかんブログ(当サイト)
    ぱっかんのガジェットブログ
    ぱっかんシネマ
    やるゲーブログ
    福岡散歩ブログ

    「当ブログ」と「ぱっかん」について

    【職業】web諸々
    【趣味】考えをまとめる・散歩・映画
    【好きなファッション】ウォーキングデッドに出てきそうな奴
    【好きな食べ物】ネオソフト・きなこご飯
    【ストレングスファインダーの結果】着想/最上志向/内省/共感性/運命思考

    youtubeで、ゲーム実況とか、福岡散歩レポートの紹介とかやってます。
    Youtubeチャンネル(外部)

    あまり精力的では無いですが、「Trash Area」という名前で音楽活動をしています。
    エモいバンドサウンドが好きで、そういう曲をたまに作ってます。

    ▲ overflow(Youtubeにジャンプ)