まずは開発環境を整えましょう!
開発には『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=””>
コメント