IT Pocket 
今このページを見ている方々は、
- プログラミングを学びたい
- プログラミングを学び始めた
- ITスキルを身に付けたい
といったことをきっかけに、ホームページの作り方を調べているのではないでしょうか。
この記事を読めば、初心者もしくは未経験のあなたでもホームページを作ることができます。是非実践してみてください。
ホームページの作り方
まずは実際にホームページ作りを体感してもらいましょう。
サンプルコードでホームページを作る
- エクスプローラーを開きます
- 右クリックで新規作成からメモ帳を開きます
- メモ帳に下記のコードを貼り付けます
- 拡張子をhtmlにして保存します
- GoogleChromeのブラウザを開きます
- GoogleChromeのブラウザのタブに、今作成したhtmlのメモ帳をドラッグアンドドロップします
- そうするとホームページのものすごく簡易的なものが表示されます
- メモ帳に戻って、日本語の文字を好きな文言に変更します
- 変更したら保存します
- 保存したら先程のGoogleChromeのページに戻って、画面を更新します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Profile</title>
<meta name="description" content="テキストテキストテキストテキストテキストテキストテキストテキスト">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header" class="wrapper">
<h1 class="site-title">サンプルホームページです</h1><br><br>
<nav>
<ul>
<li><a href="#about">リンク1</a></li><br><br>
<li><a href="#bicycle">リンク2</a></li><br><br>
</ul>
</nav>
</header>
<main>
<h2 class="section-title">サンプルホームページです</h2><br>
<div class="content">
<div class="text">
<h3 class="content-title">名前を入力しよう</h3>
<p>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト<br>
テキストテキストテキストテキストテキストテキストテキスト
</p>
</div>
</div>
</section>
</main>
<br><br><br>
<footer id="footer">
<p>2022 Profile</p>
</footer>
</body>
</html>
おそらく、分からない単語が手順の中でいくつか出てきましたよね？
それらは是非、Googleで検索してみてください。いわゆる「ググる」というのがGoogleで検索することなのですが、初心者で一番大事なことはググることです。
ググることで、自己解決能力が高まり、IT人材としての基礎が出来上がってきます。
ネット上には必ず初心者が解決したいような内容は山ほど落ちていますので、検索して解決しましょう。
サンプルコードの表示結果を確認する
このように結果が表示されれば、課題クリアです。
これがホームページを作る入口となります。
今作成したのは、HTMLというファイルで、そのHTMLファイル内で指示した結果が表示されている状態です。
文字を修正して保存して、画面を更新すれば、その内容が反映されます。
ただ、この状態はとても簡素なもので、色も画像も何もない状態ですよね。追加して、サイトを華やかにするために必要なのが、CSSというファイルです。HTMLは画面に文字を表示させ、CSSはHTMLに対して、色付けや画像の挿入、文字の大きさの変更、背景色の変更など、装飾をするものになります。
なので、あなたはこのHTMLとCSSを使うことができるようになると、ホームページを作ることができるのです。
HTML ホームページ サンプル
上記を検索すると、サンプルのHTMLファイルが配布されているので、それをDLして先程と同じやり方で試してみましょう。
なお、この際まとめて様々なファイルがDLされることもありますが、GoogleChromeで表示させるのはHTMLファイルです。そのほかのファイルは、HTMLに装飾するためのファイルなので、あくまで表示させるページはHTMLになります。
ホームページを作る様々な方法
ホームページの作り方は、様々な方法があります。作成するホームページの目的やあなた自身のスキルレベルなどを考慮して、適切な方法を選択することが重要です。
まずは、ホームページを作成するにあたり、必要な準備を行います。
- HTMLとCSSを使用して手動で作成する方法：HTMLとCSSを使用して、Webページのデザインや構造を決めます。
- コンテンツマネジメントシステム（CMS）を使用する方法：CMSとは、Webページの作成や管理を行うためのシステムです。CMSを使用することで、Webページの作成や更新が簡単に行えます。
- テンプレートを使用する方法：Webページのテンプレートを使用することで、Webページを簡単に作成することができます。テンプレートには、デザインや構造がすでに決められているため、ホームページを作成する際に手間がかかりません。
- ビルダーを使用する方法：Webページビルダーとは、Webページを簡単に作成するためのツールです。ビルダーを使用することで、ホームページを作成するための知識やスキルが必要なくなります。
先程試してもらったのは1のHTMLとCSSを使用する方法の、HTMLのみを試してもらいました。
HTMLとCSSをマスターすれば、普段見ている様々なホームページとほとんど同様のモノが作成できます。
ただ、HTMLやCSSを学ぶのが難しい、学んでやってみたけどうまくできなかったという人は、２のCMSを使用する方法がおすすめです。
CMSの種類
CMSとは、コンテンツ管理システムの略で、ウェブサイトやブログなどを作成・管理するためのシステムのことです。CMSにはさまざまな種類がありますが、一般的には以下のようなものがあります。
- WordPress（ワードプレス）：世界で最もポピュラーなCMSで、無料で使用できるブログ作成プラットフォームです。
- Joomla：無料で使用できるCMSで、拡張性が高く、複雑なサイトを作成することができます。
- Drupal：オープンソースのCMSで、コミュニティによる開発が活発で、多くのサイトに採用されています。
- Magento：eコマース向けCMSで、拡張性が高く、複雑なショッピングサイトを作成することができます。
- Wix（ウィックス）：Wixでは、eコマース機能を利用したオンラインショップの作成も可能です。
これらのCMSは、サイトを作成するためのテンプレートやプラグインが豊富に用意されており、サイトをカスタマイズすることが容易にできるため、ホームページ作成の初心者にも扱いやすいです。また、ほとんどのCMSはオープンソースであり、無料で使用することができます。
ただ、これらのCMSの中でおすすめするのは間違いなく1番のWordpressです。
実はこのサイトもWordpressで作成されています。
WordPressは日本語の参考ページが多くウェブサイト上に存在しており、カスタマイズ方法も分かりやすいので、初心者には間違いなくお勧めとなります。
中級者、上級者になってくると、Wordpressのカスタマイズをすることができ、その際にHTML・CSS・PHP・Javascriptといったプログラミング言語を使っていきます。
WordPressの始め方
WordPressを使うには、下記3つが必要となります。
- サーバー（有料）
- ドメイン（サーバー契約に含まれる無料ドメイン有り）
- WordPressテーマ（無料と有料あり）
サーバーとは
サーバーとは、コンピューターを一般に指すもので、特定の目的や機能を持ったものを指します。サーバーは、一般的には、クライアントと呼ばれる端末からの接続要求を受けて、必要なデータや情報を提供することを主な役割としています。サーバーは、Webサーバーやデータベースサーバーなど、さまざまな種類があります。Webサーバーは、Webページをホストするためのサーバーで、クライアントからの要求に応じてWebページを提供します。データベースサーバーは、データを保存して管理するためのサーバーで、データベースをホストします。サーバーは、クライアントとの接続を介して、データや情報を提供することにより、さまざまなサービスを提供するために使用されます。
