タイトル

入学式に参加のみなさま、こんにちは。これから少しだけタグのお勉強をしていただきます。FROM40PCホームページ道場にて掲載したものに若干手を加えたものですので、メモ帳で「右端で折り返す」を利用してお読みください。また、途中にまとめテストがあります。＜＜スペシャル問題＞＞というタイトルがついています。実際に掲示板で書いてみたい方はどうぞ「練習・テスト・お試し掲示板」で練習をなさってください。掲示板ではちょっと恥ずかしいという方は、書いた部分（タグの始めから終わりまで）を新規に開いたメモ帳にコピー＆ペーストして、HTML形式ファイルで適当な名前を付けて保存し、ブラウザで見え方をチェックしてオッケーだす。では、はじまりはじまり。 ○第１回○ 　タグというのはご存じ、ホームページの作成に使われている言葉のようなもので、たとえば、こんなんです。タイトルページの内容なんか一見複雑そうに見えますけど、英字と<>やの記号の組み合わせで書かれているところと、その間に日本語が使われているのがお分かりいただけるかと思います。タグが使えるウェブフォーラムや掲示板でタグを書いて発言することで、文字を太く見せたり、斜体字にしたり、文字の大きさや色、背景に色を付けたりすることができるようになります。上のようなタグはウェブページなどで使われているタグの一部なのですが、フォーラム掲示板ではそれらのうちの以下のものを使うことができるようになっています。　太字に見せる　斜体字に見せる　リンクを張る　文字の大きさや色を指定する　画像を表示させる　これら以外のタグは現在のところフォーラム掲示板では使えませんので、タグとして読み込まれずに、そのまま表示されてしまいます。　まずは簡単なタグから覚えていただきますが、その前にちょっと一言。タグはペアで使うものがほとんどです。これから覚えていただく、太字にするタグの場合も　<ここからは太字に>　文字列　　のように、太字にしたい文字を太字にするためのタグ（命令語）ではさみます。　これを Internet Explorer などのブラウザで見るとタグにはさまれた部分の文字が太字になって表示される仕組みになっているわけですね。＜太字にするタグ＞ ふとじ 　このようにタイプすると、ふとじ　が太字で表示されます。太字のことを英語で bold (ぼーるど)と言いますが、その頭文字です。最初のがで、後のがですので、間違えないようにしましょう。　< のキーは英数モード(日本語入力をオフにしてあるモード)で「ね」のキーを押すと、> のキーは「る」のキーを、/ は「め」のキーを押す表示されます。　日本語モードのままでは、＜＞・が表示されてしまいますので、気を付けましょう。　ふとじ　の表示をパソコンで確認してみたい方は、メモ帳で　ふとじ　とタイプしたら、test.htm と名前を付けて保存してみてください。そのファイルをダブルクリックするとブラウザが立ち上がって　ふとじ　が表示されるはずです。　さらに練習を続けます。 ちょっと太ったかな 　このようにタイプすると、ちょっと太ったかな　の部分が太字で表示されます。では、今日のまとめを兼ねた練習問題です。　食べ過ぎかな　これを太字で表示させたいときは、どのようにタグを打てば良いでしょう。 食べ過ぎかな 　これで正解で～す！　このように、太字で表示させたい場合は～の組み合わせを使います。次回は斜体字にするタグを覚えていただきます。＜＜スペシャルテスト１＞＞次の文字列を太字にして表示させてください。「かっこ」の記号は不要です。「２００３年４月２６日ふろよん入学式オフ」 ○第２回○ 　今回は文字を斜体字にする　タグを覚えましょう。　斜体字というのは文字が傾いている字体のことで、italic体(いたりっく・たい)ともいいます。italic の頭文字をとったこのタグは、斜体字にする文字のように使います。　たとえば、こんなふうに書いて使います。　傾いちゃった 　こう書いてタグが使える掲示板に発言すると、　傾いちゃった　の部分が実際には傾いた字体で表示されます。　では、練習です。　ピサの斜塔かな　を斜体字にしたかったらどうすれば良いでしょう。これは簡単ですよね。　ピサの斜塔かな 　と書けばいいわけですよね。つまり、斜体字に見せたい部分の文字をで、はさむようにタグを書きます。　ところで、前回覚えた、太字でなおかつ傾いた文字にするにはどうすればいいでしょう。太字に指定しつつ、斜体字にも指定すれば良いのですから、　とを合わせ技で使って、　太くて傾いちゃった 　このように太字に指定するタグの中に斜体字のタグを入れ子にして使うか、　　太くて傾いちゃった 　と斜体字のタグの中に太字のタグを入れ子にして使って書いてもオッケーです。どう違うのかお分かりですよね。このようにタグを二重、三重に使う場合は順番を間違えないようにしましょう。　日本語を使って表現すると分かりやすいと思いますが、<ここから斜体字><ここから太字>ここの文字が飾られます<ここまで太字><ここまで斜体字>という書き方が正解です。　これを掲示板で書いてみると　太くて傾いちゃった　が実際には太字でなおかつ斜体字で表示されます。　タグがきちんとタイプされていないと、エラーが出て書き込みができないことがありますので、ミスタイプに気を付けましょう。　なお、太字や斜体字に指定するタグでは文字の大きさを変えることができません。そこで、次回からは文字の大きさや色をいろいろと変えるタグを覚えていただきたいと思います。　ところで、タグをいちいちタイプすのは面倒だとお思いの方は、びんぼーフォーラムのマネージャから教えていただいた方法、タグを単語登録しちゃう方法をぜひおためしください。　別に、びんぼーフォーラムのマネージャだけが知っているというわけではないでしょうが、なにせ私が最初に教わった方なので名前をあげさせていただきました。そんな方法はとっくに知っているよという方々も多いでしょうけど。(^_^; 　　単語登録というのは、日本語変換(MS-IMEやATOK)によく使う言葉を覚えさせることです。たとえば ATOK で太字のタグを覚えさせるなら、ATOKのメニューを表示させて単語登録を選択します。「単語」のところに　　と入力します。次に「読み」のところに　ふとじ　と入力します。OKボタンを押します。　次回から「ふとじ」とタイプして変換キー（またはスペースキー）を押すと が変換候補に現れるようになります。同様の作業で も「ふとじ」として登録しておくと便利です。たとえば、　太ったみたい 　とタイプするときに、ふとじ　とタイプしてから、変換キーを押しますとが候補として表示されるはずです。次に太ったみたいとタイプします。ふたたびふとじ+変換キーでが出ますが、もう一回変換キーを押すと今度は が出るはずです。ここで Enterキーを押せば確定されます。　こうすることで、タグをいちいちタイプしないでも済みます。これ、便利だわー。＜＜スペシャルテスト２＞＞次の文字列を太字でかつ斜体字にして表示させてください。「かっこ」は不要です。「今年もやってます、FROM40PC ふろよん入学式オフ」 ○第３回○ 今回は文字の大きさに変化をつけるタグを覚えましょう。　で文字をかざろう　今回の文字の大きさを指定するタグの使い方であれば、フォントのように使います。<>の記号とfont size(くっつけずに半角スペース)、それに="*" を使います。　*には指定するサイズの数値を入力するのですが、ここに７段階のサイズを表す数字を半角数字で使うことができます。数値を入力しない場合は基準値が適用されます。　基準値というのは、そのページや掲示板であらかじめ標準のサイズに決めてある標準値のことです。　７段階の文字サイズを言葉と数値で説明するとすれば、以下のようになります。　超特小　特小　　小　　普通　　大　　特大　　超特大　 1　　　2　　　3　　　4　　　5　　　6　　　7 　左のほうがより小さく、右のようがより大きいサイズです。この数値を使って、たとえば超特大サイズ(数値は７)の文字を表示させるとしたら、次のように文字のサイズを指定することができます。　超特大サイズの文字　これを掲示板で見ると、超特大サイズの文字　の部分がブラウザで表示できる一番大きな文字のサイズで表示されます。　では、超小サイズの文字を表示させたい場合はどうすればいいでしょう。簡単ですよね、サイズを７から１に変更すればいいわけですから、　超特小サイズの文字　となります。これをWeb掲示板で見るととってもとっても小さい文字で表示されます。このようにサイズを指定して文字の大きさを決めることを絶対指定と言います。　相対指定という方法もあります。これはページや掲示板で設定されている基準サイズからどれだけ小さく、あるいは大きく見せるかという指定方法です。基準サイズは一般的にと同じサイズですが、ページや掲示板で基準の文字サイズが設定されている場合もあり、その場合はそこで設定された文字サイズが基準サイズとなります。　この基準サイズよりもちょっと小さめ、すごく小さめ、ちょっと大きめ、すごく大きめというように、＋と－の符号を使って指定します。　これが今日ふたつめのポイントです。　ちょっと大きめの文字　これだと、基準より一段階大きめの文字で表示されるようになります。　ちょっと小さめの文字　これで基準値の文字サイズよりも一段階小さなサイズを表示できます。　なお、相対指定の数字は基準のサイズ値と合算した数値が1～7になる範囲に限られます。たとえば、文字をめちゃ大きくしたいと思って、すんげぇでっけぇ文字と書いても+100は無視され、絶対指定のを用いた場合と同じ表示にしかなりません。　次回はフォントに色をいろいろつけてみましょう。＜＜スペシャルテスト３＞＞次の文字列をフォントの大きさを基準サイズよりも３段階大きくして表示させましょう。「かっこ」は不要です。（ここにハンドルを入力）の代わりにあなたのハンドル（ニックネーム）をタイプしてください。「（ここにハンドルを入力）が参加しています」 ○第４回○ 今回は文字に色をつけるタグの使い方を覚えていただきます。　文字の色を指定するときには、　色を変えたい文字　のようにタグを書きます。*の部分には色を表す英語、もしくは色を表す数値(16進法)を入力します。　たとえば、文字を真っ赤にしたい場合でしたら、英語の red を使って、　赤い文字　のように書きます。16進法の数値を用いる場合は、　赤い文字　のように書きます。ffは10進法では255に相当し、ここでは赤の濃さ(0～255までの256段階の濃さのうち一番濃い赤)のことだと思ってください。ff0000なら赤・緑・青の光の三原色のうち赤の光だけが当たっている感じですね。　これをタグの使える掲示板で書くと、「赤い文字」の部分が真っ赤で表示されます。　色を表す英語で使えるものの代表、基本16色の名前と、その色の16進法のでの色の数値を書いてみます。　black　黒　　　gray　灰　　　silver　銀　　white　白　　maroon　栗　#000000　　　　#808080　　　 #c0c0c0　　　 #ffffff　　　#800000 　red　　赤　　olive オリーブ　yellow　黄　　green　緑　　lime　ライム　#ff0000　　　#808000　　　　 #ffff00　　　 #008000　　　#00ff00 　teal 暗緑青　aqua　明緑青　　navy　　濃紺　blue　青　　purple　紫　#008080　　　#00ffff　　　　 #000080　　　 #0000ff　　　#800080 　fuchsia　明赤紫　　#ff00ff 　たとえば、　栗ご飯を食べたいぞと書けば、maroon(栗色)の文字で「栗ご飯を食べたいぞ」と表示させることができます。　これ以外にも色はいろいろありますが、いろいろありすぎるので色の名前については割愛させていただきます。　ところで、前回覚えていただいた文字の大きさを変えたまま、文字の色も変えたい場合はどうすればいいでしょうか。　その場合は、以下のように書きます。　文字を２段階大きく青で表示　これで「文字を２段階大きく青で表示」の文字列が、基準サイズよりも２段階大きく、青色で表示されます。　なお、色を指定するときに気を付けておきたいことに触れておきます。　Web掲示板の背景には色が付いていることがありますので、文字の色を指定するときに背景と似ている色に指定すると、とても読みづらくなります。背景とまったく同じ色に指定すると、読めなくなってしまいます。　もっとも、これを利用して「あぶりだし」のように文字を見た目には隠して遊ぶこともできます。＜＜スペシャルテスト４＞＞次の文字列を、文字の大きさを２段階大きく、文字の色を青で表示させてください。「かっこ」は不要です。「今年の入学式は近江八幡マルチメディアセンターで開催中です。」 ○第５回○ 　今回も文字かざりに関連するタグの使い方を覚えていただきます。　前回は文字そのものの色をいろいろと変えて遊びました。今回は文字そのものではなく、背景に色をつけるタグの書き方についてです。　文字のそのものの色、たとえば文字を青色に設定するときには、　青色の文字　のようにタグを書きました。今回は文字の背景に色を付けるタグで、書き方は次のようになります。今回からスタイルシートが登場し、ちょっと書き方が変わります。　背景が青　style(スタイル)にはさまざまな機能をもたせることができますが、ここでは background(バックグラウンド)つまり文字の背景を、blue(ぶるー)青色に設定しています。　この例では背景が青色になるわけですね。色の表し方については前号を参考に blue を好みの色に変えて遊んでみてください。　ところで、上の例だと文字そのものの色が標準の黒のまま、背景が青なので見づらいと思われるかもしれません。文字そのものの色も変えるようにタグの書き方を以下のように変えてみます。今度は文字そのものの色を指定しつつ、背景の色を指定しています。　背景が青　今度はどうでしょうか。スタイル属性を二種類つけているのですが、複数つける場合は ; セミコロンで区切ります。この例の場合は文字そのものの色を白に、そして背景を青に設定しています。　背景が青なので、文字そのものの色を白にすると、さっきよりはずっと見やすくなったのではないでしょうか。　一般に補色の関係にある色(正反対に感じられる色)を組み合わせてつかうと、文字そのものの色と背景の色の対照がくっきり感じられますが、きつい感じがしますので、文字の色に背景をつける場合は、濃い色と淡い色を組み合わせて使うと見やすいのではないでしょうか。　　このサンプル以外にもスタイルシートを使って文字を飾ることができるタグの書き方は実にたくさんあります。簡単なものをいくつかあげて今回はここまでとしたいと思います。　たとえば、タグとスタイルシートを合わせ技で使う例は以下のようになります。軽く読み流して、必要になったときに使うようにしましょう。　下線をつける　上線をつける　← Netscape Navigator では無効です。　取消線をつける　アンダーラインを消す　点滅させる　← Netscape のみ有効です　文字の太さ(通常) 　文字の太さ(太字)　　文字の傾き(通常) 　文字の傾き(イタリック) 　文字の傾き(斜体) 　行の高さ(通常) 　行の高さ(24ポイント) 　文字の表示領域幅を設定 ←「文字の表示領域幅を設定」の文字が 240ポイントの幅で表示　文字の背景色(赤) 　文字の背景に画像　ここまで書いてくると、はたとお気づきになった方も多いと思います。今まで登場した太字にするタグや斜体字とはどう違うのかと。答えは簡単、違いはありません。タグの書き方が違うだけです。　たとえば、太字で斜体字で文字の色を青にしたい場合のタグの書き方は、いくつかパターンがあるということですね。どれが正解で、どれが間違いということではありません。いずれも正解です。　たとえば、　青い文字で太字で斜体字　　青い文字で太字で斜体字　上のふたつの例はどちらも同じ表示になります。＜＜スペシャルテスト５＞＞次の文字列を、文字の背景色を赤に、文字の色を白にして表示させてください。「ただいま講座で楽しく？勉強中」 ○第６回○ 　今回は画像を表示させるタグの使い方を覚えていただきます。　ふろよんこと、FROM40PC 40歳からのパソコンフォーラムのお試し掲示板では、文字以外にも画像を表示させることが可能です。たとえば、ご自分のホームページ上に置いてある画像を呼び出して表示させることができます。　アット・ニフティには画像を貼ることのできるパレット会議室というのもありますが、パレット会議室との違いは、ご自分のパソコンの中の画像をウェブ上のパレット会議室に直接アップロード(転送)できるのがパレットで、それができないのがウェブ掲示板です。　別の言い方をすれば、お店の中に在庫(画像)をおいて注文を受けているところがパレット会議室で、お店には在庫(画像)を置かずに注文を受けてから取り寄せているところがフォーラム掲示板です。　パレット会議室には画像の在庫がありますので、どなたが発言を見ても画像が表示されますが、フォーラム掲示板の画像は取り寄せになってしまうので、見ている人の通信状態によっては表示されないこともあります。　ですから、フォーラム掲示板に画像を表示させるには、たとえば自分のホームページに置いてある画像を呼び出すことで表示させるのが一番簡単です。　　さて、画像を表示させるタグは次のような書き方をします。　　あれ、ちょっと今までと書き方が違うじゃないか、（閉じるタグ）は要らないのかを思われるでしょうが、これは不要です。　* のところに画像の保存先のURL(アドレス)を記述します。たとえば、@homepageにホームページを持っている、みつりんの例ですと、ホームページURLが http://homepage1.nifty.com/mitsurin/ なので、ここに画像を置いておくとすれば、この後ろに画像の名前を英語で追加することになります。40pcbannber.gif という画像を表示させるなら、タグを以下のように書いて掲示板に表示させることができます。　　このようにタグを書くと、このタグを書いたところに FROM40PC の小さな絵が表示されます。(このアイコンはみつりん作のものです) 　ホームページをお持ちでない方は、いったんパレットに画像を転送(アップロード)してから、その発言の中の画像をマウスの右ボタンでクリックして画像のありかをプロパティで表示させ、URL(アドレス)をコピーしてタグに記載すれば表示させることができる場合がありますが、この方法はパレットの認証作業が必要なため、Nif-XなどのWeb掲示板巡回ソフトを使わないとうまくいきませんので、この方法はおすすめしません。　なお、ふろよんの場合、お試し掲示板以外ではタグを使って画像を表示させることはご遠慮いただいておりますので、皆様のご協力をお願いいたします。また、他のフォーラムの場合も、掲示板によっては画像を表示できる掲示板とそうでないところがありますので、ご注意ください。　また、画像の扱いに関してはパレットのヘルプをお読みになった上で著作権や肖像権等にはじゅうぶんお気を付けください。　http://www.nifty.com/community/forum/abc/note2.htm (←パレットのヘルプページ) ＜＜スペシャルテスト６＞＞以下の文字列と、指定先にある画像を表示させてください。画像はみつりん作のものです。画像の指定先は　http://forum.nifty.com/from40pc/IMAGES/froba.gif なお、掲示板では改行タグの
は不要です。ブラウザでのみ確認する場合は文字列の後ろに
タグを加えてから画像を表示させるタグを書いてください。（って、ヒント出しすぎ？）(^_^; 「入学式の看板です」（ここにURLを書く） ○第７回○ 　今回はリンク先を書いて、掲示板の中で特定のページにジャンプさせるタグの書き方です。　掲示板の中にURL(アドレス)を書いておけば、わざわざリンクのタグを使用する必要もありません。たとえば、　http://forum.nifty.com/from40pc/ 　と掲示板に書いておくと、あとからそれを読むとリンクが自動的に張られ上記のアドレスをクリックするとブラウザのウィンドウが新しく開き、FROM40PC のWebページにジャンプすることができます。　リンクタグを使う場合とは、上記のような URL を書かずに、文字をクリックするとジャンプさせたいような場合です。たとえば、　ふろよんのホームページへ　などと書いておき、その文字にリンクを張るといった場合です。　◎アンカータグでリンクの作り方◎同一ウィンドウ内で　たとえば、ふろよんホームページにリンクを張る場合は、次のようにタグを書きます。　ふろよんのホームページへ　このように書くことで、ふろよんホームページにリンクが張られ、ふろよんのホームページへ　の文字列をクリックするとジャンプします。　なお、FROM40PC掲示板内でリンクを書かれる場合は、ジャンプ先の説明を必ず明記ください。たとえば「ここ」などとジャンプ先がどこなのか分からないリンク方法ではなく、「わたしのホームページはこちら」などと書くような、ジャンプ先が分かるように書いていただくように皆様のご協力をお願いします。　もちろん、フッタなどのご自分のホームページを書いておかれる場合など、それと見てジャンプ先が分かる場合はその必要がありません。＜＜スペシャルテスト７＞＞次の文字列を使ってリンクふろよんホームページにリンクを張ってください。なお、ふろよんホームページのURLは　http://forum.nifty.com/from40pc/　です。「こちらからふろよんホームページにジャンプ」入学式の掲示板で使えるタグ講座はこれにて終了です。お疲れさまでした。なんだ、たったこれだけ？そうお感じの方、http://forum.nifty.com/from40pc/mit/homepage.htm からメモ帳でホームページ講座にお入りになり、メモ帳で簡単なホームページを作ってみてください。タグを覚えなければ、掲示板での発言ができないわけではありません。しかし、基本的な知識を少し覚えておくだけで、掲示板やウェブページを見る視点がちょっと変わってくるはずです。無駄なタグを省くなんてワザも身に付くと思います。ぜひ今後ともお勉強をお続けください。では。(^_^)/~ みつりん・新潟