このぺーじはＰＣ初心者だった状態から
ＨＰしーんのお部屋を作るために勉強した事などを
講座方式で紹介することで
こらからＨＰを作られる方々の少しでもお役に
立てればと思っております
（尚 まだまだはじめたてなのでウインドウズのみの説明になります）
| はじめに |
| しーんがはじめてホムペを作りたいと思ったとき人より特別な知識が 豊富にあるわけでもなくなにをテーマにするかとても迷いました しかしなにか自分の空間を作ってみたいと思い立ち いろんなサイトや本などを読みながらホームページの作り方を 勉強し始めましたがホームページを構成しているタグは 種類も豊富にあり学べば学ぶほど奥の深いもので すべてを知り尽くすには膨大すぎる知識でした そこでしーんがはじめた作り方はまずなんの工夫もないページから 自分の使ってみたい工夫について調べそれを使っていくという形で ページを作っていきました そうすることでしたいことを特定でき特定することでその工夫に 専念して学んでいくことができました まだまだしーんの知識も少ないものですが少しでもその特定の 知識を学んでいかれるのに役に立てればと思っております でははじめるにあたってですがまずやり方は置いておき次の事を決めましょう ・ ＨＰのスペースはどこで？（無料の所もたくさんあります） ・ 自分のＰＣスタイルに合わせて無理なく更新できるコンテンツ ・ どんな雰囲気のページにしたいか？ 以上の事を決めたら早速フリーの素材やさん等を巡って 雰囲気をイメージしたりしておいてくださいね |
| はじめましょう（基本構造） |
それでは実際に作業をはじめて行きましょう まずは記入していくものですがウインドウズに 付いているめも帳を使っていきます スタートメニューからアクセサリー→メモ帳を 開きましょう そしてまずは以下のタグを記入してみましょう <HTML>
<HEAD>
<TITLE>はじめてのページ</TITLE>
</HEAD>
<BODY>
はじめてのページ
</BODY>
</HTML>
と記述しましたか？それでは各タグの説明です <HTML>...このタグは[HTML宣言]のタグになっています <HTML>〜</HTML>の形で使われこの間をHTML言語で記述する 定義になります 難しい言葉ですが実際はＨＰを作るときの 約束と思って書いてくださいね <HEAD>...このタグはヘッダー部分を指定するタグで これもやはり<HEAD>〜</HEAD>でくくります 通常この部分は画面上に表示されることはなく サーバーで利用される情報などを記述しておきます <TITLE>...ヘッダー部分の中にあるこのタグは その名の通り名前を記述します通常ではページを 開いたときにブラウザーの上部に表示される名前になり 検索などでヒットしたときにもここの名前が表示されます やはりこのタグも<TITLE>〜</TITLE>と開始から終わりまでを 指定します 例では「はじめてのページ」と 書かれている部分ですね 同じようにつけたい名前を 書いてみてくださいね <BODY>...この部分がボディ部分で実際にページとして 表示される部分になります これも同じように<BODY>〜</BODY>と開始から終了までを 指定しますこの間に書かれたものが実際画面に表示される 訳です 今はタイトルと同じように見出しにする 「はじめてのページ」と書かれていますね ここもお好きな文字を記述してみてくださいね それではここまでで一度保存しておきましょう 上部にあるファイルをクリックして名前を付けて保存を 選びましょう するとファイルの種類はテキストファイルになっていますね そのまま保存してしまうとテキストファイルになってしまうので 気をつけてくださいね 名前を半角英数字で記入例えばhajimeと記入そして このファイルがＨＴＭＬのファイルである拡張子をつけ hajime.htmlと記入して保存してください 保存したら一度そのファイルを開いてみてください ブラウザーの上部にタイトルに記入した名前が そして画面上にはボディの中に書かれた文字が 表示されましたか? 出来ていたら通常のページの基本構造完成です あとはこれから色々紹介していくタグを使ってページを 飾り付けしていけばいろんなページが出来るわけですね それではまた次回にね〜 |
| 背景に色をつけてみよう |
前回基本構造で作ったページは白いページに 文字の書かれたものでしたよね ここにどんどん思っている事や表現したい事を 文字で書いていけばページとしては成り立っては いるのでしょうが やはり色をつけたりして いろんな表現したいですよね？ 今日の講座ではページの背景に好きな 色を入れてみましょう 背景に色をいれるつまり見える部分の色を 変えるということで今日のタグを挿入する 場所は <BODY>の中になります このようにタグの中にさらに追加の要素を追加するタグを 属性のタグといいます これから紹介していく中にも それ以外の属性として使えるものもありますので 色々試してみるのも覚える一つのコツになりますよ それでは背景に色をつける属性のタグですが BODYのYの後に半角のスペースをあけていれますタグは BGCOLOR=""となります"と"の間に入れたい色を 記述するわけですがこの記述の仕方は２つに別れます 一つはカラーネームによる記述 BGCOLOR="RED" のように色の名前を入れる方法 もう一つはＲＧＢ値で記述する方法ですこちらの方が多く使われて いるようです 理屈をわかるとカラーネームより 扱いやすいからですかね 同じ赤をＲＧＢ値で記述すると BGCOLOR="#FF0000"となります 見た感じこの方がなんのことかわからないってなりますね（笑） ではその仕組みを簡単に説明しますね カラーネームで書くREDにあたる部分ですが #FFOOOOの＃は印の様なものですその＃に ６桁の数字で色を表すのですが数字の部分は 二桁づつ３つにわけられあたまからＲ（赤）Ｇ（緑）Ｂ（青）と なっていて二桁を１６進数で表すことで配合が決められ色になるわけです ためしに６桁の数字を０〜１の数字かA〜Ｆまでの半角英語を 入れてみるといろんな色になりますよ と思った色にするのが大変やぁ〜って思う方のために 主要な色の見本を作ってみましたので活用くださいね 色見本へ と今日のまとめですが↓のように記述すると背景に色がつきますね
<HTML>
<HEAD>
<TITLE>はじめてのページ</TITLE>
</HEAD>
<BODY BGCOLOR="#00FFFF">
はじめてのページ
</BODY>
</HTML>
となりますね 例では背景色をAQUAにしてみましたが 好きな色入れてみてくださいね （注 １ まだ文字色の指定をしてませんので背景を黒にしてしまうと 文字が見えなくなりますよ） （注 ２ この背景色はブラウザーなどによって少し色の 表示が違うことがあります） それでは今日はこのへんで♪ |