HTMLを学習する際の環境を整える

HTMLを学習する際には環境を整えておきます。Windows対応で見ていきます。
ドットインストールのおすすめは。

ブラウザはグーグルクローム。

グーグルクロームを使うのはディべロッパーツールの機能は無料でついているから。
表示されているページのソースをすぐに開くことができますのでとても便利です。

グーグルクロームのインストールは以下から。
Google Chromeのダウンロードページ

拡張子を表示させるには

プログラムの学習をする際パソコンで拡張子が見えないと困ります。
もし拡張子が表示されていない場合。

エクスプローラーを立ち上げ。

一番上のファイルのr￥所にある表示をクリックします。
すると以下のようなドロップダウンリストが出てきますので。
ファイル名拡張子というところにチェックを入れます。

ATOMエディタ とは

エディタはATOMを使っているのですが。
ATOMは無料なのにエディタとしての基本的な機能が充実していて高機能。

それに加えて「パッケージ」と呼ばれる拡張機能を随時追加できます。
それによってユーザーが使いやすい環境を作り上げることができるのが魅力です。

ATOMは、もともとAtomはGitHubの創業者Chris Wanstrath氏が
「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」
という思いから始まったエディタです。
オープンソースという仕組みを取り入れていますから。
米国GitHub Inc.の社員を中心に、世界中の優秀なエンジニアがATOMの開発に参加して次々に改良を加えています。
今後もさらに良くなっていくことが期待できるエディターといえます。

ATOMのダウンロードサイト

ATOMの設定について

HTMLモードに変える

ATOMを開き。
一番下右にあるPlain Textをクリックし。

出てきた画面の検索窓にHTMLと入れてリターンを押すと

以下のような表示になります。

これでHTMLの設定ができました。

CRFLをFL設定に変える。

Atomで新規作成する場合Windows環境だと初期設定では改行コードがCRLFになります。
CRLFはCR＋LFのことで。
CR（キャリッジリターン）は「先頭にカーソルを戻して！」という指示を出す制御文字。
LF（ラインフィード）は「次の行に移りなさい」という指示を出す制御文字。

これを最初から改行コードをLFに変えるにはどうしたらよいのか。

まずは［Ctrl］＋［,］（カンマ）キーでAtomの設定画面を呼び出します。
設定画面の「Packages」タブを開きま、検索窓に「line-ending-selector」と入れて検索します。

パッケージ一覧の「line-ending-selector」の欄にある［Settings］ボタンを押すと、パッケージの設定画面が出ます。

「Default line ending」という設定項目があり、設定できる値は
OS Default
LF
CRLF

のうちから選びます。
設定値を「LF」に変更すれば、ファイル新規作成時の改行コードがデフォルトでLFになります。

表記を日本語に変える

初期状態では英語表記になっていますので。
必要であれば英語を日本語に変えておきます。
英語のままで慣れたほうが良いという方もいらっしゃいますが。
不慣れなうちは日本語のほうが何かと助かります。

日本語変換にはまず。

メニューバー[File]をクリック。[Settings]を選択すると、Settingの画面が表示されます。

installをクリックすると、Install Packages画面が表示されます。

検索窓に「japanese-menu」と入力しすると
「japanese-menu メニューバーとコンテキストメニュー、設定画面を日本語化します」とのバーが一番上に出てきます。

バーの中にあるインストールボタンを押します。

これでほぼ日本語に変換されますが。
更に日本語化を進める方法もあります。

ただ最初はこれで十分かと思います。

フォントの導入　Ricky Diminished

Ricky Diminishedは記号などの判別がしやすいフォントで。
プログラミングをされている方体の多くが採用をしています。

まずRicky Diminishedで検索をし。
その中でもregularなどを選び。

ダウンロードボタンを押してダウンロードをします。
それをクリックすると以下のような画面が表れます。

この画面上にあるインストールボタンをクリック。
ATO Mを再起動することによってこのフォントが反映されます。

再起動したATOMを編集していきます。

エディタ→セッティング→エディタの順に開いていきます。
そしてフォントファミリーの枠の中にRicky Diminishedと書き入れます。

エディタ編集画面の見た目を変更

同じくエディタ→セッティング→テーマ
と入れるとエディタ編集画面の見た目を変更することができます。
明るい色にしたい場合など便利です。

ただこれも使い慣れていくうちに好みが出てくると思いますので。
随時変更をしていくと良いと思います。

まとめ

これで一応の準備ができました。

とはっても上記は最低限の基本です。
ATOMは他にもプラグインを入れることで様々活用ができます。

あとは作業を進めながら機能を拡張していきたいものです。

それにしてもATOMは難しすぎるという方もいらっしゃるんではないかと思います。
プログラミング学習はそこそこにしておきたいというのであれば
TeraPadがおすすめです。
非常にシンプルで使い勝手が良いです。
とはいえまともに使いこなそうと思えば非常に高機能ですので。
それなりの学習が必要です。

TeraPad 公式ダウンロードサイト

中程にダウンロードできるところがあります。