HTML・CSS・JavaScriptを勉強するためのオススメツール

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をダウンロード」でダウンロードが開始されます。

GoogleChoromeのダウンロード

次に↓のように赤枠の「同意意してインストール」を押します。

次に↓のように赤枠の「実行」を押します。

しばらく待ちます。

↓の画面のようにGoogle Chromeが起動されればインストールの完了です。

テキスト:Atom

ここからはAtomのインストールを行っていこうと思います。

今回はWindowsにGoogle Chromeをインストール手順になります。

Atomの導入手順

まずはダウンロードサイトからメディアをダウンロードします。

赤枠の「Download」でダウンロードします。

Atomのダウンロード

メディアファイル「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日

Amazon

Kindle

楽天ブックス

楽天kobo

7net

honto

e-hon

紀伊國屋書店

  • システム開発、アプリ開発
  • マッチングアプリ開発
  • インフラ構築支援等、なんでもご相談ください。
よかったらシェアしてね!
  • URLをコピーしました!
目次