2026
2025
2024
2023
2022
2021
2020
2019
2018
2017
2016
2015
2014
2013
2004年08月の記事
全25件 (25件中 1-25件目)
1
-
今日は・・・
勝手ながら１日１タグおやすみです・・・家が床下浸水→停電したんですよ(´･ω･`)台風め(´･ω･`)なかなか落ち着いて講座も書けませんので明日ゆっくり落ち着いて書きますね。ではまた明日ー(ﾟ▽^*)ﾉ⌒☆
Aug 31, 2004
コメント(5)
-
タグを覚えよう【第２４回目】 - ブラウザについて
ＨＰを作る際に、まず準備するのの中にブラウザと呼ばれるソフトが入るでしょう。今日はブラウザについて説明します(〃⌒▽⌒)とは言いましても、これはもうすでにご存知ですよね。あなたは今このＨＰを見てくれていますが、そのためにブラウザと呼ばれている道具を使っていると思います。ここではそのブラウザを２，３点紹介しましょう(〃⌒▽⌒)とは言いましても、すでにあるのに何で用意しなければならないのかと疑問に思いませんか。確かにＨＰを見るだけでしたら一つのブラウザで十分でしょう。何も問題はありません。しかし、ＨＰを作った際のテスト表示用として用意するブラウザは一つでは足りません。なぜなら、同じＷｅｂページでもブラウザによって表示のされ方が違うからです。まったくおかしな話ですが、現実問題違うので作る側としましてはぼやいていても始まりません。動作確認用に有名ブラウザを数点用意するくらいの準備は整えておきたいですね(￣▽￣人)。以下に私が動作確認用に使っていますブラウザを挙げておきます。IntarnetExplorer言わずと知れたWindows標準ブラウザ。世界中で使用者がもっとも多いブラウザです。略して「IE」と呼ばれることもあります。必ず動作確認をしておきたいブラウザでしょうNetscapeNavigator以前はIEと勢力を争い「２大ブラウザ」とも呼ばれていました。現在では多少勢力が弱まりましたが愛用者がまだまだ多いのも事実。特にLinux系のOSに標準で搭載されていることもありますのでしっかり確認をしておきましょう。OperaBrowser世界最速ブラウザとの声も高いこのブラウザ。使用者が急増しています。こちらも最低限チェックしておきたいブラウザの一つです。MozillaFirefoxWindows以外のOSを使用している人に愛用者が多いブラウザ。Mozillaとしてさまざまなブラウザがリリースされていますので最低限どれか一つは確認しておきたいですね。なぜこんな手間のかかることをしなければならないかは、考えてみればすぐにわかることです。あなたが、どこかのＨＰを訪れたときに、表示が大きく崩れたＨＰであれば中をじっくり見ようと思いますか？もう一度訪れようと思いますか？おそらくすぐにブラウザの「戻る」ボタンを押すのではないでしょうか。もう、こうなったら中身以前の問題ですよね（読んですらもらえないのですから）(´･ω･`)たかだか表示だと思うかもしれませんが「第一印象」は大事です。自分の予期せぬ表示によりせっかく来てくれたお客様を逃さないためと思えば、このくらいの手間はたやすいことですよね(〃⌒▽⌒)今日はタグ講座をお休みしてブラウザの予備知識を解説しました。特に「楽天」内では、デザインにこだわるあまりに・・・InternetExplorer以外のブラウザで見た際に多いのですが大きく表示がずれてしまっているページが悲しいくらいたくさんあります(´･ω･`)せめてチェックくらいはHPの管理者としてやっておきましょうね(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆
Aug 30, 2004
コメント(7)
-
タグを覚えよう【第２３回目】 - スクロールバーの色を変えよう
以前当講座の１４回目で「楽天」で使える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)
-
タグを覚えよう【第１４回目】 - 楽天で使えるIFRAMEもどき
IFRAMEタグってご存知ですか？インラインフレームと呼ばれ、Webページの中に更にWebページを埋め込むために使われる技術のことです。よくわかりませんね(´･ω･`)ってなわけで、例をみてみましょう（笑インラインフレーム解説ページただ、このインラインフレームは残念ながら「楽天」内では使うことができません。ってなわけで、今回は「楽天」内で使用できる「インラインフレームもどき」を紹介します(〃⌒▽⌒)どんなもの？って方は私のTOPページを見てください。スクロールできる小窓がありますよね？縦長になりすぎるメニューや長い文章にはもってこいですよね(￣▽￣人)ぜひ使い方をマスターしてください。ささーっとタグの例だけ挙げても良いのですが・・・それでは当サイトの意味もなくなるというもの（笑まずは解説をしておきましょう。特に興味の無い方は読み飛ばしてください。このインラインフレームもどきですが、「P」タグと呼ばれるものを使用します。この「P」タグですが、<p>HTML タグをいっしょに覚えましょ(〃⌒▽⌒)ここに書いてあるタグは自由にこぴぺして使って下さいね。HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい(ﾟ▽^*)ﾉ⌒☆上級者様向けの HD 本館 もどうぞよろしくm（_ _）m</p>のように使用し、囲まれた範囲が一つの段落であることを示します。段落であることを示し、囲まれた範囲の前後に改行を挿入することが「P」タグの機能となっています。そこで「P」タグでまずひとかたまりの段落であることを定義し、ついでにそのかたまりを表示するための領域（Webページ上のスペース）を確保します。通常インターネットエクスプローラは、その確保した領域に中身が収まりきらなかった場合は中身にあわせて領域を広げます。ただ、「overflow:scroll」がスタイルに指定された場合は別で、範囲にスクロールバーを表示してくれるのです(￣▽￣人)そうしたら・・・あら不思議。インラインフレームもどきのできあがり(〃⌒▽⌒)となるわけですねー。では実際に例を見てみましょう。例）<p style="width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。この例では、幅１７０、高さ１７０の領域を確保したことになります。そして「border:solid 1px #9999ff;」とすることにより、境界線の指定を行っていることとなります。この記述は何回も登場しましたよね(〃⌒▽⌒)幅１の一本線を「＃9999ff」という色で引いてください、ってことでしたよね。こうすることにより、インラインフレームもどきが完成するというわけです。次はこれに背景画像をつけてみましょう(￣▽￣人)例）<p style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;background-attachment:fixed;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。あまり見たこと無いでしょ？（笑こちらも使い方次第でいろいろとおもしろいことができると思います(￣▽￣人)念のため解説を付け加えておきますね。「background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);」にて背景画像のURLを指定します。そして、「background-attachment:fixed;」という記述で背景画像を固定し、スクロールとともに背景画像が動かないようにしています。ということは・・・例）<p style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。のようにしたらスクロールと一緒に背景画像もスクロールする、ってことになりますね(〃⌒▽⌒)以上、インラインフレームもどきでしたがいかがですか？見た目複雑そうな記述ですが・・・少しずつ意味を理解していけば簡単でしょ？あとはこれをそのままこぴぺで使うも良し(〃⌒▽⌒)改良を加えてオリジナルな使い方をあみだすも良し(〃⌒▽⌒)がんばってくださいね(￣▽￣人)では、またあしたー(ﾟ▽^*)ﾉ⌒☆
Aug 20, 2004
コメント(15)
-
タグを覚えよう【第１３回目】 - ＨＰってそもそもなに？
世の中に随分とパソコンが普及したこともあって、「ＨＰ」や「ホームページ」という単語は、（さも日本語のように、）パソコンをさわったことがない人にまで浸透していますよね。でもちょっと待って下さい。この「ＨＰ」っていったいなんなのでしょう？ホームページ【 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">♥</font>♠♣となっています。もちろん文字ですので、例）<font color="#ff0000" size="7">♥</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)
全25件 (25件中 1-25件目)
1
-
-
- 楽天市場でショッピング！ 楽天市場…
- 2WAYボストンバッグ
- (2026-08-01 07:20:04)
-
-
-
- ブロックチェーン
- 先端技術情報20260706
- (2026-07-08 09:22:30)
-
-
-
- 携帯電話のこと
- 楽天モバイルのつながる未来を支える…
- (2026-07-25 08:00:06)
-
