虎狛星

節約4割と経営3割と投資3割

スポンサードリンク

HTMLやCSSのコーディング環境を整える方法

読者の方々はコーディングをするのだろうか?

HTMLやCSSを使って、自分でコーディングできるようになるといいことがある。例えば、Wordpressのテーマを自作して、有料で配布したり、webサイトのカスタマイズに強くなれるなどだ。

そこで今回は、自分のPCでHTMLとCSSのコードを書き、 Webページ開発をする方法を紹介する。

必要なもの

自分のPCでHTMLとCSSのコードを書き、Webページ開発をするにあたって、必要なものは主に2つある。

1つ目はPCだ。僕は安いものでいいと思う。2つ目はHTMLとCSSに関する基本的な知識。これは実践形式で身につけていく方が良いと思う。本だけ読むより、手を動かして実際にコーディングすることで、理解が深まると僕は思っている。

テキストエディターを導入する

テキストエディターはコードを書くのに適したメモ帳のようなものである。僕がおすすめする無料で使えるテキストエディタがある。それはAtomというテキストエディタである。

Atomエディタについて

僕のおすすめはAtomというテキストエディタだ。AtomはGitHubが開発した、無料で使える優秀なテキストエディタ。AtomはGitHubと連動して手軽に様々な拡張パッケージをインストールすることができる。なによりデザインがお洒落。最近、GitHubがプライベートリポジトリを無料で使えるようにしたのもあって、Atomの方が良いと僕は思う。

Atomの導入方法

Atomは以下のサイトから無料でダウンロードできる。

インストーラのダウンロードが終了しましたら、インストーラを起動してインストールしよう。このような画面が表示されている間にインストールが行われている。

インストールが終了すると、Atomが自動的に起動される仕組みになっている。気長に待とう。


Atomを日本語化させる

Atomはデフォルトでは英語での表示になっている。英語でも読めるという人はそれで良いと思う。しかし、普通の人は英語より日本語の方が親しみがあるため、Atomは日本語化しておいた方が良いと僕は思う。Atomを日本語化するにはパッケージという拡張機能をインストールする必要がある。それでは、早速Atomを日本語化してみよう。

画面左上のメニューから[File]→[Settings]を選択する

そうすると、画面右側に「Settings」タブが表示される。

そこで、表示されたSettingsタブの[+Install]を選択する。

すると、検索対象パッケージの入力欄が表示される。入力欄にjapanese-menuと検索する。そうすると、検索結果に「Japanese-menu」というパッケージが表示される。そこで、パッケージの「Install」ボタンをクリックする。

これで、無事日本語化パッケージをインストールすることができる。僕は日本語の方が作業しやすく快適だ。

作業フォルダを作る

Atomをインストールし終えたら、作業フォルダを作ろう。デスクトップ画面の空いている箇所で左クリックを押して、新規作成ボタンを押すと、作業フォルダを作ることができると思う。

作った作業フォルダをAtomで開こう。作業フォルダは、Atomのメニューから「ファイルを開く」で開くことができる。


ブラウザを用意する

自分で書いたコードがどのように反映されるのかを確認するためには、ブラウザを用いることになる。

僕のおすすめはGoogle Chromeだ。

別にGoogle chromeでなければ使えないというわけではないので安心してほしい。

まとめ

この2つがインストールできたら、コーディング環境は整う。これからはHTMLとCSSの勉強を始めて、コードを書いていこう。プログラミング(特にwebデザイン)を勉強する際に、個人的におすすめする良書があるので、いつか紹介しようと思う。

追記。最近、この本を買った。CSSのトグルメニューの作り方や、グリッドデザインなど、参考になる部分がとても多くと良い本だった。HTMLやCSSでもっとカスタマイズしたい人におすすめ。

HTML5&CSS3ステップアップブック

HTML5&CSS3ステップアップブック

スポンサードリンク