副収入を得るため、ウェブデザイナー関連の勉強を始めました。
まずドットインストールで勉強していくので、学んだことをシェアしていこうと思います。
今回は「学習環境を整えよう【Windows版】(全5回)」
https://dotinstall.com/lessons/basic_pcsetup_win_v2
01.Chromeブラウザの導入
・下のサイトにアクセス
https://www.google.co.jp/intl/ja/chrome/
・「Chromeをダウンロード」→「同意してインストール」
・「このアプリがデバイスに変更を加えることを許可しますか?」→「はい」を選択
・完了
02.VS Codeエディタの導入
・VSCodeの公式サイトにアクセス
https://code.visualstudio.com/
・「Dounload for Windows」を選択
・ダウンロードされた「VStudioCodeUserSetup.exe」をクリック
・そのまま進める
・「デスクトップ上にアイコンを作成する(D)」にチェック
・「インストール」を選択
・インストールが終わると「完了」
・VSCodeが起動
・次回以降Welcome画面を開きたくない場合、チェックを外す
・右下に出ているお知らせは、閉じる(データ収集に関するお知らせ)
03.VS Codeエディタの設定
・設定画面を開く
File>Preferences>Settings
ショートカット:Ctrl + .
・よく使う設定はCommonly Usedにまとまっている
・「Auto Save」を「afterDelay」に設定(ファイル編集後に自動で保存)
・「TabSize」を「2」に設定(デフォルトの「4」だと横に広がりすぎる)
・「WordWrap」を「on」に設定(長い行を折り返して表示)
04.プログラミング用フォントの導入
・プログラミング用フォントを使うことで全角空白が見やすくなりミスが減る。
(全角空白はバグの原因になりやすい)
・RictyDiminishedの配布サイトにアクセス
https://github.com/edihbrandon/RictyDiminished
・「RictyDiminished-Regular.ttf」をクリック(レギュラー版)
・「Download」ボタンを選択
・ダウンロードされた「Ricty Diminished Regular(TrueType)」を選択
・「インストール」を選択
・VSCodeの設定に戻る
・「Font Family」に「Ricty Diminished」と入力
05.ファイルの拡張子表示
・ファイルを見分けやすくする
・エクスプローラーの起動
ウィンドウズの検索窓から「エクスプローラー」と入力
ショートカット:Windowsマーク+E
・「表示」タブを選択し、「ファイル名拡張子」チェックボックスをチェック
今回は以上です。
RictyDiminishedなど、知らないことも多く勉強になりました。
全角空白は昔とても苦しめられたのですが、これを使うと本当に便利。