前置き
今回も、Chrome関連という事でショートカットのご紹介をしたいと思います。
Web制作者にとって、ブラウザというものは
美容師のハサミ、大工のカンナと同義の大切にすべき仕事の道具です。
ブラウザを使いこなし、きっちりメンテナンスする事で最大のパフォーマンスを発揮する事が求められます。
それでは早速ご紹介していきます！
① Ctrl + クリック
みなさんは、このショートカットを使った事がありますでしょうか？
試しに以下のリンクを、
- クリックするだけ。
- Ctrl を押しながらクリックする。
この2パターンを試してみて下さい。
どうでしょうか？違いはわかりましたか？
そうですね、Ctrl を押しながらクリックすると、別タブでページが開きますね！
わたしはWordPress で固定ページを作る際は、
- ダッシュボード
- 固定ページ編集画面
- プレビュー画面
この3つは最低タブを分けて常時置いています。
他にも、プラグインページなどをプラスして置いておく事が多いです。
その都度、ページ遷移して設定を確認したりするのは効率が悪いのでタブを分けて常時表示を一度試してみて下さい！
ちなみに、HTML の a タグにはクリックするだけで別タブで開かせるという事が出来るプロパティーもあるので、
もし調べて分かった方はコメント欄で教えて下さい。
今回は先着2名様には特別に、おめでとうの言葉を返信させて頂きます。（賞金は出ません）
※注意※
ばんばんタブを増やして行くとタブの中身がパッと見で判断出来なくなり迷子になります。
定期的にタブは削除してしまうか、グループにまとめる事を心がけましょう！
② Ctrl + Shift + C
色んなページを閲覧している中で、なにか調べ物をしたい時にわたしはこのショートカットから入ります。
この hogehogeボタンの色を変更したいとします。
まずはどんなIDやクラス名がついているかを確認すると思います。
特別にユニークのクラス名を付与していますの確認してみましょう。
F12？
右クリック？
ノンノン、ここで Ctrl + Shift + C です。
押して、カーソルを調べたい要素に重ねてみましょう！
どうでしょうか？一瞬で調べたいものの情報を見ることが出来ますよね。
では、実際に付与されたクラス名を使って背景色を黄色にする CSS を書いてみましょう。
答えはコメント欄にどうぞ★
③ Ctrl + Shift + R (Shift + F5)
これは再読み込みのショートカットです。
作業の中で CSS を変更した後に、ちゃんと変わっているか確認しますよね？
その時に通常の再読み込みではキャッシュが残って変化が確認出来ないという事がまあまああります。
そんな時は Ctrl + Shift + R を押してみましょう。
ただこれは万能というわけではなく、これでもキャッシュが残ってしまう場合があります。（キャッシュが保存される場所の問題）
そんな時は開発社ツールを開いて、再読み込みボタンを右クリックして…
ってのがセオリーとして記事にはよく上がっていますが、経験上は大人しくシークレットモードで開いた方が早いです。
詳細はシークレットモードでググって下さい！
あとがき
どうでしたでしょうか？
少し体験してもらう事も今回は入れていますので実践的にも使えるブログになったのではないでしょうか？
他にも様々なショートカットやブラウザの機能はありますので、
この操作は簡単に出来ないか？とか、こんな事がしたいけど機能に無いかな？と調べる事がプロへの近道な気がします。
大半の思いついた機能は存在していると思います。皆さん考える事は似通ってきますので！
次の回もお楽しみに！
