100万ポイント山分け！1日5回検索で1ポイントもらえる

232558
ホーム \| 日記 \| プロフィール	【フォローする】【ログイン】

七鍵＠楽天

カテゴリ別記事

よく読まれている記事

お気に入りブログ

カテゴリ未分類26

ブログの真似事168

心理テストや○○度チェック12

禁煙＋ダイエット18

最近買ったCD・観た映画3

[タグ教室] カテゴリの記事

全83件 (83件中 51-83件目)

< 1 2

タグを覚えよう【第３６回目】　-　文字の種類を変えてみよう

しばらくつまらない話ばかりが続いてしまいましたので今日辺りぱーっと分かりやすい講座にしましょう(〃⌒▽⌒)ってなわけで、題名の通り・・・文字の種類を変えてみることにしましょう(￣▽￣人)文字の種類って何？って方のためにまずはサンプルを見て下さい(〃⌒▽⌒)例）<font face="ＭＳＰ明朝">ＭＳＰ明朝</font><font face="ＭＳＰゴシック">ＭＳＰゴシック</font><font face="HG丸ｺﾞｼｯｸM-PRO">HG丸ｺﾞｼｯｸM-PRO</font><font face="Comic Sans MS">Comic Sans MS</font><font face="Westminster">Westminster</font><font face="Lucida Sans">Lucida Sans</font>表示結果）ＭＳＰ明朝ＭＳＰゴシックHG丸ｺﾞｼｯｸM-PROComic Sans MSWestminsterLucida Sans注意）分かりやすいように、表示結果は文字を大きく指定しています。どうでしょうか(〃⌒▽⌒)なんでも変化が大事ですよね(￣▽￣人)ワンポイントとして文字の種類を変えるのも良し、ページ全体の文字の種類を変えるのも良し(〃⌒▽⌒)いろいろと使えますよね。ただ今回は、記述する際に注意事項があります(´･ω･`)フォント名は、全角半角、大文字小文字をすべて正しく記入しないといけませんフォント名にスペースが入る場合は半角のスペースを入れなければなりませんページを見てくれる人のパソコンに指定されたフォントがない場合、この指定は無視されます上記２点は守らなければ文字の種類が変わらず、標準の文字で表示されてしまいます。フォントが無い場合も標準の文字で表示されてしまいます。まぁ、何も表示されないわけではなく、種類を指定しない状態では表示されますのであまり神経質になることもないかもしれませんね（笑では、またあしたー(ﾟ▽^*)ﾉ⌒☆

Sep 15, 2004

コメント(2)
タグを覚えよう【第３５回目】　-　スタイルシートってなに？

前回の「タグってなに？」という話で、「文字の大きさ、色、太字、見出し、画像表示、表、などなど、Ｗｅｂページに必要な命令はHTML タグにて命令する」と解説を行いましたよね。しかし実はこれ、正確な表現ではないのです(´･ω･`)本来ＨＴＭＬは効率的に情報を発信できるように、文書の構造を記述することが主な目的となっています。ですから、そこに文字の色や形など見栄えに関する情報を記述してしまいますと、せっかくの大事な情報が見栄えを表す記述（命令）に埋もれて不明確となり、本来の趣旨から外れてしまうのです。「ではどうやって、見栄えに関する命令を行えばいいの？」と当然思われるでしょう。その答えがスタイルシートなのです(〃⌒▽⌒)スタイルシートを使用することにより、本文とは別に見栄えのルールを設定することができます。そればかりではありません(￣▽￣人)このスタイルシートを外部ファイルとして保存することにより、Ｗｅｂサイト全体で統一した見栄えを実現することも可能ですし、一度作成した見栄えを修正することも簡単となります。早い話が、スタイルシートを使って文書のコンテンツや論理構造と表現のルールを分離することによって、さまざまなメリットがうまれるというわけです。ただ、残念ながら・・・ここ「楽天」では外部ファイルとしてスタイルシートを保存することはできません(´･ω･`)ページのスタイルを一括して指定する方法もとれません(´･ω･`)ではなんのために？とおっしゃられるかもしれませんが知っているにこしたことはありませんよね(〃⌒▽⌒)見た目の効果だけでもタグだけで記述するよりはるかにいろいろなことができます。しっかり基本を覚えましょう(〃⌒▽⌒)まずは用語の定義からです。p{color:#0000ff;font-size:20px;}セレクタプロパティ値プロパティ値宣言例として要素名「P」（段落を表すタグです）の文字色を「#0000ff」（青色）、文字の大きさを「20px」のように表示するスタイルシートについて見てみましょう。最初の「p」（要素名）のことをセレクタ（Selector）と呼び、見栄え（スタイル）を適用する対象を記述します。そして、「{」と「}」で囲まれた範囲を宣言（Declaration）と呼びます。宣言の中にはプロパティとその値をコロン（ : ）で区切って記述します。プロパティと値のペアはセミコロン（ ; ）で区切って複数記述することもできます。ただし・・・今のところ「楽天」では以上のような記述はできません(´･ω･`)個々のタグ内に「style」属性として見栄え（スタイル）に関する情報を指定するしかないのです。個々に見栄えを指定しますので・・・同じ種類のタグ（要素タイプ）でも他の場所にあるタグ（要素）にはその見栄えが反映されることはありません。また、見栄え（スタイル）を適用する対象は明らかなので、以下のようにセレクタは記述せず、宣言のみを記述します。□sample.html<html> <head> <title></title> </head> <body><p style="color:#0000ff;font-size:20px;">ここの段落にスタイルが適用されます。</p> </body></html>以上、楽天ではだめ、楽天ではだめ・・・ばかりの説明でしたが(´･ω･`)理解できたでしょうか？大事なのは・・・HTMLは文書の構造を表すものであって見栄えを表すものでは無い、ということです。見栄えはスタイルシートを使用し表現するものなのですね(〃⌒▽⌒)では、また明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 14, 2004

コメント(5)
タグを覚えよう【第３３回目】　-　リストを作ろう（５回目）

タグを覚えようリスト編も今日で最終回です。今日は仕上げとして独自の画像をマークに指定してみましょう(￣▽￣人)ちなみに今日使用します画像は・・・どこかで見たことあるような無いような(´･ω･`)まぁ、深くつっこまないで下さい。では早速例）<ul style="list-style:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/12.gif);"><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul>表示結果）リスト１リスト２リスト３どうですか？こんなリストも少し変わっていて面白いですよね(〃⌒▽⌒)ただこのままでは少し見にくいと思いますので少し画像とリストの間に余白をいれてみましょう(￣▽￣人)例）<ul style="list-style:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/12.gif);"><li style="padding-left:15px;">リスト１</li><li style="padding-left:15px;">リスト２</li><li style="padding-left:15px;">リスト３</li></ul>表示結果）リスト１リスト２リスト３少し見やすくなりましたよね(〃⌒▽⌒)ページ内のちょっとしたワンポイントにも使えると思います。記憶の片隅にくらい置いておいてください（笑ではまたあしたー(ﾟ▽^*)ﾉ⌒☆

Sep 11, 2004

コメント(4)
タグを覚えよう【第３２回目】　-　リストを作ろう（４回目）

今日は「順番があるリスト」（OL）のマークを変えてみます(〃⌒▽⌒)とは言いましても・・・昨日紹介しました「順番の無いリスト」（UL）のマークを変える方法と大差ありません。こんなこともできるのか・・・くらいの感覚で眺めてくださいね(￣▽￣人)ではまず基本形から・・・例）<ol><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3何も指定しなければ「1.」「2.」「3.」という指定になりましたよね。これに昨日と同じように手を加えてみましょう(〃⌒▽⌒)例）<ol style="list-style:lower-roman;"><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3例）<ol style="list-style:upper-roman;"><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3例）<ol style="list-style:lower-alpha;"><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3例）<ol style="list-style:upper-alpha;"><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3いかがですか？色々な指定をすることができるでしょ(￣▽￣人)「lower-roman」はローマ数字（小文字）で表示されます。「upper-roman」はローマ数字（大文字）で表示されます。「lower-alpha」はローマ字（小文字）で表示されます。「upper-alpha」はローマ字（大文字）で表示されます。こちらも色々使い道がありそうですよね(〃⌒▽⌒)「UL」と「OL」の違いは大丈夫ですか？こんがらがったらこのページに復習に来ましょう（笑ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 9, 2004

コメント(7)
タグを覚えよう【第３１回目】　-　リストを作ろう（３回目）

今日は予告どおりリストのマークをいろいろと変えてみましょう(〃⌒▽⌒)とは言いましても、今日変えるのは「順番の無いリスト」（UL）のマークです。「順番があるリスト」（OL）のマークはまた明日紹介します（笑ではまず基本形から・・・例）<ul><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3何も指定しなければ黒丸でマークが表示されるのでしたよね(￣▽￣人)ではこれをいろいろ変えてみましょう。例）<ul style="list-style:none;"><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3例）<ul style="list-style:disk;"><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3例）<ul style="list-style:circle;"><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3例）<ul style="list-style:square;"><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3いかがですか？「list-style」（そのままでしょ？）に「disk」を指定するとデフォルトのままですよね。「none」を指定しますとマーク自体が消えてしまいます。「circle」を指定しますと白丸になりますよね。「square」を指定しますと黒四角になります(〃⌒▽⌒)今のところ用意されているマークはこれだけですがいかがでしょう？いろいろと応用できそうですよね(￣▽￣人)きっちり覚えておいていざというときに思い出せるようにしておいて下さい(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 8, 2004

コメント(0)
タグを覚えよう【第３０回目】　-　リストを作ろう（２回目）

昨日はリストのさわりだけってことで簡単なリストを紹介しました。今日もさわりの続きです（笑手抜きしてる・・・って思われてる方。９７％正解です(´･ω･`)残り３％は「誰にでも分かりやすくするためにゆっくりと解説しているのよ」って感じの「言い訳」という名前の「大義名分」ですがあまり気にしないで下さい。こんな屁理屈っぽい前口上はさて置き・・・昨日のリストは「順番が無いリスト」でしたよね(￣▽￣人)「上から読んでいくのだから順番じゃないか」と言われたら元も子もないのですが昨日のリストには順番がありませんでした！ってわけで、今日は順番のあるリストを紹介しましょう(〃⌒▽⌒)例）<ol><li>test1</li><li>test2</li><li>test3</li></ol>表示結果）test1test2test3使い方自体は昨日紹介しました「UL」タグとなんら変わりはありませんね(〃⌒▽⌒)順番があるものには「OL」タグを使用し、順番が無いものには「UL」タグを使用しましょうとただそれだけの違いです(￣▽￣人)ちなみに順番があるから、リストの頭のマークも順番どおりになっていますよね(〃⌒▽⌒)昨日、今日と簡単なところで話を止めましたが・・・これは明日以降への前ふりのためです（笑とは言いましても、明日以降の方がきっと面白いですよ(￣▽￣人)このリストに使用したマークをいろいろなものに変更してみますので(〃⌒▽⌒)楽しみにしておいて下さいね。では、また明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 7, 2004

コメント(0)
タグを覚えよう【第２９回目】　-　リストを作ろう（１回目）

今日はリストを作ってみましょう(〃⌒▽⌒)リストってなに？って方のために、今日はまずサンプルから(￣▽￣人)例）<ul><li>test1</li><li>test2</li><li>test3</li></ul>表示結果）test1test2test3がっかりしました？(´･ω･`)なーんだ、またつまらない講座か・・・って。いえいえ、これですね、とっても使い勝手がいいのですよ(￣▽￣人)例えば・・・例）<ul><li>test1<br>test1</li><li>test2<br>test2</li><li>test3<br>test3</li></ul>表示結果）test1test1test2test2test3test3普通に・・・・test1<br>test1のように書きますと、頭をそろえるのに苦労しますよね(´･ω･`)苦労するだけでぜんぜんきれいに揃いませんし（笑今日からしばらくの間、この「リスト」というものについて勉強をしていきましょうね(￣▽￣人)明日はさらにもっといろいろなリストを紹介します。今日はさわりだけ(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 6, 2004

コメント(8)
タグを覚えよう【第２８回目】　-　等幅フォントで表示する

なんだか今日の講座は題名からして難しそうですね(´･ω･`)等幅フォントで表示？なんとなく漢字からして意味は想像してもらえると思いますが実際何に使うテクニックなのでしょう？前もって正直に言っておきます。使い道はほとんどありません(´･ω･`)ただ、使う使わないの判断はこの講座を読んでくれた方がするものですよね。何回も言っている言葉ですが、タグを全部完璧に覚える必要なんて全くありません（笑「タグを使えばこんなこともできた」ってことを覚えておけば後は必要なときにカンニングすればいいだけですよねー(〃⌒▽⌒)例えばこのサイトなどに来て(￣▽￣人)ってなわけで、今回も興味があれば覚えてください(〃⌒▽⌒)例）iiiiiiiiiiiiiiiiiiiiiiiiiii<tt>iiiiiiiiiiiiiiiiiiiiiiiiiii</tt>表示結果）iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii見ての通り等しい幅で文字が表示されましたよね(〃⌒▽⌒)見た目だけの問題ですが、英字の「i」や「l」などは前後のスペースが詰められて表示されます。これが読みやすい場合もあれば読みにくい場合もあると思います。例えば・・・通常表示）Pinging 192.168.1.101 with 32 bytes ob data:Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Ping Statistics for 192.168.1.101: Packets: sent = 4, Received = 4, Lost = 0 (0% loss),Approximate round trip times in milli-seconds: Minimum = 0ms, Maximum = 0ms, Average = 0ms等幅表示）Pinging 192.168.1.101 with 32 bytes ob data:Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Reply from 192.168.10.2: expired in transit.Ping Statistics for 192.168.1.101: Packets: sent = 4, Received = 4, Lost = 0 (0% loss),Approximate round trip times in milli-seconds: Minimum = 0ms, Maximum = 0ms, Average = 0msどちらが読みやすいですか？多くの日本人は英数字がずらずら並ぶ文章を読む際に等幅フォントで表示されている方が読みやすく感じるらしいですよ(〃⌒▽⌒)まぁ、長々と英数字をＨＰに記述される方はさほど多くないでしょうから使い道が無いと言えば無いですね(´･ω･`)ただ、覚えておいて損は無いことですよね。こんなテクニックも・・・くらいで記憶の片隅に置いておいて下さい(￣▽￣人)では、また明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 5, 2004

コメント(0)
タグを覚えよう【第２７回目】　-　ＨＰってなんでできているの？

今回のテーマは「ＨＰ（ホームページ）ってなんでできてるの」です。そもそもなんでできているのかが分からないことには本来作りようがないですよね。インターネットを始めて、最初に開いたのがこのページだ、って方は多分いないでしょうから、少し思い出してみてください。Ｗｅｂページにもいろいろなページがありますよね。文書（文字）だけで構成されているページ、写真が掲載されているページ、開くと音楽が流れるページ、開くと動画が再生されるページ。本当に百ページ百様といった感じですが、これがＨＰってなんでできてるの、っていう質問の大きなヒントなのです。文字を書くのと同じ感覚で絵をかけるはずがありませんよね(´･ω･`)どうせでしたら、文書は文書でワープロソフトのようなもので作成して、絵は絵でお絵かきソフトのように、絵を描く専門のソフトをして作成した方が効率的ですよね。そうです。Ｗｅｂページに貼り付けられている写真も音楽も動画も、全部別のファイルとして用意するのです。そして、これらたくさんの種類のファイルを同時に表示しているのがＷｅｂページなのです。ここで気になるのが、「じゃぁ、絵や音楽などのほかのファイルを何に貼り付けるの？」ということではないでしょうか。答えはもうすでに言っていますよね。もう一度はっきりと言います。Ｗｅｂページに貼り付けるのです。ちょっと待ってください。「×ボタン」でこのページを閉じようとしたでしょう。もう少しだけお付き合いください。Ｗｅｂページの元になるファイルは「ＨＴＭＬファイル」と呼ばれています。このＨＴＭＬファイルに絵や音楽などのファイルを貼り付けていってＷｅｂページを作るので、Ｗｅｂページの正体はＨＴＭＬファイルだ、と言い切ってもいいでしょう。今、（もう少しだけという期限付きで）見てもらっていますこのページも当然ＨＴＭＬファイルでできています。ただ、ＨＴＭＬファイルだけでは絵を表示することができませんので、ＨＴＭＬファイルに絵を貼り付けてひとつのＷｅｂページにしているのです。もちろん、音楽をＷｅｂページに貼り付けますと、開くと音がなるＷｅｂページができあがりますし、特別なプログラムを貼り付けることによって、複雑な動きを見せるＷｅｂページを作ることもできます。#　残念ながら楽天ではできません(´･ω･`)では実際にＨＴＭＬファイルがどのようなものか例を見てみましょう。□ＨＴＭＬファイルここに「○○」という絵を表示しなさい。改行しなさい。今から文字を書きます。ようこそ私のほーむぺーじへ！ここで文字は終わりです。改行しなさい。横線をひきなさい。以下の文字は中央付近に表示させなさい。以下の文字をクリックしたときに別のページへジャンプ。Ｅｎｔｅｒジャンプさせる文字はここまでです。中央付近に表示させる文字はここまでです。横線をひきなさい。もちろん、こんな日本語だけで書かれているわけではありません。ＨＴＭＬ専用の特別な記述方法（これがタグですね）があるのですが、それはおいおい説明していきます。今は、Ｗｅｂページの正体は文字だけの命令文なんだということを覚えておいてください。そして、文字だけの命令文を読み込んで、読み込んだ内容どおりに表示する（再生する）ソフトウェアのことをＷｅｂブラウザと呼びます。長いはなしでしたが、ここまで読んでいただければ「ＨＰはなんでできているの？」という問いの答えもわかるのではないでしょうか。念のため、まとめておきます。ＨＰは、ＨＴＭＬファイルと呼ばれる文字だけの命令文からできています。ＨＰはこのＨＴＭＬファイルにより、あなたの使っているブラウザに、表示のしかたや表示するもの（文字や絵など）、配置などを命令しているのです。そして、命令を受け取ったあなたのブラウザは、その命令どおりにＨＰを再生するというわけです。楽天でＨＰを作る際にはあまり関係のないことかもしれませんが本質を理解するということは、応用力をつけるためにも大事なことですよね(〃⌒▽⌒)そんな感じで今日はＨＰは何でできているの？という解説をさせてもらいました。では、また明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 4, 2004

コメント(4)
タグを覚えよう【第２６回目】　-　上付き下付き？

前回は文字にふりがなをふってみたのですが、ついでに上付き文字、下付き文字について解説しておきましょう(〃⌒▽⌒)ついでに・・・って言うくらいですから今回は簡単です(〃⌒▽⌒)簡単ですが使い道もあまり無いかもしれません(´･ω･`)まぁ、余談程度に「こんなこともできるんだ」くらいで頭の片隅にでも置いておいて下さい。例）2H<sub>2</sub>+O<sub>2</sub>→2H<sub>2</sub>O表示結果）2H2+O2→2H2Oこれが下付き文字ですね。「Subscript」の略らしく「<sub>」と「</sub>」で囲まれた範囲が下付きで表示されます。簡単ですよね(〃⌒▽⌒)上付き文字も同じくらい簡単です。例）C<sup>2</sup>=A<sup>2</sup>+B<sup>2</sup>表示結果）C2=A2+B2こちらは「Superscript」の略らしいです。「<sup>」と「</sup>」で囲まれた範囲が今度は上付き文字となりましたよね(￣▽￣人)今日はこれだけです（笑簡単ですが使い道も少ないタグの紹介でした(〃⌒▽⌒)ただ、数学関係、化学関係などのページを作りたい方は間違いなく必要になりますよね。まぁ余裕があれば覚えてください。ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 3, 2004

コメント(2)
タグを覚えよう【第２５回目】　-　難しい漢字にはふりがなを

一日一タグとか言いつつしばらくお休みさせていただきました。また今日からがんばりますので応援よろしくお願いします。で、思い出しました・・・浸水→漏電→パソコンの電源が強制ダウン→登録していた顔文字がゼロになる・・・という不可解な現象に見舞われたのですよ（笑急いで今日使いそうな顔文字だけ登録してきました(〃⌒▽⌒)改めてよろしくお願いしますm（_ _）mさて、今日は少し変わり種のタグということで文字にふりがなをふってみましょう(〃⌒▽⌒)変わり種とは言いましても・・・ちょっとした気配りに使いたい一品でしてたとえば子供向けのページを作られる方、辞書のようなサイトを作られる方、読み方を混同しそうな文字を使う場合に・・・などなど。使う局面はさまざまですよね(￣▽￣人)では、早速例を見てみましょう。例）<ruby><rb>薔薇</rb><rp>（</rp><rt>ばら</rt><rp>）</rp></ruby>表示結果）薔薇（ばら）４種類のタグが一度に登場し、少し分かりづらいでしょうか(´･ω･`)でも、心配いりませんよ。順番に見ていきましょう(〃⌒▽⌒)まず、「<ruby>」タグで「今からふりがな付きの文字を記述しますよー」と宣言します。ちなみに「</ruby>」は「ここまでがふりがな付きの文字でした」って目印です。この辺りはタグを記述してきているうちになんとなく予想がつくようになったのではないでしょうか。次に、「<rb>」と「</rb>」でふりがなを付ける文字を囲みます。これは例を見てもらうとすぐ分かりますよね(〃⌒▽⌒)ちなみに「<rt>」と「</rt>」でふりがなを囲みます。これも一目瞭然ですよね(￣▽￣人)最後に残った「<rp>」と「</rp>」はと言いますと・・・このふりがなに非対応のブラウザへの考慮なのです。ちなみに非対応ブラウザでは上記の例が薔薇（ばら）のように見えるはずです。たちまちは省略することもできますが、非対応ブラウザへの考慮として記述しておきたいものですね。以上、今日はふりがなの記述例を勉強しました。目立つテクニックではありませんが、見てくれる人への配慮として覚えておきたいタグですよね(￣▽￣人)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 2, 2004

コメント(10)
タグを覚えよう【第２３回目】　-　スクロールバーの色を変えよう

以前当講座の１４回目で「楽天」で使えるIFRAMEもどきってやりましたよね。今日はそのIFRAMEもどきのスクロールバーに色をつけてみましょう(〃⌒▽⌒)ただ、この方法は今のところInternetExplorerしか対応していませんのでおまけ程度に考えて下さい。まぁ、非対応ブラウザでは無視されるだけですので指定して損はないってことですね(〃⌒▽⌒)では復習がてら・・・例）<p style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif);width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;background-attachment:fixed;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。ちなみにサンプル画像変えてみました（笑少し明るめの雰囲気もいいでしょ(￣▽￣人)これは以前紹介しましたIFRAMEもどきの背景に画像を指定して・・・ついでにスクロールさせても背景は動かない・・・ってやつでしたよね。ではこのスクロールの色を変えてみましょう(￣▽￣人)記述は長いですがやってることは簡単ですよ(〃⌒▽⌒)例）<p style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif);width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;background-attachment:fixed;scrollbar-face-color:#ffffff;scrollbar-arrow-color:#ccccff;scrollbar-3dlight-color:#ffccff;scrollbar-darkshadow-color:#ffccff;scrollbar-track-color:#333333;scrollbar-arrow-color:#ff66ff;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。青色の文字の部分が今回指定した箇所となります。ちなみに・・・scrollbar-3d-light-color:3D部分の色;scrollbar-arrow-color:▲の色;scrollbar-darkshadow-color:深い影の色;scrollbar-face-color:表面の色;scrollbar-highlight-color:明るい部分の色;scrollbar-shadow-color:影の色;scrollbar-track-color:トラックの色;という指定になっています(〃⌒▽⌒)自分でいろいろな色を指定して試してみて下さいね(￣▽￣人)ちなみに楽天では画面全体のスクロールバーの色を変更することはできません。#やり方によってはできそうですが・・・ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 29, 2004

コメント(0)
タグを覚えよう【第２２回目】　-　プロのようなページ作成テクニック（其の四）

なんだかぱっとしない連載もついに最終回を迎えました。しつこいようですが、一日一タグの最終回じゃないですよ（笑まぁ、とりあえずは１～３回までの復習を・・・例）<h1 style="border-bottom:solid 1px #0000ff;border-top:solid 1px #0000ff;width:500px;background-color:#cccccc;color:#009900;">◆　B　</h1><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">◇表示可能ブラウザ</h2><p>[IE4][IE5][IE6][NN4][NN6][OP7] </p><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">◇解説</h2></p>Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する</p><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">例</h2><h3 style="border:dotted 5px #ffcccc;width:500px;">◇ソース</h3><p>今日は<B>木曜日</B>です</p><h3 style="border:dotted 5px #ffcccc;width:500px;">◇表示</h3><p>今日は<b>木曜日</b>です</p>表示結果）◆　B　◇表示可能ブラウザ[IE4][IE5][IE6][NN4][NN6][OP7] ◇解説Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する例◇ソース今日は<B>木曜日</B>です◇表示今日は木曜日ですある意味これで完成ということにしてもいいのですが・・・なんだか見にくくないですか？ほんのちょっとした気配り、ってわけで次のように変更してみましょう。例）<h1 style="border-bottom:solid 1px #0000ff;border-top:solid 1px #0000ff;width:500px;background-color:#cccccc;color:#009900;">◆　B　</h1><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:480px;color:#0000cc;margin-left:20px;">◇表示可能ブラウザ</h2><p style="margin-left:30px;">[IE4][IE5][IE6][NN4][NN6][OP7] </p><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:480px;color:#0000cc;margin-left:20px;">◇解説</h2><p style="margin-left:30px;">Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する</p><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:480px;color:#0000cc;margin-left:20px;">例</h2><h3 style="border:dotted 5px #ffcccc;width:460px;margin-left:40px;">◇ソース</h3><p style="margin-left:60px;">今日は<B>木曜日</B>です</p><h3 style="border:dotted 5px #ffcccc;width:460px;margin-left:40px;">◇表示</h3><p style="margin-left:60px;">今日は<b>木曜日</b>です</p>表示結果）◆　B　◇表示可能ブラウザ[IE4][IE5][IE6][NN4][NN6][OP7] ◇解説Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する例◇ソース今日は<B>木曜日</B>です◇表示今日は木曜日ですここまで引っ張っておいてたったこれだけか・・・って思われるかもしれませんが(´･ω･`)たったこれだけなんですよ（笑でもなんだか見やすくなったでしょ(〃⌒▽⌒)当然、margin-topmargin-rightmargin-bottomなどで、いろいろな箇所の余白を指定することもできるのです。たくさん改行を記入したりたくさんスペースを挿入することで余白作ってないですか？こちらの方がスマートですよね(￣▽￣人)ページのワンポイントと言うよりはサイト全体のデザインに使用してください(〃⌒▽⌒)明日は楽天で変更できるスクロールバーの色について解説します。うちのTOPページに色が違うスクロールあるでしょ？色の組み合わせによってはおしゃれなワンポイントになりますので楽しみにしておいて下さいね(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 28, 2004

コメント(6)
タグを覚えよう【第２１回目】　-　プロのようなページ作成テクニック（其の三）

ＨＴＭＬの記述の基本を学ぼうってことで始めた連載の３回目。１回目、２回目とつまらない内容で・・・そろそろここに来るのも嫌になってきた頃でしょうか(´･ω･`)でも今日、明日は基本を踏まえた上で見た目を整えるって話になっています。昨日までの内容を理解した上で読み進めていってくださいね(〃⌒▽⌒)では、早速昨日までの復習を。例）<h1>◆　B　</h1><h2>◇表示可能ブラウザ</h2><p>[IE4][IE5][IE6][NN4][NN6][OP7] </p><h2>◇解説</h2><p>Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する</p><h2>例</h2><h3>◇ソース</h3><p>今日は<B>木曜日</B>です</p><h3>◇表示</h3><p>今日は木曜日です</p>表示結果）◆　B　◇表示可能ブラウザ[IE4][IE5][IE6][NN4][NN6][OP7] ◇解説Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する例◇ソース今日は<B>木曜日</B>です◇表示今日は木曜日です例の味気の無い記述方法です（笑今日はこの例の内容で少しデザインを変えてみます。記述の方法はこれまでの復習ばかりです。しっかり思い出してくださいね(〃⌒▽⌒)例）<h1 style="border-bottom:solid 1px #0000ff;border-top:solid 1px #0000ff;width:500px;background-color:#cccccc;color:#009900;">◆　B　</h1><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">◇表示可能ブラウザ</h2><p>[IE4][IE5][IE6][NN4][NN6][OP7] </p><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">◇解説</h2></p>Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する</p><h2 style="border-bottom:double 3px #ff00ff;border-top:double 3px #ff00ff;width:500px;color:#0000cc;">例</h2><h3 style="border:dotted 5px #ffcccc;width:500px;">◇ソース</h3><p>今日は<B>木曜日</B>です</p><h3 style="border:dotted 5px #ffcccc;width:500px;">◇表示</h3><p>今日は<b>木曜日</b>です</p>表示結果）◆　B　◇表示可能ブラウザ[IE4][IE5][IE6][NN4][NN6][OP7] ◇解説Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する例◇ソース今日は<B>木曜日</B>です◇表示今日は木曜日ですどうですか？少し見やすくなりましたよね(￣▽￣人)もちろん、文字色、背景色、線の種類などなど・・・自由に変えることができます(〃⌒▽⌒)ここで大事なのは、全てのページのデザインを統一する、ってことです。「楽天」でページを作ると、ある程度デザインは統一されますよね。ただ、フリーページを作る際など、ばらばらで気まぐれなページ構成にされていないですか？ばらばらなページ構成がだめだと言ってしまいますと言いすぎになってしまいますがサイト全体に統一感を持たせると見てくれている訪問者の方は安心感と好感を持たれるようです。今回紹介した内容を使ってページ全体の構成とデザインに統一感を持たせてみてはいかがでしょうか？サイト全体の印象もがらっと変わると思いますよ(〃⌒▽⌒)明日は更にこの例を見やすくして、連載の最終回とします。いえ、一日一タグの最終回ではないですよ？（笑このつまらない連載の最終回です。もう一日だけおつきあいくださいm（_ _）mではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 27, 2004

コメント(6)
タグを覚えよう【第２０回目】　-　プロのようなページ作成テクニック（其の二）

昨日に引き続き、面白くないタグ講座第二回目です(´･ω･`)見た目が派手になるわけでもなく、珍しいテクニックなわけでもなくこんなもの読むだけ時間の無駄、って思っていませんか？まぁ、おおむね正解なんですが（笑昨日紹介しました「H1」タグと今日紹介します「P」タグはＨＴＭＬ初級者→中級者になるために避けては通れないとても重要なものとなっています。まぁ、暇つぶし程度に読んでください(〃⌒▽⌒)さて、早速ですが４回連載と言うことですので昨日の復習をしておきましょう。例）<h1>◆　B　</h1><h2>◇表示可能ブラウザ</h2>[IE4][IE5][IE6][NN4][NN6][OP7] <h2>◇解説</h2>Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する<h2>例</h2><h3>◇ソース</h3>今日は<B>木曜日</B>です<h3>◇表示</h3>今日は木曜日です表示結果）◆　B　◇表示可能ブラウザ[IE4][IE5][IE6][NN4][NN6][OP7] ◇解説Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する例◇ソース今日は<B>木曜日</B>です◇表示今日は木曜日ですこれに先ほど言いました「P」を使用します。例）<h1>◆　B　</h1><h2>◇表示可能ブラウザ</h2><p>[IE4][IE5][IE6][NN4][NN6][OP7] </p><h2>◇解説</h2><p>Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する</p><h2>例</h2><h3>◇ソース</h3><p>今日は<B>木曜日</B>です</p><h3>◇表示</h3><p>今日は木曜日です</p>表示結果）◆　B　◇表示可能ブラウザ[IE4][IE5][IE6][NN4][NN6][OP7] ◇解説Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する例◇ソース今日は<B>木曜日</B>です◇表示今日は木曜日です何が変わったかって？見た目はほとんど変わりません(´･ω･`)この「<p>」と「</p>」に囲まれた範囲は段落であることを表しています。一まとまりの文章ですよ、ってことですね(〃⌒▽⌒)きっと読めば読むほどつまらないと思いますので今日はこの辺りで(´･ω･`)ただ、これが正しいＨＴＭＬの書き方です。何事も基本を無視して次に進むことはできません。記憶の片隅にでも置いておいて下さい(〃⌒▽⌒)明日は更にこの内容を使い、今度は見た目に変化をつけていきます。基本をしっかり押さえたら今度はデザインですよね(￣▽￣人)楽しみにしておいて下さい(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 26, 2004

コメント(6)
タグを覚えよう【第１９回目】　-　プロのようなページ作成テクニック（其の一）

今日はワンポイントと言うより、ページ作りの際にこっそり使えそうなテクニックを紹介しましょう(〃⌒▽⌒)目立たないけどなんだかプロのような仕上がりにも・・・使いようによってはなると思いますよ(￣▽￣人)ちなみに、今日から４部構成で考えていますので不幸にも今日この講座を読んでしまった方は、しっかりとお気に入り日記に登録し、明日と明後日とその次もまた来ましょう(￣^￣*)まず今日は表題（見出し）を普通に記述する方法です。表題を記述するタグはみなさんご存知ですか？こちらでは初めて解説しますので、まずは例を見てみましょう(〃⌒▽⌒)例）<h1>表題１</h1><h2>表題２</h2><h3>表題３</h3><h4>表題４</h4><h5>表題５</h5><h6>表題６</h6>表示結果）表題１表題２表題３表題４表題５表題６文字のサイズを指定したときとは逆なことに気がつきましたか？何が逆なの？って方は復習に戻りましょう（笑補足）ちなみにH3タグとH4タグの記述が勝手におしゃれになっていますよねこれは楽天の仕様です(´･ω･`)勝手なことを・・・と思うかもしれませんが仕方ありません（笑楽天ではこんなもんなんだ、と思っておきましょう。文字のサイズを指定する際には、数字が大きいほど文字のサイズも大きくなりましたよね？でもこの見出しを指定するタグは逆なんです。「H1」タグが一番大きな見出しを表すことになっている点に注意してくださいね(〃⌒▽⌒)そして、全部で６段階の見出しを作ることができます。ここで、見出しだの表題だの・・・何のことを言ってるの？って方のために、簡単な例をあげておきましょう。例）<h1>◆　B　</h1><h2>◇表示可能ブラウザ</h2>[IE4][IE5][IE6][NN4][NN6][OP7] <h2>◇解説</h2>Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する<h2>例</h2><h3>◇ソース</h3>今日は<B>木曜日</B>です<h3>◇表示</h3>今日は木曜日です表示結果）◆　B　◇表示可能ブラウザ[IE4][IE5][IE6][NN4][NN6][OP7] ◇解説Bタグで囲んだ文字を太字にするスタイルシートでの記述を推奨強調文字はStrongタグを使用する例◇ソース今日は<B>木曜日</B>です◇表示今日は木曜日ですなんとなくイメージ沸いたでしょうか？わかりやすくするために、「B」タグの説明形式で例をあげてみました。一番大きな見出しを「H1」タグで囲み、次に大きな見出しを「H2」タグで囲み・・・という感じで見出しにレベルをつけていくってわけですね(〃⌒▽⌒)決してこのタグを文字の大きさを変えるために使わないで下さい(´･ω･`)今日は少し難しかったでしょうか？今日からの４部講座、実を言いますと「HTMLと言う記述方法の本質を学習しよう！」って企画になっています。ただ、本質だけでは味気のない表示になってしまいますので・・・本質をしっかり学習しつつ、見栄えもかっこよくしていきます(〃⌒▽⌒)今日紹介した例では、お世辞にもかっこいいと言えないでしょ？（笑忘れず続きも読んでくださいね(￣▽￣人)では、また明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 25, 2004

コメント(0)
タグを覚えよう【第１８回目】　-　文字サイズを変えよう

今日のテーマは文字サイズを変えようです(〃⌒▽⌒)このサイトを初期の方から読んでくれている方は#まだまだ初期のような気もしますが（笑「また文字サイズ？」と思われるかもしれません(´･ω･`)少し復習しておきましょう。文字サイズは「<font size="1～7の数字">」と言う記述でしたよね。覚えていますか？でも、これでは７より大きい文字は表示できませんし１より小さな文字も表示できません。また、３．５なんて数字も表示できないのです(´･ω･`)これでは不便ですよね・・・ってなわけで、今日は自由に文字の大きさを指定できる方法を紹介します。例）<font style="font-size:1px;">極小サイズ</font><font style="font-size:16px;">普通サイズ</font><font style="font-size:300px;">鍵</font>表示結果）極小サイズ普通サイズ鍵今回は例ですので極端な例を紹介しました。本来でしたら、自由に閲覧者が文字のサイズを変更できるように、「<font size="1～7の数字">」で記述するべきです。余談）マウスにスクロールがついていてWindows＋IEの方、キーボードの「Ctrl（コントロール）」を押しながらマウスをスクロールさせてみて下さい。簡単に文字サイズが変更できますよね(〃⌒▽⌒)これはこのページだからできるのではないですよ？「<font size="1～7の数字">」で指定（あるいは文字サイズを指定していない）ページでは全てこの方法で文字サイズを変更することができます。ですが、デザインにこだわりたい箇所や、どうしても固定の文字サイズで見てもらいたい場合など、細かい指定をする必要にせまられることもあるでしょう。そのような場合に今回の講座内容を生かしてください(〃⌒▽⌒)では、また明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 24, 2004

コメント(6)
タグを覚えよう【第１７回目】　-　派手な MARQUEE

今まで何回か本講座でも<marquee>タグについて紹介しました。もう記述の仕方、だいたいわかりましたか？不安なようでしたらカンニングペーパをご覧下さい(〃⌒▽⌒)今日はこれを使って、更に面白い小技を紹介しましょう。例）<marquee behavior="alternate" direction="down" height="60"><marquee direction="right"> ここに文字を記入(〃⌒▽⌒)</marquee></marquee>表示結果）ここに文字を記入(〃⌒▽⌒)おもしろいでしょ(￣▽￣人)背景を海にして船なんか動かしてみたくなる気分に・・・なってきますよね(〃⌒▽⌒)さらに、例）<marquee behavior="alternate" direction="up" height="120" scrollamount=12><marquee behavior="alternate" direction="down" height="60"><marquee direction="right"> ここに文字を記入(〃⌒▽⌒)</marquee></marquee></marquee>表示結果）ここに文字を記入(〃⌒▽⌒)これは川に桃でも流したくなる気分になりませんか？複雑すぎて動きがよくわかりませんが（笑こんなこともできちゃいます(〃⌒▽⌒)更に・・・例）<marquee direction="right"><marquee behavior="alternate" direction="right" width="100"> (〃⌒▽⌒)</marquee></marquee>表示結果） (〃⌒▽⌒)なんてしゃくとり虫みたいな動きもできますねー(〃⌒▽⌒)Marqueeタグを組み合わせることができる、って知らない方も大勢いると思います。アイデア次第できっともっと楽しい動きが出せると思いますよ(〃⌒▽⌒)いろいろチャレンジしてみてくださいね。ではまたあしたー(ﾟ▽^*)ﾉ⌒☆

Aug 23, 2004

コメント(6)
タグを覚えよう【第１６回目】　-　文章を縦書きにしてみよう

今回は文章を縦書きに表示するテクニックを紹介します。Ｗｅｂページは横書き・・・というのが一般的ではありますが日本人ならやっぱり縦書きでしょ(￣▽￣人)とか言いつつも、私のページはしっかり横書きですが（笑では早速例を・・・例）私<br>は<br>か<br>も<br>め<br>表示結果）私はかもめだまされたみたいなテクニックですね(´･ω･`)テクニックとも呼べないと言いますか・・・ただこの方法が、どんな環境でも思い通りに文章を縦書きにできる現在唯一の方法となっています。ただこれではあんまりですのでもう一つ例を(〃⌒▽⌒)例）<p style="writing-mode:tb-rl;">http://www.7key.jp/はリンクフリーです。http://www.7key.jp/に掲載している情報は、http://www.7key.jp/がその内容を必ずしも保証するものではありません。情報の活用は利用者各自の責任の範囲内でお願いいたします。詳細は「取扱注意」を参照ください。</p>表示結果）http://www.7key.jp/はリンクフリーです。http://www.7key.jp/に掲載している情報は、http://www.7key.jp/がその内容を必ずしも保証するものではありません。情報の活用は利用者各自の責任の範囲内でお願いいたします。詳細は「取扱注意」を参照ください。どうでしょう？おもしろいでしょ(〃⌒▽⌒)読みやすいように英字は向きまで変えてくれて、「」の向きもしっかり縦書きになっています。カーソルをあわせてもらうとカーソルも縦書き用にしっかりなりますよね(〃⌒▽⌒)ただ、残念なことにこのタグが使用できるのはＩＥ５以上のみとなっています。他のブラウザではしっかり横書きで表示されますので、見る人全員が同じように見えるってわけではありません。まぁ、現在正式にタグとして採用するかどうか審議中ってことですので・・・近い将来、全てのブラウザで縦書きが使えるようになるかもしれませんね(〃⌒▽⌒)では、また明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 22, 2004

コメント(19)
タグを覚えよう【第１５回目】　-　中央寄せ表示の際の小技

最近よく思うことなんですが・・・この一日一タグ、こんなペースで話を進めていくと近い将来話題がなくなるんじゃないかって(´･ω･`)というわけで、今度こそ計画的に少しずつ話を進めていこうと心に決めた次第でございます（笑きっとその方が読んでくれている方々にとっても読みやすいはず・・・ですよね(〃⌒▽⌒)さぁ、世間様と自分に対する言い訳もまとまったところで今日は中央寄せの際の小技を紹介しましょう(〃⌒▽⌒)少し前の講座にて、中央寄せ表示の紹介を行いましたよね。覚えてくれていますか？例）<div align="center">中央表示</div>表示結果）中央表示でしたよね(￣▽￣人)しかし、この中央寄せ・・・次のように使うととても見づらいことありませんか？例）<div align="center">HTML タグをいっしょに覚えましょ(〃⌒▽⌒)ここに書いてあるタグは自由にこぴぺして使って下さいね。HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい(ﾟ▽^*)ﾉ⌒☆上級者様向けの HD 本館もどうぞよろしくm（_ _）m </div>表示結果）HTML タグをいっしょに覚えましょ(〃⌒▽⌒)ここに書いてあるタグは自由にこぴぺして使って下さいね。HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい(ﾟ▽^*)ﾉ⌒☆上級者様向けの HD 本館もどうぞよろしくm（_ _）m まぁ、みづらいかみやすいかは見る人が決めることですが・・・私にとってはかなり見づらいのですよ(´･ω･`)ちなみに私はＡ型です（笑中央寄せの際も文章の先頭はびしっと揃っていないとなんだか落ち着かないんですよね。そこで使うのが「テーブルタグ」です。次の例を見てください(〃⌒▽⌒)例）<div align="center"><table border=0><tr><td align="left">HTML タグをいっしょに覚えましょ(〃⌒▽⌒)ここに書いてあるタグは自由にこぴぺして使って下さいね。HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい(ﾟ▽^*)ﾉ⌒☆上級者様向けの HD 本館もどうぞよろしくm（_ _）m</td></tr></table></div>表示結果）HTML タグをいっしょに覚えましょ(〃⌒▽⌒)ここに書いてあるタグは自由にこぴぺして使って下さいね。HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい(ﾟ▽^*)ﾉ⌒☆上級者様向けの HD 本館もどうぞよろしくm（_ _）mどうです？ずいぶんみやすくなったことないですか(￣▽￣人)まぁ、どうでもいいと言えばどうでもいいことなのですが、こういったちょっとした気配りが見てくれている方への配慮かもしれませんね(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 21, 2004

コメント(5)
タグを覚えよう【第１３回目】　-　ＨＰってそもそもなに？

世の中に随分とパソコンが普及したこともあって、「ＨＰ」や「ホームページ」という単語は、（さも日本語のように、）パソコンをさわったことがない人にまで浸透していますよね。でもちょっと待って下さい。この「ＨＰ」っていったいなんなのでしょう？ホームページ【 Home Page 】の略だということは知っている方も多いと思いますが、なにを指す言葉なの、という問いかけに答えることができる方は少ないのではないでしょうか。今回は、一日一タグを少しお休みし「ＨＰってなにを指す言葉なの？」を中心に話を進めていきます。ひとまず「ＨＰ」の意味は横においておきまして、正しい専門用語を理解してもらうためにも以下の図を見てください。Ｗｅｂページという単語が、インターネット上の１ページ１ページを指しています。そのＷｅｂページが複数（もしくは１ページの場合も当然あるでしょう）集まったものをＷｅｂサイトと呼んでいます。分かりにくければ、「本」を想像してみてください。「本」の１ページ１ページが、Ｗｅｂページにあたります。そして、何かについて書かれたものを一まとめにしてあります「本」そのものが、インターネットの世界ではＷｅｂサイトと呼ばれているのです。さらに、「本」で言いますと「表紙」にあたるものが、インターネットの世界ではトップページと呼ばれています。このトップページは、Ｗｅｂサイトの玄関のようなもので、たいていどのＷｅｂサイトにもありますよね。以上、３個の単語を説明しましたがわかってもらえましたか？「Ｗｅｂページ」「Ｗｅｂサイト」「トップページ」聞きなれている（見なれている？）言葉ではありますが、意外と正確な意味って知らないものですよね。これを機会にしっかり覚えておいて下さいね(〃⌒▽⌒)さて、「ＨＰ」に話を戻しましょう。実はこの「ＨＰ」という単語は、さまざまな意味を持っているのです。コンピュータの世界ではめずらしい話ではないのですが、もともとの意味とは違う意味で世間に浸透してしまったがために、その意味が新しい意味としてなりたってしまっている単語がたくさんあります。「ＨＰ（ホームページ）」もその単語のなかの一つですので、ときと場合によって使われ方が違います。そもそも「ＨＰ」は本来、ブラウザを起動した際に、最初に表示されるＷｅｂページという意味で用いられていた単語だったようです。ブラウザの設定やメニューの中、ボタンなどに「ホーム」とか「ホームページ」という項目がありますよね。これは初期の意味のなごりなのです。しかし現在では、ブラウザを起動した際に表示されるＷｅｂページのことをスタートページと呼ぶのが一般的になり、これを「ＨＰ（ホームページ）」と呼ぶことは少なくなっています。その代わりに「ＨＰ（ホームページ）」はトップページのことを指す単語、という意見が現在では大半みたいです。いろいろなＷｅｂサイト上で「ＨＯＭＥ」という文字をクリックしたら、そのＷｅｂサイトのトップページが開かれますよね。このことからも、「ＨＰ（ホームページ）」はＷｅｂサイトのトップページである、とわかりますよね(￣▽￣人)ちなみに、ここ楽天でも「ＨＯＭＥ」というメニューをクリックするとトップページにジャンプするでしょ？しかし、それだけで話は終わりません。更に意味が転じて、「ＷｅｂサイトのトップではないＷｅｂページを、ホームページと呼ぶ」こともあります。こちらの意味はまだまだ浸透もしていませんので、使う場所を間違えるとろくなことになりません（笑世の中には人のあげ足を取りたがる人もたくさんいるのですよ(´･ω･`)ただ、口語的には、「ＨＰを見る」「ＨＰ作成ソフト」「ＨＰ解説書」などなど、トップページではないページを指すことも多くなってきているのが現状です。本当は正確な意味をもった言葉を利用すべきなのでしょうが、その意味自体があいまいなものになってきています。おおやけの場では正しい言葉を使うようにこころがける、くらいで覚えておきましょう(〃⌒▽⌒)以上、ながながと「ＨＰ（ホームページ）」という単語について解説してきましたが、理解してもらえましたか？使われている場所によって意味が違うということをしっかり覚えておきましょう。さらに、「Ｗｅｂサイト」「Ｗｅｂページ」「トップページ」の意味もあわせて覚えておくといろいろな解説書を読むときなどに理解が深まるかもしれませんね(〃⌒▽⌒)本日は少し変わった一日一タグでした(〃⌒▽⌒)たまにはこんな解説みたいな内容も織り交ぜていこうと思っています。ではまた明日(ﾟ▽^*)ﾉ⌒☆

Aug 19, 2004

コメント(6)
タグを覚えよう【第１２回目】　-　いろいろ動かせるタグ

一日一タグとか言いつつも・・・少し飛ばしすぎですよね（笑これでは読んでもらってる方に申し訳ない(´･ω･`)ってわけで、今回は「MARQUEE」タグに焦点をしぼって話を進めていきます(〃⌒▽⌒)皆さん、「MARQUEE」タグってご存知ですか？知らない人のために・・・百聞は一見にしかずとも言いますからとりあえず例を(〃⌒▽⌒)例）<marquee behavior="alternate" direction="right">ここに書いた文字が動くよー</marquee>表示結果）ここに書いた文字が動くよーごちゃごちゃとして多少難し目ですが・・・ちょっとしたワンポイントにもってこいですよね(〃⌒▽⌒)ただ、このタグなんですが、注意点が一つあって・・・対応していないブラウザーもあるのですよ。（ブラウザについてよく分からない方はこちらを参照下さい）ブラウザによって動きが違いますし、そもそも「MARQUEE」タグで囲んだ内容を表示しないブラウザも存在します。全ての人が同じように見えているわけではないことをしっかり覚えておき、見えない人のために重要な内容を「MARQUEE」タグで囲むことは避ける、くらいの心遣いはＨＰを作る側として持っておきたいですよね(〃⌒▽⌒)さて、いらぬ前置きが長くなりましたが本題に戻りましょう（笑まず変化を加えたいのは動くスピードですよね(〃⌒▽⌒)例）<marquee behavior="alternate" direction="right" scrollamount="20">ここに書いた文字が動くよー</marquee>表示結果）ここに書いた文字が動くよーずいぶんと早くなりましたよね(〃⌒▽⌒)「scrollamount」というのは、ある一定の時間の間に進む距離を指定することができるものです。何も指定しなければ（記述しなければ）初期値として「6」が適用されますので、目安として覚えておくと便利かもしれませんね。次に、動く幅を指定してみましょう。例）<marquee behavior="alternate" direction="right" width="200">ここに書いた文字が動くよー</marquee>表示結果）ここに書いた文字が動くよーもうそろそろ見飽きてきたかもしれませんが、「width」で動く幅を指定することができます。更に動く方向を指定してみましょう。例）<marquee behavior="alternate" direction="left">ここに書いた文字が動くよー</marquee><marquee behavior="alternate" direction="right">ここに書いた文字が動くよー</marquee>表示結果）ここに書いた文字が動くよーここに書いた文字が動くよー違いが分かりましたでしょうか？「direction」で「left」を指定すれば右端から左に向いて動き出し、「right」を指定すれば、左端から右に向いて動き出す・・・というわけですね(〃⌒▽⌒)ちなみに、こんなこともできます。例）<marquee behavior="alternate" direction="up" height="100">ここに書いた文字が動くよー</marquee><marquee behavior="alternate" direction="down" height="100">ここに書いた文字が動くよー</marquee>表示結果）ここに書いた文字が動くよーここに書いた文字が動くよー細かい説明はもういりませんよね（笑「width」が「height」になり、「left」「right」の変わりに「up」「down」を指定する、ってことです。更に、動く回数を指定することまでできちゃいます。例）<marquee behavior="alternate" direction="right" loop="1">ここに書いた文字が動くよー</marquee>表示結果）ここに書いた文字が動くよー何も指定しなければえんえんと動き続けますが、「loop」で繰り返し回数を指定してやることもできます。ちなみに繰り返し回数終了後は終了した場所で止まってしまいます。次に、動作の仕方に多少変化をもたせてみましょう。例）<marquee behavior="side" direction="left" width="300">ここに書いた文字が動くよー</marquee><marquee behavior="scroll" direction="left" width="300">ここに書いた文字が動くよー</marquee><marquee behavior="alternate" direction="left" width="300">ここに書いた文字が動くよー</marquee>表示結果）ここに書いた文字が動くよーここに書いた文字が動くよーここに書いた文字が動くよー「behavior」に指定できるのは次のとおりです。behavior="side"：スクロールの端までくると停止するbehavior="scroll"：横切る動作を繰り返すbehavior="alternate"：往復動作を繰り返す「side」と「scroll」に大差は無いような気がしますが（笑こんなこともできますよ、ってサンプルでした(〃⌒▽⌒)そして、動かせるのは文字だけではありません。例）<marquee behavior="alternate" direction="up" height="170"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></marquee>表示結果）例はちょっと画像がでかくて・・・なんか見た目悪いですが・・・きっと小さな画像などに使うとおしゃれに見えると思いますよ(￣▽￣人)そして、最後に・・・動く範囲に背景色をつけてみましょう。例）<marquee behavior="alternate" direction="left" bgcolor="#000000"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></marquee>表示結果）いかがでした？一つのタグだけとってみてもほんとうにいろいろなことできますよね(￣▽￣人)ただ、今日紹介しましたのは基本中の基本です。後はこれらを使っていろいろなものと組み合わせて・・・オリジナルな使用方法を考えてみて下さいね(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Aug 18, 2004

コメント(2)
タグを覚えよう【第１１回目】　-　画像を修飾してみよう

今日は今までの復習もかねて、色々な方法で画像を縁取りしてみましょう。ただ単純に画像を表示するのもいいですが、たまにはおしゃれな縁取りなどしてみたいですよね(〃⌒▽⌒)まずは単純に・・・例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1">表示結果）これは一番シンプルな縁取りですね(〃⌒▽⌒)シンプルなだけあって記述も簡単です。ぜひマスターしましょう(〃⌒▽⌒)次はこの線の太さを変えてみましょう。例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8">表示結果）縁取りの太さを変えるだけで、また画像の雰囲気も変わりますよね(￣▽￣人)ただ数字を大きくするだけですのでこれも簡単ですよね？次は線の色を変えてみましょう。例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8" style="border-color:#ff00ff;">表示結果）多少サンプルの色の趣味が悪いような気がしますが・・・それはさておき、「style="border-color:#ff00ff;"」のような記述を加えるだけで縁取りの色を変更することもできます。色は好きな色に変えて試してくださいね（笑ちなみに、縁取りの色を辺によって変えることも出来ます。例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="8" style="border-color:#ff0000 #0000ff;">表示結果）これまた趣味の悪い配色ですが・・・色の組み合わせによっては、きっとおしゃれな縁取りになるはずですよ（多分）ちなみに、「style="border-color:"」ですが、値を1つ指定：上下左右が指定色値を2つ指定：記述した順に上下、左右が指定色値を3つ指定：記述した順に上、左右、下、が指定色値を4つ指定：記述した順に上、右、下、左が指定色のように、個別に縁取りの色を指定することができます。小技として覚えておくと、いつか役に立つかもしれませんよ(〃⌒▽⌒)そして、以前も紹介しましたが、線のスタイルを変更してみましょう。例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: double 12px #9999ff;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: dashed 12px #9999ff;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: dotted 12px #9999ff;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: groove 12px #9999ff;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: ridge 12px #9999ff;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: inset 12px #9999ff;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" style="border: outset 12px #9999ff;">表示結果）どれも微妙に雰囲気が違いますよね(〃⌒▽⌒)絵も額縁にいれて飾った方が見栄えがするように・・・ＨＰ上に載せる画像にも、おしゃれな縁取りなどいかがでしょうか？明日は「MARQUEE」タグを詳しく解説しようかと思っています。また来てくださいね(ﾟ▽^*)ﾉ⌒☆

Aug 17, 2004

コメント(4)
タグを覚えよう【第１０回目】　-　テーブルってなに？（二回目）

前回テーブルについての基本的なことを紹介しましたが、今日はもう少し踏み込んで勉強しましょう(〃⌒▽⌒)とは言いましても、表（ひょう）機能としてのテーブルはもう説明しません。あくまでデザインに使えそうな機能に特化して説明を進めていきます。前回は枠の中で特定の位置に文書や画像を配置する方法を紹介しました。「align」や「valign」を使うってことでしたよね(〃⌒▽⌒)今回はもっと有効に、この「align」や「valign」を使用するために、テーブルの枠自体の大きさを指定する方法をまず勉強しましょう。例）<table border="1"><tr><td width="150" height="150" align="left" valign="bottom">左下</td><td width="150" height="150" align="right" valign="top">右上</td></tr></table>表示結果）左下右上線を消した表示結果）左下右上「align」や「valign」の使い方はもうばっちりですよね(〃⌒▽⌒)今回新しく「TD」タグに指定した「width」と「height」ですが、これもどこかで見たことないですか？以前「IMG」タグで画像の幅と高さを指定する際に使いましたよね。同じようにテーブルの一マスの幅を指定する場合には「TD」に「width」を、テーブルの一マスの高さを指定する場合には「TD」に「height」をそれぞれ指定します。テーブルの一マスの幅と高さを指定することにより、文書や画像を思いのままの場所に配置することができるってわけですね(￣▽￣人)ってわけで、今日のお勉強は終わりです。もう少し物足りないって方のために、テーブルを使用した小技を少し紹介しておきますね(〃⌒▽⌒)どうぞご自由にお使いください。例）<table cellspacing="0"><tr><td bgcolor="#ffcccc" width="20" height="20"></td><td bgcolor="#ffdddd" width="300"></td><td bgcolor="#ffcccc" width="20" height="20"></td></tr><tr><td bgcolor="#ffdddd"></td><td bgcolor="#ffffff"><br> ようこそ私のＨＰへ(〃⌒▽⌒)<br></td><td bgcolor="#ffdddd"></td></tr><tr><td bgcolor="#ffcccc" height="20"></td><td bgcolor="#ffdddd"></td><td bgcolor="#ffcccc"></td></tr></table>表示結果）ようこそ私のＨＰへ(〃⌒▽⌒)例）<table cellspacing="0"><tr><td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td><td bgcolor="#ffdddd" width="300"></td><td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td></tr><tr><td bgcolor="#ffdddd"></td><td bgcolor="#ffffff"><br> ようこそ私のＨＰへ(〃⌒▽⌒)<br></td><td bgcolor="#ffdddd"></td></tr><tr><td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td><td bgcolor="#ffdddd"></td><td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td></tr></table>表示結果）★★ ようこそ私のＨＰへ(〃⌒▽⌒)★★例）<table cellspacing="3" border="3" bordercolor="#ff9999"><tr><td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td><td bgcolor="#ffdddd" width="300"></td><td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td></tr><tr><td bgcolor="#ffdddd"></td><td bgcolor="#ffffff"><br> ようこそ私のＨＰへ(〃⌒▽⌒)<br></td><td bgcolor="#ffdddd"></td></tr><tr><td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td><td bgcolor="#ffdddd"></td><td bgcolor="#ffcccc" width="20" height="20" align="center"><font color="#ff9999">★</font></td></tr></table>表示結果）★★ ようこそ私のＨＰへ(〃⌒▽⌒)★★どうでしょう？少しずつ変えるだけでもテーブルって面白いでしょ(〃⌒▽⌒)上記の例は色や幅をちょこちょこ変えていろいろアレンジしてみて下さいね。明日の予定は・・・例によって未定です(´･ω･`)未定ですが休みませんのでまたぜひ来てくださいね(ﾟ▽^*)ﾉ⌒☆

Aug 16, 2004

コメント(6)
タグを覚えよう【第９回目】　-　テーブルってなに？（一回目）

お盆休みなどと自分に言い訳し、勝手に一日穴をあけてしまいました（笑今日からまた一日少しずつお勉強再開しましょう(〃⌒▽⌒)今日はテーブルなるものについて勉強します。皆さん、テーブルって何か知ってますか？もちろん、机の「テーブル」って意味もあるのですが、実は「表（ひょう）」とも和訳できるのです。ＨＰ上で実現したいのはもちろん「表（ひょう）」の方です（笑今日はこのテーブルの基本を勉強しましょうね(〃⌒▽⌒)さてテーブルタグですが、これは少し複雑です。なぜって・・・３つのタグを組み合わせることにより、一つのテーブルを表現するからなんですが、順番にゆっくり解説していきますのでゆっくり読んでいって下さいね(〃⌒▽⌒)これから紹介するタグは一つ一つでは意味をなしません。３個そろって初めて意味を成すものです。例）<table border="1"><tr><td>1-1</td><td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr></table>表示結果）1-11-22-12-2３個登場したの分かりました？少し難しいので順番に解説しますね。まず、「<table border="1">～</table>」で囲まれた範囲が「テーブル」であることを表します。「今からテーブルですよー」「ここまでテーブルですよー」って感じですね(〃⌒▽⌒)次に、「<tr>～</tr>」で囲まれた範囲が一行であることを表します。「今から行が始まりますよ」「ここまでで１行は終わりですよ」ってことです。なので、行を増やしたい場合は、例）<table border="1"><tr><td>1-1</td><td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr><tr><td>3-1</td><td>3-2</td></tr></table>表示結果）1-11-22-12-23-13-2のようにしてやれば簡単に行が増えます(〃⌒▽⌒)そして、最後に「<td>～</td>」で囲まれた範囲が一ますであることを表しています。例）<table border="1"><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr></table>表示結果）1-11-21-32-12-22-3と、「<td>～</td>」を増やせば横に長いテーブルも思いのままですね(￣▽￣人)基本的に、「<tr>～</tr>」と「<td>～</td>」を増やせば増やすほど、テーブルが縦長になったり横長になったりするわけです。と、ここまでがテーブルの基本なわけですが・・・実際こんなもの使わないと思っていませんか？正直「表（ひょう）」をＨＰに表示させることって少ないでしょう（笑特に、個人でＨＰを作る際などにはほとんど無用の長物でしょう。ただ、それは「表（ひょう）」としてです。このテーブルにはもう一つ画期的な使い方があるのです(￣^￣*)それは、見た目上のレイアウトを整えるって使い方です。ＨＰを少しでも作ったことのある方は分かると思いますが・・・デザインを整えるって難しいことないですか？前回紹介した中央寄せ、右寄せなどのテクニックを使えば、ある程度はデザインを整えることができますが、ある程度止まりです（笑画像と画像の微妙な配置、画像と文章の位置関係などなど・・・今まで説明してきました内容では無理ですよね。だいぶ前置きが長くなってしまいましたが、これらの微妙な位置関係を整えるためにテーブルを使うのです。どうやって・・・といいますと・・・例）<table border="0"><tr><td>1-1</td><td>1-2</td></tr><tr><td>2-1</td><td>2-2</td></tr></table>表示結果）1-11-22-12-2前回までのテーブルと今回の例のテーブルの違いが分かりますか？「<table border="0">」とすることにより、「表」のわくが消えてしまいましたよね。これでは「表」としての機能は果たしませんが、レイアウトを整えるためには非常に助かります。例えば、例）<table border="0"><tr><td></td><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td></tr><tr><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td></td></tr></table>表示結果）こんなこともできますし、例）<table border="0"><tr><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td>説明文書</td></tr></table>表示結果）説明文書例）<table border="0"><tr><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td></tr><tr><td>説明文書１</td><td>説明文書２</td></tr></table>表示結果）説明文書１説明文書２なんてこともできます(〃⌒▽⌒)画像のそばに画像に対するコメントを書きたい場合・・・困っていたことないですか？どんな指定の仕方をしても、微妙にずれたり、ウィンドウのサイズによって改行されてしまったりしますよね。でも、透明の枠に囲まれた「表」の中にいろいろなものを入れることにより、微妙なデザインも可能になる、ってわけです(￣▽￣人)これで大体の位置指定はできるようになりましたが、まだ思うように・・・とはいかないでしょう。一つのわくは四角形なんですが、その四角形の中のどこに表示するか、ってことを指定したいですよね。その「どこに」を指定するために「<td>」タグに少し細工をします。例）<table border="0"><tr><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td></tr><tr><td align="left">左</td><td align="center">中</td><td align="right">右</td></tr></table>表示結果）左中右どこかで見た覚えないですか？表示位置指定のときには「<div align="left">」と前回勉強しましたよね。あれと同じ要領です(〃⌒▽⌒)「<td>」タグ内に「align」で横位置を指定できるってことです(￣▽￣人)あれ？では、縦の位置はどうするのでしょう。これは次のように「<td>」タグの中に「valign」で指定することができます。例）<table border="0"><tr><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td valign="top">上寄せ</td></tr><tr><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td valign="middle">中寄せ</td></tr><tr><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td valign="bottom">下寄せ</td></tr></table>表示結果）上寄せ中寄せ下寄せのように、「top」「middle」「bottom」でそれぞれ縦位置を指定することができます。もちろん、「align」と「valign」を同時に指定することもできますので、いろいろと試してみて下さいね(〃⌒▽⌒)今日もかなり難しかったですがいかがでしたか？えらそうに記述していますが私もこのテーブルを完全に理解するまでに・・・３年以上かかりました(´･ω･`)ぜんぜんまじめに覚えようとしなかったせいもありますが・・・最初は覚える気も起こらないくらい難しかったのだけははっきりと覚えています。この講座を読んでくれた方が私と同じ道をたどらないためにも（笑わからないことがありましたらコメントか掲示板にて気軽に聞いてくださいね(〃⌒▽⌒)さて、次回はもう一度テーブルの講座です。まだまだテーブルは奥が深いですが・・・完全に覚えて、きれいなＨＰ作りに役立ててくださいね(〃⌒▽⌒)ではまた明日(ﾟ▽^*)ﾉ⌒☆

Aug 15, 2004

コメント(3)
タグを覚えよう【第８回目】　-　表示位置を変えてみよう

少しずつタグを覚えていこうと言う企画であるはずのこの日記。ふと気がつけばなんだか話が難しい方向へと進んでますね。ってわけで、今日は少し息抜きに簡単なタグを紹介します(〃⌒▽⌒)通常ページに文字を記述したり画像を貼り付けたりすると、画面の左から順番に表示されていきますよね。普段はこれで何も気にならないのですが、ページ全体のデザインなどを考えだすと「この画像は画面の真ん中に表示したいなー」とか「この文字は画面の右端に表示したいな」とか・・・左寄せ表示ばかりでは思うようにいきませんよね。そこで今回は表示位置を指定するタグをご紹介します(〃⌒▽⌒)中学生レベルの英語力があれば簡単に覚えれますのでこの機会にしっかり覚えておきましょう(〃⌒▽⌒)例）<div align="left">左寄せ表示</div><div align="center">中央表示</div><div align="right">右寄せ表示</div>表示結果）左寄せ表示中央表示右寄せ表示どうです？簡単でしょ(〃⌒▽⌒)当然、文字だけではなく画像などなどの表示位置も指定できますよ。例）<div align="right"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></div>表示結果）表示位置のお話はこれで終わりです(〃⌒▽⌒)特に難しい記述でもなく、簡単な英語そのまんまなので覚えやすいでしょ(￣▽￣人)で、例のごとくこのまま終わるのもあっけなさすぎますのでちょっとした予備知識を(〃⌒▽⌒)♥♠♣こんな記号の表記の仕方知っていますか？意外と知られていないのでちょっとしたおしゃれなワンポイントに使えますよね(〃⌒▽⌒)ちなみに記述方法は例）<font color="#ff0000">&hearts;</font>&spades;&clubs;となっています。もちろん文字ですので、例）<font color="#ff0000" size="7">&hearts;</font>表示結果）♥なんてこともできます(￣^￣*)これらは専門用語で「特殊文字」と呼ばれ、たくさんの種類があります。興味のある方は特殊文字一覧表を参考にしてください(〃⌒▽⌒)明日の一日一タグは・・・お盆休みです（笑あさってにはきっちり復活しますのであさってにはきっちり来てくださいね(ﾟ▽^*)ﾉ⌒☆

Aug 13, 2004

コメント(7)
タグを覚えよう【第７回目】　-　ページにリンクなるものを作ってみよう

第６回で本日の話題を公募したにもかかわらず・・・リクエストゼロ。ふふふ(´･ω･`)まぁ、しょうがないので自分で頭をひねって考えました（笑そこでふと思い出したのが題名にも書きました「リンク」の解説。皆さんリンクって知っていますか？文字や画像をクリックすると別のページに飛ぶ・・・あれのことです(〃⌒▽⌒)「楽天」でＨＰを作っていたら、特にタグを記述しなくてもリンクって作れてしまいますよね。ただ、自動でできてしまうからその分覚えにくいって欠点もあるでしょう。そんなわけで今回はリンクの作り方を勉強します(〃⌒▽⌒)例のごとく、まずあじけのないリンクのご紹介。例）<a href="http://www.7key.jp/" target="_blank">ここをクリックしてみてー</a>表示結果）ここをクリックしてみてー実際にクリックすると「http://www.7key.jp」というページにジャンプしたと思います。「href」で指定するのは見てのとおり、ジャンプしたいページのＵＲＬですね(〃⌒▽⌒)（URLについて詳しく知りたい方はこちらを参考にして下さい。）そして、「target="_blank"」と言う記述は、新しいページを別の窓で開いてね(￣▽￣人)って指定となっています。なので、リンクを作った窓と同じ窓で新しいページを開きたい場合は、この「target="_blank"」という記述を削除してやって下さい(〃⌒▽⌒)画像を使ったリンクも上の例を応用すれば簡単ですね。例）<a href="http://www.7key.jp/" target="_blank"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></a>表示結果）文字であろうが、画像であろうが同じことですよね(〃⌒▽⌒)でもちょっと待ってください。なんだか画像の周りに線が表示されていますよね。この線を無くなしてしまいますとリンクであることが分かりづらくなるのですが・・・あったらあったで邪魔ですよね（笑不要な場合は取っ払ってしまいましょう(〃⌒▽⌒)例）<a href="http://www.7key.jp/" target="_blank"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="0"></a>表示結果）「IMG」タグの中に「 border="0"」という記述を追加するだけです。これは画像の周りの線幅を「０」にしてね(￣▽￣人)　ってことになっています。リンクの説明はこれでおしまいです。よく使うタグだけあって、使い方も限られていますね。特に「楽天」内では更に機能縮小されていまして、あまり大それたことができません（笑まぁ、基本をしっかり押さえて、もしものときに困らない程度に覚えておきましょう(〃⌒▽⌒)ただ、このまま終わるにはあまりにもあっけないのでページ装飾タグを載せておきます。コピーしようが転載しようが好き勝手使ってください(〃⌒▽⌒)確認も許可も不要ですが、分からないことがあれば対応はします(￣^￣*)なんて親切なページなんだ(〃⌒▽⌒)例1）<div style="border: dotted 4px #ff00ff;width:165px;"> <marquee behavior="alternate" scrollamount="20" style="width:160px;height:16px;"> <font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font></marquee><br> ここに文字を記入してー<br><marquee behavior="alternate" scrollamount="20" style="width:160px;height:16px;"> <font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font><font style="color:#ff00ff;font-size:14px;">◆</font><font style="color:#333333;font-size:14px;">◆</font></marquee> </div> 表示結果）◆◆◆◆◆◆◆◆◆◆◆◆ ここに文字を記入してー◆◆◆◆◆◆◆◆◆◆◆◆例2）<marquee scrollamount="1" direction="up" behavior="alternate" style="width:212px;height:16px;"> <font style="color:#ff00ff;font-size:12px;">◆</font><font style="color:#333333;font-size:12px;">◆</font><font style="color:#ff00ff;font-size:12px;">◆</font><font style="color:#333333;font-size:12px;">◆</font><font style="color:#ff00ff;font-size:12px;">◆</font><font style="color:#333333;font-size:12px;">◆</font><font style="color:#ff00ff;font-size:12px;">◆</font><font style="color:#333333;font-size:12px;">◆</font><font style="color:#ff00ff;font-size:12px;">◆</font></marquee><br> ここに文字を記入してー<br><marquee scrollamount="1" direction="up" behavior="alternate" style="width:212px;height:16px;"> <font style="color:#ff00ff;font-size:12px;">◆</font><font style="color:#333333;font-size:12px;">◆</font><font style="color:#ff00ff;font-size:12px;">◆</font><font style="color:#333333;font-size:12px;">◆</font><font style="color:#ff00ff;font-size:12px;">◆</font><font style="color:#333333;font-size:12px;">◆</font><font style="color:#ff00ff;font-size:12px;">◆</font><font style="color:#333333;font-size:12px;">◆</font><font style="color:#ff00ff;font-size:12px;">◆</font></marquee>表示結果）◆◆◆◆◆◆◆◆◆ ここに文字を記入してー◆◆◆◆◆◆◆◆◆いかがでした？あまり見つめすぎると気持ち悪くなると思いますのでほどほどにね（笑明日の予定は・・・何も考えていません(´･ω･`)気分次第で何か考えますので、また来てくださいね(ﾟ▽^*)ﾉ⌒☆

Aug 12, 2004

コメント(0)
タグを覚えよう【第６回目】　-　線をページに引いてみよう

ページを彩るアイテムの中で欠かせないのが「線」ですよね。今回は味気の無い区切り線から、文字を彩る下線までいろいろな線を紹介したいと思います(〃⌒▽⌒)では、早速味気の無い区切り線から（笑例）<hr>表示結果）なんて簡単なんでしょう(￣▽￣人)英語はよく分かりませんが、Horizontal Rule（水平な罫線）の略らしいです。なにはともあれ「HR」と言うタグを使えば味気の無い水平線が引けるってことですね。次はこの味気のない線を少し工夫して、ちょっとだけおしゃれな使い方を紹介します。例）<center><hr width="300">私のＨＰへようこそ！<hr width="300"></center>表示結果）私のＨＰへようこそ！ちょっと複雑ですがちょっとおしゃれな使い方でしょ(〃⌒▽⌒)画像でも出てきましたが、「width」は幅を表します。今回は線の幅（長さ）を表しているんですねー。ただ、線の高さは画像のときと違って「height」では指定できません。線の場合は高さと言うよりは、太さとでも言うべきでしょうかね。線の太さを指定する場合は次のようにします。例）<hr width="30" size="30">表示結果）線と言うよりはくぼんだ四角ですね(´･ω･`)何はともあれ、線の太さを指定する際には「size」を使うってことです。文字の大きさを指定する際にも出てきましたよね(〃⌒▽⌒)では、次に線に色をつけてみましょう。例で挙げた上の二つで試してみますね。例）<center><hr width="300" color="#0000ff">私のＨＰへようこそ！<hr width="300" color="#0000ff"></center><hr width="30" size="30" color="#00ff00">表示結果）私のＨＰへようこそ！これも簡単ですよね(〃⌒▽⌒)色の指定の仕方は「タグを覚えよう【第３回目】　-　文字の色いろいろ」と同じです。忘れてしまった方は復習に戻りましょう（笑ここまでは単体の線の使用方法（記述方法）を紹介しましたが、次からは文字の下（周り）をいろいろな線で囲む方法を紹介します。まずは昨日次回予告ってことで紹介した下線から(〃⌒▽⌒)例）<span style="border-bottom: dotted 4px #ff00ff;">ここに文字入力</span>表示結果）ここに文字入力少し難しいですかね。ただ、なんとなく今までの知識で意味が分かる部分もあるのではないでしょうか。まず、「#ff00ff」の部分。ここが点線の色を表しているのは見ての通りですよね(〃⌒▽⌒)ってことは・・・線の色を変えたい場合はこの「#ff00ff」の部分を書き換えればよさそうです。例）<span style="border-bottom: dotted 4px #00ff00;">例えばこんな感じ</span>表示結果）例えばこんな感じ次に線の太さですが、これはどうも数字の部分が怪しいですよね。いや、当然私は答えを知っていますので・・・怪しいといえばそれが正解なのですが（笑やっぱり簡単に正解を言ってしまったらつまらないでしょ(〃⌒▽⌒)例）<span style="border-bottom: dotted 1px #ff00ff;">例えばこんな感じ（１）</span><span style="border-bottom: dotted 5px #ff00ff;">例えばこんな感じ（５）</span><span style="border-bottom: dotted 9px #ff00ff;">例えばこんな感じ（９）</span>表示結果）例えばこんな感じ（１）例えばこんな感じ（５）例えばこんな感じ（９）更に、英語が分かる方はお気づきかもしれませんが、「border-bottom」の「bottom」これが下線を表しているのです。これを変えると次のようになります。例）<span style="border-top: dotted 4px #ff00ff;">例えばこんな感じ（上）</span><span style="border-left: dotted 4px #ff00ff;">例えばこんな感じ（左）</span><span style="border-right: dotted 4px #ff00ff;">例えばこんな感じ（右）</span><span style="border: dotted 4px #ff00ff;">例えばこんな感じ（指定なし）</span>表示結果）例えばこんな感じ（上）例えばこんな感じ（左）例えばこんな感じ（右）例えばこんな感じ（指定なし）最後に残った「dotted」ですが、これは線の種類を表しています。今までは全部「点線」でしたよね。これは「dotted」が「点線」を表していたからです。以下に、ほかにどのような種類の線があるかを紹介しておきます。例）<span style="border:solid 1px #ff00ff;">例えばこんな感じ（一本線）</span><span style="border: double 1px #ff00ff;">例えばこんな感じ（二本線）</span><span style="border: dashed 1px #ff00ff;">例えばこんな感じ（破線）</span><span style="border: groove 1px #ff00ff;">例えばこんな感じ（くぼみ）</span><span style="border rigde 1px #ff00ff;">例えばこんな感じ（隆起）</span>表示結果）例えばこんな感じ（一本線）例えばこんな感じ（二本線）例えばこんな感じ（破線）例えばこんな感じ（くぼみ）例えばこんな感じ（隆起）今回は少し難しかったでしょうか。最初はまねっこでもかまいません。どうぞ、上の例をコピーしてお使い下さい(〃⌒▽⌒)だんだんと上達してくるにつれて、上のような例では満足いかなくなるかもしれません。そのような場合にはこの文章を参考に、あなただけのアレンジを加えてみて下さい。単体で引く線はもちろんのこと、文字を囲んだり文字に下線をつけたりなどなど、ちょっとした気配りがＨＰに彩をそえることとなります。それがあなただけのオリジナルのものであったなら、いっそう見る人の目を惹くことでしょうね(〃⌒▽⌒)さて、例のごとく次回予告ですが・・・なんにしましょう（笑実は何も考えていません(´･ω･`)ってなわけでリクエストなどありましたらじゃんじゃんとご意見くださいませm（_ _）mもちろん、一度に全部紹介することはできませんが、順番に解説していきますので遠慮なくお願いします(〃⌒▽⌒)では、また明日お会いしましょう(ﾟ▽^*)ﾉ⌒☆

Aug 11, 2004

コメント(2)
タグを覚えよう【第５回目】　-　ＨＰに画像をはろう！

今回はＨＰに画像をはってみましょう。画像というと少し分かりづらいですかね。「絵」や「写真」をＨＰに載せてみよう！ってことです(〃⌒▽⌒)とは言いましても・・・ここ「楽天」ではとっても簡単に画像を載せることができますよね。皆さん知ってるとは思いますが、念のため管理画面から「画像倉庫（画像の登録管理）」という画面を開き、まずあなたのパソコンに保存してあります写真や絵を「楽天」に保存します。すると、「保存した画像の一覧」というところに保存した画像が出てきますよね。それをクリックすると・・・下記のHTMLを利用すると、ホームページにこの画像を表示できます。<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key">って画面になりますよね(〃⌒▽⌒)この呪文を貼り付けると、あら不思議・・・画像が表示されますよねー(￣▽￣人)とまぁ、ここまでは「楽天」ヘルプページにも書いてあることです。これだけでは芸が無いのでもう少しふみこんで、いろいろなことをやってみましょう(￣^￣*)まずは、縦横比を変えてみましょう。例）<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="300" height="100" alt="key">表示結果）見てのとおりですね(〃⌒▽⌒)「width」が画像の幅、「height」が画像の高さを表しています。もちろん、<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="50" height="50" alt="key">のように指定しますと、縮小表示されます。表示結果）もともとある画像を拡大したり縮小したり、縦横比を変えてみたりしたいときに便利ですよね(〃⌒▽⌒)次は画像の周りを線で囲んでみましょう！例）<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" border="1"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" border="7">表示結果）これも簡単ですよね(〃⌒▽⌒)「border」に線の幅を指定します。指定する数が大きければ大きいほど太い線になるってことです。さて、ここまでは基本中の基本で、特にめずらしくもなんともないですよね。基本だけじゃ簡単すぎてつまらないよ！って方のために、少しめずらしい裏技を紹介しましょう(〃⌒▽⌒)でも、気をつけてください。InternetExplorerというブラウザにしか対応していない裏技ですので（笑例）<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: blur(direction=45, strength=20);"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: xray();"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: invert();"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: flipv();"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: fliph();"><IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key" style="filter: wave(freq=3,lightstrength=50,strength=5);">表示結果）あまり深く考えないで下さい（笑こう記述したらこうなるんだ、くらいのちょっとした裏技でした(〃⌒▽⌒)（もう少し詳しく知りたい方はこちらを参考にしてみて下さい）どうでしたか？今回は少し変わった画像の表示方法も紹介しました(〃⌒▽⌒)まぁ、あくまで基本は「画像をそのまま表示する」ってことで覚えておきましょう！さて、次回は・・・ページに横線をひく方法を紹介します。↑↑こんな線だけじゃつまらないので・・・こんなかわいい下線も(〃⌒▽⌒)紹介しますので楽しみにしておいて下さいね(ﾟ▽^*)ﾉ⌒☆

Aug 10, 2004

コメント(5)
タグを覚えよう【第４回目】　-　文字のスタイル

第２回第３回に引き続き、また文字を変えてみましょう(〃⌒▽⌒)今回は文字のスタイルをいろいろ変更するタグを紹介します。これから４個のタグが登場しますが、またまた心配ご無用(￣^￣*)今まで以上に簡単ですから(〃⌒▽⌒)では、早速ひとつ目。例）<b>ここが太字になるよー</b>表示結果）ここが太字になるよーとってもわかりやすいですよねー。「ぶた（BUTA）」の「B」で囲めば太くなるんですよ(〃⌒▽⌒)本当は「BOLD」の「B」らしいですがそんなの覚えにくいですよね。ぶたタグで囲めば太くなるって覚えましょー。次はななめ文字を紹介します。例）<i>ここがななめ文字になるよー</i>表示結果）ここがななめ文字になるよー今度もたった一文字だけのタグです。「Italic（斜体）」の「I」らしいですが・・・イタリアにあるなんとかの斜塔のせいで斜体文字がイタリックと呼ばれているのでしょうか？よくわかりませんが・・・覚えやすくもじった表現思いつかなかったんですよ(´･ω･`)気をとり直して３こ目は下線をつけてみましょう。例）<u>ここに下線がつくよー</u>表示結果）ここに下線がつくよーこれは「Under（下）」の「U」らしいです。簡単ですよね(〃⌒▽⌒)下に線をひくから「Under（アンダー）」で囲むってわけです。「A」とまちがえちゃだめですよー。最後は打ち消し線です。例）<s>ここに打ち消し線がつくよー</s>表示結果）ここに打ち消し線がつくよー「Strike」の＠￥「S」らしいですが「線（Sen）」の「S」の方が覚えやすいですか？ただ、定価\20,000→特別価格\9,880 こんな感じで使うのでしょうか？あまり使い道ないかもしれませんね（笑以上４こ紹介しましたが覚えれましたか？<b>太字</b><i>斜体</i><u>下線</u><s>打ち消し線</s>どれもこれも１文字タグで最初はこんがらがるかもしれませんがあせらず一つずつゆっくり覚えて下さいね(〃⌒▽⌒)最後に例のごとく応用技（組み合わせ技）をのせておきます。例）<font size="5" color="#9900ff"><b><s>大きさ５で色付で、太くて打ち消された文字（笑</s></b></font>表示結果）大きさ５で色付で、太くて打ち消された文字（笑明日はなんと・・・画像をＨＰに貼りつけてみましょう(〃⌒▽⌒)楽しみにしておいて下さいね(ﾟ▽^*)ﾉ⌒☆

Aug 9, 2004

コメント(6)
タグを覚えよう【第３回目】　-　文字の色いろいろ

第２回に引き続き、第３回もまた文字を変えてみます。どんな文章を書くにしても、同じ文字の色ばかりではつまらないことないですか？例えばこのページがいい例ですよね（笑デザインって言ってしまえばそれまでですが、文字が一色に統一されているとなんかかたくるしい感じします。ってなわけで今回は文字の色の変え方を勉強しましょー。ただ本来なら、ＨＰ作りをはじめるときに真っ先につまずくのが色の指定だと思います。指定の仕方が文字と数字と記号で確かに難しいものなのですが・・・心配ご無用です(￣^￣*)簡単に色の指定が分かる教材を用意しました。ここをクリック！！これを使えば多分つまづくこともないでしょう。適当に遊んでみて下さい。赤と青と緑のつまみがあって、それを動かしたら背景の色が変わりますよね(〃⌒▽⌒)背景と一緒に右の方にある四角の枠内の文字も変わってることに気がつきましたか？「#02f811」のように「#」が頭についている７桁の文字のことなんですが、なんとこれが色を表す記号となっているのです。とっても簡単でしょ(〃⌒▽⌒)メモリを動かして好きな色を作ったら右上の四角の枠を見る！たったそれだけであなたの好きな色を表す記号が完成するのですから（笑さて、色を表す記号が完成したところで、実際に文字の色を変えてみましょう。復習ですが、文字の大きさを変えるときは<font size="5">ここのサイズが変わる</font>でしたよね。実は色も同じ「<font>タグ」を使います。記述方法は見てのとおり<font color="#ff0000">ここの色が変わる</font>となっています。もちろん「color=""」にさっき作った頭に「#」がついている７桁の文字を指定するのです。簡単でしょ(〃⌒▽⌒)更に理解を深めるために、下の例を見て下さい。例）<font color="#ff0000">テスト</font><font color="#ff00ff">テスト</font><font color="#ffff00">テスト</font><font color="#0000ff">テスト</font><font color="#00ffff">テスト</font><font color="#ffffff">テスト</font><font color="#000000">テスト</font>表示結果）テストテストテストテストテストテストテスト記述の仕方はぜんぜん難しくないですよね。さて、ここで終わりではありません。一つだけ応用サンプルを載せておきましょう！例）<font color="#ff0000" size="6">応用例</font>表示結果）応用例もちろん組み合わせることもできるってサンプルでした(〃⌒▽⌒)今日は少し長かったですが色の指定方法は分かりましたか？指定する色を表す記号を作るのが少し難しいですが、指定自体は簡単ですよね。わかりづらいことなどもしありましたら、気軽に相談くださいね。明日の予定は「文字のスタイルをいろいろ変えてみよう」っぽいのを考えています。またぜひ来てくださいねー(ﾟ▽^*)ﾉ⌒☆

Aug 8, 2004

コメント(10)
タグを覚えよう【第２回目】　-　文字の大きさに変化をつけてみよう

改行を覚えたら今度は文字の大きさを変えてみましょう。ＨＰ全体が同じ大きさの文字じゃ少し寂しいですよね。時と場合と気分によって文字のサイズをいろいろ変えてみましょう。基本的に文字のサイズは７種類あります。例）<font size="1">サンプル文字</font><br><font size="2">サンプル文字</font><br><font size="3">サンプル文字</font><br><font size="4">サンプル文字</font><br><font size="5">サンプル文字</font><br><font size="6">サンプル文字</font><br><font size="7">サンプル文字</font><br>表示結果）サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字文字に対するいろいろな指定は<font>タグを使います。「<font>」と「</font>」にはさまれた部分が指定どおりに変わるってわけですね。今回のサイズ指定では、数字が大きいほど文字も大きくなります。まだまだ簡単でしょ(〃⌒▽⌒)明日は文字の色を変える方法を勉強します。明日もまだまだ簡単ですよー。また見に来て下さいね (ﾟ▽^*)ﾉ⌒☆

Aug 7, 2004

コメント(2)
タグに挑戦

とりあえずメインテーマも決まらないのでテーマが決まるまで永遠にタグのお勉強ってわけで毎日一個ずつタグのお勉強しましょーね。毎日読むだけで・・・きっと１年後にはばりばりとＨＰが作れるようになりますよー。ってなわけで、やっぱり一番最初に覚えるタグは<br>改行でしょ(〃⌒▽⌒)HTMLファイルのソース中に<br>を記入すれば、そこで改行されます。例）これって<br>ぶろぐじゃ<br>ないような表示結果）これってぶろぐじゃないような分かりましたか？こんなの簡単ですね(〃⌒▽⌒)

Aug 6, 2004

コメント(8)

全83件 (83件中 51-83件目)

< 1 2

ジャンル別一覧

人気のクチコミテーマ

ブログ更新しました♪

１１月１２日　記事更新致しました。

(2024-11-12 20:57:35)
3DCG作品

勝てなかった翼１８

(2024-11-10 06:30:09)
楽天アフィリエイト♪

［楽天市場］薪ストーブ・石油ス…

(2024-11-12 22:27:18)

© Rakuten Group, Inc.