初心者がweb制作をはじめる環境を整える方法。
この記事は、この様なweb制作をはじめる方に向けて書いています。
phpを動かしたりするには、別途、環境構築が必要になってくるのですが、HTML、CSS、javaScriptなどを使ってwebサイトを作る勉強がしたい！という方は、この記事の通りに作業すればＯＫだと思います。
準備するもの。
- chromeブラウザのインストール。
- Visual Studio Code(テキストエディタ)のインストール。
- それらの設定。
全部で７本の動画からなる再生リストです！
では、1つずつ具体的な手段について書いています！
chromeブラウザのインストール方法とは
HTMLファイル、CSSファイルを編集しながら、webブラウザでどう表示されているか確認しながらwebサイトを作っていくのが一般的です。なのでwebブラウザをPCにインストールしましょう！
webブラウザがたくさんある中で、なぜchromeブラウザを使用するかというと、
chromeブラウザを使用する理由
- 使っているユーザー数が多い
- デベロッパーツールの充実
- Google先生が提供してるから良さそう。
などの理由からです。
特に「デベロッパーツール」はとても便利なので、備わってるブラウザを選びましょう！
また、ユーザーも多いブラウザなので、chromeブラウザで制作を進めて問題ないと思います。
ですが他のブラウザでも最終的にテストするのが一般的です。微妙に装飾がずれる可能性があるので確認できたら最高ですね。
chromeブラウザの具体的なインストール方法
まず標準でPCにダウンロードされているブラウザを開き、「chrome」と検索します。
この様に、一番上に公式サイトが表示されると思うので、そちらをクリックして下さい。
この様な公式サイトに飛ぶと思うので、画面中央にある「chromeをダウンロード」のボタンをクリックします。
ブラウザの種類やバージョンによって、ダウンロードする時の画面が若干違うと思いますが、「ダウンロード」のボタンを押していけば基本的に大丈夫だと思います。
そしてダウンロードしたファイルを開き、利用規約に同意しますか？等が聞かれるので、OKと答えるとインストールが完了します。
プログラミング用のテキストエディタを使う理由
Visual Studio Code(テキストエディタ)は「プログラミング用のテキストエディタ」です。
windowsやMacに標準で備わっている「メモ帳」にコードを書くことも可能ですが、プログラミング用のテキストエディタを使用することをおすすめします。
プログラミング用のテキストエディタを使用する理由。
- エメットがある。
- 意味ごとに色分けされる。
- 行に番号がついている。
- さらにカスタマイズして使いやすくできる。
上記の様な理由があります。
また、Visual Studio Codeは略して「vs code」と呼ばれることが多いです。
エメットがある。
vs codeには、エメットと呼ばれる便利な機能があります。プログラミングでよく使われるコードを予測して補完してくれます。
上手く利用すると、コーディングスピードが爆上がりするのと、ミスが減るので、おすすめです。
エメットが便利な理由
- コーディングスピードが上がる。
- 入力ミスが減る。
この様に、「！」を入力すると、予測候補でてきているのが見えると思います。
それを使うと、上の画像の様に、HTMLで使う雛形が出てきます。
毎回すべて打つより、圧倒的に速いですね。
入力ミスも大幅に減ります。
意味ごとに色分けされる。
通常のメモ帳では、単調な白黒ですが、プログラミング用のテキストエディタを使うと、意味ごとに色分けされているため、構造の把握がしやすいです。
上の画像の様に、メモ帳だと白黒で表示されているため、コードを理解しづらいです。
ですが、この様にプログラミング用のテキストエディタだと、意味ごとに色分けされているので、一瞬でイメージできます。
また、縦の線が入っていたりして、分かりやすいです。
行に番号がついている。
メモ帳だと、何行目なのかが数えないとわかりません。
ですが、プログラミング用のテキストエディタだと行の番号が書いてあるので、とてもみやすいです。
この様に、何行目なのか一目瞭然です。
なぜ何行目か分かると便利かと言うと、
例えば、この様にデベロッパーツールにて、cssが何行目に書いてあるかが確認できます。
こんな感じに、「どのファイルの何行目でエラーがでてるのか」などが見れるので、何行目か分かりやすいのはとても便利です。
さらにカスタマイズして使いやすくできる。
プログラミング用のテキストエディタだと、いろいろなカスタマイズができます。
意味ごとに分かれている色を変えたり、ミニマップと呼ばれる、ファイルの中で今どの辺を読んでいるか視覚的に把握できるツールがついていたり、入力ミスを探してくれたりします。
なので、自分のスタイルでコーディングすることができます。これも上手く使えば、効率化に繋がり、快適にコードを書けます！
Visual Studio Code(テキストエディタ)のインストール方法とは
先ほどインストールした「chromeブラウザ」で「vs code」と検索します。
するとこの様に、１番上にマイクロソフト社の「Visual Studio Code」がインストールできるサイトが表示されるので、そこをクリックして下さい。
すると、「今すぐダウンロード」のボタンがあるので、クリックして下さい。
そしてこの画像の通り、windowsをお使いの方は、矢印の場所をクリックして下さい。Macをお使いの方は、右側にありますね。
これでインストーラーのダウンロードができたので、後はインストーラーを開き、指示に従いながらインストールして下さい！
Visual Studio Codeの設定。
では、vs code の設定に入ります。
細かいカスタマイズ等は、各個人でお好みに設定するのがいいと思うのですが、ここでご紹介する「基本的な設定」は誰でもしておいた方が良いと思います。
では、さっそく書いていきます！
Files: Auto SaveをafterDelayに設定。
Files: Auto SaaveをafterDelayに設定することをおすすめします。
これによって、ファイルを編集した時に、いちいち保存ボタンを押さなくて済みます。
せっかく書いたコードが消えてしまう致命的なミスを防げます。
この様に、右上のメニューバーから「ファイル(F)」を選択して、
次に「ユーザー設定」を選択して、
次に「設定」を選択します。
するとこの様な画面になります。
「Files: Auto Save」が初期設定では「off」となっていますが、これを「afterDelay」に変更します。
これでファイルを編集したら自動的にその都度、保存されるようになります。
Editor: Word Wrapをonに設定。
これはさっきのほど重要ではないのですが、設定しておくと便利なので一応書いておきます。
長い行を折り返しで表示してくれます。これにより、横方向のスクロールが必要なくなります。
この様に、「Editor: Word Wrap」を「on」にします。初期設定では「off」となっています。
プログラミング用のフォントRicty Diminishedを使う？？
これは一般的にプログラミングに使用されるフォントですが、僕は使っていません。
なぜなら、「フォントの形がいまいち好きじゃない」からです。
ですが、使うことのメリットもあるのでご紹介します。
<a href="https://google.com">googleへ</a>これはgoogleのサイトへリンクを表すHTMLのコードです。
２つの画像の違いが分かりますでしょうか？？
いまいち分からないですよね。
ですが結果は、
この様に、片方はテキストが青くなり、リンクとして機能しているのが分かります。
ですが、もう片方はリンクとして正しく機能していません。
aとhrefの間に半角スペースはOKで、全角スペースがNGです。
プログラミングに使うのは全て半角英数字です。なので全角が入り込むと上手く動きません。
ですが今回ご紹介する「Ricty Diminished」というプログラミング用のフォントを使うと、それが区別できるようになります。
プログラミング用のフォントの「Ricty Diminished」のダウンロード方法をご紹介します。
上の画像のように「Ricty Diminished」と検索して、１番上にあるサイトをクリックします。
下線が引いてある、レギュラーをクリックします。
ダウンロードをクリックします。
これでダウンロードができたので、それを開きます。
インストールボタンをクリックします。
では次に、しっかりインストールできているか確認します。
「フォント設定」で検索し、フォント設定をクリックします。
「使用可能なフォント」に「Ricty Diminished」があることが確認できればOKインストール完了です。
ここで念のため、しっかり反映させるため、PCを再起動させましょう。
そして、先ほどのvs codeの設定画面へいき、
「Editor: Font Family」に「Ricty Diminished」を指定します。1文字でも打ち間違うと反映されません。
Ricty Diminished
コピペしましょう！
するとこの様に、全角のスペースが四角でかこまれて表示されるので、思わぬエラーを減らせますし、すぐに見つけられます。
慣れるまでは、Ricty Diminishedを使うといいかもしれませんね！
まとめ
長くなりましたが、画像を使って手順を細かく説明したので、分かりやすかったのでは？？と思います。
これでプログラミングする土台が整ったと思うので、あとはプログラミング楽しんで下さい！
ではまた～。