企業がWebサイトを持ち、マーケティングを行うのが当たり前の時代になりました。Webサイトは企業の顔としてインターネットに継続して公開されるので、オリジナリティの高いホームページを作成したいと思う企業も多いです。
オリジナリティの高いホームページを作成するには、「HTML（Hyper Text Markup Language）」や「CSS（Cascading Style Sheet）」などの知識や技術が必要となります。一見難しそうなこれらの技術ですが実際は初心者でも無理なく学習がしやすく、習得すればプログラミングに関する学習の基礎としても役立ちます。
今回はHTMLでホームページを一から作成したい方向けにHTMLやCSSの基礎、そしてレイアウト事例や公開手順、学習方法などをご紹介していきます。
HTMLでホームページは簡単に作れる
HTMLと聞くと、「プログラミングのように小難しいことをしなくてはいけない」と思ってしまう方も多いでしょう。しかし厳密に言うと、HTMLはプログラミング言語ではありません。
HTMLは「タグ」という記号で文章などを区切った「マークアップ言語」と呼ばれるカテゴリに属し、プログラミング言語に比べて構成が比較的シンプルで覚えやすいです。
抵抗があった方が実際にHTMLを学習し始め、小難しいイメージが払しょくされていくケースはよくあります。あなたも実際にHTMLに触れてみれば、その簡単さが理解できるでしょう。
ホームページをまずは作ってみよう
HTMLでホームページを一から作成してみたいと思ったならば、まずホームページを直接作ってみるのが一番です。人間は熱が冷めやすいので、思い立った内に準備をしてみましょう。
準備をすると言っても、特別なものはいりません。プログラミング言語の場合は特殊なツールなどを利用する必要性がありますが、ホームページ作成の場合
・HTMLやCSSを編集するテキストエディター（メモ帳など）
・ホームページ状態を確認するWebブラウザー
この2つさえあればひとまず作り始められます。
どちらもパソコンを持っていれば、最初からインストールされています。
ただしホームページを作る際は、
・メモ帳以外のテキストエディターをインストールして利用する
・Google Chromeで確認などを行う
の2点を押さえておくと作りやすいです。
メモ帳でもホームページは作成できますが、記載できるデータ量に限界があり、保存形式のエンコードに制限があるなどのデメリットがあります。ホームページ作成などに特化したテキストエディターを使えば、
・自分の今打っているタグの位置を強調して教えてくれる
・コメントやHTMLタグなどを、種別に色付き表示してくれる
・自動でタグを推測して入力してくれる機能などが使える
などのメリットを受けられるのでホームページ作成がスムーズになります。
おすすめのテキストエディターは、
・Atom・・・ショートカット機能が豊富で、機能を追加してカスタマイズも可能
・Mery・・・作りがシンプルで読み込みが速く、マクロ機能で処理自動化ができる
・Visual Studio Code・・・省略コード記述（Emmet）が可能、効率よくコードが書ける
などです。
また「Google Chrome」は、世界および日本でシェアナンバーワンのWebブラウザーです。読み込みが速く開発者用機能も使いやすいので、もしインストールしていない場合は利用してみてください。
HTMLとCSSに関する基礎知識
HTMLでホームページを作成するには、
・HTML
・CSS
最低2つの技術が必要になってきます。
他にも「Java Script（JQuery）」で動きをつけたりする技術もありますが、まずは基礎となる2つの技術について理解を深めていきましょう。
HTML
HTMLは、ホームページを構成している言語として認知されています。しかしもともとは、開発者が同僚との情報共有などの問題を解決するための手法として登場しました。
HTMLでは
・ヘッドタグ<head>・・・ホームページ内コンテンツを読み込む際の基本設定を記述
・ボディタグ<body>・・・ホームページ内コンテンツを記述
・リンク用タグ<a>・・・ホームページ内にURLリンクや内部リンクを追加
などの各タグを使ってホームページを作成していきます。
一般に普及した後は徐々にバージョンアップが進み、現在は「HTML5」をベースに機能改良が進んでいます。HTML5では前バージョンの「HTML4」系の技術よりコード記述がさらにシンプルになり、理解しやすい構造になっているのが特徴です。
HTML4系からHTML5系に変更されるに当たって大きく変更されたのは、
・文章宣言が簡単になる（<!doctype html>だけでよくなった）
・デザインはCSS側に極力書くよう推奨される（<font>タグなど、装飾関係のタグがたくさん廃止された）
・新しいタグが追加される（図表には<figure>を使うなど、より明確なタグ付けが可能になる）
などの点です。
CSS
CSSは、「優先順位をつけながらホームページに装飾を行っていくための技術」です。「CSS1」に始まり、現在は「CSS3」や「CSS4」が最新となります。
CSSでは、
どこに設定を行うか（セレクタ）{
設定したい内容（プロパティ）：設定する値など；
}
といったようにデザインを追加していきます。
たとえば
a.class{
color:red;
}
だと、「「class」というクラス名のついた<a>タグの文字色を赤にする」という意味になります。
レイアウト作成事例3選
ここからは、実際にHTMLやCSSのサンプルコードをご紹介していきます。貼るだけで利用できるようになっているので、参考にしてください。
・基本コード
・flexナビゲーション作成用コード
・コンテンツを3つ並べるコード
基本コード
まずは、HTMLを書く際基本になるコードです。
<!DOCTYPE html><!– つづりは大文字でも、小文字でもOK –>
<html>
<head><!– ページ読み込みに関する事前設定などを書く –>
<meta charset=”utf-8″><!– utf-8は言語コード–>
<title>ホームページタイトル</title>
<link href=”sample.css” rel=”stylesheet”><!– CSSをリンクさせる–>
</head>
<body><!– 実際にページ内に表示される要素を打つ–>
<!–後でサンプルコードを追加する–>
</body><!– ページ内容書き終わり –>
</html>
コメント内容込みで、メモ帳などにそのまま張り付けてもらって構いません。貼り付けたら好きな場所に「html」形式で保存を行います（ファイル名の後に「.html」を付ける）。ファイルの種類を「すべてのファイル」にしておき、テキストデータ（.txt）で保存し間違えないように注意しましょう（画像を参照、Windows10の場合）。
flexナビゲーション作成用コード
次は、ホームページのflexグローバルメニュー（ナビゲーション）作成用コードをご紹介します。
・HTML（先ほどの基本コード<body></body>内にそのまま貼り付け可能）
<!–ナビゲーション要素–>
<nav>
<ul class=”menu”>
<li class=”menu-list”>menu-list 1</li>
<li class=”menu-list”>menu-list 2</li>
<li class=”menu-list”>menu-list 3</li>
<li class=”menu-list”>menu-list 4</li>
</ul>
</nav>
・CSS（ナビゲーションデザインを定義、ファイル名「sample.css」でsample.htmlと同じ場所に保存する）
/*ナビゲーション用CSSを定義*/
.menu {
/*下記を適用すると、要素が横並びになる*/
display: flex;
list-style:none;
}
.menu-list{
/*ボックス識別用の簡易デザイン設定*/
border:2px solid black;
background-color:gray;
}
display:flex;適用前は各ボックスが縦並びになりますが、適用すると横並びになります。実際にdisplay:flex;を消去したり追加したりして、表示を確認してみてください。
display:flex;の前後を「/* */」で囲むと、コメント扱いになり適用を外せます。
可変するカラムのコード
最後に、可変するカラムのコードをご紹介します。
・HTML（sample.htmlに追記）
<!–可変するカラムの要素–>
<div class=”flex-rayout”>
<div class=”flexible”>可変します</div>
<div class=”fix”>固定表示されます</div>
</div>
・CSS（sample.cssに追記する）
/*可変コード用CSSを定義*/
.flex-rayout{
display:flex;
}
.flexible {
flex:1;
}
.fix {
min-width:300px;
}
.flexible,.fix{
/*ボックス識別用の簡易デザイン設定*/
box-sizing:border-box;
border:2px solid black;
}
.flexible{
/*ボックス識別用の簡易デザイン設定*/
background-color:steelblue;
}
.fix{
/*ボックス識別用の簡易デザイン設定*/
background-color:red;
}
実際にコピペすると、右ボックスの幅はそのままで左のボックス幅が変わっていくのが分かります。実際に表示画面幅を変えて、動きを楽しんでみましょう。
細かい決まりは他にもいろいろありますが、とりあえずは上記3つのサンプルコードをカスタマイズしたりして学習するとスキルも自然と上がると思います。
またその他のコードについては、「チートシート」という形で下記のようなサイトで配布されています。
参考2：https://codepen.io/search/pens?q=flex
ソースをコピペして使えたりと便利なので、ぜひ実際に利用してみてください。
HTMLホームページ公開に必要なもの
HTMLホームページは、ただ作っただけでは誰も見てくれません。インターネットに公開して誰でも閲覧できるようにするには、
・ホームページ用サーバー
・ドメイン
主に次の2つが必要になります。
ホームページ用サーバー
ホームページを公開するには、サーバー（インターネットに常時接続している、コンピュータ）を用意する必要があります。
サーバーは
・レンタルサーバーを借りる
・自分が契約しているプロバイダーから提供されているサーバーを利用する
・サーバーだけを借りて、Webページを公開するためのソフトウェア（Webサーバー）などは自分で用意する
などさまざまな方法で利用できますが、自分で一から作成したHTMLページを初心者がアップロードする際は
・レンタルサーバーを借りる
がおすすめです。
レンタルサーバーとは業者がユーザーに貸し出しているサーバーのことで、ホームページアップロード用にさまざまな機能が利用できます。費用も安いところが多く、Webサーバーなども最初からインストールされているのですぐにHTMLページを公開できます。
お試し程度でよければ、無料で利用できるサーバーもたくさんあります。
・XFREE・・・人気レンタルサーバーサービスXserverが運営、信頼性が高い
・Xrea・・・GMOグループが運営、モダンで使いやすい操作画面などが魅力
・スターサーバー・・・広告が表示されないプランと、一部表示される代わりにサーバー容量が2倍になるプランの2つの無料プランがある
こういったレンタルサーバーにまずは無料で登録して、本格的にホームページ運営をしたくなったら気に入ったサービスに有料登録してみるのもよいかと思います。
ドメイン
ホームページにアクセスする際は、インターネット上のどのサーバーにホームページがあるか指定する必要があります。その際必要になるのが、ドメインです。
ドメインはインターネットに公開されているサーバーの住所であり、どの市町村のどの区域（サーバー内のどのディレクトリ）にホームページがあるかを指定することで、ホームページが閲覧できるようになります。
ドメインはレンタルサーバーを借りた場合、必ず自動で割り振られます。HTMLの勉強程度ならば初期のドメインだけを使っても構いませんが、本格的なホームページ運営の場合は文字列だけでどんなホームページか分かるようなドメイン（独自ドメイン）が必要です。
独自ドメインは
・お名前.com・・・ドメインの取り揃えが豊富で、安い
・value-domain・・・ドメイン設定もしやすく、価格も安い
・ムームードメイン・・・「,jp」など、日本を表すドメインが安い
などのサービスで簡単に取得できます。ただしホームページ公開用サーバーと紐づける作業などが必要になるので、利用の際は手順を間違えないように注意してください。
画像の作成や使用について
ホームページは、文章だけでは成立しません。テーマに合った魅力的な画像を適宜使用することで、キャッチーなページになるよう調整していく必要もあります。
画像を用意する有力な方法は、次の2つです。
・photoshopやillustratorなどの画像・イラスト編集ソフトで作成を行う
・フリー素材サイトを使う
photoshopやillustratorなどの画像・イラスト編集ソフトで作成を行う
Adobeの提供している「photoshop」や「illustrator」は、画像やイラストを編集できるソフトとして有名です。もちろんホームページ内画像を制作する際も、利用される場面が多いです。
ただし必ずしも、photoshopやillustratorなどを使わないとホームページが作成できないわけではありません。そもそもAdobeのソフトは全体的に高いので、入手できない方も多いでしょう。
どうしても画像やイラスト編集を行いたい場合は、
・GIMP・・・大手の無料画像編集ソフト、機能が豊富で使いやすい
・pixlr・・・Webブラウザーだけで利用可能で、手軽
・Photoscape・・・機能もそこそこ多く、使いやすい
などのソフトでも十分です。
どうしてもオリジナリティの高い、ハイクオリティな画像やイラストが欲しい際はAdobe系のソフトを使うことになるでしょう。職業としてデザインする場合にも必須のソフトになります。
フリー素材サイトを使う
画像やイラストを利用できるサイトも、ホームページによく使われます。ホームページに利用する際は、
・著作権や商用利用はフリーで誰でも使える状態になっているか
・ホームページのテーマに合った内容になっているか
などを確認する必要があります。
無料でも鮮明できれいな画像やイラストを提供しているところは多く、
・Pixabay・・・日本語に対応、ユニークな画像やイラストも多い
・Unsprash・・・日本語に非対応だが、くっきりしたきれいな画像が多い
・Pixta・・・人物系の画像が多く、人がテーマになっているようなホームページにも最適
などはとくに有名でおすすめです。
無料でも十分な点数がありますが、オリジナリティの高い画像やイラストが欲しい場合は有料サービスを使いましょう。
ホームページの作成で役立つ勉強サイト3つ
HTMLを自主学習する際は、次のようなおすすめのサイトを使ってみてください。
・ドットインストール
・Progate
・Paiza
ドットインストール
「ドットインストール」は、初心者におすすめのプログラミング学習サイトです。一部講座は有料プランに加入しないと利用できませんが、HTMLやCSSに関する講座は多くが無料で公開されています。
・HTML/CSSの学習環境を整えよう
・詳解HTML 基礎文法編
・詳解CSS レスポンシブウェブデザイン編
などを動画付きで無料視聴できるので、実際に画面通りに打ちながらホームページを作成可能です。1動画も2~3分程度で終わるので、無理なくすき間時間にもホームページの学習ができます。
Progate
Progateは、最近アップデートされてさらに使いやすくなったプログラミング学習サイトです。スライド形式でホームページ作成について学習しながら、出題される問題に回答して力を付けていく形式になります。
つまづいた場合も、ヒントを見ながら着実に解いていけるサポートもあります。またかわいいキャラクターの説明を聞きながら、楽しくレッスンできるのもメリットです。
無料版では講座途中から見れなくなったり制限がありますが、HTMLについては初級編すべてを無料プランでも全受講可能です。ただし徹底的にHTMLについて学習したい場合は、CSSも含めて関連の講座を有料プランになって受講してみましょう。
Paizaラーニング
<img src=”homepage html20”>
「Paizaラーニング」は、有名声優とコラボした講座をアップロードするなど面白い取り組みも多い学習サイトです。
ホームページ作成については、「HTML/CSS入門編1」を全無料受講可能です。その他講座も一部無料受講可能ですが、本格的に学習したい場合は有料コースに登録する必要があります。
いわゆる「萌えキャラ」が楽しくHTMLなどについて解説してくれるので、「他の学習サイトが面白くなくて勉強を途中でやめた」という方にもおすすめできる学習サイトになっています。
ゲームでプログラミングを学習できるなど面白いコンテンツが充実しているので、気になる方はぜひサイトにアクセスして確認してみてください。
ホームページの制作を学べるプログラミングスクール3選
<img src=”homepage html21”>
「短期間でHTMLコーダーやフロントエンドエンジニアなどとして活躍できるようになりたい！」という方は、コストが掛かりますが次のようなプログラミングスクールで技術を徹底的に学べます。
・CodeCamp
・TechAcademy
・DMM WEB CAMP
CodeCamp
<img src=”homepage html22”>
「CodeCamp」は、オンラインで学習が完結するプログラミングスクールです。
年中無休でマンツーマンの授業を展開しているので、時間があるとき集中的にWebデザインなどを詳しく勉強可能です。ホームページを学習する際は、
・Webマスターコース・・・「PHP」なども使った、機能的なホームページ作成方法が見につく
・デザインマスターコース・・・「jQuery」などを使った、スタイリッシュなホームページ作成方法が身に付く
の2コースが用意されています。
事前予約を行えば、無料で体験レッスンが受けられます。受講すると受講料に使える1万円割引クーポンがもらえるので、気になる方はまず公式に問い合わせてみましょう。
TechAcademy
<img src=”homepage html23”>
「TechAcademy」は、「日本e-Learning大賞プログラミング教育特別部門賞」を受賞した実績もある有名なオンラインプログラミングスクールです。
・オリジナルカリキュラムを読む
↓
・実際にサービスを開発する
↓
・疑問点を講師に聞く
の3つの流れで、確実にWeb制作の知識と技術が身に付きます。
ホームページ制作用に、
・Webデザインコース・・・ワイヤーフレーム作成からソースコードの管理まで学べる
などの講座が用意されています。
こちらも無料体験が用意されており、毎日8時間チャットサポートなどの機能を利用可能です。
DMM WEB CAMP
<img src=”homepage html24”>
「DMM WEB CAMP」は、実際に通って学習を行うプログラミングスクールです。東京都大阪にしかないため通える方は限られていますが、質の高い授業内容で人気があります。
・HTML
・CSS
・ Java Script
・ jQuery
・ Ruby
などのWeb関連の技術を体系的に学べます。
またチームでホームページ作成を行ったり、ポートフォリオを作成したりできるので、実践に近い内容で現実に役立つスキルをすぐに入手可能です。
まずは無料カウンセリングを受けて、雰囲気を感じてみましょう。
まとめ
<img src=”homepage html25”>
今回はHTMLやCSSの基礎、そして実際のサンプルコードや学習方法などを詳しくご紹介してきました。
一見難しそうに見えるHTMLやCSSですが、実際に触ってみるとすんなり操作できます。最初は難しく感じるかもしれませんが、本記事のサンプルコードなどを使って感覚をつかんでみてください。
また学習サイトやプログラミングスクールを利用すれば、さらに深いHTMLやCSSなどに関する知識を学べます。「本格的にホームページ作成をしたい」という場合は、ぜひ利用してみてください。