Webページ作成に必須のHTML・CSS・JavaScriptのコーディングですが、
初心者は何を準備すればコーディングを始めることができるかわからないと思います。
今回に記事では初心者でも簡単にWebページ開発ができるオススメツールと導入手順を紹介したいと
思います。
Webページ作成するために必要なものは2つ
Webページ作成に必要なものは2つで
- Webブラウザ
- エディタ
です。 Webブラウザのオススメは「Google Chrome」です。
Google ChromeにはWeb開発に必要な機能がほぼすべて実装されています。
また必要に応じてアドオン（拡張機能）を追加することができたり、利用者数も世界No.1でありナレッジ数が多かったりと副次的な テキストエディタのオススメはと「Atom」になります。
Atomはショートカットキーやオートコンプリートなど機能が大変多く提供されております。
またテキストエディタのテーマもオシャレに変更できるのでモチベーションも上げつつ作業することが出来ます。
Webブラウザ：Google Chrome
今回はWindowsにGoogle Chromeをインストール手順になります。
Google Chromeの導入手順
まずはGoogle Chromeを下のサイトからダウンロードします。
赤枠の「Chromeをダウンロード」でダウンロードが開始されます。
次に↓のように赤枠の「同意意してインストール」を押します。
次に↓のように赤枠の「実行」を押します。
しばらく待ちます。
↓の画面のようにGoogle Chromeが起動されればインストールの完了です。
テキスト：Atom
ここからはAtomのインストールを行っていこうと思います。
今回はWindowsにGoogle Chromeをインストール手順になります。
Atomの導入手順
まずはダウンロードサイトからメディアをダウンロードします。
赤枠の「Download」でダウンロードします。
メディアファイル「AtomSetup-x64.exe」をインストールします。
下の画面が出力されます。ダウンロード中ですのでしばらく待ちます。
↓の画面が出力されればインストール完了です。
Atomを日本語表示に設定
Atomは海外のソフトウェアでありデフォルトでは英語表示です。
Atomのパッケージという拡張機能をインストールすれば日本語化できます。
「File」⇒「Setting」⇒「Install」と進んでいきます。
↓の赤枠で「japanese-menu」と入力しましょう。その後赤枠の「Install」を選択します。
Atomを再起動させれば日本語化完了です。
Web開発に必要なオートコンプリート機能をインストール
日本語化と同じ要領でオートコンプリート機能を有効化する拡張子をいれていきます。
オートコンプリートとは、文字列の最初の文字を入力するだけで自動的に合致する候補を列挙してくれる機能のことです。
簡単に説明しますとオートコンプリートとは予測変換のことを指します。
それでは、入れておきたいオートコンプリートを紹介します。それは↓の2つになります。
- autocomplete-plus
- autocomplete-paths
「autocomplete-plus」はAtomに標準でインストールされているプラグインで、
多くの言語に対応しているオートコンプリートになります。
もちろん、HTML・CSS・JavaScriptにも対応しています。
「autocomplete-paths」はAtomで開いているプロジェクトファイルの相対パスを入力補完してくれます。
HTMLやCSSは参照を多用する言語のため必須のプラグラインです。
以上でHTML・CSS・JavaScriptを勉強するためのオススメツールの紹介と導入手順になります。
Google ChromeとAtomさえあれば誰でも簡単にWebページ開発が出来るので是非トライしてみてください。
スラスラわかるHTML＆CSSのきほん 第2版posted with ヨメレバ
狩野 祐東 SBクリエイティブ 2018年04月16日
