+ プロフィール +
Author:きよりん
きよりんは能天気マイペースお気楽タイプです。
+ 最近の記事 +
+ 月別アーカイブ +
+ カテゴリー +
+ 最近のトラックバック +
+ フリーエリア +
+ ブロとも申請フォーム +
+ フリーエリア +
+ リンク +
+ RSSフィード +
+ ブログ内検索 +
+ Powered By FC2ブログ +
+ おススメ +
換金には
イーバンク銀行
が必要です
今度は横割りの説明。
縦割り読んでいる人で、すでにわかったって人はもう大丈夫でしょう。
縦割りだって横割りだって変わりません。
横割りも縦割りの説明で言った通り3つのファイルを使います
これですこれ。（笑
縦割りを横向きみたいにしただけ！（笑
これをタグにするとこれ↓
上を広くしたいときは上を70％とかくらいにすると頭でっかちなフレームになります
縦割り読んでいる人で、すでにわかったって人はもう大丈夫でしょう。
縦割りだって横割りだって変わりません。
横割りも縦割りの説明で言った通り3つのファイルを使います
これですこれ。（笑
縦割りを横向きみたいにしただけ！（笑
これをタグにするとこれ↓
上を広くしたいときは上を70％とかくらいにすると頭でっかちなフレームになります
結構難問とされているフレーム。
フレーム使われているだけでなんだかＨＰがかっこよく見えるものです
しかしどうやってこのパソコン上でそのように作ればいいか・・
私も前まで全然分からなかったのです。
それでもやっていくうちに理解してきました。
それなので、ここではフレームの説明をします。
フレームは、必ず三つのファイルを使います。
縦に分けるときも、横に分けるときも。
�‥畋罎離侫．ぅ�
�∈犬離侫．ぅ�
�１Δ離侫．ぅ�
3個ぐらい分けるときは4個ファイルを使うし、
4個分けのフレームを作りたいときは5個ファイルを使います。
今の説明で分かった人はほとんど居ないと思います。（爆
なので。それを画像で説明します。まず、縦割りで2分割。
青と黄色と赤で示しています。
青＝土台。ここが心臓ですね 大事な部分です
黄色＝左のファイル。例としてはメニューを書いて、赤の方に表示させます。
赤＝右のファイル。黄色ファイル（左のファイル）からリンクされるとこっちに移る。
説明で言うとこんな感じ。
実際にはこんな感じ
これをタグにするとこれ↓。
<HTML> <HEAD>
<TITLE>ここにタイトル（タイトルを入れます）</TITLE> </HEAD>
<FRAMESET cols="左側%,右側%←足して100％になるようにしてください
" border=1 borderColor=gray frameBorder=1 frameSpacing=1
> <FRAME src="左側のファイル名(〜.html) " frameborder="no">
<FRAME src="右側のファイル名(〜.html) " name="フレームの名前(表示させるときに必要です) " frameborder="no"> <NOFRAMES>
<BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY> </NOFRAMES>
</FRAMESET> </HTML>
例は右が20％左が80％です
フレーム使われているだけでなんだかＨＰがかっこよく見えるものです
しかしどうやってこのパソコン上でそのように作ればいいか・・
私も前まで全然分からなかったのです。
それでもやっていくうちに理解してきました。
それなので、ここではフレームの説明をします。
フレームは、必ず三つのファイルを使います。
縦に分けるときも、横に分けるときも。
�‥畋罎離侫．ぅ�
�∈犬離侫．ぅ�
�１Δ離侫．ぅ�
3個ぐらい分けるときは4個ファイルを使うし、
4個分けのフレームを作りたいときは5個ファイルを使います。
今の説明で分かった人はほとんど居ないと思います。（爆
なので。それを画像で説明します。まず、縦割りで2分割。
青と黄色と赤で示しています。
青＝土台。ここが心臓ですね 大事な部分です
黄色＝左のファイル。例としてはメニューを書いて、赤の方に表示させます。
赤＝右のファイル。黄色ファイル（左のファイル）からリンクされるとこっちに移る。
説明で言うとこんな感じ。
実際にはこんな感じ
これをタグにするとこれ↓。
<HTML> <HEAD>
<TITLE>ここにタイトル（タイトルを入れます）</TITLE> </HEAD>
<FRAMESET cols="左側%,右側%←足して100％になるようにしてください
" border=1 borderColor=gray frameBorder=1 frameSpacing=1
> <FRAME src="左側のファイル名(〜.html) " frameborder="no">
<FRAME src="右側のファイル名(〜.html) " name="フレームの名前(表示させるときに必要です) " frameborder="no"> <NOFRAMES>
<BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P>
</BODY> </NOFRAMES>
</FRAMESET> </HTML>
例は右が20％左が80％です
背景色〜背景画像
| さてさて、ページが一ページ完成したのは非常に喜ばしいことなのですが！しかし！ さすがにアレだけだと微妙ですよね；シンプルすぎて・・・。 なので、ちょくちょく変形させていきましょう。此処からがHP作りの醍醐味（笑）でございます。 楽しいのでガンガン覚えましょうー♪ 最初に、背景色の変更です。 背景色を変えるには、BODYを変更させます！ <BODY>となっているところを、<BODY bgcolor="背景色">と言った感じで変えます。 物凄く簡単なので 背景に画像を入れたい場合は <BODY background="画像URL">と言った感じで変えます。 |
作成〜注意
| それでは色々と説明したところで、やっとこさ作成ですー！ すっとばして此処を読んでいる人も（笑）、そうでない人も、一番楽しみにしていた所ではないかと！ 基本の基本なので、まだ飾りッ気はありませんがこれからどんどん素敵になっていきますので・・・！ 此処からはwinを前提として説明していきますが、Macと基本は変わらないと思います。 １．メモ帳を用意してください。 ２．以下の通りに打ってください（もしくはコピー＆ペースト）
補足説明 <HTML>は、前のページで説明したとおり「なくてはならない存在」です。 一番最初と一番最後に必ず入れてください！「HTML」や「HEAD」などの文字は、全て「< > と < / >」で囲みます。 <HTML>で始め、</HTML>で終わらせる。<TITLE>で始め、</TITLE>で終わらせる。 <HEAD>で始め、</HEAD>で終わらせる。<BODY>で始め、</BODY>で終わらせる。 ・・・と、こんな感じですー。 ------------------ ３．打ち終わった（コピーし終わった）ら、「ファイル→名前をつけて保存」で保存してください。 この時注意して欲しいのは、名前の付け方です。そのページのファイル名を ひらがなや漢字、カタカナで書かれてしまうと、アップしたときにページが表示されなくなってしまいます なので、必ず全国共通語（笑）の英語で設定してください。 保存するとき、もう一つ注意して欲しいことがあります。 それは、「拡張子」です。「.html」や「.htm」など、ファイルの名前の後に必ずつけてください。 とりあえず、今作ったページは「top.html」と言う名前をつけてあげてください！ ファイルの種類は「すべてのファイル」を選択し、保存を押します。 ４．ファイルを開いてください どのようになっているかを確認するために、ファイルを開きましょう！ しかし、そのまま開いただけじゃあ変わらないので、少し開き方を変えます。 まず、インターネットを開いてください。「ファイル→開く→参照」の順番で、 先ほど作った「top.html」を呼び出してくださいな。 すると、こんな感じ に、なっているはずです。 此処までが、最初の最初、基礎の基礎です！これで貴方は一ページを作ってしまいましたｖ 素晴らしいと自分を褒め称えてください（笑） |
基本知識〜各部の名前
(20040801改正）
(20040801改正）
| とりあえず、知っておいた方が後々楽になるので専門用語 （といってもそんなに難しくないです（笑）） を紹介します。  HTML（えいち・てぃー・えむ・える） Hyper Text Markup Languageの略。これが俗に言う「タグ」の基本となります。 HEAD（へっど） 文字通り頭、です。この頭の中に、色々と知識を加えていきます。 BODY（ぼでぃ） こちらも文字通り体、です。此処に文字などを書いていきます。 この三つが基本です。この三つが一つのページに必ず入ってなければいけません。 他にもたくさんありますが、入れておいたほうが良い！ものを紹介していきます。 ガンガン行くぜっ！（笑） META（めた） これは、是非是非入れて欲しい・・・と管理人切に願っております。 文字化けを防げるタグなので、入れると素晴らしいことになります（笑） 他にも自分のページを検索に引っかかりやすくさせたり、逆にひっかからないようにさせたり出来ます。とても便利！ ● 一番ポピュラーな文字化け防止用メタタグ↓（とにかく使って欲しい） <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ● 一番ポピュラーなページPR用メタタグ↓（ヒットさせたい時に有効） <meta name="description" content="紹介文"> <meta name="keywords" content="キ−ワ−ド"> （紹介文のところに、自分のサイトが検索で出た時に表示させたい紹介文を。例：「HTML・SKIN・素材配布サイト。特にHTMLが豊富。」など） （キーワードの中には、自分のサイトに当てはまるものをいつくでも入れてください。何個も入れる場合は「html,素材,無料,かわいい,きよりん」など、「,（カンマ）」で区切ってください） ● 一番ポピュラーなページ検索回避メタタグ（裏ページなどに有効） <meta name="robots" content="none"> <meta name="robots" content="noarchive"> <meta name="robots" content="noindex, nofollow"> 基本的にこれらが入ってれば大丈夫なのですが、もう少し補足。 TITLE（たいとる） お気に入りに入れたりするときに、自動的にサイト名が入ってたりしますよね？ STYLE（すたいる） コレは後ほど嫌というほど出てくるのですが（笑）一応。 このページ、スクロールバーが矢印のみの表示になっていますよね？フォントだってサイズが固定されるし・・・そのような設定をするのが「スタイル」です。いわば体の中から綺麗になれる・・・みたいな（謎）これを使うと、凄く見栄えが良くなります！ こんな感じですー。大体雰囲気はつかめたと・・・思います！ |