HTMLファイルを作成してみよう!あとエディター も!【超初心者向けHTML講座2】

 どうもフリーランスプログラマのTakaです。

 前回、「そもそもHTMLとは?」ということでHTMLの概要について簡単にまとめさせていただきました。詳しくは下記の記事を参照いただければと思いますが、今回は実際にHTMLファイルを作成してブラウザに表示させてみたいと思います。また、次回に備えておすすめのエディターも紹介するので気に入ったエディターがあればインストールしておいてください。

環境

 なお、作成環境に関しては以下の通りとなります。

今回の環境

  • MacOS Catalina 10.15

 上記の通り、Mac環境で進めていきたいと思いますが、Windowsでもツールが違うだけなので基本的には同じ方法で作成可能です。

HTMLファイルってどうやって作るの?

HTMLファイルってどうやって作るの?

 それでは、早速HTMLファイルを作成していきたいと思いますが、まず、初心者の方からするとHTMLファイルってどうやって作ればいいのかも分からないと思いますが、HTMLファイルの作成はいたって簡単でメモパッドさえあれば作成することが可能です。

特に高価なツールは必要ないんだね

実際にHTMLファイルを作ってみる

 では、実際にHTMLファイルを作ってみましょう。

 まずは、テキストアプリ(Mac:テキストエディット、Windows:メモ帳)を開きます。

 Macのテキストエディットの場合は、まずテキストを開いたら「フォーマット」メニューから「標準テキストにする」を選択し標準テキストにしてください。

 そうしたら、「Hello World」と打ち込んで「helloworld」保存してください。

 保存したら、一旦テキストアプリを閉じて保存したファイルの名前を「helloworld.html」という名称に変更してください。

 Macの場合は、アラートが出るかもしれませんが、その際は「.html」を使用を選択してください。ちなみに、この「.(ドット)」を含めた以降の文字列のことを拡張子と言います。

 名称をこのように「helloworld.html」と変更したら、これでhtmlファイルの作成自体は完了です。

 つまり、htmlファイルは拡張子を「.html」にするだけで作ることができます。

何も難しいことはないですね!

HTMLファイルをブラウザで開いてみる

 それでは、実際に作成した「helloworld.html」をダブルクリックしてブラウザで表示してみましょう。

 ブラウザの画面には「Hello World」という文字列が表示されていると思います。

エディターをインストールしてみよう

 いかがでしょうか?とても簡単ですが、これだけでも立派なHTMLファイルの完成です。

すごく簡単ですね

 ただし、見た目的にもブラウザできちんと表示されており問題ないように見えますが、これだけだとまだ完全なHTMLファイルとは呼べません。

 ちゃんとしたHTMLファイルにするためにはHTMLの書式に合わせてコーディングしていく必要があります。前回の記事でWebページのソースを表示したと思うのですが、そのソースは表示されている内容以外にも英語のタグとかが記載されていたと思いますが、あれがHTMLの書式で書かれたHTMLファイルということになり、あのようなかたちのコードを書いていくことになります。

 実際のコーディングに関しては次回から紹介していきたいと思いますが、実際にコーディングしていくにあたりエディターアプリがあるとなにかと便利なのでいくつか紹介して今回は終わりにしたいと思います。

 これから紹介するいずれかのエディター、もしくは他で気に入ったエディターがあればそれでも構わないのでどれか1つ自分の環境に合わせてインストールしておいてください。

Sublime Text

 まず、私も実際に使っているエディターである「Sublime Text」。

 Sublime Textは軽量かつ高機能なエディターでプラグインも豊富で自分好みにカスタマイズができ、とても使い勝手の良いエディターとして人気のあるエディターになります。コーダーの間で最も使われているエディターにひとつと言ってもいいでしょう。

Atom

 続いて、プロの間でも人気のある「Atom」というエディターもおすすめです。

 AtomとはGitHubというWeb業界では有名な企業が開発したオープンソースのエディターになります。こちらも使いやすいエディターとしてSublime Text同様、現場で最も使われているエディターのひとつになります。

Visual Studio Code

 最後にマイクロソフトが開発した「Visual Studio Code」も高い人気を誇るエディターになります。

 Visual Studio Codeも多くのコーダー、プログラマーに使われているエディターで、多機能かつ高機能な点が特徴になります。マイクロソフトが開発していることでWindowsユーザーの方にはとても人気のあるエディターだと思います。

まとめ

 ということで、今回は実際にHTMLファイルを作成してブラウザに表示させるまでの工程と、おすすめのエディターを簡単に紹介させていただきました。

HTMLファイルを作成してみよう!(本記事のまとめ)

  • HTMLファイルはテキストアプリでも作成可能
  • 拡張子を「.html」にすればHTMLファイル自体の作成は完了
  • 便利なエディターをインストールしておこう

 今回はこんな感じでしょうか。では、次回から実際にエディターを使ってHTML書式に合わせてコーディングをしていきたいと思います。

 てことで、今回はここまで!また!

 次の記事は下をクリック。

お仕事のご相談・ご依頼
お気軽にお問い合わせください!

お仕事の依頼はこちら

シェアありがとうございます!

著者プロフィール

Takanori Hashi

東京、奄美大島、宮崎の拠点にサーフィンとスノーボードが好きなフリーランスのWebクリエイターです。普段はプログラム書いたりデザインしたり映像作ったりしています。いろいろな人の話しを聞くのが好きなので、このブログを通して多くの人と繋がりが出来たら嬉しいです。noteとInstagramもやっているのでフォローしてくれたらありがたいです!

人気記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です