「HTMLのコードを書きたいがどう書けばいいかわからない」

「HTMLの編集に便利なエディタがわからない」

この記事はそんな人に向けて書いています。

はじめまして。

フリーランスエンジニアの忍です。

最近サラリーマンや公務員として働くよりも時間的拘束が少なかったり、大きく稼げるフリーランスエンジニアとして働くことを目指す人が増えています。

フリーランスエンジニアを目指す人は基本的にフロントエンド系のプログラミング言語を使うことが多いです。

そこで使う言語がHTMLです。

HTMLがどのような言語なのかを以前解説しましたので、本ブログでは、その次の段階として、HTMLのファイルをどのようにして作成・編集するかを知る必要があります。

そこでこの記事では、HTMLのファイルを作成・編集する方法について3つほど紹介したいと思います。

目次【本記事の内容】

 

HTMLファイルを編集できる3つの方法とは？

HTMLファイルを作成・編集する方法は大きく分けて3つあります。

1つ目はテキストエディタで作成・編集する方法で、2つ目はCMSツールを使って作ったサイトを編集する方法で、3つ目はAmazonのクラウドコンピューティングサービスを利用する方法です。

それぞれの方法の概要・長所・短所について今から説明します。

1.テキストエディタで編集する方法

そもそもテキストエディタとは何かについてまず説明します。

テキストエディタとは、Windowsに標準搭載されているもので言うと「メモ帳」が当たります。

メモ帳を開いてHTMLを記述してみましょう。以下のコードをメモ帳ファイルにコピペしてください。

<!DOCTYPE html>

<html lang=“ja”>

<head>

<meta charset=“uft-8”>

<title>HTML入門-HTMLドキュメントの編集方法</title>

</head>

<body>

<div>

<H2>メモ帳でHTMLファイルを編集できます</H2>

<p>こんな風に</p>

</div>

</body>

</html>

メモ帳のウィンドウではこのようになります。

このようにメモ帳に貼り付けたらファイルの保存をします。

メモ帳のメニューバーより「ファイル」→「名前をつけて保存」を選択すると保存できます。

メモ帳でテキストを保存する場合はファイルの拡張子がデフォルトで「txt」になっているため、その拡張子を「html」に変更します。

この「free.html」というファイルをダブルクリックするとこのように表示されます。

作成したHTMLファイルは対象のファイルを右クリックして「プログラムから開く」からメモ帳を選択すると編集できます。

メリットを以下にまとめます。

  • 全て自分で記述するため、ウェブページの構造を把握しやすい。
  • ソースを直接編集するため、ソース内に無駄ができにくい。
  • 細かな微調整も含め、技術的な知識さえあれば思い通りに編集できる。
  • ソフトウェアの動作が軽い。

続いて、デメリットを以下にまとめます。

  • ホームページの公開場所を別途用意する必要がある。
  • HTMLやCSSなど、ソースを直接記述するための知識が必要。
  • 編集するためのツールであるため、サイトの配置の確認をすることができない。

その他には「Visual Studio Code」、「Atom」、「サクラエディタ」、「秀丸エディタ」などが挙げられます。

「Visual Studio Code」とは、2015年にMicrosoft社がリリースした無料のHTMLエディタです。

HTML以外にもCSSやJavaScriptなど様々な言語に対応しています。

特に優れているのがインテリセンスと呼ばれる自動補完機能です。

特定の文字を打つだけでHTMLが自動で記述されるので、HTMLを打つ手間を省けます。

「Atom」とは、Github社が開発した無料のHTMLエディタです。

HTML以外にもCSSやJavaScriptなど様々な言語に対応しているので、他のファイルとの連携がとりやすいと言えます。

私は「Atom」でPythonのコードを編集しています。

拡張機能が豊富なHTMLエディタなので、自分好みにカスタマイズして使うことが可能です。

「サクラエディタ」はメモ帳とほとんど同じですが、文字の色を変えることができます。

もう一つ大きく異なる点は多様な文字コードに対応できます。

「秀丸エディタ」もメモ帳に近いエディタです。

「サクラエディタ」同様に文字の色を変えることができます。

その他には、扱えるファイルサイズが大きい・スクロールをはじめとした高速な動作・豊富なカスタマイズ機能・ファイル上の記述から別のファイルを開く機能などがあります。

2.CMSツールを使って作ったサイトを編集する方法

CMSツールとは有名なところで言うと、「WordPress」が挙げられます。

CMSツールの概要はWordPressについて書いた記事がありますのでそれをご覧ください。

メリットを以下にまとめます。

  • 最初にセットアップした後は更新作業がブラウザ上だけで完結する。
  • テンプレートを切り替えることで、簡単にサイト全体のデザインを変更できる。
  • コメントの投稿機能などを備えたブログが簡単に作れる。
  • ウェブページ1つ1つの中身は、ワープロ感覚で作成できる。

続いて、デメリットを以下にまとめます。

システムが全てウェブ上にあるので、定期的にアップデートするなどのセキュリティ面の配慮が必要。

ウェブサーバ上に設置したり、細かくカスタマイズしたりする必要があるが、設置可能なウェブサーバは限られている。

システムが全てウェブ上にあるので、定期的にアップデートするなどのセキュリティ面の配慮が特に必要。

3.Amazonのクラウドコンピューティングサービスを利用する方法

AmazonにはAWS(Amazon Web Service)というクラウドコンピューティングサービスがあります。

AWSとは、Amazonが提供している100以上のクラウドコンピューティングサービスの総称です。

クラウドコンピューティングとは、インターネットを介してサーバー・ストレージ・データベース・ソフトウェアといったコンピュータを使った様々なサービスを利用することを指します。

クラウドコンピューティングでは、手元に1台のPCとインターネットに接続できる環境さえ、サーバーや大容量のストレージ、高速なデータベースなどを必要な分だけ利用できます。

その他の長所としてはLinuxのviコマンドの操作でコードを書くことも可能であることです。

まとめ

本記事では、HTMLファイルを編集する3つの方法について説明しました。

その内容はテキストエディタで編集する方法・CMSツールを使って作ったサイトを編集する方法・Amazonのクラウドコンピューティングサービスを利用する方法でしたね。

CMSツールを使って作ったサイトを編集する方法は「php」という言語も理解していないといけないので、他の2つの編集方法よりも難易度が高いためあまりおススメできません。

これからも本ブログではこのようにHTML・CSSによるサイト作成に関する知識を発信していきたいと思います。

More from my site