〽️ 「ふ」のHTMLコーディング環境を紹介します。
もはや自分の中では当たり前になっていて紹介するまでもないと思っていたのですが、
未だにHTMLの入門書には、
「メモ帳」▶︎「ファイルマネージャで拡張子をつけて保存」▶︎「右クリックでブラウザで開く」
という手順を紹介しているところもあるみたいです。
それじゃほんとまどろっこしい。
実用的なエディタ・ブラウザをインストールして、快適なコーディング環境を整えましょう。
アプリケーションのインストールについてはスマートフォンで当たり前にやっていることですよね。PCにおいても同様です。初心者の方でも難しく考える必要はありません。
webページからアプリをダウンロードしたのち、PCにインストールしてください。GoogleとAdobeはいずれも世界第1線の会社です。安心して手続きできます。
もちろんWindowsでもMacでも両方のアプリが対応しています。できればBracketsはiOSにも対応して欲しい。今後に期待。
▶︎ Adobe Bracketsをダウンロード ◀︎ |
|
▶︎ google Chromeをダウンロード ◀︎ |
◼︎ PCからリンクしてください。
さっそくBracketsを起動してコードを入力してみましょう。
メニューバーの「ファイル」▶︎「新規作成」で新しいファイルを編集できます。
ここにコードを書いてみましょう。初心者の方はコピペしてもらっても構いません。
コードがかけました。
「ファイル」▶︎「保存」を押してファイル名に「なんちゃら.html」として保存します。
この「.html 」をつけて保存するとあら不思議。テキストがカラフルになりました。
これはコードを見やすくするための色分け機能「シンタックスハイライト」です。
そして右上にある⚡️マークを押すと自動的にChromeが起動し、プレビュー(実際のWebページ上ではこんな風に表示されますよー)ができます。▼ ▼ ▼
ファイルをいちいち開き直したりしなくて良いのでとても便利。
コードを書き足して見ましょう。
---- ▼ この部分書き足し。▼ ----
<h1>---- ▲ ここまで書き足し。▲ ----
コードを変更した場合、Bracketsの右上の⚡️マークのところに小さい○が付きます。変更内容を保存しましょう。メニューバーの「ファイル」▶︎「保存」を使うか、ショートカットなら[Ctrl]+[S](Windows)、[command]+[S](Mac)で行ってください。
Bracketsで保存したコードが即座にChromeに反映されます。素晴らしいぞ。
*ちなみに最近のBracketsでは、コード入力がリアルタイムでChromeに反映されます。しかしながらうまくできたりできなかったりする。調査が必要じゃ。
今度はChromeの出番。ツールバーの「表示」▶︎「開発/管理」▶︎「デベロッパーツール」を押します。
Chromeの右側になにやら細かいのが出てきます。開発者用ツールです。
この開発者ツールの上の方にある細かいボタン。「toggle device bar」〜 デバイスを切り替えるということか。押してみましょう。
「HTMLファイルをスマートフォンで表示した場合」のプレビューができるんです!!
webページを編集するとき、「PCでの表示」 / 「スマートフォンでの表示」の両方の状態を確認しながら作業を進めていくことができるんです。優れものですな。
なお「toggle device bar」をもう一度押すとPCバージョンの表示に戻ります。
ちなみにBracketsは、Firefoxや他のブラウザでもプレビューできたりします。でもこれまで話してきたように、Chromeとのタッグが最強ですね。
HTMLの入門講座で「テキストエディタはなんでもよい」などと書かれていたりします。お手軽感を出しているのでしょうか。
でも全然そんなことないです。ほんのすこしだけ手間をかけてBracketsとChromeを入手すれば、無料で最高のコーディング環境を手にすることができますよ。これからHTMLを勉強しようという方にこそお勧めだと思い、記事を書きました。