今回もリンクを貼る記号（タグ）についてです。
今回は同じページ内でリンクを貼るための記号（タグ）です。
ひとつのページがず〜〜〜っと下まで伸びてるＨＰってよく
ありますね。そんな時、見る側の目的の場所まですぐいけるよう
リンクを作ってあげることも大切です。見る側にとって自分が
見たいところまで画面を延々とスクロールさせるのはやっぱ
めっちゃ面倒なことです。
では実際どういうことかやってみましょ〜！！
このページは今から延々とこれまでのＬＥＳＳＯＮを載せていきます。
それを一気にとばして今回のＬＥＳＳＯＮに行って下さい！！
つー事で同じページ内にリンクを貼る記号（タグ）は
＜ａ ｈｒｅｆ＝”＃リンク先の名称”＞文字・画像等（ここではジャンプ）＜/ａ＞
ジャンプ
それでは早速、上の”ジャンプ”をクリックしてＬＥＳＳＯＮの続きへＧＯ！！
そのまま画面を下にスクロールさせても続きに行きますがかなり面倒っすよ！！
LESSON1（ＨＴＭＬの基本構造）
HP作りやメールをもっと面白くするために初心者の私と
一緒にHTMLを１からお勉強していきましょう！！
とりあえずメモ帳を開いてみよう！！そして半角入力で＜ｈｔｍｌ＞＜/ｈｔｍｌ＞と入力！！この２つの
記号の間に同じような記号を入力していくことで色んなことができるようになるのが、HTMLらしい。
まずは上の青い所にある文字を入力するには＜ｈｔｍｌ＞＜/ｈｔｍｌ＞の間に半角で＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞＜/ｔｉｔｌｅ＞＜/ｈｅａｄ＞と入力。そして＜ｔｉｔｌｅ＞＜/ｔｉｔｌｅ＞の間に
入れたい文字を入力すれば青い所に入力した文字が出ます。ここでは「ＨＴＭＬを覚えよう！！」に
なっています。次は＜/ｈｅａｄ＞の後に半角で
＜ｂｏｄｙ＞＜/ｂｏｄｙ＞と入力し、その間に文字を入力していけば今読んで頂いている
部分ができるみたいっス！！そして大事なのは保存！！上のファイルをクリックして「名前を
付けて保存」をクリック。ファイル名の所に”ファイル名.html"と入力してマイドキュメントにでも
保存。ファイル名の所は好きな文字（半角の英数字じゃなきゃ駄目かも？よくわからん）でいいけど
そのあとの「.html」は必ず必要！！では保存したファイル見るためにマイドキュメントを開こう。
すると”e ”の楼謔tけたファイル名のファイルがあるはず！！(ちなみにこれは
あくまでIEをつかってのHTML作りです）開けば、なんと先ほど入力した変な記号達は消え、その間に入力
した文字だけに！！これがHTMLへの第一歩ですね・・・再び記号たちの書かれた編集画面へ行くには
上の”表示”をクリックして、”ソース”ってのをクリックすればＯＫ！！ところで読みづらいと
思った人？実はHTMLでは改行や段落を揃えるのにも記号の入力が必要な様です。次回はそれをやってみます
か・・・とりあえず今日の復習を次のページでわかりやすくGO!!
今日の復習
HTMLの基本構造はこうだ！！
＜ｈｔｍｌ＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞ここに上の青い部分に入力したい文字を！！＜/ｔｉｔｌｅ＞
＜/ｈｅａｄ＞
＜ｂｏｄｙ＞
ここが今読んでる部分に！！
入れたい文字を入力するべし！！
＜/ｂｏｄｙ＞
＜/ｈｔｍｌ＞
これで前のページみたいな画面の出来上がり。
次は行や文字を綺麗に揃えて行こう！！
ちょっと面倒くさげだけど出来たらかっちょええじゃん！！
「今日のぜって〜！！」
〇記号の入力は必ず半角で！！
〇保存する時のファイル名には必ず「.html繧・tけるべし！！
lesson2（文字を改行する）
今回は改行をして文字を整頓していきます。＜ｂｒ＞
前回の復習の画面で既に改行されて整理できてるじゃん！！＜ｂｒ＞
・・・とつっこんだ方、よくできました〇＜ｂｒ＞
つっこんだ後、ちゃんと表示をクリックしてソースを覗き見した方＜ｂｒ＞
大変よくできました◎＜ｂｒ＞
何も思わなかった方・・・＜ｂｒ＞
あなたは、どこか憎めない愛すべき人ですね。＜ｂｒ＞
一緒に頑張って行きましょう！＜ｂｒ＞＜ｂｒ＞
・・・とここまで書いて、もうお気づきでしょうが、改行を指示する記号は＜ｂｒ＞
この＜ｂｒ＞です。改行したい個所にこの記号を半角入力することで、＜ｂｒ＞
文がきちんと改行されていくんですね。＜ｂｒ＞(←しつこい？）
今回はこの＜ｂｒ＞だけ。簡単でしたが、あせって一気に色々やっても
混乱するだけなので、１個づつゆっくりやって行きましょう。
ところで、こんなこと(文を書いたり、改行したり）はメールソフトのアウトルック
とかでは当たり前に簡単にできちゃうことです。
でも、これから先、どんどんＨＴＭＬを使うことによってメールソフトだけでは
出来ないことも出来るようになるんでしょう。きっと！！
だから面倒でも、頑張っていこう！！
今回の文章は全部、左側に揃えられているので、次回は文を
真ん中や右側に持っていく記号を覚えましょう！！では今日の復習へＧＯ！！
今日の復習！！
改行するには＜ｂｒ＞
とにかく＜ｂｒ＞
しつこいけど＜ｂｒ＞
ひとつ改行するには＜ｂｒ＞
ふたつ改行するには＜ｂｒ＞＜ｂｒ＞
みっつ改行するには＜ｂｒ＞＜ｂｒ＞＜ｂｒ＞
他に方法があるかもしれないけど、初心者なのでとにかく＜ｂｒ＞＜ｂｒ＞
それでは今日は皆さんにちょっと殺し合いをしてもらいます！
・・・ってちょっと頭に浮かんだ人がいるでしょ？い〜や、絶対いるね！！
ところで、前回の復習にあったＨＴＭＬの基本構造
＜ｈｔｍｌ＞
＜ｈｅａｄ＞
＜ｔｉｔｌｅ＞＜/ｔｉｔｌｅ＞
＜/ｈｅａｄ＞
＜ｂｏｄｙ＞＜/ｂｏｄｙ＞
＜ｈｔｍｌ＞
っていうのは、必ず使うのでベースのＨＴＭＬファイルとして保存しておけば、便利だよね♪
毎回、いちいち上のを入力してたら面倒だし〜
そのベースを使ってネズミ講？のように派生させていけばいいんだし〜
派生させたものは、ファイルを開いて「新しく名前を付けて保存」すればいいし〜
って言われなくてもそんなの判ってる？ナイスなアイデアと思ってた俺はお馬鹿？
「今日のぜって〜」
〇＜ｂｒ＞は、ＢＲ法のことでは決して無い！！
〇ＹＯＷは初心者で面倒くさがりで馬鹿なのでこの企画がいつまで持つか判らない！！
lesson3（文字列を中央や右に配置）
今回は文字を中央や右揃えにするための記号を覚えよう！！
その前にこの記号ですが、専門用語で”タグ”と呼ぶらしいです、どうも・・・
まあ記号でもタグでも判ればそれでいいんだし記号（タグ）で
しばらく、行くとしますか。
ということで、文字はいきなり
右側に移動しました。読みづらい？我慢しろ！！
おっと今度は中央に文字が
現れていますね！！
皆さんお元気ですか〜？（陽水調）
こんな風に文字を中央や右に揃えるための記号（タグ）は、
＜ｐ ａｌｉｇｎ＝”位置”＞移動させたい文章＜/ｐ＞
です。位置の所には半角でleftかcenterかrightで位置を指定です。
leftは左、centerは中央、rightは右って事です。
そんな事判ってると言いたいでしょうが、３歳の子供や８７歳のおじいちゃんが
もし見てたらいけないので一応参考までにってことで・・・
だったら漢字にもふりがなふっとけってか？
あと上の記号（タグ）とほとんど同じ働きの記号（タグ）として
＜ｄｉｖ ａｌｉｇｎ＝”位置”＞移動させたい文章＜/ｄｉｖ＞
っていうのもあります。二つの記号(タグ）の違いについては次の復習のページで
説明しますが、たいした違いはあまりないようです。
さて今回はこれまでです。復習でもうひとつ記号（タグ）を紹介しますが
参考程度で覚える必要はないと思います。
次回も改行に関する記号（タグ）をお勉強です。
今日の復習！！
文字列を右や中央に配置するための記号（タグ）は半角入力で・・・
＜ｐ ａｌｉｇｎ＝”位置”＞文字列＜/ｐ＞と・・・
＜ｄｉｖ ａｌｉｇｎ＝”位置”＞文字列＜/ｄｉｖ＞の２つです
”位置”の所には半角入力で
"left"（左）"center"（中央）"right"（右）と持っていきたい位置を指定
また２つの記号（タグ）の違いは・・・
＜ｐ ａｌｉｇｎ＝”位置”＞文字列＜/ｐ＞を入力すると
＜ｐ ａｌｉｇｎ＝”位置”＞文字列＜/ｐ＞
と、このようになります。
＜ｄｉｖ ａｌｉｇｎ＝”位置”＞文字列＜/ｄｉｖ＞を入力すると
＜ｄｉｖ ａｌｉｇｎ＝”位置”＞文字列＜/ｄｉｖ＞
と、このようになります。
２つの違いが判りましたか？表示からソースを見れば判りますが
２つとも、改行の記号（タグ）である＜ｂｒ＞を入力しなくても勝手に改行がされています。
そして、＜ｐ ａｌｉｇｎ＝”位置”＞文字列＜/ｐ＞の方は上下に一行分スペースがつきます。
つまり記号（タグ）の前後が２つ改行された状態になります。
一方、＜ｄｉｖ ａｌｉｇｎ＝”位置”＞文字列＜/ｄｉｖ＞の方は
上下にはスペースがありません。
つまり記号（タグ）の前後が一行分だけの改行になります。
たいした違いはありません。必要に応じて使い分ければ？って感じ。
もう一つ文字列の配置を指示する記号（タグ）を紹介します。それは・・・
＜ｃｅｎｔｅｒ＞文字列＜/ｃｅｎｔｅｒ＞
です。これは、中央に文字列等を配置したいときに使う記号（タグ）ですが、
右や左に配置する指示はできないし、改行するために＜ｂｒ＞を
使う必要があるので、やっぱ上の２つを使った方がいいのでは？
「今日のぜって〜！！」
〇＜ｄｉｖ ａｌｉｇｎ＝”位置”＞文字列＜/ｄｉｖ＞と
＜ｄｉｖ ａｌｉｇｎ＝”位置”＞文字列＜/ｄｉｖ＞の違いは
微々たるもの！！必要に応じて使い分けろ！！
〇位置を指示する"left"って、何もしなければ勝手に左に配置されるだろ？
いつ使うんだ？
lesson4（文字の改行を禁止？）
今回は文字の改行を禁止する記号（タグ）
＜ｎｏｂｒ＞文字列＜/ｎｏｂｒ＞
を覚えます。文字の改行＜ｂｒ＞を禁止（ＮＯ）だから＜ｎｏｂｒ＞でしょうか？
ところで改行を禁止するってどういう事？
このコーナーの一番最初のページを思い出してください。
文字の改行を指示する＜ｂｒ＞を使ってないためにとても
読みづらいページになってましたよね。だから改行を禁止しちゃダメじゃん！！
いや、でもよく考えれば画面の端まできたら勝手に改行されてましたね。
あなたがお持ちのパソコンのディスプレイの横幅は無限ですか？そんな筈は無い！！
それと同じであなたが今ここを見ているブラウザ（たぶんＩＥ）にも横幅に制限があるみたい。
また、このブラウザは厄介なことに見る環境によって大きさが変わるってことです。
例えば・・・このＨＰに直接来てる方は、俺がちゃんと改行を指示した所で改行されていて、
整理された文字になっている筈ですが、バンドのＨＰからこのページに来てる方は前のページ
までは変な所で改行されてませんか？理由はバンドのＨＰの左側に邪魔っけな？メニュー画面が
あるからです。あのメニューがどのページに行っても画面の４分の１程を占領していて
ブラウザの横幅を狭くしているので、そうなってしまうのだ！！
じゃあ実際＜ｎｏｂｒ＞＜/ｎｏｂｒ＞を使っているこの画面ではどうなるのかと言えばこ〜〜〜んな風に横に
長〜〜〜〜〜〜くどこまでも伸びてゆくんですね！！
ただし、あまり横に長いと見る側が非常に迷惑です！！やめときましょう。
つまりこの記号（タグ）は文字を自分の整理した通りに表示しないと我慢できないというこだわり派のあなたや
見る人がどんな環境のブラウザでも見やすい状態に！！とお考えの優しいあなたのためにあるんですね。
俺はどっちでもないので、これからもあまり使わないと思う・・・
最後に＜ｎｏｂｒ＞＜/ｎｏｂｒ＞の間の文字列には改行の＜ｂｒ＞をいれれば、もちろんその個所で
改行されますが、もしよほど横幅の狭いブラウザで見る人がいてその文字列がまだ横に伸びすぎていると、
感じている人がいたら・・・どうしよう？と心配性な人には＜ｗｂｒ＞と言う記号（タグ）をおすすめします。
＜ｂｒ＞は指定した位置で必ず改行しますが＜ｗｂｒ＞は見ている人のブラウザの環境によって
その位置で改行するか、改行せずにそのまま表示するかを横幅によって決定してくれるというものです。
なんか文が長くて読むのが面倒くさそうな感じになってしまったけど説明べたなんで勘弁！！
次回はリンクを貼る記号（タグ）についてです。なるべくあっさりとわかり易くなる様、努力するか・・・
今日の復習
改行を禁止する記号（タグ）は・・・
＜ｎｏｂｒ＞文字列＜/ｎｏｂｒ＞
ブラウザ（ここではたぶんＩＥの）には横幅を制限する機能があるため
見る人や環境によっては自分が改行を指示した以外の場所で勝手に改行
される事がある。それを防ぐために使うのが上の記号（タグ）！！
こだわり派や見てくれる人に優しいあなたに必携の記号（タグ）！！
実際にこの記号（タグ）を使うとブラウザの横幅がどうであろうとこんな風に横に文字が延々と
連なって見る側にとっては大変迷惑な状態になってしまう！！
ということで改行の記号（タグ）である＜ｂｒ＞を忘れずに・・・って当たり前！！
それでも一行が長いかもと心配な方は改行候補の位置を指示する記号（タグ）
＜ｗｂｒ＞を！！
この記号（タグ）は見る側のブラウザの横幅が狭ければその位置で改行してくれ
そうでなければ、そのまま一行で表示してくれるというもの！！
「今日のぜって〜！！」
〇文字が横に延々と続くのは見る側にとって大変迷惑っていうかムカツク！！
・・ので＜ｎｏｂｒ＞＜/ｎｏｂｒ＞を使うときは十分注意！！
〇俺は延々と横に伸びつづけるＨＰを作るんじゃ〜〜！！と言う方はどうぞご勝手に！！
lesson5（リンクを貼るPART1）
今回の課題は”リンクを貼る”です。
リンク（Ｌｉｎｋ）とは・・・辞書では”結合させる”や”連結する”って意味。
つまりＨＰ上では、そこをクリックすれば違うページやサイトにとぶって事ですね。
これはかなり重要！！
っていうかこれ使えればそこそこのＨＰが簡単に
できちゃうもんです。俺のＨＰの日記や掲示板も他のサイトで無料で借りて
リンクさせてるだけですから。
他にもこのコーナーには次のページや前のページに行くための選択用の文字や
見たい所から見るためのメニュー画面（毎回いちいちページを進めるのが面倒
・・・と苦情が出たので作りましたって当たり前か・・・）がありますが、それらも
このリンクさせるための記号（タグ）を付けているって事です。
そのリンクを付ける記号（タグ）は・・・
＜ａ ｈｒｅｆ＝”リンク先”＞文字・画像等＜/ａ＞
リンク先の所にはＨＰアドレスやメールアドレス、ファイル名を
文字・画像等の所には好きな文字や絵などをいれればＯＫ！！
メールアドレスと上に書きましたがメールアドレスの場合は正確には
＜ａ ｈｒｅｆ＝”mailto:メールアドレス”＞文字・画像等＜/ａ＞
としなければなりません。こうすればメールアドレスの部分に入れた
アドレス先にメールを送るための編集画面が勝手に出てくるワケです。
では実際にリンクを貼ってみましょう！！
バンドのホームページはこちら→ＧＯ！！
このようにリンクさせた所は下線が付きます。
ただし気をつけないといけないのは記号（タグ）が付いた時点でリンクされるので
リンク先を間違って入力してもどこかにとんでしまうのでリンクを付けたら正確に
そこにいってくれるか、自分で確認するのは忘れずに！！
次回もリンクについてです。ちなみに今回の復習でメールでの応用を！！
これで何も知らない友達に差をつけろ！！
今日の復習
リンクを貼るための記号（タグ）は・・・
＜ａ ｈｒｅｆ＝”リンク先”＞文字・画像等＜/ａ＞
メールの編集画面にリンクさせる場合は・・・
＜ａ ｈｒｅｆ＝”mailto：メールアドレス”＞文字・画像等＜/ａ＞
それでは上の記号（タグ）を使ってメールソフト（アウトルック）で
小枝じゃなく小技を使ってみましょう。
まず、メールソフトを開きメールの新規作成をします。
ふだん友達に紹介したいＨＰやメールのアドレスはそれを入力すると、勝手に
リンクが貼られていますよね。そのときメールの作成画面の下に
「編集・ソース・プレビュー」と並んだボタンがあります。
そのソースというボタンをクリックしてみると、自分の入力した
ＨＰやメールアドレスの前後に上の記号（タグ）が貼り付けられているはずです。
そうです！ここが今、学んでいるＨＴＭＬをいぢれる場所なのです！！
ＨＰを作ってない方でもＨＴＭＬをここで活用してみては？
話は戻りますが、要するに上のリンクを貼る記号（タグ）をこの場所で自分で
入力してしまえば、アドレスを直接記入するんではなく他の言葉を使えるってわけ！
＜ａ ｈｒｅｆ＝”リンク先”＞文字・画像等＜/ａ＞の「リンク先」に
入力したいＨＰ・メールアドレスを入れておけば、「文字・画像等」の所には
どんな好きな言葉を入れておいてもＯＫって事。
例えば「○○君のＨＰ」とか「○○ちゃんのメルアド」とかいう文字を
クリックさせる事でそこにとばせる工夫ができるワケです。
もちろん記号（タグ）に「文字・画像等」と書いてる様に画像でもＯＫです。
ＨＰの場合ほとんどが画像（絵や写真）をクリックすることで違うページに
行きますが、メールでもこれは活用できます。
ソースの画面で上の記号（タグ）の「文字・画像等」の所に自分のＰＣに
保存してある絵や画像のファイル名を入力すればいいだけ。
画像の入れ方が判んないという方は頑張って覚えて下さい。
ここはＨＴＭＬを使うコーナーでメールを教えるコーナーじゃないんんで・・・
「今日のぜって〜！！」
○リンクを貼る記号（タグ）は重要っていうか、かなり重要！！
っていうか暗記しろ！！
○この記号（タグ）を使ってメールで知らない友達に差をつけろ！！
ソースだ！ソースを開け！！
ジャンプ先
lesson6（リンクを貼るPART2）の続き・・・
＜ａ ｎａｍｅ＝”リンク先”＞文字・画像等（ここではジャンプ先）
というわけです。一気に今回のＬＥＳＳＯＮの続きまでとんで来ました。
判りました？もう一度、記号（タグ）の説明をします。
＜ａ ｈｒｅｆ＝”＃リンク先の名称”＞文字・画像等＜/ａ＞
＜ａ ｎａｍｅ＝”リンク先”＞文字・画像等
このように上の２つの記号（タグ）を使うことによって同じページ内に
リンクを貼ることが出来ます。
「リンク先の名称」と「リンク先」の所に同じ文字を入力することで
同じページ内でのリンクが可能になるってことです。
ここの文字はもちろん半角の英数字にしておきましょう。
文字・画像等の所は何でもいいですけど。
このページでは「リンク先の名称」と「リンク先」を半角の”ｌｉｎｋ”という
文字を入れてリンクさせることで”ジャンプ”から”ジャンプ先”に
とばせています。ソースを見れば判ると思います。
この記号（タグ）を上手く使えばたった1ページのＨＰもできちゃうわけだ。
つー事で下のメニューからこのページのそれぞれのＬＥＳＳＯＮに行ける様
リンクを貼っておいたので、この機会にいままでの復習もしちゃってください。
それぞれのＬＥＳＳＯＮをクリックすれば下のメニュー画面に
戻れるようにもしておきましたので・・・かなり面倒くさかった・・・
メニュー
次回もまたまたリンクに関する記号（タグ）をやります。
今回はかなり面倒だったので復習は超シンプルにさせて頂く！！
←前のページへ メニューへ 次ページへ→