びぼうろくnote

サイト制作などの備忘録

VS Code ダウンロード~設定

・ダウンロード

www.sejuku.net

・日本語化

qiita.com

VSCodeでHTML/CSSファイルを編集しながらリアルタイムでプレビューする方法

qiita.com

VSCodeでテキスト選択(ctrl+shift+〇)のキーバインド登録方法
Ctrl + Shift + P で検索

qiita.com


・Vusual Studio Codeの標準での選択行を複製するショートカットキーをctrl+shift+Dに変更する


// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
{
"key": "ctrl+shift+d",
"command": "editor.action.copyLinesDownAction",
"when": "editorTextFocus"
},
{
"key": "ctrl+shift+up",
"command": "editor.action.moveLinesUpAction",
"when": "editorTextFocus"
},
{
"key": "ctrl+shift+down",
"command": "editor.action.moveLinesDownAction",
"when": "editorTextFocus"
}
]

terakoya.site

 

CSSだけで点線の吹き出しを作る方法

f:id:nonosan2018:20201015111725j:plain

<div class="balloon">
<p>ここにテキストが入ります。</p>
</div>

.balloon {
 position: relative;
 max-width: 400px;
 padding: 20px 8px;
 text-align: center;
 background-color: #fff;
 text-align: center;
 color: #000;
 border: 2px dashed #f00;
 border-radius: 15px;
 margin: 0 auto;
}

.balloon::before {
 content: '';
 position: absolute;
 display: block;
 width: 18px;
 height: 18px;
 left: 0;
 right: 0;
 top: -10px;
 margin: 0 auto;
 border-top: 2px dashed #f00;
 border-right: 2px dashed #f00;
 background-color: #fff;
 transform: rotate(-45deg);
}

 

note.com

#css

CSS で矢印を作る方法

棒付き矢印を作る方法

f:id:nonosan2018:20201015094134j:plain

.stickarrow {
 width: 40px;
 height: 8px;
 border-bottom: 1px solid #000;
 border-right: 1px solid #000;
 transform: skew(45deg);
}

 リンク記事には、>・▶ のコードも書いてある

hirashimatakumi.com

 #css

VS Codeで選択範囲をHTMLタグで囲むショートカットキーを設定する

①ファイル⇒ユーザー設定⇒キーボードショートカット

(Ctrl + K ⇒ Ctrl + S)

②検索バーに emmet wrap と入力

③Emmet: Wrap with Abbreviation を選択⇒キーバインド設定

(私は、Shift + Alt +W にした)

qiita.com

 

ショートカットキーを使うときは、

タグで囲みたい範囲を選択して、Emmet: Wrap with Abbreviationに割り当てたショートカットキーを押すと、上に入力欄が表示されます。

 

VSCode拡張機能 コード整形(Beautify)

Shift + Alt + F

もしくは

右クリック⇒ドキュメントのフォーマット

gimmicklog.com

Beautify
右クリック「ドキュメントのフォーマット」(日本語化している場合)を選択すると、インデントをキレイに整形してくれます。

 

IllustratorでWeb用にスライスするショートカット

illustratorで、


●オブジェクトを元にスライスを行ってくれるショートカット
[alt]+[o] → [s] → [s]

 

●スライスの命名ウィンドウを出すショートカット
[alt]+[o] → [s] → [o]


※編集⇒キーボードショートカット⇒メニューコマンドから、オリジナルキーの設定もできる)

 

www.hanano-ya.jp