【ファイルを作ろう】VSCodeで画像を準備する手順について

目次

開発ツールの確認

まず準備するものとしてブラウザは Chrome 、そしてエディタは VS Code を使っていきます。

インストール方法については↑のリンクをクリックして手順を確認してみてください。

画像素材の確認

商用利用

画像素材は予め用意しておきましょう。

商用利用の場合は著作権などには気をつけながら選んでください。

今は無料で商用利用OKの画像もいっぱいあるのでそこからダウンロードしてもいいと思います。

無料で商用利用できる画像があるサイトはこちらに貼っておきますので参考にしてください。

もちろん自分でもしっかり調べてくださいね。

この辺がおすすめです。

肖像権

また自分で撮影した画像を使う場合もあるでしょう。

その場合注意する点としては肖像権に気をつけるということです。

つまり人が写っている場合はその人に許可を取るかぼかしを入れるなどの処理が必要ということです。

予め注意して写真や画像、動画等を選ぶようにしてください。

ファイルを作ろう

ではVSCodeでファイルを作っていきます。

下に画像つきの手順は書いておきますので参考にしてください。

まずVSCodeを立ち上げて頂いて新しいファイルを作ってファイル名を決めます。今回はTeatree WEBとつけていきましょう。

次にFinderで作ったファイルを探します。右上の検索で探してもいいですし予め指定しておいたファイルを開けて探してもいいでしょう。

あわせて読みたい
【画像解説あり】パソコンの設定でファイルの拡張子を表示させてファイルを扱いやすくする 【ファイルの拡張子を表示させる方法について見ていきます。】 前回まででChromeのダウンロード、VSCodeのインストール、設定、フォント変更までをやりました。 詳しく...

ファイルが見つかったらファイルの中に『img』フォルダを作っていきます。

imgフォルダの準備ができたらその中に準備しておいた画像を移動もしくはコピー&ペーストしていきます。

これでフォルダの準備は完了です。

画像つきの手順はこちら↓

STEP
VSCodeを立ち上げてフォルダを開くを押します。
VScode
STEP
フォルダを開いたら左下にある新規フォルダを開き名前をつけます。
新規フォルダ
STEP
新規フォルダを作ったらFinderで表示します。

Finerのアイコンを押して右上の検索で先程つけたファイル名を検索するか、予め指定しておいたファイルを開けて探してもいいでしょう。

ファインダーについてはこちらの記事を見てみてください。

STEP
ファイルを見つけたらその中に『img』フォルダを作ります。
imgフォルダ

imgフォルダーは『右クリック』→『新規のフォルダを作成』→『imgと名前をつける』で作れます。

STEP
画像をコピー&ペーストもしくは移動でimgフォルダの直下に
imgフォルダ

画像は見やすいように表示方法をカラムという設定に変えました。

やっていることは『img』フォルダを開いてその中に画像を入れただけです。

以上

VScode

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
目次