前 5 - 02 p ｜ 
もくじ i ｜ 次 5 - 04 n 
HTML直打ち入門！
1 段落の頭に<p>をつけるにょ
2 リンクを張るにょ
3 題名を <h1> ～ </h1> で囲うにょ
アカウントの取り方アップロードまで完全図解。日本語OKの日本のサーバ
HTML直打ち入門！
1 段落の頭に<p>をつけるにょ
2 リンクを張るにょ
3 題名を <h1> ～ </h1> で囲うにょ
アカウントの取り方アップロードまで完全図解。日本語OKの日本のサーバ
無料スペースでデビューしませんか。日本のサーバ naver。Geocitiesを広告なしにする方法。――初めてでもOK、絶対確実に分かるHTML、しくみと実際を基礎から復習。作成から公開まで完全図解、「いちばん速いホームページ作成法」――ただし、リンクとは何かとかは分かっているという前提で。話を簡単にするために、読者は IE6（または5.5）以上を使う Windows ユーザだと決めつけて書きます。
パラグラフ（段落）の最初ごとに <p>という記号をタイプするにょ（何。「段落始め」という意味です。いちいち日本語入力をオフにして半角にしなくても、日本語入力をオンにしたまま全角で＜ｐ＞とタイプして[F10]を押して半角に変換するという手もあります。どちらでも好きなほうで。
メモ帳 or 使い慣れたエディタを起動して、次のような感じでてきとーにタイプしてみてください。
<p>２００２年３月２日 <p>きょうは卒業式だった。 部屋で丹下桜を聞いていたら、 担任がわざわざ卒業証書を持ってきてくれた。 卒業できて嬉しいというより、 もし途中でやめてたら今頃凄い中途半端な気持ちだったろうな、 という意味で、まあ卒業できて良かったとは思う。 <p>けど同学年で去って行った元保健室友達の事を想うと、 いたたまれない。
メールと同じで、読みやすいように適当に改行してかまいませんし、1行あけてもかまいません。とりあえず、test.html という名前を付けてタイプしたのを保存したら、そのアイコンをクリックしてIEで開いてみてください。ここにサンプルがあります。ごらんのように、実際にウェブページとしてブラウザで表示したときは、タイプした改行や空行は関係なくなります。メモ帳で改行してても、ブラウザの表示では改行されません。ブラウザの表示で段落が変わるところは、<p>というしるしのとこです。<p>から新しいパラグラフが始まることが分かります。上のサンプルでは３つの段落がありますね。
段落の頭に<p>をつける以外は、あとはメールと同じように、ふつーにタイプすればとりあえずＯＫ。現状デザインの指定がなんにもないのでレイアウトがすっぴんで殺風景ですが、そのへんは、またあとで。
リンクの公式は少し複雑です――
<a href="リンク先のURL">ここがリンクになる</a>
難しそう？ すぐに慣れてしまうので、おそれず挑戦してみてください。無理に暗記する必要は、ありません。どうするかというと、次のパターンをマウスでドラッグ反転して、日本語入力オンの状態で [Ctrl]+[F7] （ATOK）を押すなり、コピーしてから「単語/用例登録」をクリック（MS-IME）して、「りんくたん」とかの覚えやすい読みで辞書に登録しちまえば良いのです。
<a href=""></a>
そしたら、以降、リンクを張るときは「りんくたん」とタイプしてスペースを押して変換すれば、上のパターンがでるので、引用符のあいだにリンク先のURLをコピペ、不等号が２個並んでるところ >< のあいだにクリック可能にしたいテキストをタイプすれば良いわけです。
次のようになります。
別にこの通りじゃなくてもいいので、自分でやりやすい方法を見つけてください。次のような感じでさっきのメモ帳に追記して上書き保存します。この説明を読むだけじゃ覚えられません。実際に自分でタイプしてみてくださいね。
<p>２００２年３月２日 <p>きょうは卒業式だった。 部屋で丹下桜を聞いていたら、 担任がわざわざ卒業証書を持ってきてくれた。 卒業できて嬉しいというより、 もし途中でやめてたら今頃凄い中途半端な気持ちだったろうな、 という意味で、まあ卒業できて良かったとは思う。 <p>けど同学年で去って行った元保健室友達の事を想うと、 いたたまれない。 <p>ところで、最近、<a href="http://www.faireal.net/">妖精現実</a>というサイトを、 ROMしている。わけの分からないところが、気に入った。 「<a href="http://www.faireal.net/articles/5/03/#d20302">広告なしの無料ホームページ 5</a>」を見て、 自分もホームページを立ち上げてみるかと思ったのだ。
タイプできたらIEで表示を更新してみてください。ここにサンプルもあります。
第２課でいきなり「リンク」はHTMLのレッスンの順序から行くとハードでしたが、リンクはウェブページでいちばん重要なので、がんばってマスターしてください。ところで次の第３課は簡単です。
コンテンツの題名（見出し）ですが、「ここから題名」という手前に <h1>（エイチ・いち）というしるしをつけ、「ここまでが題名」というしめくくりに </h1> をつけます。
上の例の「２００２年３月２日」は、よく考えてみたらパラグラフというより日記の見出しなので、そこは <p> はやめて、かわりに、<h1> ～ </h1>で囲っときましょう。
<h1>２００２年３月２日</h1> <p>きょうは卒業式だった。 部屋で丹下桜を聞いていたら、 担任がわざわざ卒業証書を持ってきてくれた。 卒業できて嬉しいというより、 もし途中でやめてたら今頃凄い中途半端な気持ちだったろうな、 という意味で、まあ卒業できて良かったとは思う。 <p>けど同学年で去って行った元保健室友達の事を想うと、 いたたまれない。 <p>ところで、最近、<a href="http://www.faireal.net/">妖精現実</a>というサイトを、 ROMしている。わけの分からないところが、気に入った。 「<a href="http://www.faireal.net/articles/5/03/#d20302">広告なしの無料ホームページ 5</a>」を見て、 自分もホームページを立ち上げてみるかと思ったのだ。
デザインは後で考えますが、これだけでも（ブラウザのデフォルトまかせでも）いちおう最低限の日記は書けますね。第二段階の表示と見出しをつけた表示を見比べてみてください。
なんとなく分かってきたと思いますが、ふつーのテキストの要所要所に、不等号で囲ったへんな記号（通称「タグ」）をちょっとつけると、それがHTMLというモノなわけです。
ところで、ここまでの例をブラウザで表示した場合、ページのタイトル（ブラウザ・ウィンドウのタイトルバーの文字）が指定されてません。ページのタイトルは、次の例のように <title> ～ </title> で囲って、いちばん上に書きます。これは簡単ですね。
<title>コイン いっこ いれる</title> <h1>２００２年３月２日</h1> <p>きょうは卒業式だった。 部屋で丹下桜を聞いていたら、 担任がわざわざ卒業証書を持ってきてくれた。 卒業できて嬉しいというより、 もし途中でやめてたら今頃凄い中途半端な気持ちだったろうな、 という意味で、まあ卒業できて良かったとは思う。 <p>けど同学年で去って行った元保健室友達の事を想うと、 いたたまれない。 <p>ところで、最近、<a href="http://www.faireal.net/">妖精現実</a>というサイトを、 ROMしている。わけの分からないところが、気に入った。 「<a href="http://www.faireal.net/articles/5/03/#d20302">広告なしの無料ホームページ 5</a>」を見て、 自分もホームページを立ち上げてみるかと思ったのだ。
表示させてみると、ブラウザのタイトルに「コイン いっこ いれる」と出るはず。
<h1> ～ </h1>は、あってもなくても、１ページに２つ以上あっても、かまいません。例えば３日ぶんの日記（３つの記事）を１ページにまとめたら見出しが３個あるのは当然ですね。また見出しの必要ないコンテンツなら見出しは無くて良いのです。これに対してページ全体のタイトルである<title> ～ </title>のほうは、必ず１ページに１個だけ書きます。IEで考えてもブラウザのタイトルバーってのは必ず（１つ）ありますし。上で試したように、IEを使ってるかぎり、<title> ～ </title>を書かなくてもタイトルの文字が表示されないだけです。が、詳しい説明は省きますが、音声ブラウザのユーザとかは、これを書いてもらわないと困るというか、すごくうっとうしい事態になるので、<title> ～ </title>は書いてくださいな。上のふざけた例は参考にせず、ちゃんとページの内容が分かるタイトルを……。
もうご存知かもしれませんが、タグには「ここからなんとか」という開始のタグと、「ここまでなんとか」という終了のタグがあります。違いは、終了のほうにはスラッシュが入ってることだけです。すでに「ここから見出し、ここまで見出し」「ここからページのタイトル、ここまでタイトル」などを覚えました。複雑そうなリンクのタグも、抽象的に見ると、<a> ～ </a> で囲ってますね。かんのいいかたなら、「もしかして、段落もホントは <p> ～ </p> で囲むのが正式なのでは？」と思ったかもしれません。その通りです！ 「ここから新しい段落」というところに <p> をつけると説明しましたが、「ここで段落終わり」という地点に </p> も書いたら完璧です。もっとも、HTMLでは、</p> は特に省略しても良いことになってます。実用的にてっとりばやく行くには、省略してしまってかまいませんし、形式美(?)にこだわるなら、段落にも終わりのタグをつけたほうが納得がいくかもしれません。次のような具合です。
<title>コイン いっこ いれる</title> <h1>２００２年３月２日</h1> <p>きょうは卒業式だった。 部屋で丹下桜を聞いていたら、 担任がわざわざ卒業証書を持ってきてくれた。 卒業できて嬉しいというより、 もし途中でやめてたら今頃凄い中途半端な気持ちだったろうな、 という意味で、まあ卒業できて良かったとは思う。</p> <p>けど同学年で去って行った元保健室友達の事を想うと、 いたたまれない。</p> <p>ところで、最近、<a href="http://www.faireal.net/">妖精現実</a>というサイトを、 ROMしている。わけの分からないところが、気に入った。 「<a href="http://www.faireal.net/articles/5/03/#d20302">広告なしの無料ホームページ 5</a>」を見て、 自分もホームページを立ち上げてみるかと思ったのだ。</p>
テキストだけの実質としては、上記でいちおう完璧なのですが、おしゃれをしたいお・と・し・ご・ろ、としては、あれこれスタイルを指定してみたいと思います。背景の色とか文字の配置とかですね。次の例のように、<style> ～ </style> で囲って書くことになってます。
<title>コイン いっこ いれる</title>
<style type="text/css">
body {
margin: 50px 10%;
background: #eeeedd;
}
h1 {
font-family: sans-serif;
color: blue;
}
p {
text-indent: 1em;
line-height: 1.33;
}
</style>
<h1>２００２年３月２日</h1>
<p>きょうは卒業式だった。
部屋で丹下桜を聞いていたら、
担任がわざわざ卒業証書を持ってきてくれた。
卒業できて嬉しいというより、
もし途中でやめてたら今頃凄い中途半端な気持ちだったろうな、
という意味で、まあ卒業できて良かったとは思う。</p>
<p>けど同学年で去って行った元保健室友達の事を想うと、
いたたまれない。</p>
<p>ところで、最近、<a href="http://www.faireal.net/">妖精現実</a>というサイトを、
ROMしている。わけの分からないところが、気に入った。
「<a href="http://www.faireal.net/articles/5/03/#d20302">広告なしの無料ホームページ 5</a>」を見て、
自分もホームページを立ち上げてみるかと思ったのだ。</p>
今回は詳しく説明しませんが、上の例は「上下に50ピクセル、左右にウィンドウの幅の10%ぶんの余白をとって背景色はベージュ系のダーク・リネン（亜麻色）。見出しをサンセリフ（ゴシック系フォント）の青にする。段落の最初を１文字ぶんあけて、表示行の改行幅を文字の高さの1.33倍にする」というような意味です。スタイル指定のない例と上記の指定をした例を見比べてみてください。
内容は同じで「スキン」が違うだけです。ちなみに、<style> ～ </style> は <title> ～ </title> よりさらに上に書いても良く、また、 <title> ～ </title> の次あたりに書いても良いですが、表示される内容よりは上に書かなければなりません。
もうひとつの「おしゃれ」のポイントとして、画像というものがあります。画像は自作しても良いですが、とりあえず素材屋さんからもらってくるのが良いでしょう。例えば、アンの小箱に行って「フリー素材」をクリックしてください。使用前に注意書きをよく読んでくださいね。ほしい画像が見つかったら、右クリックして、「名前を付けて画像を保存」します。例として、「赤い妖精」のなかにある「ガーベラの妖精」の gabe3.gif を、上のtest.htmlを作ったのと同じフォルダに保存してみました。
画像を出すには、表示したいところに次のようなタグを書きます。
<img src="画像の名前" alt="altテキスト">
画像なんて、そんなに使いまくるものでないでしょうから、上のタグは無理に暗記する必要なく、画像を張るときに見てそのまままねすれば良いのです。
この例では、画像の名前は gabe3.gif です（ここではHTMLファイルと画像ファイルを同じフォルダに入れてくださいね）。altテキストは、画像を表示しない環境（声で読み上げる場合とか）で画像のかわりになるテキストです。説明の図版などでは画像が見えないと内容が理解できない、ということがないように、それなりに文字を書きます。ただの飾りの画像で見えなくても大勢に影響ない場合は、altテキストは空っぽ alt=" " でもかまいません。
次の例は「Gold Plated Shangri-La」というサイトの表紙ページです。<style> ～ </style> のなかみは、上の test.html と同じものをそのままコピペしただけです。
<title>Gold Plated Shangri-La</title>
<style type="text/css">
body {
margin: 50px 10%;
background: #eeeedd;
}
h1 {
font-family: sans-serif;
color: blue;
}
p {
text-indent: 1em;
line-height: 1.33;
}
</style>
<h1>Gold Plated Shangri-La</h1>
<p><img src="gabe3.gif" alt="ようこそおいでくださいました。">
病気自慢とパワーゲームと暗い旅のページです。
コンテンツは今のところ<a href="test.html">日記</a>と、
詩と、フランス語のメモ（復習をかねて）、
あと一応、自己紹介を予定してます。
日記以外は工事中です。</p>
この例では、パラグラフの始めにガーベラの妖精さんの絵があります。この妖精さんは、いちおうきれいな絵でページを見てくれる来訪者の目を楽しませるもの、要するに歓迎のこころを表す絵ですから、画像が見れない人のためのaltテキストは「ようこそおいでくださいました。」にしてあります。言葉にするとちょっと恥ずかしいかもですが、説明の例です……。例えば目が見えない人が音声ブラウザでこのページを開くと、妖精さんの絵は見えないけれど、かわりに「ようこそおいでくださいました。」という言葉が自動読み上げ装置で合成されるわけです。
段落を表す <p> ～ </p> のなかに、さらに画像をあらわす <img>タグが入っています。画像は、altテキストで置き換え可能なもの＝テキストの一部なので、これで良いのです。ちょっとわかりにくいかもしれませんが、こういうものだと思ってください。
この例を、index.html という名前で保存し（表紙ページは、通常この名前になります）、さきほどの test.html と同じフォルダに入れます。同じフォルダの test.html に対してリンクするときのリンク先URLは、次のようにファイル名だけでOKです。
<a href="test.html">日記</a>
韓国のかたとのメールのやりとりのつづきです。文章が少しおかしいのは自動翻訳を通しているからです。もっと前のものは寂しい地球人 > 韓国にアップロードしてあります。本文中のMiwon（味元）は化学調味料のこと。これを問題にしてるのは、いわゆる自然食品志向とかでなく、「甘いものが苦手」とか「からいものが全然だめ」とかなかたがおられるのと同じように、素朴な意味で「あの味が苦手」なだけです。極論すれば農薬まみれだろうが合成添加物がいっぱいだろうが比較的がまんできるのだが「調味料（アミノ酸等）」が入ってる食品は、ふだんは無理せずいっさい食べてません。からだに悪いかどうかとかの思考の問題でなく、単に味の素の味が苦手なのです。
seelie317様こんにちは。冬季オリンピックでここ数日、興奮しておりました。ショット500mでOhno選手が日本選手を押して倒す場面を見てから日本のヤフー掲示板に行ってみました。日本の方たちはかなり沈着な雰囲気でした。
バリコンを手に入れたいのです。うんぬん……。
お元気ですか？ 返事が遅れてすいません。トラブルが発生して、Windowsを再インストールしてました。メールはバックアップしたから無事ですが、ハングルを表示・編集できる環境を再構築するのに少し手間がかかりました。
バリコンは骨董品ですね。申し込んでおきました。私も韓国で買い物をしたいです。しかしキムチやレトルト食品のサムゲタンのような生ものを個人が送れるものでしょうか。何か規制がありますか。以前にオーストラリアにいる姉妹に漢方薬を送ろうとして面倒な事態が発生したのを覚えています。なんでも中国語の薬品名や成分を全部英語で書いてどうこうしないと受け取れないとかで事実上、任意放棄するしかなかったような……。日本では「韓国直輸入」のキムチを売っています。商店は「本場の本物である」と宣伝します。しかしMiwonが大量に入っています。韓国国内にはMiwonを含まない良いものが少しは存在しないですか？ 前いただいたヤンバン岩海苔はおいしかったです。いただいた蜂蜜も評判が良いです。ほかにも良いものがあれば教えてください。そして別なお願いですが、私は若い時代の金地下先生に興味あります。別な詩人にも興味があります。作品は韓国のウェブページで読むことができますが、自動翻訳では少ししか理解できないです。またマリーベルの歌の韓国語を書き取ってほしいです。時間がかかる面倒なお願いですが、暇な時に助けてくれてください。
日本にはオリンピックの熱烈なファンが多いようです。私は山奥に住んでいて地上波テレビを受信できないし、あまりスポーツファンでもないです。しかしオリンピックの中継はとても人気があって、多くの人が視聴するようです。日本のオリンピック番組を昔みたけれど、とても親切で、選手の細かい動作を全部アナウンサーが言葉で説明して、別な専門家が横から解説します。とても言葉が多いです。押して倒す？ なにかもめごとで喧嘩でもおきたんですか？
そういえば以前、オリンピックの時にとても騒いでいたことを記憶しています。Judo試合で日本人選手が勝ったのに、審判が間違って金メダルをくれなかった。そのようなことを主張して騒いでいました。私は見ていないから詳しくは知らないですが、友達もメールで、怒っていました。熱心なファンが間違えた審判に「お前を殺す」と言った怒りのメールを送ったそうです。また、日本人選手がマラソンで上位になって（一位だったのかな？）とても立派な勝利だったから、多くの人たちが祝っていたそうです。そうしたことを、ずいぶんあとになって、偶然知りました。テレビも新聞もないので、事情にうといのですが、ウェブページで読んだタイムの記事「敗北の苦悩」に「日本人はオリンピックを楽しんでいない。悲壮だ」とか書いてありました。敗北は単純な個人の問題でなく、国の恥なのだとか。そんなプレッシャーのせいで自殺した選手もいるそうです。
ソウルオリンピックを少し覚えていますよ。当時私は若いふらふらする子供で、フィンランドでテレビを見ていました。フィンランドのスポーツ中継はいい加減で、ただ映像があるだけで細かい解説はなかったです。韓国の衣装の舞姫が開会式で踊っていました。そのとき日本のパスポートには「このパスポートで北朝鮮には渡航できません」とか書いてありました。韓国も南北もよく知らなかったので、日本のパスポートの制限事項がとてもふしぎでした。
seelie317
こんばんはKimです。私もあまり使わないプログラムをあれこれインストールするほうです。で、しばらくするとシステムが不安定になってよくエラーが起きます。だんだんその程度がひどくなって使いずらくなるので、そうなると再インストールします。
バリコンは骨董品ではないです。ただこの頃手に入りにくくて値段が高価です。今はポリバリコンや鉄で作ったバリコン代りにに大部分が半導体で作ったバリケブがたくさん使われます。特殊な分野ではなければ高出力のトランスミッターに使用されてまたなければ私のように工作が好きな人にたまに必要なものです。
今度は真空管を利用して昔風のラジオを作ろうと思ってます。 今のようにハイエンド的な装備に比べればむちゃくちゃです。けれども昔の物件たちは胸を暖かくする何であるかがあります……。
私の趣味は、お金がたくさんかかる趣味です.....;;;
韓国でショッピングしたい物件は何ですか.....? 自分の考えですが韓国から物件を送ることは規制品目が多くないでしょう。それぞれの国家ごとに通関過程で規制する物件があります。日本の通関手続きについては私はよく分かりませんが、キムチや即席食品、サムゲタンなど規制しないようです。
問題は、キムチは発酵食品だということです。常温だと、たった一日でも発酵しすぎて変質してしまいます。発酵が進んだものも、ソゴギや豚肉を入れてキムチチゲなど食べ方はありますが、一般的なキムチの味わいかたとはいえません。EMSで送っても数日かかりますし。
Miwonは私も好きではないです。Miwonを使用しない飲食店を探す人も少なくありません。キムチもMiwonを使用しないで作る製造元もあります。製造元によって味はいろいろですね。辛いもの、複雑なもの、辛くて複雑なもの、塩辛を入れたもの、塩辛を入れないものなど。自分の好みにあうのを選んで食べるわけです。
詩人金芝河については私もあまり教えてさしあげられません。文学方面には強くないです。金芝河の詩集を送ってあげましょうか？ メリベルの歌詞は少し後に送りますね。
1988年のオリンピックで、韓国はボクシングで偏った判定でたくさん金メダルを獲得しました。私はその時韓国人として羞恥心を感じました……ボクシングの金メダルを得た選手も喜ばなかったです……
私は今月3月4日に病院に入院して手術をうけます。手術後、一週間程度、入院しなければならず、退院して自由に動けるのは15日以降になりそうです。といっても、危ない疾病ではありません。つまらない病気なんです。ただ入院中にはメールの返事が遅れると思うので、その事情をお知らせしたしだいです。
