①
ホームページを作成するためのフォルダーを作成しなければ始まりません。
デスクトップ画面の空きスペースを右クリックで写真の画面に。
※以下背景はご自身のものと異なります。また、プライバシーのため一部ぼかしにしてあります。
自主制作
自分で制作したい方のためにマニュアルをご用意しました。
1限～4限目に分けて最短1日で基本のHPが制作できるようにしました。
2時限目:ホームページのひな形・ワイヤーフレームの作成
★ホームページのひな形★
基本のHP(html)をコピー＆ペーストすればできます。
基本のHPのコピー＆ペーストはこちら↓↓↓
※はみ出して表示された場合、左右にスクロールすることで確認できます。
※コビー＆ペーストできる部分は黄緑色で囲んだ部分（html,cssなど）で囲んであります。
※赤字の部分は変更OK
| <!DOCTYPE html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title>自分のホームページ</title> </head> <body> <header> <h1>ホームページ制作おめでとう！</h1> </header> </body> </html> |
上記HTMLはホームページを作成する際の全ページ共通の部分です。html・CSSに関してはコピー＆ペーストすればOKです。
どこにペースト（記述）するのか？
その前に必要フォルダーなどを作成しなければHPを作成していけませんので手順を案内します。
≪準備 ―フォルダー作成－≫
html・cssで構成していく前に、必要なフォルダーから説明。
※各手順にある画像はクリックすると拡大表示されて見やすくなります。また、必要箇所にはわかりやすいよう色枠で囲んだり、マーカーして表示。
②
「新規作成」→「フォルダー」へと。
③
「新しいフォルダー」の名称を変更。→今回は「SAMPLE」と。
※万が一「新しいフォルダー」の選択が外れた場合は、右クリックして「名前の変更」から名称変更をする。
★ここまでで、HPを作成するためのパーツをまとめる箱ができたとイメージしてください。
≪準備 ―テキストファイル作成－≫
続いて、先ほど作ったフォルダー(箱)の中に、テキストファイルを作成。ここにHTMLを書き込んでいきます。
①
「SAMPLE」のフォルダーをダブルクリックして開く。「このフォルダーは空です。」の画面になればOK。
②
「このフォルダーは空です。」の空き画面を右クリック。「新規作成」→「フォルダー」と進む。
③
「新規フォルダー」の名称を、今度は「sample」とします。
★今後「Sample」のフォルダーにHPに必要な情報(html,css等)を記載していく。
④
「sample」をクリックして開く。
「新規作成」→「テキストファイル」と進む。
※htmlを記載してくためのノートです。
⑤
「新規テキストドキュメント.txt」の名称を、今度は「index.txt」とします。
⑥
このまま「index」を開くとメモ帳が開き、htmlを記述するのには適していません。cssの記述なら問題ありません。次にてhtmlを記述するCrescent Eveの開き方他を案内します。
⑦
「index」を左ワンクリックして選択し、右クリックして開き、「プログラムから開く」→「Crescent Eve」と進む。
※「Crescent Eve」がない方は、今一度ひとつ前のページ「事前準備」を読んでいただきダウンロードしてください。
⑧
テキストドキュメントの状態では使えないため、html形式での保存をしましょう。「[EOF]」が出ている画面で、左上「ファイル」→「名前を付けて保存」を選択。
⑨
ファイルの種類「HTML...」→「保存」
⑩
不要なフォルダを削除しましょう。「テキストドキュメント」→右クリック「削除」
⑪
この段階では何も記載されいないindexが基本になるため、コピー＆貼り付けをしておきましょう。
★これで、HTMLを記載できるフォルダー完成。その都度コピペをして名前を変更して保存してページを増やしていきます。
⑫
説明は後々するとして、必要となる「css」「base」「images」「js」の4つのフォルダーを作っておきましょう。
空きスペースで右クリック→「新規作成」→「フォルダー」の順。
このままでは中身が空っぽなので、htmlを記述していきましょう。どうぞ、下の基本のHPのhtmlをコピペしてください。もちろん慣れたら追記したりして編集していけばいいですから。
基本のHPのコピー＆ペーストはこちら↓↓↓
※スマホの場合ははみ出して表示されますが、左右にスクロールすることで確認できます。
※コビー＆ペーストできる部分は黄緑色で囲んだ部分（html,cssなど）で囲んであります。
※赤字の部分は変更OK
| <!DOCTYPE html> <html lang=”ja”> <head> <meta charset=”UTF-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1.0> <title>自分のホームページ</title> </head> <body> <header> <h1>ホームページ制作おめでとう！</h1> </header> </body> </html> |
★練習★
①
先ほど作成したindexのhtmlファイルを開いて上記htmlをコピペ・上書き保存してみましょう。
②
Google Chromeを開いて（「index」を右クリック→「プログラムから開く」→「Google Chrome」）確認。同じ画像（「自分のホームページ」「ホームページ制作おめでとう！」の文字）が出てきたら作成完了。
※文字の色や配置などはこの段階で気にしないでください。
解説していきます。
| DOCTYPE | HTML文書のバージョン情報をあらわすもの。いくつか種類がありますが、現在なら最新版のHTML5を選びましょう。 |
|---|---|
| html | HTML文書の先頭を表す。 |
| head | ヘッダ情報を記述する部分で、実際のホームページには非表示。 |
| UTF-8 | 文字コードの指定す。HTML5のバージョンで利用する場合は、文字コードは基本的には「UTF-8」を選択。他の文字コード（Shift_JISなど）を使用することも可能。文字化けを防ぐためにも、一番最初（head開始タグの次）に設置することが望ましい。 |
| viewport | スマートフォンなどPC以外のデバイスも対応するなら必須。 |
| keywords | Webページのキーワードを記述するmetaタグですが、SEO対策として用いられる目的が多い。ただし、それも現時点ではあまり効果がないとも言われているため、簡単に設置する程度でOK。 |
| description | Webページの説明文を記述するmetaタグ。こちらもSEO対策として用いられる目的が多く、Googleなどの検索結果ページも表示される部分で、非常に重要。 |
| title | 必須。ブラウザの上部にも表示され、SEOの意味合いも非常に重要で、わかりやすいタイトルを付けるように心がける。 |
| IEのHTML5対策 | IE8以前はHTML5に対応していないので、HTML5のコードを記述すると正常にWebページが読み込まれない可能性があり。それを回避するためのJavaScript（Google配布が便利）を読み込む。 |
| ファビコン | ブラウザのタブなどに表示されるアイコン。設置しなくてもよいですが、あるほうが区別ができてユーザビリティー的には良い。 ※上記基本のhtmlには記載されていません。 記載するなら、<link rel="shortcut icon" href="./images/***.ico" type="image/x-icon"> ***にはfavicon制作サイトで出来た名前(HPごとにfavicon1,favicon2・・・) |
| CSSの読み込み | 外部スタイルシートの場所を指定。 |
| JavaScriptの読み込み | 外部JavaScriptの場所を指定。 |
| コンテンツを記述 | bodyタグ以降にコンテンツを記述し、bodyタグとhtmlタグを閉じる。 コンテンツ部分はサイトによって異なるのですが、ヘッダ部分とコンテンツ部分、フッター部分はどんなサイトでも必要。 ヘッダー部分には「header」タグを、メニュー部分には「nav」タグ（なくてもOK）を、フッター部分には「footer」タグを利用することをお勧め。 |
★ページのワイヤーフレーム作成★
Webページ内で要素をカテゴライズすることをワイヤーフレーム（枠組み）と言う。つまり、ヘッダ部分やメニュー部分、サブメニュー部分にわけ、<div>～</div>タグで囲む。
ワイヤーフレームにはidとclassで名前を付けることが出来る。
一般的にはカテゴライズして1回のみ出てくるものにはidで名前を、複数回出てくるものはclassで名前を付けます。
また、合わせて確認しておきたいのが、よく出てくるタグ。主なものを一覧にしてみましたが、他にも沢山あるので「HTML タグ」のように検索してみてください。
| <h1>～</h1> | 見出しを表す。h1…h6まであり、数字が大きいほど小さな文字になる。 |
|---|---|
| <p>～</p> | ひとつの段落 |
| <dl>～</dl> <dt>～</dt> <dd>～</dd> |
dl：記述リスト dt:用語 dd:説明 |
| <ol><li>～</li></ol> <ul><li>～</li></ul> |
ol:順序あるリスト ul:順序のないリスト |
| <u>～</u> | 下線を引く。 |
| <em>～</em> <i>～</i> |
どちらも斜体になり、<em>～</em>の方が強調される。 |
| <strong>～</strong> | 先ほどの<em>～</em>より強い強調。 |
| <font color="色">～</font> | 色はカラーネーム（red,blue等）または、カラーコード（#F0000,#0000FF等）で。 |
| <font size="">～</font> | 1～7で表し、数字が大きいほど文字サイズが大きい。 |
| <big>～</big> <small>～</small> |
<big>～</big>で文字を大きくすることができる。 <big><big>～</big></big>と重ねればさらに大きくなる。 <small>～</small>で文字を小さくすることができる。 <small><small>～</small></small>でさらに小さくなる。 |
| <address>～</address> | 住所に限らず、ホームページのリンク先・メールアドレス・住所・電話番号・FAX等 連絡をとるために必要な情報を記述。 |
| <span>～</span> | 囲まれた部分にスタイルシートを適用したりするのに用いる。 <div>～</div>と似ているが、divはブロック要素(前後に改行がはいる)の汎用的なタグ、spanはインライン要素(前後に改行が入らない)の汎用的なタグ。 |
他にも無数にあるので追々覚えていきましょう。
↓ 当サイトの3サービス ↓
