コラム

HTMLでホームページを作る方法

2021年11月25日
ホームページをHTMlで作る

ホームページの作り方はいくつかありますが、HTMLを覚えておくと色々な制作方法に対応できます。
個人で勉強しながら覚えていけば仕事に結び付かせることも可能になります。
ここではHTMLでホームページを制作する場合の基本的な情報をお送りします。

HTMLとは

HTML(エイチティーエムエル)とはHyperText Markup Languageの頭文字を取ったものでWebサイトを制作するために開発された言語になります。
まぁこれは名称だけ覚えておけばOKです。

HTMLだけではちょっと足りない

実はホームページはHTMLだけ覚えれば作れるものではないのです。
HTML以外で必要になってくるのがCSS(カスケードスタイルシート:通常スタイルシートと言います)も必要になります。

CSSの他にもJavaScriptやPHPといった言語も必要になりますが、まずはHTMLとCSSを覚えることから始めます。

HTMLとCSSの役割

HTML、CSSはそれぞれ役割があります。

HTML:表に見せるファイル
CSS:デザインやレイアウトを司るファイル

ブラウザ上に表示させているのがHTMLで裏側にCSSがあると思ってください。
なので実際のURLも***.htmlになっていますよね。

必要なもの

HTMLでホームページを作る場合に必要なものは以下になります。

パソコン

パソコンはWindows、MacどちらでもOKです。
私は昔はWindowsでしたが今はMacで作業を行なっています。

テキストエディタ・HTMLエディタ

テキストエディタとはWindowsであればはじめから入っているメモ帳がありますよね。
そのようなものなのですが、このメモ帳は実際は使用できません。

Windowsでおすすめのエディタは以下になります。

Visual Studio Code

Blackets

ATOM

Macのおすすめエディタは以下になります。

Visual Studio Code

Mi

ATOM

他にもありますが色々使ってみて、ご自分が使いやいすいものを選びましょう。
途中で変えることも可能です。

画像編集ソフト

ホームページを作る際に画像を掲載する場合がほとんどだと思います。
画像の編集ソフトは必須となります。
基本的には有料のものがいいのですが、初めのウチは無料(フリーソフト)のものを使用して、慣れてきたら有料のものを導入するスタイルでもいいかと思います。

私たちのようにWeb制作の業務を行なっている場合はAdobeのPhoto Shop(フォトショップ)やIllustrator(イラストレーター)を使います。

FTPソフト

FTPソフト(FTPクライアントとも言います)は制作したホームページのファイルをサーバーにアップロードする際に使用します。
フリーソフトが多くありますので、色々使ってみて一番使いやすいものを選びましょう。

Windows用おすすめの無料FTPソフト

FFFTP
Windowsでは定番のFTPソフトです。

WinSCP
英語版ですが日本語化もできます。

File Zilla

Mac用おすすめの無料FTPソフト

FolkLift
私もこれを使用しています。
以前はYummyFTPというものを使っていたのですが、MacのOSがバージョンアップした際に使用できなくなりました。
色々試した結果FolkLiftに落ち着きました。なんせ動作が早い!

File Zilla

Cyberduck

HTMLのバージョン

HTMLなどの言語にはバージョンがあります。
現在はHTML5が主流です。
バージョンに合わせたコード(タグ)の記述が必要になりますので、これは勉強しながら覚えていく必要がありますね。

同じくCSSにもバージョンがあり現在はCSS3が主流です。

HTML5とCSS3で実際にホームページを作るようになります。
HTMLやCSSははじめは本を見ながら覚えると良いかと思います。
私もはじめはかなり読み込みました。

参考になる本はこちら

スマートフォンに対応したホームページにしましょう

ホームページというとどうしてもパソコンでのイメージがあると思いますが、現在はネットユーザーの半数以上がスマホからのアクセスになっています。
なのでスマホ、パソコンのどちらで見ても最適化したサイト制作が必須になります。
スマホに対応させる方法は以下の2タイプ。

パソコンサイト+スマホサイト

パソコン用、スマホ用のそれぞれのホームページを作ってアクセスしてきたときに端末情報を読み取ってそれぞれのサイトを表示する方法。

レスポンシブデザイン

レスポンシブデザインは1つのHTMLファイルでパソコンとスマホ(タブレット含む)の両方で最適化して表示させる制作方法です。
現在はこのレスポンシブデザインが主流です。
レスポンシブデザインの詳細は弊社サイトをご覧ください。

レスポンシブデザインとは

レスポンシブデザインで制作する場合はどちらかというとHTMLよりCSSの技術が必要です。

WordPressを使う場合もHTMLやCSSの技術があった方が良い

ブログ構築システムのWordPress(ワードプレス)でブログやホームページの制作を行うケースも増えていますが、この場合もHTMLやCSSの技術を身につけておくことをおすすめします。

まとめ

HTMLでホームページを作る際はおおまかにこのような環境が必要です。
これから覚えたい方はぜひ参考にしてください。