上毛印刷株式会社

HTMLを書くために

HTMLを書くために

2022年06月15日
WEBサイト制作
  • #HTML

こんにちは!
上毛印刷でWEB制作担当をしているソーヤです!
HTMLを書くために必要なことを解説していこうと思います!

HTMLとは

以前の記事で僕はHTMLを
———————————————————————————————————————–
HTMLは人間の体で例えると、骨格や内臓です。
皆さんが見ているこのブログの文章もHTMLで記述して表示されています。
要は、WEBサイトに掲載されている全てのコンテンツがHTMLであるということですね。
———————————————————————————————————————–
というふうにざっくり説明しましたが、
もっと厳密にいうと、
HTML(HyperText Markup Language)はコンテンツの構造を定義するマークアップ言語です。
と言われてもよくわからないですよね・・・
なので、実際にHTMLを書く前に、皆さんのみているWEBサイトでどのような使われ方をしているのか見てみましょう。

ブラウザについて

WEBブラウザをご存知ですか?
皆さんはネットサーフィンをする際、大体の場合WEBブラウザを使用しています。
普段はあまり意識せず、ネットを使うためのものと認識されている方が多いかと思いますが、
世の中には主に4つのWEBブラウザがあります。

 

ブラウザ

 

皆さんの普段お使いのWEBブラウザはありますか?
では、好きなWEBサイトを開いてみてください。
もちろん弊社WEBサイトでも大丈夫です!

開けましたでしょうか。
そうしましたら、右クリックをしてください。
「ページのソースを表示」と出てきましたでしょうか。
そうしましたら、その「ページのソースを表示」を左クリックしてください。

どうでしょうか。
別タブが開いてこのような画面が出てきましたでしょうか。

HTML

これがHTMLです!

この皆さんのPCに表示されている文字列こそがWEBサイトをコンテンツを定義しているのです!
つまり、これこそがWEBサイトの本質そのものになるんです。

おすすめ環境構築(初級編)

では、なんとなくWEBサイトにとってHTMLが何かがわかってきたところで、
早速実際に手を動かしてHTMLを書いていきたいのですが、
その前に簡単におすすめWEBサイト開発環境をご紹介したいと思います。

①Webブラウザを選ぼう
先ほど紹介したWEBブラウザですが、もちろんWEBサイト開発にはWEBブラウザが必要になります。
そこでコーダーにとって必須と言っていいのがChromeになります。
ぜひ、コーディングの際にはChromeを使ってください
◆ダウンロード
https://www.google.co.jp/chrome/?brand=YTUH&gclid=EAIaIQobChMI8-uIj8up-AIVUHmLCh1qCAYkEAAYASAAEgJE2vD_BwE&gclsrc=aw.ds

 

②エディタを用意しよう
エディタとはコーディングをする際に必須のツールになります。
絵で例えるなら画材のようなものです。
特に有名なエディタを4つピックアップしたのでご紹介します。

 

エディタ

 

まず、一番左から「Sublime Text」。
◆ダウンロード
https://www.sublimetext.com/3
一番メジャーなエディタですね。僕の周りでも使用している割合が多いのがこのエディタです。
使用者が多いのでカスタマイズや使い方がわからない場合、調べるとすぐに情報が出てきます。

 

次は、左から二番目「Atom」です。実は僕はこれを愛用してます。
◆ダウンロード
https://atom.io/
少し前まではモダンなエディタと言われ使用者がそこそこいたのですが、2022年中にサポートが終了してしまいます。
なので、おすすめはできません・・・

 

次が、右から二番目「DreamWeaver」です。
◆ダウンロード
https://commerce.adobe.com/checkout/email/?cli=adobe_com&co=JP&ctx=acom&items%5B0%5D%5Bcs%5D=0&items%5B0%5D%5Bid%5D=223A3CF78D967C848034C49BC50B4B43&lang=ja
これは非常に多くのWeb初心者の方が使っています。
ですが、使用するためにはAdobeのアカウントを取得しなければいけません。
月々3000円弱かかってしまうので個人の方にはおすすめできません。
正直僕個人としても使い勝手はイマイチです。

 

最後が一番右の「Visual Studio code」です。
◆ダウンロード
https://azure.microsoft.com/ja-jp/products/visual-studio-code/
これがもう今のトレンドですね。
Atomがサポート終了する理由もこのVisual Studio Codeの台頭が原因のようです。
僕も今年中にVisual Studio Codeに乗り換えようと思っています。

なので、将来性を含めてのおすすめは「Visual Studio Code」ですね!
まあ結局は好みなんですが・・・

さて、これでHTMLを書く準備ができましたね!

まとめ

この記事ではHTMLを書くために必要なことを紹介しました。
どうでしょうか?初めて聞くことばかりでしたでしょうか?
次回からはドンドン専門性が高くなっていきますが、
なるべく初学者の方にもわかりやすい内容にしていきたいと思いますのでよろしくお願いします!

ソーヤ

上毛印刷WEB制作担当
前職は東証一部上場企業の本社受託チームにてフロントエンドエンジニアを3年経験。

PAGE TOP