【初心者向け】Webサイトを作成するために必要なもの3点

web-design_ic
きなこ
きなこ

Webサイトを作るには何が必要なの?

チャッピー
チャッピー

何が必要なのかよくわからないけど紙とペンじゃできないのはわかるよ!

こばゆた
こばゆた

紙とペンじゃさすがにできないね💦

では今回はWebサイトを制作するために必要なものを紹介していきます

スポンサーリンク

1.Webサイトを制作する上で必要なもの

1-1.PC

タブレットでもできなくは無い気もしますが画面が大きいに越したことはないのでノートパソコン、またはデスクトップのパソコンを選びましょう。

余裕があればで良いですがサブモニターもあるとさらに捗ります。

1-2.ブラウザ

用語

ブラウザ

Webページを快適に閲覧するためのソフトウェア

ブラウザがある場合とない場合の比較画像

今やパソコンやスマホで当たり前に見ているWebサイトですが、実はブラウザが無いとただのコードしか表示されません。

世の中には”Internet Explorer”、”Microsoft Edge”、”Safari”などのブラウザがありますがWebデザインやプログラミングをする方は”chrome”にされるのがオススメです。

なぜ”chrome”かと言いますと検証機能や便利な拡張機能が付いているからです。

きなこ
きなこ

拡張機能はなんとなくわかるけど検証ってなぁに?

こばゆた
こばゆた

検証というのは簡単にいうとWebサイトのソースコード(HTMLやCSSなど)が見られる機能なんだ

こばゆた
こばゆた

もちろん自分のサイトだけでなく他の人が作ったサイトも見られるんだよ

チャッピー
チャッピー

なんか悪いことしてるみたいだね

こばゆた
こばゆた

まぁ内容とかを勝手にコピーしたりしなければ大丈夫だよ

では実際に検証画面をみてみようか

きなこ
きなこ

見たことの無い画面が出てきた!

こばゆた
こばゆた

この検証機能がとても便利というかもはやコードを書く上で必須なので余程のこだわりが無い限りは”chrome”にしましょう

チャッピー
チャッピー

英語ばっかりで難しそうだけど使えるかなぁ

こばゆた
こばゆた

お次は基本的な使い方を説明します

検証機能の使い方

A.調べたい要素が決まっている場合

検証の仕方step1
検証の仕方step2
こばゆた
こばゆた

ロゴの幅や高さなどの情報が得られました

他にも右下のウインドウを見ると余白などの情報も取得できます

B.または下の画像にあるようなやり方でも開く事ができます。

検証の仕方step3
検証の仕方step4
こばゆた
こばゆた

ショートカットでも開く事ができるので覚えておきましょう

チャッピー
チャッピー

良かった…

思ったより簡単だった

このようにブラウザはコーディングにはマストな検証ツールのある”chrome”にしましょう。

またWebサイト製作で便利な拡張機能もたくさんあるので自分好みのカスタマイズして使いこなして行きましょう!

Google Chrome - Google の高速で安全なブラウザをダウンロード
新しい Google Chrome で毎日をもっと快適に。Google の最先端技術を搭載し、さらにシンプル、安全、高速になった Chrome をダウンロードしてご活用ください。

上のリンクからアクセスして「ダウンロード」するだけなのでとても簡単です。

1-3.テキストエディター

続いてはコードを書いていくテキストエディターと呼ばれるものが必要になります。

テキストエディターもたくさん種類があり、この場では比較はしませんが以下のいずれかを使うのが無料ですし人気もあり無難です。

こばゆた
こばゆた

人気があると言うことはネットで調べれば使い方もすぐ出てきます

atom

まずは”atom”です。

ダウンロードはこちら

A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We c...

サイトに飛んでダウンロードするだけなのでとても簡単です。

Visual Studio Code

こちらは通称”VS Code”と呼ばれています。

こばゆた
こばゆた

最初は”atom”を使っていましたが途中から”VS Code”に乗り換えました

ダウンロードはこちら

Visual Studio Code – コード エディター | Microsoft Azure
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

こちらもサイトに飛んでダウンロードするだけです。

どちらのテキストエディターにも言えますがプラグインを入れてカスタマイズすることで作業効率がものすごく変わってきます。

こばゆた
こばゆた

ちなみに僕は以下のプラグインを使用しています。

  • 日本語化 Japanese Language Pack for Visual Studio Code
  • スペルチェック Code Spell Checker
  • リアルタイムで反映 Live Server

どれも大変便利で素晴らしいプラグインです。中でもコードを書いていくとリアルタイムで画面に反映される”Live Server”にはとても感動しました。

code pen

こちらはテキストエディターではありませんがちょっとしたコードを書いて動作を確認したりできるので大変便利ですのでご紹介します。

またダウンロードの必要もなくインターネット上で見られ保存もできるのでそこもオススメです!

ただし初回に登録する必要があり、有料版と無料版がありますが無料版で十分です。

https://codepen.io/
スポンサーリンク

2.まとめ

Webサイト制作で必要なものまとめ
  1. パソコン
  2. ブラウザ
  3. テキストエディター
  • ブラウザ→検証機能(デベロッパーツール)のある”chromeがオススメ
  • テキストエディター→”atom“か”Visual Studio Codeがオススメ
こばゆた
こばゆた

以上の3点を準備したらいよいよコーディングができるようになります!

意外と簡単であっけなかったのではないでしょうか?

チャッピー
チャッピー

とりあえずダウンロードするだけで特殊な設定もなくて安心したよ

きなこ
きなこ

これから自分で書いていくのが楽しみだね!

コメント

トップへ戻る