Tech Select 学習サイト

# 操作に慣れる

# ショートカットの雰囲気を知る

※ Mac ユーザーは Ctrl → Command 、 Alt → Option に置き換えてお読みください。

ショートカットを覚えると作業効率が向上します。 これまでもいくつかショートカットを紹介していましたが、漠然と覚えるのは大変です。 多くの人が使える汎用的なショートカットは、覚えやすいように設定されていることがあります。 著者の主観もありますが、このセクションでふわっと説明します。このセクションで紹介しているショートカットは Visual Studio Code、Google Chrome、Word、Excel、PowerPoint 等で有効です。

そもそもショートカットは、Windows や Mac が用意しているものではなく（コピーや貼り付けなど用意されているものもあります）、アプリケーションの開発者が、「お節介で用意してくれているもの」という認識が重要です。 アプリケーションが異なれば ショートカットも異なります。しかし、同じような機能なのに、アプリケーションごとに全く違うショートカットが割り当てられていると、それらを使うユーザーが不便な気持ちになってしまいます。 そのため、よく使うショートカットは、開発者が世の中の雰囲気に従って、似たようなキーの組み合わせで似たような機能を、一生懸命に実装しています。

うまくショートカットを押してください。例えば Ctrl + Z を押す場合、Ctrl と Z を同時に押しません。 Ctrl を押しながら Z を押します。2 回繰り返して押したい場合は、 Ctrl を押し続けたまま、 Z を 2 回押します。もちろん Ctrl を一度離しても問題ありません。 Ctrl 、 Alt 、 Shift は単体で押しても意味がない（文字が入力されたり機能が実行されたりしない）ため、これらのキーから押すようにしましょう。

  • Ctrl のイメージ
    Ctrl は機能を引っ張り出してくる感じです。 A、B、C ... Z 等の通常のキーに対して、文字を入力する以外の、別の機能を実行します。 そして、キーにはその単語の頭文字っぽいものが当てられていたりいなかったりします。

    ショートカット 略と思われる元の単語等 説明
    Ctrl + S Save 上書き保存
    Ctrl + A All すべて選択
    Ctrl + C Copy クリップボードにコピー
    Ctrl + X はさみのイメージ クリップボードに切り取り
    Ctrl + R Reload ページ更新（Chrome）
    Ctrl + F Find ページ内検索
    Ctrl + P Print 印刷 (Chrome、Word 等)
    Ctrl + B Bold 太字にする (Word 等)

    ※ Ctrl + V はクリップボードから貼り付けですが、おそらくキーボード上で C の右隣にあって都合がいいためだと思われます。

  • Shiftのイメージ
    Shift は「反対にする感じ」と「似ているけど微妙に違う機能を実行する感じ」があります。A を押すと小文字で 「a」が入力されますが、 Shift + A を押すと 大文字で「A」 と入力されます。これは「反対にする感じ」がありますね。これらの感覚はショートカットのときも似た覚え方ができるものがあります。

    ショートカット 説明 ショートカット + Shift 説明
    Ctrl + Z 1 つ前の状態に戻す Ctrl + Shift + Z 前に戻したものをもう一度やり直す
    Ctrl + S 上書き保存 Ctrl + Shift + S 名前をつけて保存
    Ctrl + R ページ更新（Chrome） Ctrl + Shift + R キャッシュをクリアしてページ更新
    Ctrl + W タブを閉じる Ctrl + Shift + W ウィンドウを閉じる

  • Altのイメージ
    Alt はマイナーな機能が割り当てられていることが多いです。Alt + {文字キー} のみの組み合わせは少なく、 Ctrl や Shift と組み合せて複雑なショートカットとなるイメージがあります。 また、Windows の場合、 OS 標準のショートカットを呼び出すイメージがあります。

# 複数のタブを開く

Visual Studio Code では、未確定な状態のタブと確定状態のタブがあります。 未確定タブ（プレビュー状態のタブ）は名前が 斜体 になっています。ダブルクリックするか、中身を編集すると確定状態になります。

image

ファイルを探すときに、クリックで探し、目的のファイルを見つけたときにダブルクリックすると、無駄にタブを開く必要がなくなります。

キー入力 (参考)

海・川が写っている写真だけ開きたい場合

  1. 1.jpg をクリック プレビュー → 写っている（海）
  2. 1.jpg をダブルクリック タブを確定
  3. 2.jpg をクリック プレビュー → 写っていない（廊下）
  4. 3.jpg をクリック プレビュー → 写っている（川）
  5. 3.jpg をダブルクリック タブを確定
  6. 4.jpg をクリック プレビュー → 写っている（海）
  7. 4.jpg をダブルクリック タブを確定
  8. 5.jpg をクリック プレビュー → 写っていない（滝）
  9. 6.jpg をクリック プレビュー → 写っていない（山）
  10. 6.jpgのタブを閉じる プレビュータブを閉じる

Animation14

# 画面を分割表示する

タブをドラッグすると画面を分割できます。ご自身の都合の良いレイアウトで作業してください。

キー入力 (参考)
  1. タブをクリックしたまま画面の右側に移動 画面を分割

Animation8

# 画面を切り替える

WIN

画面領域が足りない方は、キーボードショートカットを使用して画面を切り替えて作業すると効率的です。 以下は、変更と更新を 3 回繰り返している映像です。

  • Visual Studio Code で「あいうえお」と入力して保存 → Chrome でページ更新
  • Visual Studio Code で「かきくけこ」と入力して保存 → Chrome でページ更新
  • Visual Studio Code で テキストを削除して保存 → Chrome でページ更新
キー入力 (参考)
  1. あいうえお 「あいうえお」と入力
  2. Ctrl + S 上書き保存
  3. Alt + Tab ウィンドウ一覧を表示（次のウィンドウを選択中）※ Chrome を探してください
  4. （別のウィンドウが選択されている場合は、もう一度押します。
    Alt + Tab ウィンドウ一覧を表示（次の次のウィンドウを選択中））
  5. Ctrl + Shift + R ページのキャッシュをクリアして更新
  6. Alt + Tab ウィンドウ一覧を表示（次のウィンドウを選択中）※ Visual Studio Code を探してください
  7. （別のウィンドウが選択されている場合は、もう一度押します。
    Alt + Tab ウィンドウ一覧を表示（次の次のウィンドウを選択中））

以降繰り返しです。

Animation9

MAC

Mac ユーザーは、ウィンドウを最大化して切り替える方法が便利です。

キー入力 (参考)
  1. ウィンドウ左上の 緑色の丸 ● を押してウィンドウを最大化する
  2. Visual Studio Code と Chrome の両方とも最大化を行う
  3. 3 本指（または 4 本指）で左右にスワイプする

# Chrome で画面サイズを変更する

Chrome の検証から デバイス切り替えツールを使用して、画面サイズのデバッグができるようにします。

キー入力 (参考)
  1. Windows の場合 Ctrl + Shift + I 、 Mac の場合: Command + Option + I で検証（インスペクター）を表示します。 ページを右クリック → 「検証」でも表示できます。
  2. 検証ウィンドウ内の 左上にある、 「デバイス切り替えアイコン」をクリックします。
  3. 「Responsive」を選択すると、任意のサイズで表示できます。スマートフォンのサイズもいくつか用意されています。
  4. 拡大率を設定すると、大きな画面で見たときの描画結果を、小さな画面でデバッグできます。

Animation10

# リファレンスを表示する

Visual Studio Code から、MDN を開いて、HTML タグ や CSS プロパティの仕様を確認する手順を紹介します。 あくまで便利機能です。全てに適用可能なものではありません。リファレンスが表示されなかったり、内容が難しいと感じた場合は、必要に応じてご自身で検索してください。

キー入力 (参考)
  1. 気になるタグやプロパティにマウスカーソルをホバーします。
  2. 「MDN Reference」をクリックします。
  3. 英語で表示されている場合は日本語に切り替えます。

Animation11

# Chrome でページ内検索をする

リファレンスサイトなどは 1 ページの情報量が多い場合があります。その場合はページ内検索を行います。 検索エンジンほどの柔軟さはありませんが、使いこなすと作業効率の向上を期待できます。

キー入力 (参考) ※ Mac ユーザーは Ctrl → Command 、 Alt → Option に置き換えてお読みください。
  1. <meta /> にマウスカーソルをホバー 補完を表示します。
  2. 「MDN Reference」をクリック ページを表示
  3. Ctrl + F 検索ダイアログを表示
  4. robots「robots」と入力して検索（1 つ目の検索結果にスクロールされます）
  5. Enter 1 つ次の検索結果に移動
    ...
  6. Shift + Enter 1 つ前の検索結果に移動

Animation12

# タブを閉じる

複数のタブを開くことがあります。タブを閉じるボタンは少し小さく、煩わしいと感じる方もいると思います。 ショートカットを使用すると素早くタブを閉じることができます。このショートカットは Visual Studio Code 、 Google Chrome 共に同じキーバインドです。

キー入力 (参考) ※ Mac ユーザーは Ctrl → Command 、 Alt → Option に置き換えてお読みください。
  1. Ctrl + W タブを閉じる

Animation13

# HTML のコメントを書く

学習中は色々メモしたいことがあると思います。 HTML のコメント構文は以下の通りです。

<!-- コメントの内容（これは表示されない） -->
1

複数行に渡って書くこともできます。

<!-- 
コメントの内容（これは表示されない） 
コメントの内容（これは表示されない） 
コメントの内容（これは表示されない） 
コメントの内容（これは表示されない） 
-->
1
2
3
4
5
6

Ctrl + / のショートカットを使用すると、コメント文字を素早く入力できます。

キー入力 (参考) ※ Mac ユーザーは Ctrl → Command 、 Alt → Option に置き換えてお読みください。
  1. コメントを書く。
  2. Ctrl + / 選択文字（行）をコメントにする。

Animation28

# CSS のコメントを書く

CSS のコメント構文は以下の通りです。

/* コメントの内容（これは表示されない） */
1

複数行に渡って書くこともできます。

/* 
コメントの内容（これは表示されない）
コメントの内容（これは表示されない）
コメントの内容（これは表示されない）
コメントの内容（これは表示されない）
*/
1
2
3
4
5
6

Ctrl + / のショートカットを使用すると、コメント文字を素早く入力できます。

キー入力 (参考) ※ Mac ユーザーは Ctrl → Command 、 Alt → Option に置き換えてお読みください。
  1. コメントを書く。
  2. Ctrl + / 選択文字（行）をコメントにする。

Animation29

以上です。このページで紹介したものは、覚えると作業効率が格段に向上すると思います。なるべく使うように心がけて、徐々に慣れていきましょう！

← 共通部品・背景・フッター等を作成する →