![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
Webサイトを作るには何が必要なの?
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
何が必要なのかよくわからないけど紙とペンじゃできないのはわかるよ!
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
紙とペンじゃさすがにできないね💦
では今回はWebサイトを制作するために必要なものを紹介していきます
1.Webサイトを制作する上で必要なもの
1-1.PC
タブレットでもできなくは無い気もしますが画面が大きいに越したことはないのでノートパソコン、またはデスクトップのパソコンを選びましょう。
余裕があればで良いですがサブモニターもあるとさらに捗ります。
1-2.ブラウザ
ブラウザ
Webページを快適に閲覧するためのソフトウェア
![ブラウザがある場合とない場合の比較画像](https://kbyt-programming.com/wp-content/uploads/2021/05/used_browser.jpg)
今やパソコンやスマホで当たり前に見ているWebサイトですが、実はブラウザが無いとただのコードしか表示されません。
世の中には”Internet Explorer”、”Microsoft Edge”、”Safari”などのブラウザがありますがWebデザインやプログラミングをする方は”chrome”にされるのがオススメです。
なぜ”chrome”かと言いますと検証機能や便利な拡張機能が付いているからです。
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
拡張機能はなんとなくわかるけど検証ってなぁに?
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
検証というのは簡単にいうとWebサイトのソースコード(HTMLやCSSなど)が見られる機能なんだ
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
もちろん自分のサイトだけでなく他の人が作ったサイトも見られるんだよ
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
なんか悪いことしてるみたいだね
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
まぁ内容とかを勝手にコピーしたりしなければ大丈夫だよ
では実際に検証画面をみてみようか
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
見たことの無い画面が出てきた!
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
この検証機能がとても便利というかもはやコードを書く上で必須なので余程のこだわりが無い限りは”chrome”にしましょう
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
英語ばっかりで難しそうだけど使えるかなぁ
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
お次は基本的な使い方を説明します
A.調べたい要素が決まっている場合
![検証の仕方step1](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_use_test_1.jpg)
![検証の仕方step2](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_use_test_2.jpg)
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
ロゴの幅や高さなどの情報が得られました
他にも右下のウインドウを見ると余白などの情報も取得できます
B.または下の画像にあるようなやり方でも開く事ができます。
![検証の仕方step3](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_use_test_3.jpg)
![検証の仕方step4](https://kbyt-programming.com/wp-content/uploads/2021/05/how_to_use_test_4.jpg)
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
ショートカットでも開く事ができるので覚えておきましょう
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
良かった…
思ったより簡単だった
このようにブラウザはコーディングにはマストな検証ツールのある”chrome”にしましょう。
またWebサイト製作で便利な拡張機能もたくさんあるので自分好みのカスタマイズして使いこなして行きましょう!
上のリンクからアクセスして「ダウンロード」するだけなのでとても簡単です。
1-3.テキストエディター
続いてはコードを書いていくテキストエディターと呼ばれるものが必要になります。
テキストエディターもたくさん種類があり、この場では比較はしませんが以下のいずれかを使うのが無料ですし人気もあり無難です。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/cb9962b18ce5bdfe4262a735a668bd70.jpg)
人気があると言うことはネットで調べれば使い方もすぐ出てきます!
atom
まずは”atom”です。
ダウンロードはこちら
![](https://kbyt-programming.com/wp-content/uploads/cocoon-resources/blog-card-cache/58d3e9ef9805274b8846afb670f8e890.png)
サイトに飛んでダウンロードするだけなのでとても簡単です。
Visual Studio Code
こちらは通称”VS Code”と呼ばれています。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
最初は”atom”を使っていましたが途中から”VS Code”に乗り換えました
ダウンロードはこちら
こちらもサイトに飛んでダウンロードするだけです。
どちらのテキストエディターにも言えますがプラグインを入れてカスタマイズすることで作業効率がものすごく変わってきます。
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
ちなみに僕は以下のプラグインを使用しています。
- 日本語化 Japanese Language Pack for Visual Studio Code
- スペルチェック Code Spell Checker
- リアルタイムで反映 Live Server
どれも大変便利で素晴らしいプラグインです。中でもコードを書いていくとリアルタイムで画面に反映される”Live Server”にはとても感動しました。
code pen
こちらはテキストエディターではありませんがちょっとしたコードを書いて動作を確認したりできるので大変便利ですのでご紹介します。
またダウンロードの必要もなくインターネット上で見られ保存もできるのでそこもオススメです!
ただし初回に登録する必要があり、有料版と無料版がありますが無料版で十分です。
2.まとめ
- パソコン
- ブラウザ
- テキストエディター
- ブラウザ→検証機能(デベロッパーツール)のある”chrome“がオススメ
- テキストエディター→”atom“か”Visual Studio Code“がオススメ
![こばゆた](https://kbyt-programming.com/wp-content/uploads/2020/06/0eeeee0625c9e917a3e52febe786908c-e1597546854612.jpg)
以上の3点を準備したらいよいよコーディングができるようになります!
意外と簡単であっけなかったのではないでしょうか?
![チャッピー](https://kbyt-programming.com/wp-content/uploads/2020/08/IMG_0694-e1597654197880.png)
とりあえずダウンロードするだけで特殊な設定もなくて安心したよ
![きなこ](https://kbyt-programming.com/wp-content/uploads/2020/08/export-2-e1597584456910.png)
これから自分で書いていくのが楽しみだね!
コメント