ホームページを作ってみよう第1回

ホームページを作ってみよう第1回

ホームページ(webページ)作成の流れ

当教室ではホームページ(ウェブ)制作用のYouTube動画をアップしております。そのアップ済みの動画のテキストがほしいと御要望がありましたのでテキスト化して公開したいと思います。

ご興味ございまいたら動画と合わせて下記も勉強にご活用下さい。無料体験を受講された方には紙ベースのものをお渡ししております。

無料体験のお申込はこちら

ではまず、webページを制作していく上で必要なものが下記になります。

  1. テキストエディタ
  2. ブラウザ
  3. その他(FTPソフト、画像編集ソフト、サーバー等)

後はHTMLとCSSに基本的な知識があれば大丈夫です。

現在は様々なサービスがありHTMLやCSSの知識がなくてもwebページを作る事は可能です。しかし、HTML+CSSはwebページを作る上で基本中の基本なのでウェブページのビルダーソフトやwebページ制作用サービスを利用される方も是非知っておいていただきたい知識になります。

特にHTMLテンプレートやwordpressなどのサービスを利用してweb制作をお考えの方などは要注意です。こういった基本を抑えずに作ろうとして結局壁にぶつかって挫折した。と言う声を当教室の生徒さんからも聞きます。

HTML+CSSの基本は決して難しいものではないので初めから諦めずに挑戦してみて下さい。

では上記について順番に説明です。

1.テキストエディタとは・・・

テキストエディタとは文字情報(テキスト)のみのファイルを作成・編集・保存するためのソフトウェアのことです。例えば、Windowsのメモ帳やMacのテキストエディットなどがあります。Web作成ではコーディングをする際に使用します。メモ帳やテキストエディットを使用してコーディングをすることも可能ですが、利便性等々の面からもその他のソフトが使われます。
例・・・Windowsの場合はTeraPad.サクラエディタ、EmEditor等
Macの場合　mi,CotEditor等
その他にも有料で高機能なものなど多数あります。
データを保存する際には文字コードの選択を忘れないようにして下さい。
文字コードは「utf-8」を選択下さい。
また「UTF-8」（BOM）ありと、「UTF-8N」（BOMなし）が選択できる場合は「UTF-8N」を選択して下さい。

ブラウザ（ウェブブラウザ）とは・・・

ブラウザとはサーバーと通信してデータを取得し、データを解析して、表示させるものです。ブラウザはインターネットをする人にとっては身近なものなのですぐにイメージつくかと思います。インターネット＝ブラウザ（Internet Exploere）と思われている方もいらっしゃいますが​ブラウザにはいくつかの種類があります。
代表的なブラウザとしては以下のようなものがあります。

  • Mozilla Firefox
  • Google Chrome
  • Internet Exploere
  • Opera
  • Safari

ＨＴＭＬとは・・・​

さて続いてはHTMLです。名前を見ただけで拒否反応を起こす人もいるかもしれませんがHTMLとはHyperText Markup Languageの略でWebページを作成するために開発された言語です。​インターネット上に公開されているウェブページのほとんどはこのHTMLで作成されています。​
WEBページを作成する上でHTMLがまず土台となります。​テキストエディタなどで作成したHTMLのコードを保存するときは拡張子を「.html」として保存しなければなりません。​保存したHTMLファイルをダブルクリックするとブラウザで開くことができます。​

ＨＴＭＬの基本構造

HTMLのコードを書いていくにあたって最低限のルールがあります。これが書けていないと、きちんと表示されなかったり、文字化けして表示されたりすることになります。​
<html>～</html>で全体を囲ってあげる。​これはこの範囲内はHTML文章であることを示します。
始めにDOCTYPE宣言をする。​DOCTYPE宣言とはHTMLのバーションと文書の型を定義してあげることです。
<head>～</head>内にページの設定情報を記述する。​　例）<meta charset=””>,<title>～</title>等​
<body>～</body>内にブラウザに表示される内容を記述する。
このあたりの書き方は決まっているので毎回毎回打ちこまなくてもコピペして使いまわしできます。
下記をコピペして使っていただいても結構です。

ＨＴＭＬの基本構造コード例

<!DOCTYPE html>​
　<html lang="ja">>
　　<head>​
　　　<meta charset="utf-8">​
　　　<title>ＷＥＢページを作ってみよう</title>​
　　</head>​
    <body>​
   　 このbody内に書かれて内容（コンテンツ）が​
　　　ブラウザに表示されます。​
    </body>​
</html>

ＨＴＭＬタグの要素

HTMLタグとは<タグ名>の記号に囲まれた半角英数字のことです。​
この中のタグ名が命令となってHTML構造を作っていきます。​
基本的にタグは開始タグ（<タグ名>）～終了タグ（）で囲まれています。終了タグがないものもあります。​
また、この開始タグと終了タグで囲まれた全体のことを「要素」といいます。​

基本的なＨＴＭＬタグの種類と意味

HTMLのタグには種類によってそれぞれ意味があり、適切に使うことが求められます。
基本的なものが下記になります。

HTMLの基本構造を定義するためのタグ

  • <html>～</html>​
  • <head>～</head>​
  • <body>～</body>​
  • <header></header>
  • <footer></footer>

タイトルをつけるためのタグ

  • <title>～</title>

セクションを表すためのタグ

  • <article>～</article>
  • <aside>～</aside>
  • <nav>～</nav>
  • <section>～</section>

テキストに意味付けをするためのタグ

  • <h1></h1>
  • <h2></h2>
  • <p></p>
  • <address></address>

実際にタグの意味をふまえながらコードを書いてみよう

下記が実際にタグの意味を考慮しながら書いたコード例です。始めて見る方は・・・難しいそう。と感じるかもしれませんが、基本的に下記の内容はテンプレートなどでも既に書かれているものになるのでどういった意味かと言うことさえ抑えていれば大丈夫です。まずはなんとなくでも理解できることが重要です。

<!DOCTYPE html>​
　<html lang="ja">​
　　<head>​
　　　<meta charset="utf-8">​
　　　<title>タイトルを書く</title>​
　　</head>​
　　<body>​
         <article>内容が独立したコンテンツを入れる ​
　　　   　   <header>トップの見出しやロゴ、ナビゲーションなどを入れる。​
　　　       　　  <h1>大見出しを入れる</h1>​
                   <nav>​
　　　     　 　   ナビゲーションを入れる​
                   </nav>​
　　　       </header>​
             <section>文書中の章や説などのまとまりを表す。見出しなどをいれる。​
　　　　　　　　　　<h2>見出し</h2>​
　　　　　　　　　　<p>段落を表す</p>​
             </section<​
             <aside>メインのコンテンツとは関連の薄いコンテンツ（内容）を表す。​
　　　　　　　　　　<p>段落を表す</p>​
             </aside>​
             <footer>主にそのページの著者についての情報や著作権表示、ページリング等​
                  <adress>連絡先に関する情報</adress>​
　　 　　         <small>著作権表示</small>​
             </footer>​
         </article> ​
     </body>​
</html>​

webページ制作の流れ

最後にwebページを作るうえでの基本的な流れを見ていきましょう。すぐにコードを書き始めるのではなくまずはどういったサイトを作りたいか計画をたてることから始まります。

  • サイトの目的を決め、サイトマップを作成する
  • ワイヤーフレームを作成、デザインを行う
  • HTML/CSSでコーディングを行う
  • 様々なプログラムを追加。
  • サーバーにデータをアップロードしてウェブサイトを公開する

それぞれの詳細については今の所、特に意識しなくて結構です。
では第二回目以降はCSSの基本やもうちょっとHTMLについても勉強していきましょう。

クイックウェブサイトはこちら