カテゴリー: WEBサイト運営 / 各種コード

コードエディタ「Visual Studio Code」(VSCode)と「Cursor」で、これまでタブごとに複数のファイルを開いて編集出来ていたのに、なぜかタブが消え複数のファイルを開けなくなってしまい、1つのファイルしか触れる事が出来なくなってしまった場合の対応方法です。
これまで複数のタブで作業出来ていたのに、何かのタイミングでタブが1つしか使えなくなってしまった時などに使えます。

上の画像にはタブがなく、複数のファイルを開く場合は上メニューの矢印ボタンを押すことで、1ファイルずつ切り替えることは可能ではありますがとても不便です。

消えてしまった原因としては、タブが表示されているスペースを右クリックしてタブ バーから「複数のタブ」「1つのタブ」「非表示」のうち非表示を選んだり、設定メニューを誤操作してしまうなどで起こりうる現象です。

これまで複数表示できていた時と比べて作業効率がかなり落ちてしまうかと思います。

以下の手順で元通り複数のタブが表示できる状態に戻すことができます。
VSCode・Cursor共に同じ手順・方法です。

コマンドパレットからからタブを複数表示させる

Ctrl＋Shift＋P（Macの場合はcommand＋Shift＋P）でコマンドパレットを表示させます。

コマンドパレットは上の検索窓の事です。
コマンドパレットにView: Show Multiple Editor Tabと入力しEnterを押します。

これで元の複数タブが表示される状態になります。

1つのタブだけを表示させる場合は「View: Show Single Editor Tab」、タブを非表示にする場合は「View: Hide Editor Tabs」と入力することで実現できます。

メニューからタブを複数表示させる

上メニューファイルユーザ設定設定に進み、表示されている項目ワークベンチエディターの管理からShow Tabsを探します。

Show Tabsにあるドロップダウンメニューからmultipleを選ぶとタブが複数開けるようになります。

タブを1つだけ表示する「single」に、非表示にする「none」もドロップダウンから選択できます。

Adobe Illustrator(イラレ、イラストレーター)で、くの字型をしたシェイプがいくつか並んだ、何かの申し込みの流れ・手順・フローで見かける形の作り方です。

文字での説明が難しいので下の画像をご覧ください。

「矢印の先がいくつか並んだ図」とか「アロー型の流れ」「文字が書かれたくの字のフロー」などのような言葉が当てはまりそうですが、決まった呼び方がないため検索しようにもなかなか思い通りの作り方の手順が見つかりづらいかもしれません。

同じ形状のに作るにはワープやアーチなどでもできますが、この記事では一番シンプルで簡単な方法で作ります。

難しい作り方をすると、後からいろいろカスタムしてみると思わぬ弊害が出来てしまったりするので、他の操作となるべく干渉しないやり方です。

単体で作る手順

左メニュー長方形ツールで縦長の長方形を描画します。

正方形にしたい場合はshiftボタンを押しながらドラッグです。

上メニューオブジェクト、パスにあるアンカーポイントの追加をクリック。

これで4つの辺の真ん中にアンカーポイントが追加されたので、左メニューのダイレクト選択を選び左右の辺の真ん中をパスを囲むようにマウスでドラッグすると、パスが選択できます。

または直接左右どちらかのパスをクリックして選択、shiftを押しながらもう一方のパスをクリックすると左右両方選択できます。

選択されると、パスが塗りつぶしの■になり、選択されていないパスは白抜きの□になっています。

選択した状態でパスをドラッグすれば「くの字」または「逆くの字」にすることが出来ます。

shiftを押しながらだと正確な位置で変形が可能です。

次の項目では申し込み手順の表でよくみかける、アローが複数並んだ形式で作る方法です。

複数のフローを作る手順

上の項目の単体を複数にするだけなので、一部手順を変えるだけです。

長方形ツールで形を作ったら、選択ツールで作ったものを選択、Altを押しながらドラッグし横にコピーします。

その時AltにプラスしてShiftも押しながらだと真横に配置しやすくなります。

2つ並んだ状態になったらCTRL＋Dで繰り返し、つまり先ほどのコピーを繰り返せるので、お好みの数に増やします（今回は5つ作成）。

左メニューの選択、ドラッグして作った5つをすべて選択します。

上メニューのオブジェクト、パスにあるアンカーポイントの追加をクリックします。

辺の真ん中にパスが追加されたので、ダイレクト選択で、すべてのシェイプの左右の辺の真ん中にあるパスを囲むようにドラッグして、合計10のパスを選択します。

あとは選択されたパスを掴んでドラッグすると、5つまとめて矢印の形にできます。

Shiftを押しながらだと真ん中をキープしながら形作ることが可能。

配置を調整する

シェイプの距離が均等に揃っていなかったり、間隔がバラバラだったり、ずれてしまった、追加で作りたいなどの場合に、位置を整える方法です。

上メニューウィンドウから整列をクリック、すでにチェックが付いている場合はもう画面上に存在しているはずなので「整列」のパネルを探し表示させます。

左メニュー選択で整列したい5つのシェイプをすべて選択。

整列にある水平方向中央に分布と垂直方向中央に整列をクリックするとすべて均等に整います。

「水平方向中央に分布」は、一番左と一番右にあるシェイプを基準にして、内側にあるシェイプの距離を等間隔にするので、ボタンを押す前に外側をどこにするか決めて移動しておくと思い通りの長さに仕上げられます。

コードエディタ「Visual Studio Code」（VSCode）と「Cursor」で、選択した単語と一致するものを1つずつ順に選択するショートカットと、選択しすぎてしまった部分を今度は反対に1つずつ未選択にしてくれるショートカットについて解説します。

もちろん「単語」だけでなく、文字列やフレーズや文章にも使えます。

選択した箇所を消去はもちろん、修正したり追記したりも一括で行えるので、知っておくと便利＆効率アップに繋がりうる機能です。

ページ内すべてを一括選択すると、例えば「the」を選択しようと思ったら「thead」のtheも選択されてしまうなど、想定外の文字まで選択されてしまったり、これらを変換すれば誤変換となってしまいますが、この方法であればそういった事態も防ぐことが可能です。

1つずつ選択する方法

このショートカットで、最初に選択した単語より下にある単語が1つずつ順に選択されていきます（下にない場合は上から選択されます）。

Windows

CTRL＋D

Mac

command＋D

1つずつ選択を取り消す方法

いくつか余計に選択してしまった場合は、1つずつ戻す（未選択にする）ことも可能です。

Windows

CTRL＋U

Mac

command＋U

これで選択してきたものを、下から1文字ずつ選択していなかった状態に戻してくれます。

イラレ（Adobe Illustrator、アドビ イラストレーター）で画像を開いたときに、アートボードの白背景と画像のサイズが合っておらず、グレー背景の場所にはみ出てしったり、逆に小さすぎて白背景の上にちょこっと乗っかってる状態になってしまう場合があります。

そのまま書き出すと白背景にある部分だけが切り取られた状態になってしまい不自然な画像になってしまします。

実際どんな風になるのか見てみましょう。
画像をドラッグしてイラレの上で開くと一部が白背景の上にありますが、グレー背景にはみ出してしまっています。

これをアートボードの枠にぴったりと収めてくれる方法です。
ショートカットはありませんが（設定可）、下の画像のようにメニューから行います。

上メニューにあるオブジェクト、アートボードからオブジェクト全体に合わせるを選択。

これで画像にあわせたサイズにフィットしてくれます。

コードエディタ「Visual Studio Code」(VSCode)または「Cursor」を使っていて、突然メニューやコードの文字やアイコンまでもが大きくなってしまったり、小さくなってしまったりした時に、元のサイズに戻す方法です。

実際どんな症状なのかというと下の画像のようになります。
全体が大きく・小さくなり作業しづらい状態に。

作業中に間違ってキーボードを押してしまったり意図しない誤操作で起こることがあるので下記の方法で解決できます。
デフォルトのサイズに戻す方法、拡大・縮小する方法、2パターンありますのでご覧ください。

なお、下でご紹介しているショートカットキーは、主要ブラウザでも同じ状態になってしまった時に使えます。
よく使うブラウザでの拡大・縮小はCtrl＋マウスホイール（上下）かと思いますが、キーボードからも行えます（VSCode・Cursorではマウスホイールの操作はできません）。

表示をデフォルトに戻す

大きい表示・小さい表示になってしまった、どちらの場合もコードエディタのデフォルトのサイズに戻せます。
VSCode・Cursor共に同じ手順です。

上のメニュー表示、外観に進むと、拡大・縮小・ズームのリセットの3つがあるので、ズームのリセットをクリック。
または、
テンキーがある場合はショートカットも使えます。
Ctrl＋(テンキーの)0

Ctrlとテンキーの数字の「0」を使います。
こちらは普通のキーボードの数字のゼロを押してもだめでした。

拡大・縮小させる

小さくなってしまった場合は拡大で、大きくなってしまった場合は縮小でそれぞれ調整してください。
ショートカットでも、メニューからでも実行できます。

拡大（ズームイン）

大きくする作業なので、現在小さく表示されている場合にこの方法をお試しください。

ショートカット

Windowsの場合
Ctrl＋+

Macの場合
command＋+

Ctrlを押しながら記号のプラスマークのボタンです。
プラスマークはLボタンの右横にあり「+」と「;」が印字され、日本語キーボードだと「れ」も一緒にあります。

メニューから

上のメニュー表示、外観に進み、次の3つ拡大・縮小・ズームのリセットから「拡大」をクリックします。

縮小（ズームアウト）

次は小さくする作業なので、現在は大きく表示されている場合はこちらです。

ショートカット

Windowsの場合
Ctrl＋-

Macの場合
command＋-

Ctrlを押しながら記号のマイナスマークのボタンです。
キーボードの数字0の右横にあり「=」と「-」が印字され、日本語キーボードだと「ほ」も一緒にあります。

メニューから

上のメニュー表示、外観に進み、次の3つ拡大・縮小・ズームのリセットから「縮小」をクリックします。

テキストエディタ「サクラエディタ」で、文字を右端で折り返す方法です。

ショートカットで今開いているファイルを右端で折り返しにする方法と、次回以降もデフォルトで右端折り返しにする設定方法、2つの手順をまとめました。

右端で折り返す

ショートカットで折り返す方法

Ctrl＋Alt＋W

メニューから折り返す方法

上のメニューの設定、折り返し方法から右端で折り返すをクリック。

上記で今のタブを右端折り返しが実現できます。
新しいタブやサクラエディタを開きなおした場合は右端折り返しになっていません。

いつでもデフォルトで折り返しに設定したい場合は下の項目の方法を使います。

デフォルトで右端折り返しの設定方法

上のメニューにある設定からタイプ別設定をクリックで新しいウィンドウが開くので、「レイアウト」欄の「折り返し方法」のドロップダウンメニュー「折り返さない」「指定桁で折り返す」「右端で折り返す」の3つから右端で折り返すを選択してOKボタンをクリック。

これでデフォルトで右端折り返しの状態になりました。

イラストレーター(Adobe Illustrator、イラレ)で多角形ツールの角の数を変更する方法です
角の数（辺の数）をが変わると、三角形を作る事ができるのはもちろん、複数の角があるギザギザな形なども作ることが出来るようになります。

ショートカットのような方法、通常の操作、2つのやり方があります。

以前のバージョンのイラレをお使いの場合は、上メニューウィンドウにある変形の多角形のプロパティから数を変更できます。

ショートカット

左メニューからシェイプのマークを長押しして「多角形ツール」を選びます。

マウスでシェイプを作りますが、この時マウスの左ボタンを離さず押したまま（ドラッグしたまま）、キーボードの矢印ボタン「↑」または「↓」を押すと角の数（辺の数）が変更できます。

「↑」は角の数が増え、「↓」は角の数が減ります。

角の数の増減を終えたら、Shitボタンを押しながら移動や大きさを変えると、シェイプを水平に配置することが出来ます。

キーボードだけで操作するわけではないので「ショートカット」と呼んでいいか微妙なところですが、角の数を素早く変更できるのでそう呼びました。

通常の操作

上記の方法と同じく多角形ツールでシェイプを作り（Shiftボタンを押しながらだと水平に作ることができます）、マウスで左クリックすると「半径」と「辺の数」のメニューが出てきます。
「辺の数」（角の数）を変えたい角の数に変更します。

左メニューの「長方形ツール」「楕円形ツール」「直線ツール」ではこのメニューは出現しないため、「多角形ツール」または「スターツール」のいずれかでシェイプを作ります。

VSCodeやCursorのようなコードエディタで「Emmet」が使えない時の対処方法です。

通常はEmmetの記法で書いてタブを押すとコードに変換されて表示されますが、いくらタブを押しても空白が出来るだけでEmmetが機能してくれない事がありますので、下記の方法をお試しください。

Emmet(エメット)はHTMLやCSSなどのコードを大幅に省略した記法で、それを実際のコードに展開してくれるツールです。
例えば「!」と「タブ」でhtmlのheadからbodyまでのひな型を生成してくれたり、「a:link」とタブで「<a href="http://"></a>」と出力してくれます。

それでは対処方法、2パターンあるのでご覧ください。

HTML/CSSと認識させる（テキスト扱いになっている）

リポジトリやコードファイルなどで開かず、新しいタブ「Untitled」で開いた場合、コードとは認識されず普通のテキスト扱いになっています。

これだとEmmetが使用できないので、HTMLファイルを開くか、「<html></html>」を記述するとHTMLファイル扱いになり使えます。
または上の画像のように、右下に表示されているプレーンテキストをクリックして言語モードの選択からHTMLを検索して選びます。
CSSにしたい場合はCSSを選びます。

Cursorもプレーンテキストが同じ位置にあるので操作は一緒です。

これでコードと認識されるのでEmmetが有効になり使える状態にできます。

Trigger Expansion On Tabを有効にする

最近のバージョンだと必要ないかもしれませんが、変わるかもしれないので記載します。

VSCodeの場合は左下の歯車マークから設定に行き、検索窓にTrigger Expansion On Tabと入力、Emmet:Trigger Expansion On Tabの項目、『有効にすると、入力候補が表示されない場合でもTabキーを押すとEmmet省略記法が展開されます。無効にして場合でも、TABキーを押すと、表示される入力候補を受けられます。』と書かれているところにチェックを入れ、VSCodeを一度閉じて再起動します。

Cursorの場合は左上のファイル、ユーザ設定、設定で検索窓が出てきますので、あとはVSCodeと同じ手順になります。

以前はここにチェックがないとEmmetが展開しませんでしたが、今のバージョンではこの作業なしで使用できるかと思います。

文の最初に米印などの記号を付けて米印などの記号を付けて注釈や注意事項などの文章を作る際、2行目以降の1文字目がその記号と被ってしまい、記号がまったく目立たず普通の文章のようになってしまいます。

記号だけを1文字分左に移動させて、テキストとは違う位置に表示させるCSSについて解説します。

まずはどんな現象なのか、説明だけだと難しいので下の表をご覧ください。

2行目以降を字下げ

字下げなし	2行目以降の字下げあり
※最初のテキストです 次の行はここです、1行目の記号に被らないように字下げするにはCSSを使う必要があります。	※最初のテキストです 次の行はここです、1行目の記号に被らないように字下げするにはCSSを使う必要があります。

「字下げなし」を見ると1つの文章のようになってしまって、記号があってもなくてもいいような見た目になっていますが、「2行目以降の字下げあり」の方は記号が目立ち、注釈として機能しているように見えます。

右側のように1文字分を字下げするには以下のコードで実現できます。
padding-left: 1em;
text-indent: -1em;

まずpadding-left:1em;で文章全体が1文字分、右にズレます。
text-indentは文章の最初の1文字を右に字下げ（インデント）するプロパティなので、それをtext-indent:-1em;このようにマイナスに指定することで左に字下げされ、記号部分の1文字だけが左にズレます。

2文字分2行目以降を字下げ

これを応用して下の表のように、米印に番号付きのものでも対応できます。

字下げなし	2行目以降の字下げあり
※１最初のテキストです 次の行はここです、1行目の記号に被らないように字下げするにはCSSを使う必要があります。	※１最初のテキストです 次の行はここです、1行目の記号に被らないように字下げするにはCSSを使う必要があります。

2文字分字下げするCSSはこちら。
padding-left: 2em;
text-indent: -2em;

3文字分2行目以降を字下げ

今度は【1】や［1]や（1）など3文字分のスペースを必要とする場合です。

字下げなし	2行目以降の字下げあり
※最初のテキストです 次の行はここです、1行目の記号に被らないように字下げするにはCSSを使う必要があります。	【１】最初のテキストです 次の行はここです、1行目の記号に被らないように字下げするにはCSSを使う必要があります。

3文字分の字下げCSSはこちらです。
padding-left: 3em;
text-indent: -3em;

コードエディタ「VSCode」(Visual Studio Code)と「Cursor」で複数行のインデントをまとめて字下げ・上げ（インデントを浅く・深く）する方法です。複数行でなく1行のみインデントを左右にずらしたいときにももちろん使えます。

あわせて一括で自動整形するショートカットもご紹介。
VSCodeもCursorも同じ操作で対応できます。

インデントを増やす（字上げ）

Windowsの場合

対象範囲を選択し
tab
または
ctrl＋]

Macの場合

対象範囲を選択し
tab

選択した状態でタブを押すと、エディタによってはその部分が消えてしまう仕様もありますが、VSCode・Cursorは消えずにインデントを増やせます。
右括弧「]」は「enterキー」の近くにあるかと思います。

インデントを減らす（字下げ）

Windowsの場合

対象範囲を選択し
shift＋tab
または
ctrl＋[

Macの場合

対象範囲を選択し
shift＋tab

インデントを増やす場合と同じく対象の箇所を選択してからキーを押します。
右括弧と同じく左括弧「[」も「enterキー」の近くにあるかと思います。

自動整形する場合

Windowsの場合

shift＋alt＋F

Macの場合

shift＋option＋F

こちらは上の項目のように対象部分のインデントを左右にずらすのではなく、全体のインデントをそれぞれ適切な位置へ調整してくれるショートカットです。