コーダーを始めよう!

まずは開発環境を整えましょう!

開発には『Google Chrome』ブラウザを使います。
もしChromeを入れてない方は↓からインストールしてください。
Google Chromeインストール

「なんでわざわざChromeを使うの?」と思った方もいると思います。なぜChromeを開発で使うのかというと、「コーディング」という作業にはChromeの検証機能が必要不可欠だからです。

まずはじめにHTML/CSSという言語を学んでいく人が大半だと思いますが、HTML/CSSのライティング作業(これをコーディングと呼びます)に絞っても、検証画面からコードを確認したり、スマホ時の見え方を確認したりと様々な場面で使います。

コーディングするときは必ずChromeの検証を開いて確認しながら進めるべし!と覚えておいてください。

プログラマーに最も大切な能力の一つが「ググり力 = 自己解決力」です。自己解決力を磨いていきましょう。

またこれから先の開発ではChromeを使い倒すので、PCの規定ブラウザもChromeに変更しておいた方が便利です。

  • 「規定ブラウザ 変更 mac」
  • 「規定ブラウザ 変更 windows」

などで調べて、デフォルトで開くブラウザをChromeに変更しておきましょう!

エディタを用意しよう

まず、コーディング作業を行うために必須の「エディタ」を用意しましょう!

Atom、Sublimeなどエディタにも種類がありますが、おすすめはMicrosoft社が開発したVisual Studio Code(VS Code)です。

機能性・軽さ・拡張性、どれをとっても圧倒的です。

VS Codeは↓からインストールしてください。
VS Codeインストール

VS Codeを日本語化する方法

インストール直後のVS Codeは英語設定になっているので、ひとまず日本語化しておきましょう!(英語が得意な方はそのままでも大丈夫です)

マーケットプレイスを選択後、「Japanese」くらいまで打てば候補の一番上にJapanese Language Packが表示されるはずです。

こちらを選択→インストールして、VS Codeを再起動してください。

再起動後、メニューバーが日本語表示になっていれば成功です!

初めてのコードを表示させてみましょう!

ウェブサイトが表示される仕組みを知ろう

無事に初めてのコードを表示できましたね!これから本格的にHTML/CSSについて勉強していくワケですが、現状は「なんか画面に文字が出た!」って状態だと思います。

 

  • そもそもWebサイトとは何か
  • Webページが表示されるまでの流れ
  • Webサイト制作に必要な道具

など、基本的な事柄を初心者向けに解説した記事があるので、↓を読んでみてください。

勉強になる記事

そもそもWebサイトって何?サイトが表示される仕組みを解説 – 図解で分かる!Webにまつわる基礎講座 vol.1

<a href=”https://px.a8.net/svt/ejp?a8mat=3TCRX9+FA4JQQ+1WP2+60WN5″ rel=”nofollow”>
<img border=”0″ width=”125″ height=”125″ alt=”” src=”https://www25.a8.net/svt/bgt?aid=230703453924&wid=001&eno=01&mid=s00000008903001012000&mc=1″></a>
<img border=”0″ width=”1″ height=”1″ src=”https://www14.a8.net/0.gif?a8mat=3TCRX9+FA4JQQ+1WP2+60WN5″ alt=””>

コメント

タイトルとURLをコピーしました