makinghp
テキストエディタで作成
◆ ここでは、テキストエディタで、HTML(XHTML)とCSSを使って、ホームページ(WEBページ）を
HPの作成手順
１．テキストエディターを１つ準備する。
まず、テキストエディタを準備しましょう。
テキストエディタとは、一般的な文章やHTML等プログラムコードなどを書くことのできるテキスト編集ソフトです。余計な装飾機能はありません。
マイクロソフトのWORDが備えている「図表や罫線や色彩など見栄えのよい装飾機能」はなく、純粋にテキスト文書のみを作成編集する専用ソフトウエアです。
HTMLファイル（拡張子「～.html」）として保存したり、
style宣言のルールセットを記述したテキストをCSSファイル（拡張子「.css 」）
として保存したりできます。
一般的に、どんなテキストエディタがあるのかを知りたいのであれば、Google検索機能を使って、検索窓に「無料テキストエディタ」という複合キーワードを入力して、リターンキーを押せば、無料テキストエディタを多数発見できます。
その中から、好きなものを選び、ダウンロードし、インストールして、自分のパソコンのデスクトップにそのアイコンを表示させておいてくださいね。
テキストエディタには、例えば、次のようなものがあります。
サクラエディタ、 ez-HTML、 gedit、 など。
これらの中から使いやすい自分の好みを1つ選びましょう。
（ちなみに私はサクラエディタを使っています。）
２．ホームページのレイアウト、構成を決める。
テキストエディタが決まったら、次は、
ヘッダー、ナビメニュー、サイドメニュー、コンテンツ、フッターなどの枠組みを設けます。
更に、参考資料として ：全体構成枠の作り方（ホームページの構造テンプレート）
◆ ホームページ（WEBサイト）の全体構造
ホームページの構造は次のようになっています。
《始まり》
(１)HTMLのバージョン情報を含む記述 ・・・・・【DTD（文書型宣言）】 ＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"＞
＜html＞
(２)【head要素】（ヘッド部分） ・・・・サイトに関する情報
＜head＞
＜title＞WEBサイトの作り方＜/title＞
＜/head＞
(３)【body要素】（ボディ部分） ・・・・サイト構成
＜body＞
ーーーーーーーーーーーーーーーーーー
(ヘッダーブロック)/
ーーーーーーーーーーーーーーーーーー
(インナーブロック)/
＜サイドメニュー＞＋＜コンテンツ部分＞
ーーーーーーーーーーーーーーーーーー
(フッターブロック)
ーーーーーーーーーーーーーーーーーー
＜/body＞
＜/html＞
《終わり》
＊ボディを横に3つに区切り、最上部にヘッダーブロックを作り、その中にヘッドコピー（or画像）とナビメニューを入れます。
＊ボディーの真ん中のブロックを縦に2つに分けて、左サイドメニューとコンテンツのブロックを作ります。
＊ボディの最下部のブロックはフッターブロックです。
３．エディターで、CSSファイルを作る。
拡張子は、「 ～ .css 」とする。例えば、「makehp.css」など。
● 別途にCSSファイルを作って、そのスタイルをコンテンツに適応させます。
エディタで「スタイル宣言のルールセット」を単に羅列的に記述して行くことにより、
CSSファイルができます。 参照⇒ CSSファイル
● また、別途にファイルを作らないでやる方法としては、
ヘッダー内（＜/head＞の直前）で、＜style type="text/css"＞＜!-- ～ --＞＜/style＞
の「～」の部分に、「スタイル宣言のルールセット」をまとめて記述して本文でスタイルを
適応させる方法があります。
例えば、次のように設定します。
＜head＞
・・・・・・・
＜style type="text/css"＞
＜!--
p { text-align:center;
font-size:11pt;
color:#0000ff;
・・・・・・
}
h1 { line-height:1.5em;
color:#3366ff;
border:1px solid #ff6600;
・・・・・・・・・・
}
--＞
＜/style＞
＜/head＞
● また３つ目の方法としては、
その都度必要な場面で本文のタグ要素にスタイルを直接適応させる方法があります。
上の3通りの方法の中で最も効果的なSEO対策は、最初にあげた「別ファイル」にすることです。
別途にCSSファイルを作ってそれを利用する形が、検索エンジンにとっては迷わずスムーズに
検索できるということで、最もSEO効果が高いのです。
４．エディタで、ホームページの枠組みと内容を記述する。
ホームページの枠組みは、上で紹介した構成で行うとよいでしょう。
また、メニューは、上端・下端のナビメニューと、インナーブロックのサイドメニューに書き、
記事などのコンテンツはインナーブロックのコンテンツ部分に書きます。
写真やイラストやビデオなどを作って、HTMLの中に埋め込むこともできます。
サンプルで、実際に作成の仕方を学ぶ
では、まず、実際,下記のサンプルプログラム「sample1」を見ながら、sample1と同じ
ホームページを作っていきましょう。
HTMLについては、HTMLの勉強でタグの使い方などを学びましょう。
どんなふうに書けばどんな姿になるのかを学ぶことができます。
《サンプルプログラム》
１．sample１（2カラム版） ⇔ 解説：本ページ（このページ）
２．sample２（3カラム版） ⇔ 解説ページへ！
３．sample３（左サイドメニュー部分とヘッダー部分が固定表示） ⇔ 解説ページへ！
「１．sample1（2カラム版）」をモデルにして、
実際ホームページを作ってみましょう。
sample1のページは、上から、ヘッダー部分、ナビメニュー部分、インナー部分、そして、最後に
フッター部分です。
インナー部分が、「左サイドメニュー部分」と「コンテンツ部分」の２つの部分に分かれています。
sample1の解説
sample１をクリックするとブラウザにサンプルのホームページが現れます。
その表示された画面上にマウスを乗せて右クリックするとポップアップメニューが開きます。
そのポップアップメニューの中にある「ページのソースを表示」をクリックすると、
sample１のソースコードが見られます。
これから以下の説明では、このソースコードを開いて縮小表示しておいてくださいネ。
そのソースコードを見ながら説明していきたいと思います。
(1) ホームページの構造(1),(2)の部分【DTD宣言,head要素】
◆まず、DTD（文書型宣言）部分に続き、＜html＞の開始、そして＜head＞部分と続きます。
＜head＞～＜/head＞の中に＜title＞～＜/title＞を入れます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ← DTD（文書型宣言）部分
<html xmlns="http://www.w3.org/1999/xhtml"> ← ＜html＞の開始
<head> ← ＜head＞部分の開始 <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="/sample_css_html_HP.css"> <title> ホームページの作り方</title> ← ホームページのタイトル名 </head> ← ＜head＞部分の終了
文書型宣言（DTD）の所で、このサンプルホームページは、HTML4.01の移行型（Transitional）であることがわかります。
そして
＜html xmlns="http://www.w3.org/1999/xhtml"＞の所で、
このサンプルホームページはhtmlで使うタグ以外に、xhtmlで使うタグも混在して使っていることを示しています。
＜meta＞の意味ですが、metaとは、ひとつ上の次元、ひとつ上の段階、超～、付属の、追加の、～の後に追加した、のような意味を持っています。
従って、このmetaタグは、「全体に対して追加的な情報」、「body部分に影響を与えるひとつ上の次元、立場、ひとつ上の追加的情報」という解釈でよろしいかと思います。
<meta http-equiv="Content-Style-Type" content="text/css">
ここでは、「このサイトはスタイルシートCSSを使っています。」と宣言しています。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
ここでは、「このサイトはhtmlファイルであり、文字コードはUTF-8です。」と宣言しています。
まとめると、このサンプルホームページは、
同一サイト内にある別途スタイルシート「sample_css_html_HP.css」にリンクした
html、xhtml混在型ファイルであり、使用している文字コードは「UTF-8」です。
と宣言しています。
＜link rel="stylesheet" type="text/css" href="/sample_css_html_HP.css"＞は、
CSSファイルは同一サイト内にあり、そのファイル名は「sample_css_html_HP.css」です。
そのファイルにハイパーリンクしています。という意味です。
（参考：「sample_css_html_HP.css」の中身は、このページの最下部にあります。）
スタイルシートであるCSSファイルは、hrefの"～"の中で示している「/sample_css_html_HP.css」なので、そこに飛んでいきます！そこと繋がります！
ということですね。
（「/sample_css_html_HP.css」の「/･･」の部分で、このCSSファイルは同一サイトの同一ディレクトリにあることがわかります。）
(2) ホームページの構造(3)の部分【body要素】
◆まず、「ヘッダーブロック」を見ていきましょう！
下記において、＜div＞～＜/div＞の間に挟まれた部分がブロックです。
body内にまず一番大きな外側のブロック「Wrap」( ＜div id="Wrap"＞ ～＜/div＞)をつくります。
その中に、headerブロック（ ＜div id="header"＞～＜/div＞）をつくり、
続いて＜ul＞～＜/ul＞で「ナビメニュー」ブロックを作ります。
<body>
<div id="Wrap">
<div id="header">
ここはヘッダー部分： ホームページの作り方。２カラム版です。<br />
CSS、XHTMLを利用してテキストエディタで作成します。<br /><br />
<div align="center"> ===== 画像 ===== </div>
<hr />
<ul>ナビメニュー：
<li>TOP</li>
<li>＜a href="http://michoka.jp/php_rensyu /xhtml_exercise.html"＞XHTML＜/a＞</li>
<li>CSS</li>
<li>＜a href="http://michoka.jp/php_rensyu/php_exercise.html"＞PHP＜/a＞</li>
<li>・・</li>
<li>・・</li>
</ul>
</div><!-- /header -->
<hr />
＜div align="center"＞ ～＜/div＞は、あいだに挟まれている部分を画面の中央に表示します。
alignは位置を指定する属性で、その属性値はcenter（中央）です。
ページの最上端部にある横に細長いメニューが「ナビメニュー」です。
このナビメニューの外枠は、
＜ul＞～＜/ul＞で表され、内側の各項目が＜li＞～＜/li＞で表されます。
次に、
＜li＞＜a href＝”http：//michoka.jp/php_rensyu/php_exercise.html”＞PHP＜/a＞＜/li＞
この部分は、リストの項目の「PHP」の飛び先を の部分である
http：//michoka.jp/php_rensyu/php_exercise.html
に指定しています。
＜a＞のa要素は、アンカー(Anchor）を指定する要素で、リンクを設定する場合に使います。
アンカーとはこのリンク機能で、一種の目印を提供するものになります。
リンクとは、ハイパーリンク(hyperlink）のことですが、文字や画像（イメージ）をクリックすると、
別のページや別のサイトにジャンプして表示できる機能です。
a要素の、href属性は、リンク先を指定する属性で、上記の場合の属性値は、
http：//michoka.jp/php_rensyu/php_exercise.html
ですね。
開始タグ＜a ～＞と、終了タグ＜/a＞にはさまれた要素が、
クリックするとジャンプする「リンクボタン」になります。
上記の場合は、「PHP」の部分ですね。
通常、hrefで指定するURLは、自分のサイト内へのリンクであれば、相対パスで指定し、
ほかのサイトにリンクする場合は、絶対パスで指定します。
＜br /＞はXHTMLで使うタグで、「改行」を表します。
ちなみに、HTMLでは改行を＜br＞と表しています。
XHTMLでは「改行」のような単独タグの場合は、終了タグがないので、＜br＞のタグ内に半角スペースを一個置いて「 /」を書くようになっています。「 /」は終了を表しています。
＜hr /＞は水平線（区切り線）を表示します。XHTMLで指定された形です。
HTMLでは＜hr＞と書いていました。
この他には、
＜img src＝”～” /＞ などがあります。HTMLでは、最後の「 /」がありません。
HTMLでは曖昧な表現が許されていましたが、XHTMLでは、もともとのXMLに準拠して、全体的にHTMLがやや厳密に定義し直され、改正され、HTMLの頭にXをくっつけてXHTMLとなったようです。
HTMLとXHTMLのタグは混在していても構いません。
少しずつ、HTMLから自然とXHTMLへ移行できるように、HTMLタグ文書の中に、XHTMLで定義されたタグを使っています。だから、移行型（Transitional）なのですネ。
(3) コンテンツの部分と左サイドバーの部分
下記において、重要なことは、innerブロックは、mainWrapブロックとleftsideWrapブロックの二つを包み込んでいること、floatの使い方、そしてfloatの解除の仕方と解除の場所です。
<hr>
<div id="inner">
<div id="mainWrap">
<span style="color:brown"> （コンテンツ部分）</span><br /><br />
ここは、コンテンツを書く部分です。<br />
<h1>ホームページの内容</h1>
<p>
皆さん、ホームページ作成サイトへようこそいらっしゃいました。<br />
どうぞ、ごゆっくりここで遊んでいってくださいね！<br />
</p>
<h2>具体的展開</h2>
<p>
さあ、ここからは、具体的展開に入っていきます。<br />
何が出てくるか、とっても楽しみですね！！<br />
今日は２０１２年１２月２５日です。<br />
イエス・キリストの誕生日ですね。<br />
我が家でも、イエスの誕生を祝って、家族でケーキを食べたのが昨晩のイヴでした。<br />
今日の夕食は久しぶりのカレーライスでした。<br />
私はカレーライスが大好きなので大変満足しました。<br />
みなさんは、いかがでしたか！<br />
では、またお会いしましょう！<br />
さようなら。<br />
</p>
</div><!-- /mainWrap END -->
<div id="leftsideWrap">
<span style="color:brown;font-weight:bolder;">メニュー</span>
<ul>
<li>TOP</li><br />
<li><a href=”http://michoka.jp/php_rensyu/xhtml_exercise.html”>XHTML</a></li><br/>
<li>CSS</li><br />
<li><a href=”http://michoka.jp/php_rensyu/php_exercise.html”>PHP</a></li><br />
<li>・・</li><br />
<li>・・</li><br />
</ul>
<br /><br /><br /><br /><br /><br />
</div><!-- /lefttsideWrap END -->
<div class="clear"><hr /></div>
</div><!-- /inner -->
上記の枠の中身を解説します。
上段の枠はコンテンツ部分、下段の枠は左サイドメニュー部分のコーディングです。
コンテンツ部分（mainWrap）と左サイドメニュー部分（leftsideWrap）の両方を包み込んでいるのが「inner」ブロック（ 上の枠の最初<div id="inner"> ～ 下の枠の最後</div>）です。
注意すべきことは、 <div id="mainWrap">に於いて、これは、id属性だから、スタイル宣言ルールセットのセレクタの頭に＃がつきます。
つまり、スタイルシート【 sample_css_html_HP.css 】の中では、
＃mainWrap {
float:right;
・・・ ;
}
の様に書きます。これはfloat属性の値がright（右側）だから、コンテンツを書く部分が右側に来ます。
また、同様に、メニューを書く部分は、
#leftsideWrap {
float:left;
・・・ ;
}
の様に、floatを左側に指定しているので、メニューを書く部分が左側に来るということです。
このfloatの左・右の指定は、用事が済んだら最後に解除しなくてはいけません。
その解除する場所は、2つを包み込んでいる
「inner」ブロック内の最終行、すなわちinnerブロックの終了タグ＜/inner＞の直前で解除（<div class="clear"><hr /></div>）するということです。
それをしないと、次にくるブロック部分と干渉して枠組みが乱れてしまいますからね。
ところで、コンテンツの内容は、全て、「mainWrap」の中に書き、
メニューを書く部分は、全て、「leftsideWrap」の中に書きます。
<span style="color:brown"> （コンテンツ部分）</span><br /><br />や、 <span style="color:brown;font-weight:bolder;">メニュー</span>
は一行の範囲内の文字や文章などの要素にスタイルを適用するスタイル用タグ＜span＞であり、そのスタイルの適用のさせ方は、上記のように書けば良いですね。
（注意）表記の都合上、枠の中のタグ＜ 、＞は全角で書いています。
実際のプログラムでは半角の <、> に修正してくださいね。
(4) フッターブロックの書き方
最後にフッターブロック（＜div id="footer"＞～＜/footer＞）を説明します。
<div id="footer">
最下段ナビメニュー、
コピーライトなど を記入 :
<address>Presented by michoka(e-mail:mohus＠michoka.jp)
Copyright(c)2012-michoka all right reserved
</address>
</div><!-- /footer END -->
</div><!-- /Wrap END -->
</body>
</html>
ここでは、フッターの上部に「下段ナビメニュー」を入れてもいいですが、
このsample1では、省略しています。
入れ方は、ヘッダーの中の上段ナビメニューと同じです。＜ul＞＜li＞～＜/li＞＜/ul＞を使います。
タグ＜address＞～＜/address＞のあいだに挟まれているのが、作成者、作成者のe-mail、そして著作権の明示です。
このブロックでホームページは終わりですので、最後に全体を囲っているWrapを閉じます。
そして、bodyを閉じて、htmlを閉じます。
以上で、sample1の解説を全て終了します。
お疲れ様でした!!
次の学び、⇒ sample2の解説 に行きます!!
以下は、CSSファイルです。HTMLプログラムの外部に別途ファイルとして作成します。
(5) 「sample1」の外部CSSファイル
以下に、「sample１」のCSSファイルを示します。
ファイル名は「sample_css_html_HP.css」です。
その中身は次のようになっています。
【 sample_css_html_HP.css 】
body {
text-align:center;
}
#wrap {
width:780px;
text-align:left;
margin:0 auto;
border:solid 2px #ff0000;
}
#inner {
margin:0 2px;
border:double 3px #55ffff;
background-color:#55ffcc;
}
#mainWrap {
float:right;
width:604px;
border-left:solid 1px #6655cc;
background-color:#ffffff;
padding:9px;
}
#leftsideWrap {
float:left;
width:145px;
border-right:solid 1px #00ff00;
text-align:center;
}
#footer {
width:774px;
text-align:center;
padding:2px;
border:solid 1px #000044;
background-color:#22ff88;
}
.clear {
clear:both;
}
.clear hr {
display:none;
}
#sub {
margin-bottom:0px;
}
h1 {
font-size: 1.9em;
font-family: Verdana, Helvetica, sans-serif;
color: #254;
margin-bottom:10px;
border:solid 1px #884499;
border-left:7px solid #555555;
background-color:#7ef;
}
address {
font-size:12px;
font-style: normal;
color:#3378aa;
}
h2 {
font-size: 1.35em;
font-family: 'MS Pゴシック', Helvetica, sans-serif;
color: #9922ee;
margin-bottom:10px;
margin-right:90px;
border-left:4px solid #8899aa;
border-right:2px solid #8899aa;
border-bottom:1px solid #79b;
border-top:1px solid #79b;
}
a {
color:red;
text-decoration: none;
}
a:hover {
color: #fa97ff;
text-decoration:underline;
}
address a:hover {
color: #7CBEBE;
}
ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
padding: 3px 20px;
border:1px solid #343456;
line-height:1.5em;
background-color:#f5fffa;
text-align:left;
}
ul li {
margin-left:5px;
}
li {
display:inline;
background-color:#eeee55;
color:black;
padding-left: 10px;
padding-right: 10px;
font-weight:bold;
font-size: 16px;
border:1px solid #00bfff;
}
li a {
color:navy;
text-decoration: none;
font-family: Tahoma, Georgia,Comic Sans MS;
}
p#message {
width: 300px;
margin-left: auto;
margin-right: auto;
text-align: left;
line-height: 1.3;
}
sample2の解説
sample3の解説
![[check]](image/face/check.png)
もし質問などがありましたら、遠慮なくこちらから質問してください。
可能な限り、お応えしたいと思います。
私から「即座に反応」がない場合でも、諦めずに質問してみてくだされば、必ず、お応えしたいと思います。
