htmlファイルの編集環境を整えよう

htmlファイル編集イメージ画像

記事関連ワード

htmlファイル 編集 Netbeans ダウンロード

htmlファイルの編集

皆さんの用途に合ったお好きなデザインのテンプレートは見つかりましたか?

前回、前々回に
無料のレスポンシブテンプレート選び
レスポンシブとは

という記事を書きましたが、この記事では、ダウンロードしたレスポンシブテンプレートファイルを実際に編集するツールをご紹介したいと思います。

ダウンロードしたレスポンシブテンプレートのフォルダを開くと、index.htmlというファイルがあるかと思います。

その、index.htmlというファイルがサイトのトップページとなるファイルですので、ファイル名は変更しないてください。

htmlファイル編集ソフト

ファイルを編集する際は、windowsのPCにインストールされている【メモ帳】を使うこともできるのですが、 htmlファイルの編集に対応したソフトを使うと、htmlのソースをわかりやすく色分けしてくれたり、 編集中の入力をサポートしてくれたりと、生産性を向上させてくれます。

htmlファイルの編集に対応していれば、どんなソフトでも良いので、インストールすることをおすすめします。

ファイルをダブルクリックすると、ブラウザで表示されてしまいますので、ファイル名を右クリックして、 プログラムから開く → メモ帳 を選択すると実際のソースコードを見る事ができます。

NetBeansのダウンロード

私は、以前は【TeraPad】という編集ソフトを使っていましたが、現在は、【NetBeans】という無料のソフトを使っています。 簡単に使えるようになるまでの手順をご紹介します。

まずは、NetBeansをダウンロードしましょう。

ダウンロードはこちら

上のリンクをクリックすると、このような画面が出てくると思います。

NetBeansダウンロード画面

HTML5/JavaScript列のPCが64bitの方はダウンロードX64をダウンロードして下さい。

PCが32bitの方はダウンロードX86をクリックしてダウンロードして下さい。

自分のPCが何bitかわからない方は、コントロールパネル > システムとセキュリティ > システム といくと表示される画面の【システムの種類】を見ると確認することができます。

それでは自分のPCに合ったファイルをダウンロードして、ダウンロードしたファイルを実行し、ソフトをインストールして下さい。

デスクトップ上に四角いキューブのNetBeans IDEと書かれたショートカットが作成されたかと思います。ダブルクリックしてソフトを立ち上げて下さい。

ソフトが立ち上がったら、一番左上の【ファイル(F)】をクリック → 【新規プロジェクト(W)】をクリックして下さい。

NetBeansの使い方図解

出てきた画面の
①カテゴリ → HTML5/JavaScript を選ぶ
②プロジェクト(P) → 既存のソースを使用するHTML5/JSアプリケーション を選ぶ
③次へ をクリック

NetBeansの使い方図解

そして、さらに出てきた画面の
④サイト・ルートの参照ボタンをクリックし、ダウンロードして好きな場所に置いたレスポンシブテンプレートのフォルダを選択
⑤プロジェクト名を好きな名前に変更
⑥終了を押す

NetBeansの左側にダウンロードしたテンプレートの一覧が表示されれば完了です。

左側に一覧表示された中から、index.htmlというファイルを開いてみて下さい。

メモ帳などのテキストエディタで開くよりも色分けされており、わかりやすいかと思います。

候補なども表示され、入力の手助けもしてくれるので、このNetBeansでなくてもかまいませんので、html等nファイル編集に対応したツールを使って作業しましょう。

記事作成日:2016.09.15

Facebookへ Twitterへ Feedlyへ RSSへ このエントリーをはてなブックマークに追加