Responsive Viewer

レスポンシブデザインに対応するといくつもの解像度に対応する必要があります。

Google ChromeのDevToolsなどで解像度を変えられますが複数のサイズを確認するのは結構大変です。

それらを一度に確認することができるプラグインです。

Responsive Viewer

既存にあればそれを選択、なければサイズとタイプ（iPhone, iPad, Google Chromeなど）を入力して作ることもできます。

それらをまとめて確認できるので便利です。 

PerfectPixel

デザインカンプを元にWebサイトを実装するわけですが、ぴったり合わせるのはなかなか難しいです。 

PerfectPixelというプラグインがあります。

PerfectPixel by WellDoneCode (pixel perfect)

デザインカンプから画像として出力したファイルを読み込んでWebサイト上の上に重ね合わせることで、どれくらいズレているかはっきり分かります。

DevToolsで微調整すればリアルタイムで位置や大きさの調整が出来ます。

Webサイトを作成時に役立つGoogle Chrome拡張機能

Webサイト（フロントエンド）を作成していると、デザインカンプ通りに出来ているか色々確認したくなります。

それに役立つツールを検索してみました。
Google Chrome拡張機能として使うものです。

1. 画面上のオブジェクトの位置やサイズを知る

Designer Tools

以下のサイトで詳しい説明がされています。

「Designer Tools」の使い方：画像や任意の位置のサイズをピクセル単位で測定可能

2. オブジェクトの並びを知る

横方向や縦方向の並びを知るものです。

オブジェクト同士の位置関係を知るために画面上に線を引けます。定規ツールですね。

Grid Ruler

以下のサイトで詳しい説明がされています。

ブラウザ上でガイドを表示できる！ピクセル単位でのサイズ計測ができる！Chrome拡張機能「Grid Ruler」

3. フォント名やサイズを知る

WhatFont

Designer Toolsではフォントを含んだ箱のサイズしか分かりません。テキストのフォント名やサイズを知るためのツールです。

以下のサイトで詳しい説明がされています。

フォントサイズが分かる拡張機能「WhatFont」が便利だよ

4. 色の値を取得する

Webサイトで使っている色の値（カラーコード）を知るためのもです。

ColorZilla

Bloggerでソースコードを綺麗に表示する。

 Web系のブログなのでソースコードをブログ上に貼ることがあります。
ただテキストだと味気ないしフォーマットができない、いちいちスクショを撮って貼るのもめんどくさい。

そういえば他の人のブログでソースコードを綺麗に表示してるのを見かけたのでググってみるとあっさり見つかりました。

Google-code-prettifyというのがあるそうです。

https://www.note65536.com/2020/08/blogger.html
ここに書いてある通りです。

ブログのレイアウトでガジェットを追加して以下をコンテンツ欄に張ります。
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian'/></script>

skin=に設定することで見た目をいろいろ変えれるようです。

指定したときの見た目はここを参照して下さい。

• desert
• sunburst
• sons-of-obsidian
• doxy

全行に行番号を表示するときは、”sons-of-obsidian”じゃないとダメみたいです。

それ以外のスタイルは５行毎に行番号が表示されます。 

ソースコードが横に長い場合は以下のようにすれば横スクロールを付けれます。

style="overflow:auto; overflow-y:hidden;"

後はHTMLビューに切り替えてpreタグで書くだけ

ただし"<" ">"などは直接書けなくて&lt;とか&gt;にしないとだめらしいです。

https://web-camp.io/magazine/archives/85024

クラスはprettyprint、言語はlang-xxxx、行番号を表示するにはlinenumsで行番号を指定したいときはコロン:で区切って指定します。

使える言語指定は以下に詳細があります。
http://www.yamamo10.jp/yamamoto/internet/WEB/regulation/GCP/index.php

サンプル
<pre class="prettyprint lang-html linenums:252">
DocumentRoot "C:/xampp/htdocs"<br />&lt;Directory "C:/xampp/htdocs"&gt;
</pre>

<pre class="prettyprint lang-html linenums:252">
DocumentRoot "C:/xampp/htdocs/example-app/public"<br />&lt;Directory "C:/xampp/htdocs/example-app/public"&gt;
</pre>

実際の画面では以下のように表示されます。

もう本当はもう少し明るい色調が好きですが、変えるにはCSSをいじらないといけないようです。

とりあえずこのままでいきます。