ホームページ作成の勉強

【自分で作る】1時間でホームページ作成を学ぶ

HTMLで作るホームぺージは「テキストエディタ」とデータを保存する「場所」があれば作ることが出来ます。 ここではHTMLサイトの作り方について解説していきます。

はじめに。「テキストエディタ」を準備してHTMLを入れる

まずはテキストエディタを自分のパソコンに導入しましょう。 テキストエディタであればどれでも問題ありません。

テキストエディタについては「秀丸エディタ」や「Notepad++」など様々な種類がありますので、 自分が好きなエディタをダウンロードして使いましょう。

実はWindowに付属している「メモ帳」も簡易エディタなので、メモ帳でも作れます。 このホームぺージもメモ帳で作っています。 簡易な反面、デメリットがあるので出来れば他のテキストエディタを導入しましょう。

私的には「NoEditor」で充分だと思います。

自分のパソコンがあればホームぺージは作れる

テキストエディタで「HTMLファイル」を作ればそれだけでデータは完成します。

自分のパソコンでファイルを開けば、作ったホームぺージを見ることが出来ます。 (インターネットで誰にでも見れるようにするにはレンタルサーバーを借りましょう)。

1.テキストエディタを準備しよう

テキストエディタの種類はたいへん多く「Visual Studio Code」や「Atom」「秀丸エディタ」「NoEditor」 など数十種類を超えています。これらの多くは無料でインストールすることが出来ます。

人気のエディタになるとコーディング(記述)した際に「f」と打つだけで「font color」といったように 補完オプションでより簡単にコーディイングできるようになっています。

テキストエディタ一覧
visualstudio Microsoftが提供する高機能なテキストエディタ。無料で使えます。
サクラエディタ 日本製で無料で使えるテキストエディタ。
Notepad++ 海外製の無料テキストエディタで人気。最近日本語化に対応になったようです。
秀丸エディタ 有料のエディタながら人気があるテキストエディタ。年間ライセンスは4,000円ほどになります。

2.「index.html」を作ろう

ホームぺージを作る時にまず大切になるのがメインページとなる「index.html」のデータになります。

テキストエディタを開いてHTMLをコーディングしたものを「名前を付けて保存」で「index.html」とリネームして保存すれば ファイルが作れます。

HTMLファイル

本で言うとページを構成する部分がHTMLファイルです。本の場合1ページ、2ページ・・・となりますがHTMLファイルであれば 「01.html」、「02.html」のような書き方でページを作成していきます。 「01.html」「02.html」といったように数値を使うこともありますが、 実際には「domain.html」とか「howto-homepage.html」のように英語などで意味を持たせてネーミングすることが多いです。 ちなみにこのホームページは50ページ以上から構成されていますが、ページ数と同じだけのHTMLファイルがあると思ってください。

そしてHTMLファイルでは主に、「HTML」と呼ばれるタグと、文章などのテキストを書くことになります。 ここで書いた文章がホームページの内容として表示されることになるんです。

スタイルシート

一方、スタイルシートは本でいうとデザインや装飾を担当する部分にあたります。 例えば文字の大きさや色。見出しのデザイン。余白をどれくらいの幅で指定するのか。など 細かいデザインを決めることができます。

「style.css」のように拡張子が「.css」になります。 当サイトではPC用とスマホ用の2ページ分のスタイルシートを作成しています。 すべてをまとめて1ページだけで作成するサイトもあるでしょうし、内容が多くなるようであれば数ページにわけて作成する場合も多いです。

imageフォルダ

3つ目に紹介するのは「imageフォルダ」です。これは画像置き場だと思ってください。 ホームページ作成では画像を使うことが多いですが「image」とネーミングしたフォルダを作り、画像の置き場を作るのが一般的です。

2.ファイルの作り方

次に「index.html」と「style.css」を実際にどのように作っていくのか、その方法を説明したいと思います。

index.html

index.htmlのようなHTMLファイルを作るには、エディタソフトにHTMLを入力する必要があるのですが、 初めてだとなにをどう書けばいいのかわかりませんよね。

そこで必要最低限、これだけ書いていればページ表示が出来るHTMLのコードを紹介してみたいと思います。 これをコピペしてテキストエディタに添付すれば、後は「名前を付けて保存」でindex.htmlとして保存すればファイルの完成です。

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3.  <head> ←ヘッダーではタイトルやメタタグなどを記載します。
  4.   <meta charset="UTF-8">
  5.   <title>ページタイトル</title>
  6.  </head>
  7.  <body> ←bodyタグからページに表示される部分です。
  8.   <h1>見出し</h1>
  9.   <p>Pタグには文章を書きます。ここに文章を書きます。</p>
  10.  </body>
  11. </html>

10行ほどのコードになっていますが、このデータを使えば「このように表示されることになります

文字だけのシンプルなページとなっていますが、この状態からスタイルシートを使って文字の色や大きさ、余白などデザインを指定していく形になります。

style.css

スタイルシートもHTMLファイルと同じくテキストエディタにデータを書き込む形になりますが、書き方がちょっと変わります。 こちらも下のデータをコピペしてもらってstyle.cssと名前を付けて保存すれば使えます。

  1. body {  ←body全体に指定をします。
  2.    margin: 50px; ←余白を50px取る
  3.    background-color: #FCFFF5; ←背景色の指定
  4. }
  5. h1 { ←h1に対して指定をします。
  6.    text-align: center; ←h1の文字をセンタリング
  7.    color: #32A130; ←文字の色を指定
  8. }
  9. p { ←Pタグに対して指定をします。
  10.    background: linear-gradient(transparent 0%, #ffff66 30%);
       ↑文字背景を黄色に
  11.    font-weight: bold; ←文字を太くする
  12. }

スタイルシートで色や余白を指定したページが「こちらのページになります

実際に作成するHTMLファイルやスタイルシートはもっと複雑なものになると思いますが、今回紹介した最低限のコードでも リンク先のようにしっかり表示することができます。

以上でデータの作成は完成です。後は作ったデータをサーバーへ移動させれば、ホームページが見れるようになります。

3.ファイル階層

ファイル階層については、始めての時点で覚えていなくともホームページは作れます。 ただ階層の概念を知っておくと、後々ものすごく楽になりますので説明してみたいと思います。

さきほどホームページ作成にはドメインという住所が必要になるということを説明していますが、 この住所と大きく関わってくるのがファイル階層です。 まずは当サイトのドメインを紹介します。

  • http://www.domain-easy-study.com/
    ・・・これがTOPページ(index.html)の住所です。

例えばホームページの説明をするために「homepage.html」とネーミングされたHTMLファイルを作ったとします。 この場合、住所は次のようになります。

  • http://www.domain-easy-study.com/homepage.html
    ・・・これが「homepage.html」の住所です。

仮にホームページの説明をするために30ページ分のHTMLファイルを作ったとします。 この場合は例えば次のようになります。

  • http://www.domain-easy-study.com/homepage.html
  • http://www.domain-easy-study.com/homepage01.html
  • http://www.domain-easy-study.com/homepage02.html
  • http://www.domain-easy-study.com/homepage03.html
  • http://www.domain-easy-study.com/homepage-desing.html
  • http://www.domain-easy-study.com/homepage-color.html
  • http://www.domain-easy-study.com/web-creat.html
ページを整理したい場合はフォルダを追加します。

あまりにもページが多くなってしまった場合や、新しく違うテーマのページを追加したい場合などにどうするのかと言うと 新規フォルダを作成するのが一般的です。 例えばこのサイトであればテーマごとに「domain」「mail」「homepage」などたくさんのフォルダを作っています。 このフォルダをはさむことで住所の階層が2階層になります。

ちなみに、このページは「homepage」フォルダの中に「howto-homepage.html」として格納されています。 この場合、住所は次のようになります。

  • domain-easy-study.com/homepage/howto-homepage.html

住所(URL)が長くなっているのがわかると思います。

では、さらに「homepageフォルダ」の中に「seoフォルダ」や「blogフォルダ」を作成したとします。 この場合、階層は3階層となり住所(URL)もさらに長くなります。

  • domain-easy-study.com/homepage/seo/howto-seo.html
  • domain-easy-study.com/homepage/blog/howto-blog.html

これがファイル階層の概念です。

作ったデータを公開する。

ドメインとサーバーの用意ができて、データの作成が完了すれば残すはデータを公開する作業だけです。 この時点ではデータは皆さんのパソコンの中にありますが、これをサーバーに移動させる必要があります。この作業をアップロードと言います。 そしてデータの移動(アップロード)を行うにはFTPソフトと呼ばれる転送ソフトを使います。

FTPソフト(FFFTP)

データを転送してくれるFTPソフトは何種類もあるのですが、ここでは代表的なソフトを1つだけ紹介してみたいと思います。 私も実際に使っているソフトになります。

このソフトの説明や使い方については別のページで詳しく紹介をしています。

かけあしで1からホームページを作成する手順を説明してきましたが、これまでの手順を踏むことでホームページは完成となります。

【応用編】その次のホームページ作成

基礎編で説明したことを実践することで、最低限ですがホームページを公開することができます。 応用編ではこの先、もう少し踏み込んでホームページ作成をすすめたい場合に知っておくと役立つ知識を、本当にさわりだけですが説明してみたいと思います。

スマホ対応ページを作るには?

iphoneなどのスマホが登場したことによりスマホからの訪問者が大変増えてきているのが現在です。 事実、私が運営しているサイトではPCよりスマホからの流入が多いサイトのほうが多いです。

スマホに対応したページを作る場合、主な考え方として3通りあります。

方法その1.スマホ専用のページを作成する

1つはPCとは別にスマホ専用のページを作るやり方です。この場合、同じページであってもPC用・スマホ用のHTMLファイルが必要になりますので手間がかかります。 ただ専用のページを作るので次に紹介するレスポンシブデザインによるやり方よりも、よりスマホに最適化したものが作ることが可能です。

方法その2.レスポンシブデザインで作成する

2つ目のやり方はレスポンシブデザインと呼ばれる方法です。当サイトはこちらを採用しています。 これはどういうことかと言うと、HTMLファイルは1つのみ。その代わりスタイルシートはPC用とスマホ用にわけて表示を切り替えるというやり方です。 HTMLファイルの作成が1つで済む分、レスポンシブでの作成は作業の負担が少ないです。 その代わり少し複雑な表を作ったりするととても見難くなったりするので、専用ページを作るのかレスポンシブを作るのかは、サイトの内容や作業量との兼ね合いの判断になると思います。

方法その3.PC用のサイトをそのまま表示させる

3つ目のやり方はPCページのみを作って、そのまま何も対策せずスマホで表示するというやり方です。 スマホには拡大機能がありますので、その機能を使ってホームページを見る方も多いです。 いまでは大きなサイズのスマホも以前より画面が大きいため、無理をして最適化する必要がない。と言う考え方もあります。

ホームページ作成を1から始めて、さらにスマホ対応を行うにはとても学習量がかかってくると思いますが、 いずれ取り組むことかもしれませんので、それぞれの特徴を覚えておいても損は無いと思います。

  1. スマホ専用ページを作る
  2. レスポンシブデザインで作る
  3. PCサイトをそのまま表示する

テンプレートでおしゃれなホームページを作る

ホームページを作る方の希望として、自分の思うようなデザインを実現させたいという気持ちが強いと思います。 そのためにはHTMLやスタイルシート、フォトショップなどの画像編集ソフトの勉強をしなくてはいけないわけですが、やはりこれも時間がとてもかかってしまいます。 そこで紹介したいのが「テンプレート」です。テンプレートを使うことですでにデザインが完成された状態でホームページを作ることができます。

仕事にも使える!おしゃれで超簡単なホームページテンプレートまとめ

簡単にホームページを作るサービスのまとめ

テンプレートもそうですが、今では自分で1からHTMLやスタイルシートの勉強をしなくても、簡単にホームページを持つことが出来るようになっています。 これから作ろうとしているサイトが、今回紹介しているサービスで代替できるのであれば検討してみてもいいかもしれません。

【超かんたん】ホームページが1時間~1日で作れるホームページ作成ツールまとめ