1 春レポート課題
金曜４限 旭 貴朗先生
ホームページ作成
経営学部経営学科
作成者Life=Risk
2 目次
１、はじめに
―I. ジオシティーズでホームページを開設
―II. HTMLの基本理解
―III. Webページ作成
―IV. サブページ作成
―V. CSSの基本理解
―VI. CSSでレイアウト
―VII. ページデザイン
―VIII. CSSでテキストデザイン おわりに
１、はじめに
ここではホームページの作り方について参考書HTML&CSSの本をもとに紹介していきま す。作り方の順番としては
I. ジオシティーズでホームページを開設 II. HTMLの基本理解
III. Webページ作成 IV. サブページ作成 V. CSSの基本理解 VI. CSSでレイアウト VII.ページデザイン
VIII.CSSでテキストデザイン
という順序で進めていきます。
２、実際にやってみよう
～I. ジオシティーズでホームページを開設～
作成したホームページをネット上で閲覧するためには専用のソフト、Webブラウザ（作 成したページを表示するためのソフト）を使用する必要があります。今回はジオシティー ズを使ってホームページの開
設、Ｗｅｂページの表示を行っ ていきます。
まず、YＡＨＯＯ!JAPANのト ップページを開き、一覧ボタン を押します。そして、集まると 言う項目の中にホームページの ボタンがあるのでそこを押して
図１、「一覧」の箇所について（筆者）
3 ください。そうするとジオシティーズのト
ップページが表示しされます。その際に[無 料ホームページを開設する]というボタンを 押す。（Yahoo! JAPAN IDでログインして いない場合、［Yahoo! JAPAN IDでログイ ンする］ボタンを押し、表示されるログイ ンページよりYahoo! JAPAN IDとパスワー ドを入力し、ログインする。［URLを決定 すれば、ホームページ開設完了です！］と いうメッセージと、URL選択欄が表示され るので[www]をクリックし、希望のサブド メイン（サーバー名）を選択してくだい。
次に、URLを選択します。ページを開
いた直後、ログイン中のYahoo! JAPAN IDがURLの一部として表示されているのでこの
ままYahoo! JAPAN IDをURLに使う場合、変更は不要ですが、Yahoo! JAPAN IDを使い
たくない場合、IDが表示された部分をクリックし、あなたが考えた、使いたいニックネー ムを選んでください。（別のニックネームを使いたい場合、 [ニックネームを追加]をクリ ックするとニックネームを作成できるのであなたのお好みのニックネームを作成してくだ さい。）
URLを選択したら、利用規約とガイドラインの確認をよく読み承諾したうえで[無料ホ ームページを開設する]ボタンを押してください。（万が一不明、あるいはあなたにとって 支障が出る場合は別のホームページソフトを利用することをお勧めします。）
「Yahoo!ジオシティーズへようこそ！ あなたのホームページが開設されました」と表 示されると、ホームページが開設されたことになります。また、使用しているYahoo!
JAPAN IDに登録されているメールアドレスへ、「Yahoo!ジオシティーズへようこそ！」
というメールが送られるのでそれを確認し、本当に開設されたかどうかを確かめてくださ い。
ここまでがジオシティーズでのホームページ開設の仕方の簡単な手順になりますが、も し不明な点があれば［ジオシティーズ開設］と検索してみてください。
ここまでの手順が上手く済めば、新たに一覧からホームページを検索してみると先ほど とは別の画面が表示されます。この画面を閲覧することが出来ればホームページの開設は 成功です。
図2、開設とその後の画面（筆者）
4 II. HTMLの基本理解
ＨＴＭＬとはHTMLとは、Hyper Text Markup Language（ハイパーテキスト・マーク アップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語の ひとつです。これを使用することでホームページに様々な情報を記載することが出来ま す。
では、さっそくホームページを作っていきましょう
最初にメモ帳を起動します。このメモ帳にHTML要素を記入し、そのデータを先ほど 開設したジオシティーズに移すとあなたのホームページにその情報が移り、あなた好みの ホームページが作成されていきます。（メモ帳はスタートボタンからすべてのプログラム を選択し、アクセサリーを探して起動してください。）
次に必要な情報を打ち込んでいきます。
ＨＴＭＬ文書の始まりを示すタグ、<html>を半角英数で打ち込んで行きます。（半角英 数で打ち込まないとうまく起動しないので注意してください）。始まりがあればもちろん 終わりを示すタグもあります。たいていの終了タグには初めに［/］が付きます。つまり、
今回は</html>ということになり ます。これでホームページに記載 する情報の始まりと終わりが出来 ました。
<html>の直後をクリックして、
Enterキーを押し、（<html>の横に 記入してもいいのですが見やすい ように下に沿って記載していきま
す。）、<head>を記入します。<head>とは文書自身に関する情報（タイトル、関連ページ など）を納めた部分であり、普通の文書でいえば表紙や文書管理票のようなものです。そ の後、改行をして、（Enterキーを押して）</head>を打ち込んでください。
<html>の直後をクリックして、Enterキーを押し、<body>を記入する。Bodyは文書の
本文を示す部分です。改行をして</body>を打ち込みます。
<head>の直後をクリックしてEnterキーを押し、<title>を入力します。ここではあな
たのホームページにふさわしいタイトルを記述してください。ここでは私のホームページ タイトル［LIFE=RISK］が記載されています。改行をして</title>を記入します。
HTML文章にはいくつかの必要事項があります。
HTMLにはバージョンと言われるいくつかの種類があるためどのバージョンを使用する かを示すための宣言が必要になります。このことをDOCTYPE（ドックタイプ）宣言とも 言います。これをメモ帳の1行目に記載します。ここではHTML5のDOCTYPE宣言を 記述しています。<html>の直前に<!DOCTYPE html>を入力します。（スペースキーを押 す際は必ず半角スペースで記入してください。そうしなければうまく起動しない原因とな
図3、メモ帳（筆者）
5 ります。）
<head>の直後をクリックして文字コードを入力します。（文字コードにはいくつかの種 類があります。これを正しく記入しないとWeb上で見た時文字が文字化けしてしまうの で注意してください。）ここでの文字コードは<meta charset=”UTF-8”>とします。
［charset］とは、文字コードを指定するための属性（要素に情報を付加するもの）です。
（［meta］とはメタデータという情報を追加する要素で、今回は文字コードなどの情報を 追加します。）
<meta charset=”UTF-8”>の直後を改行し、<meta name="author" content="toyo">を入 力してください。実際は[content= ]をあなたの名前など、任意で記入してくださ い。
<meta name="author" content="toyo">の直後を改行して、<meta name="description"
content="Life=Riskのサイトです">を記入してください。同様に［content= ］を任 意で書き込んでください。
<meta name="description" content="Life=Riskのサイトです">の直後をクリックして、
改行し、<meta name="keywords" content="論文,プロミラリング">を記入してください。
同じようにして" content=" "を書き換えてください。キーワードが複数存在し ている場合は［ ， ］でつなぎま
す。
今まで作成したものを保存しまし ょう。そのために専用のフォルダを 作成しなければなりません。そのた めに、エクスプローラを起動させて ください。次にデスクトップを選択 し、そこで新しいフォルダを選び、
新たなフォルダの名前を記入してく ださい。これで新たなフォルダの完 成です。ここではそのフォルダの名 前をを［ホームページ］とします。
ここで最初に戻ります。メモ帳の［ファイル］をクリックして［名前を付けて保存］を 選択してください。次にデスクトップを選択して、ファイル名のところに［index.html］
と半角英数で入力します。次に［文字コード］の部分を［UTF-8］に変更してください。
そして最後に保存ボタンをクリックすると保存かんりょうです。念のために保存が出来て いるか確認はしておいてください。これが正常に動くか確認するために先ほどのファイル
［index.html］で右クリックし、［プログラムから開く］を選択し、[Internet Explorer]を 選んでください。まだ何も記入していないので白紙のページが現れますが現状ではそれが
図４、エクスプローラ（筆者）
6 正常に作動している証拠なので心配しないでください。
ここまで説明したことですが、ジオシティーズで新規ファイルを選択するとここまでの作 業がすでに作成されている状態になります。
III. Webページ作成
見出しを設定しましょう。
見出しとなる文章を自分なりに考え、それをh1タグで囲みます。また、見出しとなる 者は作品によっては複数存在することもあるので早いものからh1,h2…のように番号を付 けていきます。ここでは［<h1>Life=Risk</h1>］などがその1例となります。
段落を設定しましょう。
文章には必ず段落が存在します。それを可能にするのがpタグです。これで文章を囲む ことでその文章に段落がつきます。このタグに関してはhタグのように番号を付ける必要 はありません。<p>MENU</p>などが例とな
ります。
改行して文章を読みやすくしよう
長い文章を読みやすくするためしばしば改行 が使われている。それを実行するためにはbrタ グを使用する必要がある。このタグを改行した い文章の最後に記入することによりその文章は 改行されます。また、brタグは今までのように 囲む必要がないため</br>と記入しないように気 を付けてください。
箇条書きを設定しよう
箇条書きは並列な情報が続くときに使用されるものです。まず、箇条書きにする部分を 決め、箇条書きの先頭となる部分の上にulタグを記入します。次に、箇条書きとなるそれ ぞれの文章をliタグで囲みます。最後に、ulタグで囲みます。
画像を埋め込もう
文章だけではわからない場合やデコレーションなどに画像はよく使われます。ここでは ネットやカメラなどで入手した写真や絵などをホームページに埋め込む方法を紹介しま す。画像を埋め込みたい場所にimgタグ、
［<img src="画像が保存されているファイル名" alt="画像が表示されていない場合に、
画像の代わりとして表示される文章">］を記入します。こうすることで記入した箇所にあ なたの選んだ画像が映し出されます。この作業は何度でも可能なので複数の画像を使用し たい場合は先述の作業を同じように行ってください。また、画像のサイズを変更したい場
合はwidthタグとheightタグを使用します。widthはは横幅をheightは縦幅を決めるため
のものです。今までの作業を実際にやってみると下のようになります。
図５、完成図（筆者）
（こうなっていなければ作成したい形式 にならないかもしれません。）
7 Imgタグを使用する際にファイル名の箇所が少しややこしくなっています。ファイルが 一つならそそまま１つのファイル名を書けばいいのですが、あるファイルの中にその画像 のファイルが入っている場合、最初に、その画像のファイルを入れているも一つのファイ ルの名前をimgタグの最初に書き、次に［ / ］を打ち込んでから画像のファイル名を書 いてください。そうしなければ、☒のような印が出てきます。これはうまく起動していな いことを示しています。上手くいくと以下のようになります。
図6、メモ帳上（筆者）
しかし、これはまだネット上にはアップされていませんので さっそくアップしましょう先ほどのジオシティーズを開き、［新 規ファイル］を選択し、空ファイルを作成してください。そし
て、そのファイルを右クリックしてファイル編集を選択し、メモ帳に書かれた今までの文 章をコピーしてそこに貼り付けて、最後に保存を押すとネットにアップされたことになり ます。
IV. サブページ作成
サブページ、つまり別のページを作ろう。ここでいうサブページとは自己紹介や近況な どの、先ほど箇条書きで記述した１つ１つの専用のページのことである。
では、さっそく自己紹介のサブページを作って いきましょ。まず、メモ帳を開き、このページに 書く内容を今まで伝えてきた技術を使い記載して みる。内容としては、自己紹介、名前、故郷、趣 味を書いてみよう。ここで注意したいことは最初 から書かないことである。何故ならば、今まで書 いてきた文章が使えるからである。ここでいう使 える部分とはbodyタグ内以外である。
つまり、新たなページを作る際には、今まで作
図7、Internet Explorer上
（メモ帳の入力が正しけれ ば 上 部 の よ う に な り ま す）（筆者）
図８、必要箇所（筆者）
8 成してきた文章をコピーし、それを新たなメモ帳などに貼り付け、不要な部分を削除する ことで時間の短縮に繋がります。
次に、bodyタグ内を書き換えていきましょう。先ほどの情報を記入しますが、今回は箇 条書きではなく表を用いて作成していきます。
表を作ろう
表を作るために用いるタグのことをtableタグという。まず初めに<table></table>を記 入し、その間に今回の情報を記載していきます。次に、類似単語を1列に並べるためにtr タグを用います。ここでは1列になるものを囲みます。表での見出しとなる者にthタグで 囲みます。そして、その見出しの相手となる者をtdタグで囲みます。これらの過程の中で もし、表のためのタグを追加したい場合は先述のhタグなどを用いればきれいにできるだ ろう。そして、ジオシティーズで先ほどと同じようにからファイルを作成し（ファイル名 は任意）、ファイルの編集からファイルを開き、先ほどまで記述していた内容をコピーし てここに貼り付けて下さい。（ジオシティーズの場合、ファイルを作るとすでにいくらか は必要事項が記入されているのでそこを削除するのを忘れないでください。）実際に作る とこのようになります。
図9、メモ帳上（筆者）
図10、Internet Explorer上（筆者）
（間違ずに記入すると上部のような画 面が完成します）
9 ページ同士を連携させよう
先ほど作ったページをさっそく繋げてみましょう。この作業で用いるタグはaタグであ る。これにより別々のページ同士が繋がり、ホームページにより一層多くの情報記入など の作業がかのうになります。では実際にやってみましょう。先ほど作ったファイル（ジオ シティーズ上）に直接記入していきます。先ほどのページはタイトル【自己紹介】のため に作成したので、aタグをまず、箇条書きになっている自己紹介に用います。
<a herf=”繋げるファ イル名”>を自己紹介の 前に記入します。その 後、</a>で閉じます。
そのほかのタイトルも 同様にして記載すると それぞれのページが繋 がります。ここで注意 なのがファイル名を間 違わないことです。間 違いを気付かずに進め ると後が大変になるの で気を付けてくださ い。
また、ここでは外部のサイトへのリンク、つまり、自分のページと他人のページを繋げ ることが可能ということです。先述と同じようにaタグでつなげたいページのURLを囲 めばそこへ繋ぐことが出来ます。
また、メール送信用のリンクも設定が可能で、あなたのメールアドレスをaタグで囲む とあなたへメールが送られるようになります。ただし、迷惑メールなどが送られてくるこ ともあるので、それが嫌な人は記載しないほうがいいかもしれません。
～V. CSSの基本理解～
ここでは背景色の決定や、テキストの設定、CSS ファイルを読み込むなどの作業を紹介 していきます。これらの作業を行う前にCSS の基本を理解する必要があります。それがセ レクタ、プロパティ、値、コメントである。
セレクタ：スタイルを適用する要素を指定するもので、これによりテキストの文字や背景色、
配置などの様々な変化が可能になります。スタイルはセレクタの直後に入力した｛ ｝の間 に記述することになっています。また、セレクタには次のようなものがあります。
（タイプセレクタ）
タイプセレクタはbodyや h1 などHTML の要素名そのものをセレクタとします。指定さ れたスタイルはページの中にあるすべての同一要素に適用される。
図11、完成図［筆者］
10
（classセレクタ）
ClassセレクタはHTML側で付けたclass名を利用したセレクタで、class名はHTMＬの開
始タグの中にclass属性の値として記入します。CLASS名の前に「,」を付けたものをCLASS セレクタとなります。
（idセレクタ）
これはHTML側で付けたid名を利用したセレクタで、id名はHTMLの開始タグの中にid 属性の値として記述します。id名の前に「＃」を付けたものがidセレクタとなります。た だし、これは複数の要素に同じid名を付けるとうまく起動しないので注意してください。
（子孫セレクタ）
HTML では、ある要素の中に別の要素が含まれていることがあります。この関係を利用し てある一つの要素の中のある要素といった記述が出来ます。
（複数セレクタ）
複数のセレクタに共通のスタイルを適用しようとする場合はセレクタとセレクタを「,」で つないで記載します。
プロパティ：スタイルをどのような種類にするのかを指定するもので、これはあらかじめ決 められたプロパティの中から必要なものを選んでいきます。例を挙げると、font-size（テキ ストの大きさを変える）、background-color（背景色）、font-weight（文字の太さ）、font-style
（文字のスタイル）、text-decoration（文字の飾りの解除）などがあります。
値：実際のスタイルを指定します。値を記入する際に直前に「：」、直後に「；」を記入す ることを忘れないようにしてください。
コメント：これはホームページには直接は反映されませんが、ソースの記入の際に何かメモ しておきたい場合にこれを使います。使い方としては直前に「/＊」、直後に「＊/」を記入 します。これによりその部分はメモとして扱われます。
ではさっそくページの背景色を設定しましょう。メモ帳を開きはじめにセレクタ、
[ body｛ ｝ ]を入力します。そしてプロパティを｛ ｝の間に記入していきます。
今回は背景色なので[ background-color： ]を使用します。［：］の直後に色の値を入力し ます。色の値とは[#数字あるいは記号]で表されますが直接色の名前を打ち込んでも構いま せん。ここでいう色は赤、緑、青の組み合わせによって決まります。その記入方法としては
［＃］の次に先ほどの色の順番に数値を二桁ずつ入れていくと色が完成します。（不明な場 合はホームページ背景色で検索すると参考ページが現れるのでそれをもとに作成してくだ さい。）その後、そのメモ帳を今までと同じように保存し、それを今まで作成してきたファ イルに読み込ませます。その方法としては、</title>の直後で改行し、<link rel="stylesheet"
href="ファイル名" media="all">を打ち込むとページの背景が指定した色に変化します。
11
図12、メモ帳（筆者）
テキストの大きさや色を設定するには専用のプロパティを打ち込む必要があります。こ こでは文字の大きさと色の変更を行います。文字の大きさを変えたい場合はその部分を
<font size= 数字>文字</font>で囲みます。そうすることでその箇所の文字の大きさは変
化します。文字の色を変更する場合は同じように<font color=色></font>で囲みます。そう するとその場所の文字の色は変化します。これらの作業が終わったら確認をしっかりと行 って下さい。
～VI. CSSでレイアウト～
ページのレイアウトの際にそれぞれの箇所をグループに分けておきましょう。そうする ことでホームページがより見やすいものになります。そのために、id属性またはclass属性 で名前を付けます。これらのことをid名やclass名と呼びます。グループとしては［header］、
［menu］,［content］,［footer］,［container］があります。
［header］の箇所にはそのページの題名を記入するのが一般的である。記入の仕方として は以下のとおりである。index.html（今まで作成してきたもの）ファイルを開き、題名とな る部分をdivタグで囲みます。ここで思い出してほしいのが［h1］タグである。題名の箇所 はこのタグで囲まれているはずなので、この直前にdivタグ、<div id=”header”>を挿入し ます。そして、</h1>の後に</div>を記入します。こうすることでその場所は［header］グ ループとなります。
［menu］の場所にはそのページの項目、ナビゲーションメニューとなる文章を記入され ています。方法としては先ほどと同じようにしていきます。箇条書きの始まりの<ul>の直 前に div タグ、<div id=menu>を打ち込み、</ul>の直後に</div>を挿入します。これで
［menu］グループが完成しました。
［content］の箇所にはこのホームページの本文が記載されます。その始まりの箇所に今 まで通りに記入していきます。直前に<div id=”content”>を記入し、ホームページの作者名 の直後に</div>を挿入します。そうすることで［content］グループが作成されます。
［footer］は［header］とは逆の意味合いでホームページの最後を意味します。この部分 にはホームページの作者名が記載されています。ここに同じようにして記入していきます。
直前に<div id=”footer”>を、先ほど挿入した</div>の直後に</div>を記載してください。
図13、Internet Explorer上（筆者）
上手く作動すると上部のように背 景が変わります。
12 そうすればグループが完成します。（div タグが重なると思いますが気にせず進めてくださ い）
そして最後に、すべてを一つのグループとする［container］を記入します。これは先ほど 打ち込んだ<div id=”header”>の直前に記入します。次に</body>の直前に</div>を記入し てください。そうすることで今までのものがグループとして完成します。
文章をより見やすく、ページをより良いものにするために幅と高さなどの配置を設定し ましょう。
先ほど作成した背景色を決めるファイルを開き、［ ｝ ］の直後から記入していきます。
先ほどグループ分けをしましたので、それを利用して作業していきます。グループごとに幅 や高さを変えるためにグループ名の前に＃を書きます。その後、 ｛ を挿入し、次に幅や 高さを決める値などを記入していきます。幅を指定するものが[width：],高さを決めるのが
［height：］で、この後に値（ここでの値はpx[ピクセル]となります。）を記入していきま す。その後に ｝ を記入し完成です。
次にグループを左右に移動させましょう。先ほどと同じように移動させたいグループに
［ ＃グループ名｛ ］を付けて行います。その後、［float:］を記入し、その直後にrightあ るいはleftを記入します。そうすることで指定されたグループは移動し、その後のグループ は空いたスペースに移動していきます。また、この部分に［background-color：色］を記載 するとそのグループの背景だけが変化します。最後に ｝ で囲むと完成です。実例を示す と次のようになります。
ここまでの作業を終えたら保存し、うまく起動しているか確認してください。
～VII. ページデザイン～
文字の後ろの背景に画像を設定しましょう。そのために先ほどのファイルを利用します。
設定したいグループ名の｛ ｝の中に[background-image:url（リンク先）]を記入します。
そうすることで指定した文字の背景に選択した画像が設定されています。
余白を設定しよう。文字や画像の周りには余白があることがあります。ここではその余白
図14、完成図［筆者］
13 の作成の仕方を学びます。前述と同じように同ファイルを開き、余白を設定したいグループ の｛ ｝に[padding-top: 数字px, padding-left:数字px, padding-right:数字px]を記入し ます。[-top:]はそのグループの上部につく余白を、[-left:]は左部につく余白を、[-right:]は 右部につく余白を作成します。（PADDING とはテキストと枠線の間の余白を設定する。）
こうすることでそれぞれの方向に余白が出来ます。また、ここでは箇条書きの余白の削除も 設定できます。ここでは箇条書きのグループがMENUとなっているので[#menu ul]と記入 し、後の｛ ｝の中に[ list-style-type: none; ]、[ margin:0px ],[ padding:0px ] をそれぞれ記入していくと余白がなくなります。
箇条書きの見た目を変えましょう。同ファイルに#menu ul{}を記載し、｛｝の中にlist-style-
type: ;を記入し、空白の部分にnone（マーカーなし）、disc（黒丸）, circle（白丸）、
square（黒四角）、などがあるのでお気に入りのものを選んでください。そうすることで独 特なもんが作れます。
設定した画像に枠線がついている場合があります。それを取り除きたい場合は img タグ を用います。同じように同ファイルを開きimg{ }を記入していきます。{ }の中に[border-
style:]を挿入します。ここでは枠線を消すことなので［ ： ］の次にnoneを打ち込みま
す。そうすることで画像の枠組みが消去されます。none以外にもsolid（実線）,double（２
本線）,groove（立体的にくぼんだ線）,ridge（立体的に隆起した線）,inset（全体がくぼんだ
ように表示される）,outset（全体が隆起したように表示される）,dashed（破線）,dotted（点 線）などがあるので試してみてください。また、ここでは箇条書きに枠線などを付けること が出来ます。方法としては同ファイルに#menu li{}を記載します。そして｛｝の中にborder- style:, border-width: px, border-color:, background-color:, margin-top （right OR
left OR bottom）：値、 padding:上、右、下、左（ここでのPADDINGはこの順番で
値を入力します。）の余白などのものを任意で選択して挿入してください。そうすることで 独特な箇条書きになります。
~VIII. CSSでテキストデザイン~
ページのそれぞれのリンク（項目）に変化を与えます。簡単に言うと、リンク先に未訪問 の時、訪問済みの時、ポインターが乗っているとき、リンクをクリックしている時などにリ ンクに変化を与えます。そのタグとしては
未訪問時a:link{}（｛｝の中にcolor:値 ,text-decoration: 値）、
訪問済み時 a:visited｛｝（｛｝の中にcolor:値 ,text-decoration: 値）、
ポインターが乗っている時 a:hover｛｝（｛｝の中にcolor:値）
クリック時 a:active｛｝（｛｝の中にcolor:値）
などがあります。このほかにもポインターが乗ると書かれている文字が変わるタグもあり ます。これらを先ほどの同ファイルの続きに書くことで起動します。そして、これらを行う ことによりいっそうホームページに面白みが増します。
14 ページを整えましょう。そのためにまずはテキストと背景のバランスを調整しましょう。先 ほどの続きに、調整したいグループを［#］の後に記載し、その後｛｝を挿入します。そし て変更する内容を｛｝内に記入して言います。背景画像を指定する場合はbackground-image： url（リンク先）,背景画像の繰り返しを指定する場合はbackground-repeat: （例：no-repeat）、
背景画像の表示開始位置を指定する際はbackground-position:（例：left center）、このほか にも今までの作業で行った空白の作り方などをさらに加えてみるとよりいっそう見やすく なるかもしれません。また、画像を移動させたい場合はfloatタグ（float:方向）を使います。
このタグを｛｝に書くことによりその画像はその方向に寄せられ、後に続く要素を反対側に 回り込ませます。その際にバランスが悪くなった場合はclearタグ（clear：方向）を使いま
す。floatタグのせいで崩れた場所にclearタグを打ち込みます。そうすることで崩れた場所
が整います。
最後に、テキストを一方の方向に揃えたい場合は今までと同じように［#グループ名｛text- align：（left,center,right）｝］を使います。こうすることでその個所は一方の方向に揃えられ より見やすいホームページになります。
おわりに 今まで紹介してきた
・ジオシティーズでホームページを開設
・HTMLの基本理解
・Webページ作成
・サブページ作成
（ポインターが乗っていないとき）
図16、変化後［筆者］
（ポインターが乗っているとき）
図1５、変化前[筆者]
15
・CSSの基本理解
・CSSでレイアウト
・ページデザイン
・VCSSでテキストデザイン
はホームページ作成の基本であり他にも様々な機能を付け加えることが出来るので色々作 成してみてください。
参考文献
千貫りこ『これからはじめるHTML&CSSの本』技術評論社 MasApine Web「ホームページお役立ち小技集」（2017/6/27）
URL:http://www.sky.sannet.ne.jp/masapine/homepage/
