VSCodeでimgタグのwidthとheightを自動入力・更新する

画像サイズを自動入力するまでの流れは下記です。
ショートカットで紹介します。
（windowsの場合は、CommondをCtrlに変えてください）

1つの画像サイズを追加・更新する

①追加・更新したい画像のimgタグにカーソルを移動
②「command + shift + p」
③「emmet: イメージ　サイズの更新」を選択

これだけで、widthとheighが追加されます。

複数の画像サイズを追加・更新する

①「img src」をドラッグ
②「Commond + Shift + L」ですべて選択
③「command + shift + p」
④「emmet: イメージ　サイズの更新」を選択

これで複数の画像のwidthとheightを一瞬で追加・更新することができます。

コーディング関係に便利なツール

・OneClickCSS
HTMLを書いて、「Simple CSS」、「Childrens CSS」、「Child CSS」、「LESS / SCSS」、「SASS」をクリックすることでCSSを自動生成してくれるツールです。

「OneClickCSSはこちら」

・RGBA変換ツール
カラーコードを入力することで、RGBAに変換してくれるツールです。
CSSで透過させるときなど、RGBAの変換がめんどくさいので重宝する。

「RGBA変換ツールはこちら」

・様々なファビコンを一括生成
ファビコンを一括生成することができるツールです。
画像を選択することで、簡単に様々なサイズの生成を生成することができます。

「様々なファビコンを一括生成はこちら」

・pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツール
レスポンシブのコーディングで、pxを%に変換したいときに便利なツールです。
親要素と子要素のサイズを入れることで、比率計算をしてくれます。

「pxから%へ変換、レスポンシブコーディングのwidthの比率を計算できるツールはこちら」

・テキスト比較ツール difff《ﾃﾞｭﾌﾌ》
テキストをコピペすることで、文章の差分を表示してくれるツールです。
あまりにもテキストが多いと思い場合があるので、VS Codeが使えないときだけ使ってます。

「テキスト比較ツール difff《ﾃﾞｭﾌﾌ》はこちら」

・Can I use…
CSSでブラウザの対応状況を確認する際に使用します。
プロパティを入力することで、各ブラウザの対応状況を表示してくれます。

「Can I use…はこちら」

デザイン関係に便利なツール

・OGP画像シミュレータ
OGPを作成した際に、どのように表示されるのか確認できるツールです。
サービスによって表示方法が変わるので、どれでもいい感じに見えるようにデザイン調整に使います。

「OGP画像シミュレータはこちら」

HTMLからCSSを自動生成してくれる「OneClickCSS」

先日「OneClickCSS」というサイトを見つけました。
このサイトに書いたHTMLをコピペすると、一瞬でCSSの枠をさっとを作ってくれます。
HTMLを書いてからCSSを書くのが一般的（？）だと思うので、一個一個IDやclassを書いている人は、今回紹介するサイトを使用してみてください！
めちゃくちゃ捗ります！
文字で説明してもなかなかどういうことやとわからない思うので、早速やっていきましょう！

「OneClickCSS」の使い方

まずはHTMLを用意しましょう！
今回はこんな感じでHTMLを用意しました。

<div id="sample">
<h1>見出し</h1>
<p>サンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキスト</p>
</div>

では早速「OneClickCSS」を使っていくー！
①「HTML source」に今のソースをコピペします。

②作成したいCSSをを選ぶをクリック

/*============================
#sample
============================*/
#sample{
}

「Childrens CSS」の結果

/*============================
#sample
============================*/
div#sample {
}
div#sample h1 {
}
div#sample p {
}

「Child CSS」の結果

/*============================
#sample
============================*/
div#sample {
}
div#sample>h1 {
}
div#sample>p {
}

「LESS/SCSS CSS」の結果

/*============================
#sample
============================*/
div#sample {
	h1 {
	}
	p {
	}
}

「SASS CSS」の結果

/*
 * #sample
 */
div#sample
	h1
	p

こんな感じ！
使い方によって選べるのがいいですね。
ちなみに僕は、「Simple CSS」で書き出して、SCSSに貼り付けて使ってます。
「LESS/SCSS CSS」で作ると階層が深くなるので、使ってない・・・！

webサイトを作るとき非常に捗るので、コーダーはぜひ使ってみてね！

コマンドライン（Command Line）の基礎

では早速コマンドラインの既存的なコマンドを紹介します。

ファイルの作成

・「touch ファイル名」で空のファイルを作成できます。

ファイルの中身を表示

・「cat ファイル名」で指定ファイルの中身を確認できます。
・ファイル名入力途中で、Tabを押すとファイル名を補完してくれます。

新規フォルダを作成

・「mkdir ディレクトリ名」で新規フォルダを作成できます。

ディレクトリ移動

・「cd ディレクトリ名」で指定のディレクトリに移動します。
・cd ..：１つ上のディレクトリに移動します。
・cdのみ：ホームディレクトリに移動します。

作業ディレクトリの確認

・現在のディレクトの確認できます。

ディレクトリの中身を確認

・1つ子の階層だけを表示できます。

ファイルを移動

・「mv ファイル名 ディレクトリ名」で指定したディレクトリにファイルを移動します。
・「mv ディレクトリ名 移動先のディレクトリ名」で、そのディレクトリ以下のファイルやディレクトリも一緒に移動します。
・「mv ファイル名 新しいファイル名」でファイル名を変更します。

コピーする

・「cp コピーするファイル名 新しいファイル名」でファイルをコピーできます。
・「cp -r コピーするディレクトリ名 新しいディレクトリ名」でディレクトリをコピーできます。

削除

・「rm ファイル名」とすることで削除します。
・「rm -r ディレクトリ」でディレクトリを削除します。

+豆知識

過去に実行したコマンドを上矢印キー「↑」で入力できます。

MacでSourceTreeとGitHubをSSHで設定する方法

今回の設定はMacで行っています。

開発環境

・iMac（M1,2021）
・OS：MacOS Big Sur

SourceTreeとGitHubをSSHで設定する

まずは、ターミナルを起動して、SSHキーを作成します。

% ssh-keygen

Enterを押すことで、

Generating public/private rsa key pair.
Enter file in which to save the key (/Users/ozkknnt/.ssh/id_rsa): 
Created directory '/Users/ozkknnt/.ssh'.

このように表示されます。

続いて、パスフレーズを入力。

Enter passphrase (empty for no passphrase):{パスフレーズ}
Enter same passphrase again: {パスフレーズ}

「id_rsa」という名前のキーが生成されます。

Your identification has been saved in /Users/ozkknnt/.ssh/id_rsa.
Your public key has been saved in /Users/ozkknnt/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:xxxxxxxxxxxxxxxxxxxxxxxxxx ozkknnt@ozkknnt-macbook-air.local
The key's randomart image is:
+---[RSA 2048]----+
・
・
・
+----[SHA256]-----+

「ssh-add」で生成した鍵を登録します。

% ssh-add ~/.ssh/id_rsa
Enter passphrase for /Users/ozkknnt/.ssh/id_rsa: {上で登録したパスフレーズ}
Identity added: /Users/ozkknnt/.ssh/id_rsa (ozkknnt@ozkknnt-macbook-air.local)

鍵の内容をコピーします。

% pbcopy < ~/.ssh/id_rsa.pub

ここからGitHubを開きます。
「setting」→「SSH and GPG keys」でキーを登録します。（Nameは何でもいいです）

確認を行います。

% ssh -T git@github.com
Hi ozkknnt! You've successfully authenticated, but GitHub does not provide shell access.

このように表示されれば設定完了です。

ダミー画像を簡単に作れるツールを紹介！

では、早速「Placehold.jp」を紹介するよ！
まずサイトはこちら

Placehold.jp

ここにアクセスしてサイズを指定するだけで簡単に画像が作成できます。

作成の手順

・「http://placehold.jp/{幅}x{高さ}.png」が基本の形。
・「http://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150×100.png」とすることで、文字サイズや背景色、文字色を簡単に変更できます。
・「http://placehold.jp/250×50.png?text={表示したい文字列}」でテキストの内容を変更できます。

＜サンプル＞

<img src="//placehold.jp/24/cc9999/993333/150x100.png">

こんな感じ！
簡単に画像を作成できますね。
サイトにアクセスしなくても上のリンクを覚えておけば簡単に作成できるので、画像の手配ができていないときは、webサイト制作で採用して行きたいですね！

VS Codeを使っている現役コーダーが選ぶVS Codeのオススメ拡張機能を紹介します。

Insert
Tag

「Shift　＋　Enter」でbrタグを入力できます。
Dwだと標準でできるけど、VS Codeだとデフォルトでできないのでこれはありがたい！

Auto Rename Tag

タグを変更する際に開始タグを編集するととじタグも自動で編集してくれる拡張機能。

CSSTree validator

CSSの構文チェックを行ってくれる拡張機能。

HTML Preview

HTMLをリアルタイムプレビューしてくれます。
Dwであるやつです！

HTMLHint

HTMLのデバッ具を行う拡張機能。

IntelliSense for CSS class names in HTML

入力候補の表示やかっこの自動挿入をしてくれる拡張機能。

Japanese Language Pack for Visual Studio Code

vscodeの日本語化するための拡張機能。

Live Sass Compiler

Sassをコンパイルするための拡張機能。
簡単にSassをコンパイルできる。

Live Server

VS Codeに簡易ローカルサーバを立てることができる拡張機能。

Path Autocomplete

ファイルパスを入力する際に候補となるファイル名が一覧で表示する拡張機能。

Prettier – Code formatter

HTMLやJSなどルールに従って整形することができる。

vscode-icons

アイコンがついて見やすくなる。

他にオススメ拡張機能がぜひ教えて下さい！