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

七鍵＠楽天

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

全83件 (83件中 1-50件目)

1 2 >

楽天について

[すでに商品を受領されたお客様について]お客様が商品購入時に利用されたポイント分の代金については、お客様に代わって弊社（楽天）が店舗へ入金の処理をしております。つきましては、ご利用ポイント分を弊社（楽天）よりお客様へ請求をさせていただきます。例の件。私には無関係ですが巷ではこんな怪文書が流れている様だ。簡単に纏めると、1.楽天ポイントプレゼントキャンペーンで約3000pt取得可能2.条件付キャンペーンの筈が楽天のミスで無条件キャンペーン3.複数のアカウントで、アカウントｘ3000ｐ（円）で買い物する輩が続出4.数日後、今回のキャンペーンで取得したポイントは無効で、買い物した分は請求するとの発表が楽天からなされた自分のミスをたなにあげて（無実の）ユーザに迷惑をかける様な措置を採る企業であれば私はこの会社を見限ります。私の余生に於いて楽天と言う名に自ら関わり合いになることは今後一切無いでしょう。Cookpadとは違うってとこをしっかりと見せて下さいね、楽天さん。

Jan 11, 2006

コメント(0)
Yahoo Japanが検索結果表示を刷新

http://docs.yahoo.co.jp/info/pr/release/2005/1003.html大きく変わりました。SEOなどに気を配られている方は更に胃が痛くなりそう。ちなみになぜかNN4.ｘシリーズでは検索すると文字化け。いや、未だにNN4シリーズを使っている方もどうかと思うがYahoo的には敢えてバグだらけのUAを駆逐してくれているのだと…私的に信じたい(´･ω･`)

Oct 5, 2005

コメント(0)
大人気ぶろぐ？

ファイナンシャル・プランナーの資格も持つ志水洋美さんによるブログが早くも大人気。経済・マネー分野の話題はもちろん、料理や趣味の世界まで網羅されているというジャンルの多彩さが、老若男女を問わずアクセス急増中の理由。あなたも今すぐアクセス！なんて紹介が、ここ楽天の管理ページトップにありました。そもそもこんな方名前すら知りませんでしたが、そんなすごい方の運営されているブログであれば、と期待に胸膨らませ訪問。はぁ？大人気の結果のアクセス急増ではなく、「嘘、大袈裟、紛らわしい」広告に騙された人のアクセス数が掲載されているだけでした。ここ楽天内にはもっと素晴らしいブログ、もっと素晴らしい記事が山のように眠っています。そんなブログや記事を発掘することにもっとご尽力を注いでもらいたいものです。

Sep 6, 2005

コメント(0)
絶対にまねしてはいけないページ作成

http://www.kokumin.biz/新しく作った「国民新党」のWebサイト。もう小学生がネタで作ったかのような作りとなっています。ソースを見て…見ている方が赤面してしまうような内容。もう政策以前にこんな党には政治は任せられないなってのが正直な感想。これって本当に国民新党の公式サイトなのでしょうか？WWWに関する識者が「やってはダメ」って言われているありとあらゆることを織り交ぜて作ったネタサイトにしか見え無いのですが。さぁみんなで考えましょう。このサイトのどうしようもない点。20点くらいは楽に挙げられそう。

Aug 22, 2005

コメント(20)
文字を斜めに傾ける

今日は文字を傾けるスタイルシートを紹介しましょう。HTMLタグでは<i>と</>で囲んだ部分が斜体になりましたよね。まぁ見た目はほとんど変わりませんのでどちらでも良さそうなものですが、見た目などのデザインを変える記述はスタイルシートで…ってことですので紹介しておきます。記述例<span style="font-style:italic;">ここが斜体になります</span>表示ここが斜体になりますちなみにこの斜めになった文字のことをイタリック体と呼ぶそうです。その他詳細はfont-styleを参照下さい。

Jul 24, 2005

コメント(2)
今日は満月ですね(￣▽￣人)

Google Mapsに引き続き…Google MoonいったいGoogleはどこに向かっているのでしょうか。月面の状態を検索…いえ、私は楽しくて楽しくて仕方が無いのでありがたいですが（笑欲を言うならGoogleMapsのサテライト版。早く四国も詳細情報に対応させて下さい。(´･ω･`)地球から満月を見るように月から見た私の世界も見てみたいです(￣▽￣人)

Jul 21, 2005

コメント(0)
文字の太さを変えてみる

色を変えたり大きさを変えたり。そんな方法を紹介してきましたが…少しアクセントにかけると思わなかったですか？例えば…アクセント周りの文字と色も違うし大きさも違う。なのになんとなく軽い感じがして物足りない。そんなときには文字を太くしてみましょう(￣▽￣人)記述例<span style="color:red;font-size:150%;font-weight:bold;">アクセント</span>表示アクセントどうでしょう？随分と感じが違うでしょ(〃⌒▽⌒)強調部分以外には…あまり使えないかもしれませんが覚えておくと便利ですよ(￣▽￣人)その他詳細はfont-weightを参照下さい。

Jul 16, 2005

コメント(7)
実はspanだけでなく

今日の日記を書こうと思ってびっくり。なにやら見慣れないボタンがついているでは無いですか。いや、見れば用途は想像できますので押してもいないですが私にしてみれば無用の長物。いちいちキーボードから手を離してマウスまで手を移動させ[B]なんてボタンを押すよりは…<b></b>ってキーボードから入力した方が早いですから(´･ω･`)そんなことよりもこのボタン。ユーザ側で良く使うものを登録させてもらえるようにはならないのですかね。例えば…<p style="line-height:180%;color:#333333;font-weight:bold;"></p>しょっちゅう入力するのでボタン化されたらどんなに楽でしょう。いや、しっかり単語登録していますから事足りていると言えば事足りているのですが（笑あ…それと…事務局さん、ボタンはテキストエリアの下に付けて下さいよ。日記タイトルを入力Tab押下日記を書き始めるって動作がやりにくいではないですか(´･ω･`)とまぁ聞き遂げてもらうつもりも無い要望を一頻り言ったところで今日の本題。今まで文字の大きさを変える方法文字の色を変える方法を紹介しました。どちらともspanと言うタグを使い、<span style="color:red;">なんて紹介をしました。が…このspan、実はなんでも良いのです。# 完全になんでも良いわけではありません。# 画像を表示するIMGタグに文字の大きさなんてあるはずありませんから。例えば…<p style="color:red;"><td style="color:red;"><div style="color:red;"><i style="color:red;">いえほんとに、ほとんどのタグに対して指定することができるのです。私が<span>で紹介をしたからと言って必ず<span>内に記述をしなければならないってことはありませんので念のため紹介しておきました(〃⌒▽⌒)

Jul 14, 2005

コメント(4)
スタイルシートで二つ以上の指定を一度に

やっぱりページ作り支援サイトはページ作りについて語らなければだめですよね。ブログの真似事が意外と楽しく…ずっとページ作り支援的な日記って書いていなかったのです。まぁあくまで自己満足な日記で訪問者の方も激減していたのですが# いや、ページ作り支援もとっても自己満足ですそれがゼロからのスタイルシート企画を始めてからと言うものちゃくちゃくと客足が増えつつありとーってもページ作りの燃料となっています。そんな感じで本日は「二つ以上の指定を一度にする方法」を紹介します。ちなみに前回文字の大きさを変える方法文字の色を変える方法を紹介しました。では…文字の色を変えつつ大きな文字を書きたい場合はどうするの？ってことですね。あまりよろしくない例<span style="color:#0000ff;"><span style="font-size:120%;">ここが大きくなり青色</span></span>あまりよろしくないだけで間違いではないです。ただこんな記述では不恰好ですよね(´･ω･`)せっかくなので一つにまとめちゃいましょう(￣▽￣人)記述例<span style="font-size:120%;color:#0000ff;">ここが大きくなり青色</span>表示ここが大きくなり青色とっても簡単ですよね(￣▽￣人)「style」の中にまとめてしまえば良いってことです。もちろん指定が３個、４個、５個…５０個になろうとも考え方は同じです(〃⌒▽⌒)

Jul 13, 2005

コメント(0)
文字の色を変える方法

気が付かれた方もおられるかと思いますが…ゼロから再スタートと言いつつも少し変わった方法を紹介させてもらっています。以前の解説では「文字の大きさを変える」→「size="7"」なんて言っていました。純粋に「HTMLだけで解説した方がとっつきやすいだろう」なんて憶測から出た行動だったのですが「スタイルシートってなんなのよ？」って方が意外にも多くよくよく考えてみたらHTMLだけの記述では柔軟性にかけ、思い通りのことが実現しにくい楽天の公式ページにもヘルプとして載っているから需要が無いなのかなと勝手に想像してみたり。まぁ、そんなわけで基本から今度はCSS（スタイルシート）を紹介していこうかなと思ったわけです。で、色を変える方法でしたね。解説が目的なのか前振りが目的なのか。# この前振りの中でところどころCSSを使った視覚的表現を織り交ぜて、皆様方の使い所支援までしてしまおうなんて思惑もあったり。とりあえず記述例と表示を。記述例<span style="color:#009900;">ここの色が変わります</span>表示ここの色が変わりますちなみに今回例としてあげた緑っぽい色を表す部分が「#009900」です。色の指定の仕方なんてわからないよ…って方はhttp://www.7key.jp/hp/2/9.htmlを参考にして下さい。簡単に思い通りの色を作れるツールも紹介していますので(￣▽￣人)その他詳細はcolorを参照下さい。使い所感情を文字にしたいとき色を薄くしてあまり強調したくないことを表す色を濃くして強調したいことを表す

Jul 11, 2005

コメント(2)
文字の大きさを変えてみる

基本に戻って再度ゼロからスタートしましょうかと…いえ、仮にも「ゼロからのタグ講座」なんて名前でブログを開設したのにほとんどサイト作りとは関係の無い話題ばかりで。ここらで「開設当初の趣旨を再徹底」# もちろん自分に対してですが1話完結を大前提とした、Webサイトと言うよりメールマガジン形式のWebサイト作成支援ツールをブログにて発信する。予備知識を必要としない解説を心掛ける楽天に特化した解説とする楽天（ブログ）の利点を生かしたページ作りを支援するたまにはサイト作成関連の最新情報、トレンド、バグ情報等を紹介する質問し易い雰囲気と簡単に質問できる環境を提供する本館への誘導サイトとする（ちょっと本音）なんか楽天の回し者っぽい開設理由ですが(´･ω･`)私が楽天を選んだ理由も併せて。既にユーザがかなり多いデザインや設定ページが他のブログより使い易い（初心者でも使い易い）ブログページとしての基本構造がしっかりとしているので変更する必要が無いある程度のカスタマイズ（タグやCSSを含めて）を行えるとまぁこんな感じです。要約すれば「既に完成されている楽天ブログをフル活用しましょう」ってことですね。「楽天でメインメニューが消せます」とか、「こんなことまでできちゃいます」、「こんなデザインまでできちゃいます」なんて解説サイト様もありますがとってもナンセンスですよね。色々な事をしたいのであれば「ブログ」ではなく一切制限の無い静的なWebサイトや、楽天以外のもっとカスタマイズに融通性のあるブログサービスでブログを作成すれば良いだけの話なのですから。ふと気がつけば話があらぬ方向に向かいつつありタイトルである「文字の大きさを変えてみる」がおいてけぼり。前置きはこのくらいにしておきまして本題に入りましょう。記述例<span style="font-size:24px;">ここの大きさが変化します</span>表示ここの大きさが変化します解説簡単でしょ(￣▽￣人)「24px」は例のため適当に指定しましたが、もちろんこの数字を大きくすれば文字サイズも大きくなりますし、小さくすれば文字サイズも小さくなります。「px」は大きさを表す単位です。他にも色々あるので長さの単位を参考にして下さい。何も指定しなかったときのサイズに対して…と言うために「140%」なんて指定を行うこともできます。<span style="font-size:140%;">ここの大きさが変化します</span>その他詳細はfont-sizeも参照下さい。使いどころ強調したいところを大きくするあまり大きな声で言えないことを小さめに表示する

Jul 10, 2005

コメント(2)
事例を元にした「相互リンクの際の相手サイトの選び方」

先日私が管理している別サイトHP作成の第一歩に相互リンクの提案がありました。大したサイトでもなく、総合リンクの提案を受ける事など月に一度あるかないかくらいなので、それはもう嬉しいのなんの。どのようなサイトのどのような管理人様からの提案なのだろうと心躍らせながら該当ページを訪れてみると…。http://rank.i2i.jp/こんなサイトのhttp://rank.i2i.jp/m-link.htmlこんな場所にリンクが貼ってありました。いえ、ありがたい事なんですがね。日本のWebサイトだけでも…どのくらいあるだろう…まぁ仮に10万サイトとしましょう。そんな中から私のサイトを選んでくれたのですから。そう考えるとありがたいことなのですが…はっきり言って現実的に考えると迷惑です。迷惑と私が思う理由１．サイトの説明も無くバナーを羅列してあるだけのリンク集など誰もクリックしない２．そもそもあのリンク集ページにどのくらいのアクセスがあるか分からない３．下手すると検索エンジンロボットからスパムページ扱いされかねないまず１ですが、皆さんも普通に考えれば分かるでしょう。ただバナーだけがあり、ジャンプ先の説明書きが何も書かれていない。クリックしますか？間違えて押してしまう以外に考えられないですね。私がとても素晴らしいバナーを作る才能の持ち主で、どんな状態にあろうと「光り輝くバナー」を件のサイトで使用しているのであれば話は変わってきますが、残念ながらそんな素晴らしいバナーではありません。褒め言葉であっても悪口であっても、何らかの説明書きがあるリンクでなければなかなかクリックをしてもらえるものではありません。皆さんも相互リンクをして頂くのであれば、何らかのサイトに対する評価を加えてくれるサイト様を選ばれた方が良いでしょう。リンクを貼ってくれたと言う事実は嬉しくてもそこから訪問者が来ると言う喜びは味わえないのですから。次に２ですがこれは１にも関係します。リンク集は有益な情報を簡単に探すことができるからこそ機能を果たすものと考えます。他の方はどう思われるか分かりませんが、私の主観（理由は１）で判断しますと優秀なリンク集とは思えません。同じリンクを貼って頂けるのであればアクセス数の多いページに越したことはありませんよね。最後に３ですが、これはGoogleロボットで言われている噂から。1ページに100以上のリンクがあるページは検索エンジンがスパムと判断する事があるそうです。リンクを貼られるだけであれば問題無いらしいですが、こちらからそんなページにリンクを貼るとそのページもスパム扱いされるやらされないやら。http://www.woorom.com/3_seo6.htm噂の真偽は兎も角として、取り敢えず検索エンジンで資料を探しました。他にもたくさんのソースがありますので信じられない方は検索されると宜しいでしょう。まぁそんなページにリンクは貼りたく無いと思うのが当然の思考なのは理解して頂けると思います。そんな理由から件のサイト様からの相互リンクを受けるつもりは一切ありません。いえ、リンクを貼っていただいた事自体、その気持ちだけはとても嬉しいですし、別途行われているサービス自体は特に否定をするものではありません（肯定もしかねますが）。リンク集が「私が気に入るリンク集」であれば喜んで相互リンクに応じたと思いますが、今のままでは私がリンクを貼らせて頂いています他のサイト様に迷惑がかかることにもなりかね無いと私は思いますので。事例を元にした「相互リンクの際の相手サイトの選び方」でした。

Jul 4, 2005

コメント(0)
楽天で使えるインラインフレーム応用（横スクロールを表示しない）

以前から何回か紹介をさせてもらっていました「インラインフレームもどき」の応用版。縦スクロールのみを表示して、横スクロールを表示しない方法を紹介します。ただし、ここで紹介します方法はInternetExplore専用です。他のOSで見られている方は大きく表示がずれて見える場合もありますので使いどころが難しいかもしれません。もどきってことは「じゃぁ本物はどれよ？」って方は、インラインフレーム解説ページを参考にして下さい。インラインフレームもどきの解説ページは楽天で使える面白い小技（インラインフレームもどき）を参考にして下さい。では実際の記述方法。例）<p style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);width:170px;height:170px;overflow-y:scroll;overflow-x:hidden;background-attachment:fixed;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。今までに紹介した方法は「overflow:scroll;」でしたが、「overflow-y:scroll;overflow-x:hidden;」と縦軸横軸を個別に指定する事により縦スクロールのみを表示することもできるのです(￣▽￣人)これらのプロパティは下記も参考にして下さい。http://www.7key.jp/hp/style/overflow.htmlhttp://www.7key.jp/hp/style/overflow-x.htmlhttp://www.7key.jp/hp/style/overflow-y.html-----　追記　------------OPERA、Mozilla、NNで見ると上記のページはこんなになっちゃいます(´･ω･`)ちょっとだめかも…

May 22, 2005

コメント(6)
スタイルシートのお勉強を始める方に

スタイルシートのプロパティ一覧を作成しました。CSS2 プロパティ一覧完成したばかりなので誤字、脱字、勘違い、嘘、大袈裟、紛らわしい、リンク切れなどなど…色々あるかもしれませんが(´･ω･`)徐々に直していきますので気長に見守ってやって下さいm（_ _）m

Apr 24, 2005

コメント(7)
楽天で使える面白い小技（インラインフレームもどき）

以前から何回か説明してきました「インラインフレームもどき」。多少分かりづらいとのご意見も頂き、仮にも「ゼロからの～」なんてうたっています当サイトとしましては反省すべき点として真摯に受け止め…。早い話が説明し直します（笑もどきってことは「じゃぁ本物はどれよ？」って方は、インラインフレーム解説ページを参考にして下さい。ただ、この（本物の）インラインフレームは残念ながら「楽天」内では使うことができません。同じようなことをしたい際は、今から説明をします「もどき」の方法を使うしかないのです。まぁ、見た目上は近い物ができますので、縦長になりすぎる目次や更新履歴にはもってこいかもしれません。ぜひ使い方をマスターしてください(〃⌒▽⌒)さてこのインラインフレームもどきですが、「P」タグと呼ばれるものを使用します。この「P」タグですが、<p>HTML タグをいっしょに覚えましょ(〃⌒▽⌒)ここに書いてあるタグは自由にこぴぺして使って下さいね。HP作成で分からないことがあったら掲示板の方で気軽に聞いて下さい(ﾟ▽^*)ﾉ⌒☆上級者様向けの HD 本館もどうぞよろしくm（_ _）m</p>のように「P」タグで文章を囲み、その囲んだ部分が段落であることをあらわします。そして、その段落の幅と高さを指定してやれば、インラインフレームもどきができあがるわけです。実際の記述を見てみましょう(〃⌒▽⌒)例）<p style="width:170px;height:170px;overflow:scroll;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。この例では、幅１７０、高さ１７０の領域を確保したことになります。幅を変えたければ「width:170px;」の数字部分を、高さを変えたければ、「height:170px;」の数字部分をそれぞれ変更して下さい。「overflow:scroll;」の部分はおまじないとでも思って下さい。何はともあれ、こうすることにより、インラインフレームもどきが完成するというわけです。まずは記述例をそのまま「日記書き込み欄」にコピーアンドペーストし、じゃんじゃん使ってみて下さい(〃⌒▽⌒)次はこれに背景画像をつける方法です(￣▽￣人)例）<p style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);width:170px;height:170px;overflow:scroll;background-attachment:fixed;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。「background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);」にて背景画像のURLを指定します。画像のURLって？と言う方は画像の指定方法も参考になるかもしれません。こちらもまずは「日記書き込み欄」にコピーアンドペーストをしてみて、どのようなものが表示されるかをまずは確認して下さい。「自分で作ってみる」が一番の上達の近道ですから(￣▽￣人)他にも、派手なわくでこのインラインフレームもどきを囲む方法、スクロールバーに色を付ける方法などなど色々な応用ができますので、どうぞ分からない場合は気軽に掲示板の方までご連絡下さいねm（_ _）m

Apr 20, 2005

コメント(16)
最近よくみかける「RSS」って一体なんなのよ？

ここ楽天もRSSに対応していますし、ブログの画期的な2大機能の一つとしてよくあげられるRSS。# ちなみにもう一つはトラックバック# 画期的な2大機能というのは…今私がこの場で考えました(´･ω･`)楽天を楽しく使うにはとっても便利な機能です(￣▽￣人)これを機会にRSSリーダなるものをインストールしてみてはいかがでしょうか？ちなみにRSSの簡単な説明はこちら。http://www.7key.jp/hp/2/24.html分かりづらい面などありましたらこちらでも結構です。なんなりとご質問下さいm（_ _）m

Apr 12, 2005

コメント(9)
訪問者数アップのための落とし穴

私のこのサイト自体、あまりアクセス数も無いので偉そうなことは言えませんが、知っていることをちらほら皆様にも教えましょうと…。いえ、そんな大そうなものではないので暇つぶし程度に読んで下さい。まずアクセスアップの大原則訪問者数を増やすためにしなければならないことは大きく分けて次のたった二つです。初めて来る人を増やすリピータを増やすはい、当たり前のことです。ただ、この当たり前をしっかり認識できているかどうかが最初の別れ目なのです。なぜならば…初めて来る人は小細工で増やせても、リピータは小細工では増やせないからです。あなたと同ジャンルのページを見て下さい。たくさんありますよね？その中でせめて上位20位以内の「質」でなければ、誰も好き好んでリンクなど貼ってくれませんし、お気に入りにも入れてくれません。早い話が、リピータを増やすためには、同業他ページより質を上げるしかないのです。ここで言います質は、情報量の多さであったり、他に無い独創的な情報であったり、最新情報であったり、欲しい情報がすぐ探せるサイトであったり…まぁ、色々です。「もう一度来よう」と思わせるページで無ければ誰も来てくれませんから。で、結局アクセスアップのこつを教えてくれるサイトの大半は、初めてのお客様を増やす方法の伝授となるわけです。ここで本日の題名でもある「落とし穴」が生きてくるわけですが…。無意味なことに時間を費やしていませんか？例えば、検索エンジンに一括登録サービス。よくありますよね、「50個の検索サイトに登録します」みたいな謳い文句の。全く無意味とは言いません、営業妨害で訴えられそうですから。でも考えてみてください。あなたはどの検索エンジンを使って主に検索をしますか？Yahoo、Google、MSN、Goo、Infoseek…せめてこのくらいじゃないですか？多分、日本のインターネットユーザの95％（勝手な想像）以上は上記検索エンジンのどれかを使っていると思います。ってことはそれ以外の検索サイトに50登録しようが100登録しようが無意味あまり効果が無いのではないでしょうか。想像ですので参考までに。更に良く見かけるのが、「なんとかリンク集」への登録。これも無意味思ったより効果が無いと思います。なんとかリンク集のシステムを考えてもみてください。逆アクセス数が多いものから順に表示されるのです。ってことは…アクセス数の多い老舗サイトは特をして（更にアクセス数アップ）、新参サイトは損をする（老舗サイトの宣伝をしているだけ）ってことに…ならないですかね？いえ、あくまで想像ですが。あと、TOPページ相互リンク。これは全く無意味とまで言いませんが、良く相手を選びましょう。相手によってはアクセス数が減る結果となるかもしれませんので。後は…Yahooカテゴリへの登録。これは1日2～10人程度しか来ません。登録ジャンルにもよるでしょうし、コンスタントに来てくれるのでありがたいですが、登録されたからと言って奇跡的にアクセスアップが図れるわけではありません。# 新着に載っている間は平気で10,000人/日くらい来ますが、一日だけですから。他に何があったかな、良く言われているけど無意味あまり効果が無いテクニック。なんだかもっといっぱいあったような気もしましたが、玉切れです(´･ω･`)いえ、こんなことを言いたいわけではもちろんありません。この日記で本当に言いたいことは下記に尽きます。アクセスアップは一朝一夕で出来るものではありません。こんな無意味なアクセスアップ講座を読む時間があるのならば、サイトの質を上げましょう。それが何よりのアクセスアップに繋がります。

Apr 10, 2005

コメント(4)
インラインフレームもどきの中の文字色を変えてみよう

本日は以前紹介しましたインラインフレームもどきの文字色を変える方法を紹介します。例）<p style="width:170px;height:170px;overflow:scroll;border:solid 1px #9999ff;color:#0000ff;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。もちろん背景に画像を載せることも可能です。例）<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;color:#0000ff;">文章（省略）</p>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。これを応用すれば、文字のサイズを変えたり、文字のスタイルを変えたりもできると思います。色々試してみて下さいね(￣▽￣人)

Mar 24, 2005

コメント(13)
IE7の仕様一部明らかに

http://www.itmedia.co.jp/enterprise/articles/0503/17/news035.htmlどのようなブラウザになるのか今からとても楽しみです。http://www.itmedia.co.jp/enterprise/articles/0503/17/news019.htmlOperaもじゃんじゃん進化しているようですし。タブ機能やRSSリーダ機能など昨今のブラウザは搭載してて当たり前。ぜひともIE独自機能など盛り込んで欲しいものです。

Mar 18, 2005

コメント(0)
テーブルでこんなことまでできちゃいます

表示結果）今日はいろいろなテーブルへの効果を紹介しましょう(〃⌒▽⌒)ただしどれもIE専用(´･ω･`)記述例）<table style="filter:progid:DXImageTransform.Microsoft.Gradient(startcolorstr=#ccccff,endcolorstr=#ffffff,gradienttype=1);width:300px;"><tr><td style="padding:10px;">今日はいろいろな</td></tr></table><table style="filter:progid:DXImageTransform.Microsoft.dropshadow(color=#ccccff,positive=true,offx=20px,offy=20px);width:300px;"><tr><td style="background:#ffffff;padding:10px;">テーブルへの効果を</td></tr></table><table style="filter:progid:DXImageTransform.Microsoft.dropshadow(color=#ccccff,positive=false,offx=20px,offy=20px);width:300px;"><tr><td style="background:#ffffff;padding:10px;">紹介しましょう</td></tr></table><table style="filter:progid:DXImageTransform.Microsoft.Engrave();width:300px;"><tr><td style="padding:10px;background:#666666;">(〃⌒▽⌒)</td></tr></table><table style="filter:progid:DXImageTransform.Microsoft.glow(color=red,strength=10);width:300px;"><tr><td bgcolor="#fffcfc" style="padding:10px;">ただしどれもIE専用(´･ω･`)</td></tr></table>なんとも投げやりな説明…。

Mar 12, 2005

コメント(9)
楽天で使えるインラインフレームもどきの応用！

今日は質問の内容からです(〃⌒▽⌒)実はこのサイト…随分前からネタ切れ状態なのです。いえ、皆さん口に出さないだけで知っていると思いますが(´･ω･`)なので、質問って形でネタをふって頂くことがどんなに嬉しいか(￣▽￣人)じゃんじゃん質問もらっても確かに対処しきれないのですが他の方にも有益なテクニックであれば紹介していこうと思います。どうぞ遠慮なく質問下さいね(￣▽￣人)前置きはさて置き。インラインフレームもどきの横に文字を書く方法です(〃⌒▽⌒)こちらを応用すれば…横に絵横にインラインフレームもどき横に表なんて色々と使えると思います。え？インラインフレームもどきってなんだ？復習を兼ねて例を(〃⌒▽⌒)例）<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%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。さて、こいつの横に何か（今日は文字）を配置するのですが、２列×１行のテーブルに入れちゃうのが最も分かり易いでしょう。ただ、テーブルに入れるのであれば段落タグなんて使う必要無い気がしませんか？次の例を見てください。例）<table><tr><td 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;">文書（省略）</td><td>ここに文字や絵や表や…なんでも配置してみて(￣▽￣人)</tr></tr></table>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。ここに文字や絵や表や…なんでも配置してみて(￣▽￣人)なんかおかしいですよね(´･ω･`)Netscapeで見ている方は上記でしっかり思惑通り表示されていると思いますが、IE、Operaなどのブラウザを使われている方には…縦長でスクロールが無いものが表示されたことないでしょうか。実はこれ、ブラウザのバグなんです。本来ならばこれで実現できるはずなのにブラウザが対応していないのでこんな結果となっちゃってるのです。なのでやっぱり万人向けにテーブルでレイアウトをするしかないでしょうね。例）<table><tr><td><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></td><td>ここに文字や絵や表や…なんでも配置してみて(￣▽￣人)</tr></tr></table>表示結果）うちのハッカーは見積もりを出してくれません。あなたのとこのハッカーは、まだその問題の困難さの程度を解析しきれていません。大部分の労働者と違い、ハッカーは問題を確かに理解したと納得できるまで、見積もりを出すことに大きな抵抗を示すでしょう。時には、理解しようとしている間に問題を解いてしまうことさえありえます。優秀な技術者は、決して95%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。ここに文字や絵や表や…なんでも配置してみて(￣▽￣人)テーブルって本当に便利ですよね(￣▽￣人)

Mar 6, 2005

コメント(1)
ユーザビリティってなに？

楽天ページって簡単にページのデザインを変えれて便利ですよね。テンプレートを使えば簡単にプロがデザインしたページになりますしオリジナリティを出したければ詳細設定で各パーツの色を個別に変えることもできる。なんて便利な世の中になったのでしょう(￣▽￣人)ただ、ここで一つ忠告。オリジナリティをかもし出すのは大いに結構なのですが、独創的過ぎてユーザビリティが損なわれていないですか？ソフトウェアやWebサイトの「使いやすさ」のこと。様々な機能になるべく簡単な操作でアクセスできることや、使っていてストレスや戸惑いを感じないことなどが、優れたユーザビリティにつながる。また、ユーザが目標の操作を完了するまでに費やした労力などもユーザビリティの指標となる。IT用語辞典 e-Words より抜粋即ち…見てくれている人が行きたい場所にすぐ行けない。リンク文字色が分かりづらい。そもそもリンクがどこにあるのか分からない。こんなことになっていないでしょうか？楽天は全サイト統一的に上部にナビゲーションがあります。# HOMEやBBSなんてあれね。統一的にあるものなので無いと戸惑います。また、リンク文字色は適切でしょうか？リンク上記のような青色に下線がついている文字。これは誰が見てもリンクと分かる表示らしいです。# 各ブラウザの初期設定がこの色だから。例えリンクでもリンクこんなのじゃ初めて来る人は分かりませんよね。分からなければクリックしてもらえる可能性も低くなるというもの。できることであればリンクは青色に下線文字にしましょう。↑クリックしたくなるでしょ（笑逆を言えば、この例のようにリンクでも無いのに青色下線文字を多用するのは止めましょう(´･ω･`)もっともひどいのが何を考えているのかリンク色と背景色を同じにしているサイト。デザインと言うよりは閲覧者と楽天と検索エンジンに喧嘩を売っているようなものです。自己満足なデザインよりも常に見てくれる方の使い易さを最優先に考えたいものですね(〃⌒▽⌒)

Mar 1, 2005

コメント(6)
楽天で使えるスタイルシート（余白編）

今日はスタイルシートを使った便利な小技を紹介してみます。いえ、小技というほど大袈裟なものでもないのですがかなり使用頻度が高いと私が勝手に思っている記述方法です(〃⌒▽⌒)では早速。記述例）<p style="border:1px solid #0000ff;margin-top:50px;">ここに文章</p>表示結果）ここに文章border～なんてのは分かり易く外枠を付けてみただけですので、今回の話には関係ありません。今回問題なのは「margin-top:50px;」という記述です。これを指定したタグの「上余白」を50pxにしなさい、という指定になります。余白をあけたい場合に<br><br><br><br><br>なんてことやっていませんか？スタイルシートで指定する方が随分とスマートですよね(￣▽￣人)更に…。記述例）<p style="border:1px solid #0000ff;margin-left:100px;">ここに文章</p>表示結果）ここに文章なんて記述をしますと、左余白を指定することもでき、MSWord などで言います「インデント」のような指定もすることができます。他にも「margin-bottom」「margin-right」のように、下余白、右余白も指定することができます。前々から何回か言っています「見た目はスタイルシートで」。<br>や全角スペースの連記なんて大抵の場合は見た目を指定するものです。これらで余白を調整しても、ブラウザによっては省略されてしまいますし、そもそも環境によって見た目も変わってきますので細かい指定をすることは不可能です。余白を指定する場合には「margin」で(￣▽￣人)しっかり覚えておきましょう(〃⌒▽⌒)

Feb 23, 2005

コメント(9)
<s>の復習

今日は「S」タグの復習です。以前説明した時は軽く流した程度だったのですが覚えていますか？「Strike」の「S」らしく、囲んだ範囲に打消し線がつきます。百聞は一見にしかず。とりあえず例を見てください。例）定価<s>\20,000</s>→特別価格\9,880表示結果）定価\20,000→特別価格\9,880余り使い道無いかもしれませんね（笑HTMLのタグにはこのように１文字だけのタグが何個かあります。覚えてしまえば記述が楽なので良いのですが、なんとも覚えにくいですよね。しかもこんな滅多に使わないタグならなおさら(´･ω･`)「線」の「S」とでも覚えれば少しは覚え易いかもしれません。補足）余裕のある方は以下も参照下さい(〃⌒▽⌒)このタグは「意味」を加えるのではなく「見た目」を変えるタグです。でもHTML の本質は「文章に意味をつけること」。こんなときどうするか覚えていますか？ページの見え方に関する指定は全てスタイルシートにて行うのだったですよね(〃⌒▽⌒)１文字で終わるタグをスタイルシートで長々と記述するのもめんどうなのですが、余裕のある方は覚えてみてはいかがでしょうか。例）定価<span style="text-decoration:line-through;">\20,000</span>→特別価格\9,880表示結果）定価\20,000→特別価格\9,880

Feb 13, 2005

コメント(4)
<H>タグで見出しを付ける

今回は「H1」とか「H3」など見出しを付けるタグの復習です。これは「Heading」の略となっていて、1～6の範囲の整数値で見出し位を指定します。Hタグで囲まれた部分は文字サイズが変化し太字になり、前後に改行がはいる例）<h1>見出し１</h1><h2>小見出し</h2>表示結果）見出し１小見出し決して文字を大きくするためのタグではないことに気を付けてください。あくまで「囲まれている部分が見出しであることを表す」ためのタグなのです。

Feb 5, 2005

コメント(2)
<font>の復習３

今日は文字の種類を変えてみます。部分的に変更すればページのアクセントになりますよ(〃⌒▽⌒)例）<font face="ＭＳゴシック">ゴシック体</font><font face="ＭＳ明朝">明朝体</font><font face="HG創英角ﾎﾟｯﾌﾟ体">ポップ体</font>表示結果）ゴシック体明朝体ポップ体文字の大きさや色なども変えてみると面白いかもしれませんよ(￣▽￣人)例）<font size="7" color="#0000ff" face="HG創英角ﾎﾟｯﾌﾟ体">さんぷる</font>表示結果）さんぷるただ、この方法は見る側のパソコンに同じ文字が導入されていることが条件となりますので注意下さい。

Feb 3, 2005

コメント(2)
<font>の復習（２）

「FONT」タグの復習２回目。今日は色の変え方を復習しましょう(￣▽￣人)復習なのでいきなり実例。例）<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>表示結果）テストテストテストテストテストテストテスト簡単ですよね(￣▽￣人)大きさを変える際は「size」と指定していたのですが今回は色なので「color」と指定するのです。そして、色の作成は下記のリンクから簡単にできます。ここをクリック！！いたれりつくせりでしょ(〃⌒▽⌒)

Jan 27, 2005

コメント(0)
<font>タグの復習（その１）

今日は最も良く使うと言っても過言ではない…<font>タグの復習をしましょう。一気にやっちゃうと復習になりませんのでとりあえず今日は文字の大きさを変える方法を復習します(〃⌒▽⌒)まずはHTML だけ使った方法。例）<font size="7">サイズ７</font><font size="6">サイズ６</font><font size="5">サイズ５</font><font size="4">サイズ４</font><font size="3">サイズ３</font><font size="2">サイズ２</font><font size="1">サイズ１</font>表示結果）サイズ７サイズ６サイズ５サイズ４サイズ３サイズ２サイズ１上記のように７段階で指定できるのでしたよね(￣▽￣人)そして更に微妙な調整をする際はスタイルシートを使うのでした。例）<font style="font-size:70px;">鍵</font>表示結果）鍵よく使うタグです。きっちり覚えて使いこなしましょう(〃⌒▽⌒)

Jan 23, 2005

コメント(2)
<I>の復習

今日は「I」タグの復習です。一文字で使い方も簡単なだけに、逆に覚えにくいかもしれません。「Italic」の略で、囲まれた部分を斜体に表示します。例）今日の晩御飯は<i>うどん</i>でした表示結果）今日の晩御飯はうどんでした私の献立などどうでもいいのですが結果は分かっていただけましたか？太字に比べ使う場面も限られてくるとは思いますが何かのときに覚えておくと便利ですよね(￣▽￣人)

Jan 18, 2005

コメント(6)
<EM>の復習

今日は「EM」の復習をしましょう。こちらは Emphasis の略で、テキストを強調する際に使用します。多くのブラウザはイタリック体で表示します。例）今日は<em>センター試験</em>のようですね。表示結果）今日はセンター試験のようですね。見ての通りですね(〃⌒▽⌒)ただ単にイタリック体で表示したい場合は「I」タグを、とてもとても強調したい場合は「STRONG」タグを使用してください。「EM」タグは強調した結果斜体になる、と理解するのが良いでしょう(￣▽￣人)

Jan 16, 2005

コメント(3)
BASEFONT

これも復習とか言いつつはじめて紹介するタグです。ですが…。何で今まで紹介していなかったのか不思議に思うくらい便利なタグですのでこれを機会に覚えてみてはいかがでしょう(〃⌒▽⌒)記述例）<basefont size="4" color="#0000ff" face="ＭＳ明朝">表示結果）表示結果と言いつつ…何も表示されていませんがどうでしょう？<basefont>を記述して以降の文字（大きさ、色、種類）が全て変わっていますよね(￣▽￣人)このタグは、BASEFONTタグ以降の基準文字表示を指定するために使います。早い話が、ここ楽天で日記の冒頭にでもこのタグを記述しておけば、その日の日記の文字スタイルを一括して変更することができると言うわけですね(〃⌒▽⌒)実際に指定できるのは基準文字のサイズ文字色表示フォントをそれぞれ変更できます。興味がある方はどうぞ使ってみてください(￣▽￣人)

Jan 13, 2005

コメント(2)
<big>タグ

復習と言いつつ一回も紹介していないタグなのですが今日は「BIG」タグについて見てみましょう。正直覚える必要はありません。なぜか？見た目に関する指定はスタイルシートを使うのでしたよね(〃⌒▽⌒)しかも、<font size=+1>ここが大きくなるよ</font>と記述したのと同じ意味を持ちます。なのであまり（と言うよりは全く）使い道は無いのですが、他人様が書いた HTMLソースを眺めているときに面食らってしまってもいけませんので紹介しておきます。例）携帯の<big>ウィルス</big>も最近笑い事じゃなくなってきましたね。表示結果）携帯のウィルスも最近笑い事じゃ無くなってきましたね。どうです？簡単でしょ(〃⌒▽⌒)それはそうと携帯のウィルス。実験室の中だけの話と心配し過ぎ説が実しやかに囁かれていたのがつい最近だったと思いますがそろそろそんなことも言っていられなくなってきたのではないかといえ、全くの私見ですが IT 関連の記事を読んでいると思うわけで。携帯も機能が充実すればするほどウィルスが作り易く広まり易くなるのはある意味仕方がないことなのかもしれませんね。１０年後のウィルスはどんなものに感染しているのか今から興味がある反面、余り考えたくない世界だなと…。車やストーブ、なんて命にかかわるような。元記事）http://www.itmedia.co.jp/enterprise/articles/0501/11/news037.html

Jan 11, 2005

コメント(7)
<b>の復習

今日から１つずつタグの復習でもしてみましょう。手始めに「B」タグから。これは「Bold」の略で囲んだ部分が太字になるタグでしたよね。前回はぶたの「B」なんて説明しました（笑何はともあれ記述例を見てみましょう(〃⌒▽⌒)例）今日から<b>少しずつ</b>復習しましょう。表示結果）今日から少しずつ復習しましょう。こんな感じです。ただ、強調したいのであれば「strong」や「em」を使うのでしたよね。まぁ、おいおい登場させますのであまり気にしないで下さい（笑

Jan 10, 2005

コメント(4)
タグを覚えよう【第５８回目】　-　マウスカーソルの形をいろいろ変えてみよう

当サイトのトップの注意書き。マウスをのせると「はてな」のカーソルになりますよね(￣▽￣人)今日はその方法をお教えしましょう。たくさん登場しますがびっくりしないで下さい（笑必要なものだけ覚えればいいだけのことですから(〃⌒▽⌒)例）<div style="cursor: auto;">ブラウザが自動的に選択</div><div style="cursor: default;">利用環境の標準</div><div style="cursor: pointer;">リンク</div><div style="cursor: crosshair;">十字</div><div style="cursor: move;">移動</div><div style="cursor: text;">テキスト編集</div><div style="cursor: wait;">待機・処理中</div><div style="cursor: help;">ヘルプ</div><div style="cursor: n-resize;">北方向のリサイズ</div><div style="cursor: s-resize;">南方向のリサイズ</div><div style="cursor: w-resize;">西方向のリサイズ</div><div style="cursor: e-resize;">東方向のリサイズ</div><div style="cursor: ne-resize;">北東方向のリサイズ</div><div style="cursor: nw-resize;">北西方向のリサイズ</div><div style="cursor: se-resize;">南東方向のリサイズ</div><div style="cursor: sw-resize;">南西方向のリサイズ</div> <div style="cursor: hand;">指型</div> <div style="cursor: no-drop;">ドロップ禁止（IE6以上）</div><div style="cursor: all-scroll;">全スクロール（IE6以上）</div><div style="cursor: col-resize;">横方向のリサイズ（IE6以上）</div><div style="cursor: row-resize;">縦方向のリサイズ</div><div style="cursor: progress;">進行中（IE6以上）</div><div style="cursor: not-allowed;">禁止（IE6以上）</div><div style="cursor: vertical-text;">縦書き（IE6以上）</div><div style="cursor: url('./samp.ani');">オリジナルカーソル（IE6以上）</div>表示結果）別窓でサンプルページが開きます。サンプルは見やすいように少し加工しています。いろいろな形に変わるのが分かったでしょうか？今回は「DIV」タグに指定をしましたが、「P」「SPAN」「IMG」「A」「TD」などなどにも指定することができます。色々試してみてくださいね(￣▽￣人)

Oct 19, 2004

コメント(3)
タグを覚えよう【第５６回目】　-　ＨＰで使える画像の形式

今回はＨＰで使える画像の形式（種類）について解説しましょう(〃⌒▽⌒)パソコン上で使える画像には色々と種類がありますよね。ただ、「画像を表示しなさい」と言う命令文を記述すれば、どのような形式でも表示されるわけではありません(´･ω･`)一般的にＷｅｂページ上へ貼り付けることができる画像は、今から紹介します３個の形式だけです。GIF 形式（拡張子：gif）イラストや幾何学模様など色数が少なく、色と色の境がはっきりとした画像に適した形式です。画像の一部を透明にしたり、アニメーション画像を作成したりすることもできます。256色以上の色を使用できない、と言う欠点もあります。(8.24kb) (8.37kb)JPEG 形式（拡張子：jpg、jpeg）写真など色数が多く色が複雑に絡み合っている画像に適した形式です。1670万色まで表示できます。イラストや幾何学模様など平坦な画像をこの形式で保存すると、境目がにじんだようになりますので注意が必要です。(16.7kb) (24.4kb)PNG 形式（拡張子：png）イラストや幾何学模様など色数が少なく、色と色の境がはっきりとした画像に適した形式です。理論上最大で280兆色まで扱うことができます。また、圧縮率が高く同じ画像のGIFファイルより10％～30％程度ファイルサイズが小さくなります。複数の透過色を指定できる、という特徴もあります。ただし、アニメーションできない、フルカラーにするとJPEGよりファイルサイズが大きくなる、古いブラウザでは表示できないなどの注意点もあります。（表示できるブラウザはIE5.5以降、NN4以降です）(14.0kb) (19.4kb)それぞれ微妙に感じが違うの分かりますか？もし、自分で画像を作成・加工される場合は、それぞれの形式をよく理解したうえで次のいずれかの中から最適な形式で保存するようにして下さい(〃⌒▽⌒)

Oct 14, 2004

コメント(8)
タグを覚えよう【第５５回目】　-　いろいろ動かせるタグ（復習）

今日は「MARQUEE」タグの復習をしましょう(〃⌒▽⌒)「MARQUEE」タグって覚えていますか？JavaScriptを使用できないここ楽天で、見た目上何かを動かそうと思うとアニメーションＧＩＦを使うか、この「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>表示結果）いかがでした？使いすぎるとなんか酔ってしまいそうになるこのタグですが、ちょっとしたワンポイントにはもってこいですよね(￣▽￣人)上記は基本中の基本です。これらを応用してぜひおもしろい活用方法を編み出してください(〃⌒▽⌒)

Oct 12, 2004

コメント(6)
タグを覚えよう【第５４回目】　-　テーブルの応用２

なんと、HD 本館に引き続きほーむぺーじ作成の第一歩もYahoo!Japanディレクトリに登録されました(￣▽￣人)トップ > コンピュータとインターネット > インターネット > WWW > ホームページ作成 > の中のビギナーズガイドってとこなんですがね。興味のある方はほーむぺーじ作成の第一歩も宜しくお願いしますm（_ _）mさて、今日はテーブルの応用としましてテーブルに背景画像を付けてみましょう。まずはテーブル全体に背景画像を指定する方法(￣▽￣人)例）<table border="1" style="background-image: url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);width:150px;height:150px;"><tr><td>○</td><td>×</td><td>○</td></tr><tr><td>×</td><td>○</td><td>×</td></tr><tr><td>○</td><td>×</td><td>×</td></tr></table>表示結果）○×○×○×○××窓枠に使えるような使えないような？背景画像を薄く淡い感じにしたら通常の表として使ってもおしゃれかもしれませんね(￣▽￣人)次にセルに背景画像を指定する方法です。例）<table border="1"><tr><td style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);width:150px;height:150px;">○</td><td>×</td><td>○</td></tr><tr><td>×</td><td>○</td><td>×</td></tr><tr><td>○</td><td>×</td><td>×</td></tr></table>表示結果）○×○×○×○××もちろんセルごとに違う背景を指定することもできます。これらは主に背景の上に文字を書きたい場合などに便利かもしれませんね(〃⌒▽⌒)もちろん使い方次第でおもしろいことができると思います。色々チャレンジしてください(￣▽￣人)

Oct 10, 2004

コメント(0)
タグを覚えよう【第５３回目】　-　テーブルの応用

今日はテーブルを使ってこんなことまでできちゃいます･･･って紹介です(￣▽￣人)内容的には既に紹介したものばかりですので復習がてら眺めてください(〃⌒▽⌒)例）<table border=4 cellpadding=5 cellspacing=0 bordercolor="#6666ff"><tr><td colspan=3 bgcolor="#00ff00">今日ひま？お月さまが綺麗やからでーとしよ(￣▽￣人)</td></tr><tr bgcolor="#ffcccc"><td>１</td><td>２</td><td>３</td></tr><tr bgcolor="#ffcccc"><td>４</td><td>５</td><td>６</td></tr><tr bgcolor="#ffcccc"><td>７</td><td>８</td><td>９</td></tr><tr bgcolor="#ffcccc"><td>＊</td><td>０</td><td>＃</td></tr></table>表示結果）今日ひま？お月さまが綺麗やからでーとしよ(￣▽￣人)１２３４５６７８９＊０＃例）<table border=1 cellpadding=5 cellspacing=3 bordercolor="#666666" bgcolor="#333333"><tr><td bgcolor="#999999"><br><br><br></td></tr><tr><td>●　□□□□□</td></tr></table>表示結果）●　□□□□□どうですか？携帯電話とテレビでした(〃⌒▽⌒)テーブルだけで意外と色々なものを表現できますので何かおもしろいアイデアがあったら作ってみてはいかがでしょう(￣▽￣人)

Oct 8, 2004

コメント(4)
タグを覚えよう【第５２回目】　-　特殊文字

最近どうも体調がすぐれません。熱がぱーっと出るわけでもなく、倒れこむほどでもなく(´･ω･`)微妙に調子が悪い日が・・・もう何日続いているのでしょう。季節の変わり目だからでしょうか。ここを読んで頂いている皆様方も十分体調には気を付けてくださいね(￣▽￣人)とまぁ、初めてでは無いですかね？冒頭でページ作成以外のことを話したのも（笑たまにはこんなのも日記ぽくって良いかもね(〃⌒▽⌒)さて、題名にも記しました「特殊文字」これは御存知でしょうか？あまり聞きなれない、見なれない単語かもしれませんが、Webページを作るうえでかなり有効に使えます(〃⌒▽⌒)全部覚える必要はありません。よく使うものだけ持って返ってください(￣▽￣人)例）&spades;&clubs;&hearts;&diams;"&<>表示結果）♠♣♥♦ "&<>どうです、おもしろいでしょ(￣▽￣人)よく私がタグの解説で「<br>」などと記述していますよね。これを普通に「<br>」と記述してしまいますとHTMLタグと認識されます。結果ただ改行が挿入されるだけとなっちゃいます(´･ω･`)ですから、実際の記述は「<br>」と記述するわけですね(〃⌒▽⌒)では、問題です・・・「<br>」を記述する際はどのようにソースには書くでしょうか？もちろんソースを覗けば答えは書いてありますので、どうしても分からない方は見てくださいね(〃⌒▽⌒)そして、おもしろいのが「♠」「♣」「♥」「♦」ですね(〃⌒▽⌒)これは普通に文字として認識されていますので例）<font style="font-size:30px;color:black;">&spades;</font><font style="font-size:30px;color:black;">&clubs;</font><font style="font-size:30px;color:red;">&hearts;</font><font style="font-size:30px;color:red;">&diams;</font>表示結果）♠♣♥♦ なんてこともできます(〃⌒▽⌒)ぜひいろいろ使ってみてくださいね(￣▽￣人)興味のある方は特殊文字一覧表も参照下さい（別窓で開きます）。

Oct 7, 2004

コメント(12)
タグを覚えよう【第５１回目】　-　表示位置を変える復習

今日は表示位置を変更するタグの復習をしましょう。通常ページに文字を記述したり画像を貼り付けたりすると、画面の左から順番に表示されていきますよね？普段はこれで何も気にならないのですが、ページ全体のデザインなどを考えだすと「この画像は画面の真ん中に表示したいなー」とか「この文字は画面の右端に表示したいな」とか・・・左寄せ表示ばかりでは思うようにいきませんよね。そこで今回は表示位置を指定するタグをご紹介します(〃⌒▽⌒)例）<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>表示結果）例）<div align="right"><table border=1 cellpadding=10><tr><td>ぴよぴよ</td></tr></table></div>表示結果）ぴよぴよ例）<div align="right"><hr style="width:200px;">ぴよぴよ<hr style="width:200px;"></div>表示結果）ぴよぴよ特に難しい記述でもなく、簡単な英語そのまんまなので覚えやすいでしょ(￣▽￣人)しっかり覚えて活用して下さいね(〃⌒▽⌒)

Oct 6, 2004

コメント(0)
タグを覚えよう【第４９回目】　-　嫌われるページ・・・

今日は「タグ」に関することは休憩して嫌われるページとは？ということについてお話しましょう(〃⌒▽⌒)とは言いましてもあくまで客観的に・・・世間で言われていることをまとめるだけにとどまろうと思っています。私が嫌いなサイトの特徴を羅列したのでは「講座」になりませんからね（笑まぁ、この「嫌われるページ」を読まれて・・・世間で言われていることなんて気にしない！私は私の道を行くからほっといて！これが個性なのよ！なんて思われる方もいるとは思います。でも、ちょっと待ってください。Webサイトと言うものは人に見てもらうためのものでしょ？インターネット自体がそういうものですからね。人に見てもらうためのサイトが嫌われるページでは意味がありませんよね(´･ω･`)客観的に自分のサイトを見つめなおす指針とでもして下さい(〃⌒▽⌒)文字が見えにくいこれは本当に嫌われます。背景色と文字色が近い色になっていませんか？文字の大きさは読み易い大きさですか？背景画像が派手過ぎて文字が見えにくくなっていませんか？この辺りを目安に自分のページを振り返ってみてください。デザインにこだわるあまりせっかくの文章を読んでもらえないのではつまらないですよね。これは自己判断よりも友達等に意見を聞いてみるのが良いかもしれません。リンク切れだらけこれは言い訳のしようがないと思います。画像がことごとく表示されていないサイト様。どこをクリックしても「ページが見つかりません」と出るサイト様。あまり長居したくないですよね（笑画像を貼り付けたら表示されるか確かめる、リンクを貼ったらまずは自分でクリックしてみる、くらいのチェックは必ず行いましょう(〃⌒▽⌒)トップページにでかい画像ページを開いた瞬間にいきなりでかい画像が表示されるのも世間では結構嫌われるようです。あと画像だらけなページ、広告だらけなページ・・・と、とにかく開くのに時間がかかるページになっていませんか？ブロードバンドが大分発達したとはいえ、まだまだナローバンド接続の方は多数います。実際私もモバイル環境（PHS）でページ回ることがあるのですが広告だらけなページは１分経っても開きません(´･ω･`)せっかくのお客さんを逃さないためにもページ全体の容量には気を付けたいですよね。MARQEE を使いまくっている度を過ぎると嫌われる・・・ってことで参考までに読み物サイトの癖に文書の近くで画像が点滅目が痛いらしいです（笑以上が一般的に言われています「嫌いなページ」らしいです。既述ですが、見てもらうためのページなのに・・・デザインで嫌われたらおもしろくないですよね(´･ω･`)外見が第一印象となり、中身さえ見てもらえなくなるのはオンラインもオフラインも同じと言うことです。ちょっとだけ気を付けてみましょうね(〃⌒▽⌒)

Oct 3, 2004

コメント(14)
タグを覚えよう【第４８回目】　-　テーブルの属性

今まであまり触れずにここまできましたが、テーブルに指定できる属性ってこ存知ですか？まぁ、実際はたくさんあるのですが・・・今日は３つほど紹介しようと思います(〃⌒▽⌒)BORDERこちらは今まで何回か紹介してきましたよね(〃⌒▽⌒)例）<table><tr><td>○</td><td>×</td></tr><tr><td>◇</td><td>△</td></tr></table><table border=10><tr><td>○</td><td>×</td></tr><tr><td>◇</td><td>△</td></tr></table>表示結果）○×◇△○×◇△のように指定しなかった場合と比べると一目瞭然ですよね(〃⌒▽⌒)念のため解説しておきますと、テーブルの境界線の太さとなっています。CELLSPACING例）<table><tr><td>○</td><td>×</td></tr><tr><td>◇</td><td>△</td></tr></table><table border=1 cellspacing=30><tr><td>○</td><td>×</td></tr><tr><td>◇</td><td>△</td></tr></table>表示結果）○×◇△○×◇△これも見てもらえば分かるでしょう(￣▽￣人)セルとセルの間隔を示すものとなっていますね(〃⌒▽⌒)CELLPADDING例）<table><tr><td>○</td><td>×</td></tr><tr><td>◇</td><td>△</td></tr></table><table border=1 cellpadding=30><tr><td>○</td><td>×</td></tr><tr><td>◇</td><td>△</td></tr></table>表示結果）○×◇△○×◇△こちらはセル内の余白を表します。セルの中身と境界線までの余白をどれだけとるか・・・ってことですね(〃⌒▽⌒)以上３点ですが、当然組み合わせて使うことも出来ます(〃⌒▽⌒)いろいろと試してみてくださいね(￣▽￣人)

Oct 2, 2004

コメント(1)
タグを覚えよう【第４５回目】　-　何かの周りの線（２回目）

今日も昨日に引き続き・・・何かの周りに線を引く方法を紹介しましょう。まぁ、何かでは分かりにくいのでという画像に的をしぼって話を進めていましたよね(〃⌒▽⌒)しつこいようですが、今回は画像で紹介するだけで・・・方法自体は「TD」にでも「P」にでも「DIV」にでも「SPAN」にでも・・・はたまた「I」や「B」、「H2」までほんとうにいろいろなことに使用できるものとなっています。しっかりマスターしましょう(￣▽￣人)では早速いっきに例を紹介しましょう(〃⌒▽⌒)例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:solid 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:double 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:dashed 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:dotted 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:groove 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:ridge 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:inset 12px #9999ff;"><br><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" border="1" alt="サンプル画像" width="150" height="150" style="border:outset 12px #9999ff;"><br>表示結果）「border」を使用することにより、画像の周りの線をいろいろと変更することができます。スタイル、太さ、色を任意の順番にスペースで区切って指定をします。ただし、「border」では上下左右の線を個別に指定することはできません(´･ω･`)もし、個別に上下左右の線をいろいろと変更したい場合は上の線に関する指定：border-top左の線に関する指定：border-left右の線に関する指定：border-right下の線に関する指定：border-bottomをそれぞれ使用してください。記述方法は「border」と同じです(￣▽￣人)◇ スタイルに関する指定スタイルに関する指定は以下のキーワードのいずれかを指定します。none線は表示されず、太さも0になります。表のセル等線が重なり合う場合は他の値が優先されます（初期値）。hidden線は表示されず、太さも0になります。表のセル等線が重なり合う場合はこの値が優先されますsolid1本線で表示されます。double2本線で表示されます。dashed破線で表示されます。dotted点線で表示されます。groove立体的にくぼんだ線で表示されます。ridge立体的に隆起した線で表示されます。inset上と左の線が暗く、下と右のボーダーが明るく表示されます。outset上と左の線が明るく、下と右の線が暗く表示されます。◇ 線の太さに関する指定線の太さは単語もしくは数値で指定します。単語はthin ：細いmedium ：普通thick ：太いを指定することができます。ただし、単語で太さを指定した場合、実際に表示される太さはブラウザによって異なりますので注意が必要です。◇ 線の色に関する指定色の指定の際にはＲＧＢカラーを使用してくださいここをクリック！！以前紹介したときは・・・さも当たり前のように記述して何も解説をしていませんでしたよね(´･ω･`)ってなわけで紹介しなおしました(〃⌒▽⌒)

Sep 30, 2004

コメント(6)
タグを覚えよう【第４４回目】　-　テーブルの基礎

今日も復習がてらテーブルのおさらいをしてみましょう(〃⌒▽⌒)初めて読む方向けに書きますので・・・２回目な方はさらーっと読み飛ばしてください。今回はあまり余分な機能の説明は省いて、テーブルの基本について勉強しましょう(￣▽￣人)まずはテーブルって何か知ってますか？英語では「Table」のように記述します。おそらく日本人が真っ先に思い浮かぶのは机と言う意味の「テーブル」でしょうが、今回はもちろん違います。テーブルにはもう一つ意味があり、「表（ひょう）」と和訳することもできるのです。まずは例を見てもらいましょう。例）○×○×○×○××上記の例では「○×ゲーム」っぽく表（ひょう）を使いましたが、これをテーブルと呼んでいます。これから紹介しますテーブルタグを使用することによって、Ｗｅｂページ上でいろいろな表（ひょう）を描画することができるというわけです。ただ、テーブルには表を描画する以外に、もう一つとてもよく使う使い道があります。もう一度例を見てください。例）○×○×○×○××表（ひょう）の線を消すことにより、ＨＴＭＬタグだけでは難しい配置に関するデザインもできるようになるというわけです。テーブルは作表のためだけに使われているのではない、ということも理解しておいて下さい。さてテーブルを作る方法ですが、これは少し複雑な記述となっています。基本的に３つのタグを組み合わせることにより、一つのテーブルを表現します。逆を言えば、テーブルを構成するタグは３つそろって１セットです。一つ一つでは意味をなさないことに注意してください。では早速記述例を見てみましょう。例）<table border="1"><tr><td>名前</td><td>住所</td></tr><tr><td>七鍵</td><td>www.7key.jp</td></tr></table>表示結果）名前住所七鍵www.7key.jp３つのタグを使っていることは分かってもらえましたか？順番に解説していきましょう。<table border="1">～</table>で囲まれた範囲はテーブルであることを表しています。「今からテーブルを記述します」「ここまでがテーブルでした」と宣言を行っているわけですね(￣▽￣人)<tr>～</tr>で囲まれた範囲は一行であることを表しています。「今から行が始まります」「ここまでで１行は終わりです」と宣言していることになります(〃⌒▽⌒)ですから、行を増やしたい場合は次のように記述します。例）<table border="1"><tr><td>名前</td><td>住所</td></tr><tr><td>七鍵</td><td>www.7key.jp</td></tr><tr><td>○○</td><td>××</td></tr></table>表示結果）名前住所七鍵www.7key.jp○○××そして最後に<td>～</td>で囲まれた範囲は一ますであることを宣言しています。ちなみに余談ではありますが、この一ますのことをセルと呼びますので覚えておくとよいかもしれません(〃⌒▽⌒)上記例では行を増やしましたので、列を増やす例も紹介しておきましょう。例）<table border="1"><tr><td>名前</td><td>住所</td><td>○○</td></tr><tr><td>七鍵</td><td>www.7key.jp</td><td>××</td></tr></table>表示結果）名前住所○○七鍵www.7key.jp××見てもらえば分かる通りなのですが「<tr>～</tr>」と「<td>～</td>」を増やすことにより行や列を増やしたり減らしたりできるというわけです(〃⌒▽⌒)

Sep 28, 2004

コメント(4)
タグを覚えよう【第４３回目】　-　ＨＰに画像をはろう（復習）

今日はＨＰに画像を貼る方法の復習をしましょう。つまり「絵」や「写真」をＨＰに載せてみよう！ってことです(〃⌒▽⌒)まずは、楽天専用の方法をご紹介します。管理画面から「画像倉庫（画像の登録管理）」という画面を開き、まずあなたのパソコンに保存してあります写真や絵を「楽天」に保存します。すると、「保存した画像の一覧」というところに保存した画像が出てきますよね。それをクリックすると・・・下記のHTMLを利用すると、ホームページにこの画像を表示できます。<IMG SRC="http://plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" width="150" height="150" alt="key">って画面になりますよね(〃⌒▽⌒)この呪文を「日記」や「TOP自由欄」などの書き込み欄に貼り付けると、あら不思議・・・画像が表示されますよねー(￣▽￣人)覚えていますか？この辺りは基本中の基本ですよね。しっかりマスターしましょう(〃⌒▽⌒)次に画像の倍率を変える方法を紹介します。例）<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」に線の幅を指定します。指定する数が大きければ大きいほど太い線になるってことです。プラス・・・IE専用の裏技も紹介しておきます(〃⌒▽⌒)例）<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);">表示結果）あまり深く考えないで下さい（笑こう記述したらこうなるんだ、くらいのちょっとした裏技でした(〃⌒▽⌒)（もう少し詳しく知りたい方はこちらを参考にしてみて下さい）最後のIE専用裏技は余計でしたが・・・他の記述は基本中の基本です(〃⌒▽⌒)しっかりマスターしましょう(￣▽￣人)

Sep 26, 2004

コメント(5)
タグを覚えよう【第４２回目】　-　文字の色いろいろ（復習）

今日は文字の色を変更する方法の復習です。初めての方はしっかりマスターするつもりで読み進めて下さい。２回目の方は・・・さらっと読み飛ばしつつもしっかり思い出してください（笑まずは以前にも紹介しました簡単に色の指定が分かる教材です(￣▽￣人)ここをクリック！！これを使えば多分簡単に色の指定ができること間違いなし(￣▽￣人)適当に遊んでみて下さい。赤と青と緑のつまみがあって、それを動かしたら背景の色が変わりますよね(〃⌒▽⌒)背景と一緒に右の方にある四角の枠内の文字も変わってることに気がつきましたか？「#02f811」のように「#」が頭についている７桁の文字のことなんですが、なんとこれが色を表す記号となっているのです。とっても簡単でしょ(〃⌒▽⌒)メモリを動かして好きな色を作ったら右上の四角の枠を見る！たったそれだけであなたの好きな色を表す記号が完成するのですから（笑さて、色を表す記号が完成したところで、実際に文字の色を変えてみましょう。例）<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>表示結果）応用例文字の大きさの指定と組み合わせることもできるってサンプルでした(〃⌒▽⌒)文字の指定に限らず、Webページを作成する際にはさまざまな色の指定を行います。文字色の指定を通して色を指定する「感覚」のようなものを身に付けてもらえれば幸いです(￣▽￣人)ではまたあしたー(ﾟ▽^*)ﾉ⌒☆

Sep 25, 2004

コメント(10)
タグを覚えよう【第４１回目】　-　文字の大きさを変更する

今日から少しずつ今までに話してきた内容の復習をしましょう(￣▽￣人)初期のころは急ぎすぎて・・・せっかく読んでくれた方もあまり頭に入ってないし最近読み始めてくれた方はめんどくさくて昔の内容まで読んでないでしょうしなにより・・・もう解説するタグが残ってないのですよ(´･ω･`)ってなわけで今日は文字の大きさを変える復習です(〃⌒▽⌒)ＨＴＭＬで指定できる文字のサイズは７種類でしたよね。例）<font size="1">サンプル文字</font><font size="2">サンプル文字</font><font size="3">サンプル文字</font><font size="4">サンプル文字</font><font size="5">サンプル文字</font><font size="6">サンプル文字</font><font size="7">サンプル文字</font>表示結果）サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字文字に対するいろいろな指定は<font>タグを使うのでしたよね。サイズ指定では、数字が大きいほど文字も大きくなります。ちゃんと覚えていました？

Sep 24, 2004

コメント(1)
タグを覚えよう【第４０回目】　-　楽天で「OnMouse」？

今日はちょっとした裏技を覚えましょう(〃⌒▽⌒)とは言いましても・・・とっても簡単ですよ(￣▽￣人)どんなものかおぼつかない（？）日本語で説明するより実際見て下さい。例）<span title="文字が出ましたよね？">ここにマウスを乗せて下さい</span>表示結果）ここにマウスを乗せて下さいどうですか？ブラウザによって挙動も違いますので一概には言えないのですがたいていのブラウザでは付箋のようなコメントが近くにでると思います(〃⌒▽⌒)これ、意外と使えますよね(￣▽￣人)例）ここは<span title="HitPointではありません">ＨＰ</span>作成のための解説ページです。表示結果）ここはＨＰ作成のための解説ページです。のようにちょっとしたコメントに最適でしょ(〃⌒▽⌒)え？こんなとこ誰もマウスを重ねないからあるだけ無駄？そりゃそうですよね(´･ω･`)では、少し装飾しておきましょう(￣▽￣人)例）ここは<span title="HitPointではありません" style="border-bottom:double 4px #ff00ff;">ＨＰ</span>作成のための解説ページです。表示結果）ここはＨＰ作成のための解説ページです。こんな感じに装飾しておき、「ピンクの線の箇所はマウスを乗せてみて下さいね(￣▽￣人)」とでも注意書きをのせておけばどうでしょう？注釈程度には使えると思いますよ(〃⌒▽⌒)では、またあしたー(ﾟ▽^*)ﾉ⌒☆

Sep 22, 2004

コメント(8)
タグを覚えよう【第３９回目】　-　長さの単位

Ｗｅｂページを作る際に何かの大きさを指定することが多々ありますよね。例えば線の幅であったり、画像の高さであったり、文字の大きさであったり・・・今回はそれらの大きさを指定するための単位について話をしましょう(〃⌒▽⌒)まず、ＨＴＭＬタグで使用できる長さの単位についてです。「width="50"」のように、何も単位をつけずに記述すればピクセル指定となります。このピクセルと言う単位ですが、ディスプレイで表示することができる最小値を「1px」としています。パソコンで何かを表示する際は、点の集合としてその何かを表示します。文字も点の集合で表されていますし、写真のような画像も点の集合で表されています。早い話が、その点の大きさを「１ピクセル」と呼んでいるのです(￣▽￣人)ここで注意が必要なのですが、この「１ピクセル」は万人共通の単位ではありません(´･ω･`)表示することができる最小の単位と言うものはディスプレイのサイズによっても変わりますし、ディスプレイの解像度にもよります。つまり、ピクセルという単位は見る人の環境によって見た目の長さが変わってしまうので、注意が必要です。ただ、このピクセルという単位はスタイルシートでも使用することができますし、ディスプレイの表示単位がそもそもピクセルですから、画面表示優先でＷｅｂページをデザインする場合には非常に便利です。特徴をしっかりつかみ使いこなしましょう。次に「％」ですが、これはサイズを100分比で指定するものとなっています。何に対する比率かは使いどころによって違ってきます。例えば、「今の文字のサイズに対して120%の大きさで表示」とか、「今の画面サイズの半分の大きさで画像を表示」とか・・・こちらもピクセルと同様、ＨＴＭＬでもスタイルシートでも使うことができます。使い方によっては重宝するのではないでしょうか(〃⌒▽⌒)ＨＴＭＬで主に指定できる長さや大きさの単位は以上の２つです。これらは二つともディスプレイに対しての相対値になっているのが特徴といえます。ここから以降はスタイルシート（CSS）にて使用できる単位を紹介していきますが、スタイルシートはＷｅｂページの見栄えを記述するという役割がありますので、ＨＴＭＬに比べ何かの大きさや長さを指定する機会が多いですよね(￣▽￣人)そのため使用できる単位も増え、ＨＴＭＬには無かった環境に依存しない大きさも設定できるようになっています。具体的には次の表をごらんください。incmmmptpcin-2.45cm24.5mm72pt6pccm0.39in-10mm28.1pt2.34pcmm0.039in0.1cm-0.281pt0.234pcpt0.0139in0.0353cm0.353mm-0.0833pcpc0.167in0.4244.24mm12pt-やはり日本人がなじみ易いのは「cm」や「mm」ですよね(￣▽￣人)この二つは小学校でも習う単位ですので大丈夫ですよね(〃⌒▽⌒)「in」はインチの略で、ヤード-ポンド法の長さの単位となっています。アメリカやイギリスで広く使用されているらしいですね。「pt」はポイントの略で活字サイズに使用される単位となっています。Microsoft-ExcelやMicrosoft-Word、Adobe-Fotoshopなどなど。アプリケーションソフトにて文字のサイズを指定する際に見かけるあの単位です。「pc」はパイカの略で印刷レイアウトに使用される単位となっています。これらの単位にて長さや大きさを指定した際には閲覧者の環境に依存せず、Ｗｅｂページの作成者が意図した大きさで表示することができる、ということになっています。そして、スタイルシートにはピクセルとパーセントの他にも相対的に大きさを指定できる単位が用意されています。一つ目は「em」という単位でエムと発音します。この単位は、その時点で使用されている文字の大きさを１とした比率になり、考え方自体はパーセントと同じです。そのため、「1em」の大きさはとても流動的です。例）フォントサイズ「12px」の際の「1.5em」は「18px」と同じ大きさになります。フォントサイズ「20px」の際の「1.5em」は「30px」と同じ大きさになります。更に「ex」という単位もあります。こちらはエックスハイトと発音し、その時点で使用されているフォントのアルファベット小文字「x」の高さを基準とした大きさとなっています。そのため、同じ文字サイズであっても、使われている文字の種類によって大きさが異なるという特徴を持っています。あまり普段聞きなれない単位もたくさんでてきました。適材適所と言いますか・・・知ってて損はないですよね(〃⌒▽⌒)しっかり覚えておきましょう(￣▽￣人)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

Sep 21, 2004

コメント(2)
タグを覚えよう【第３７回目】　-　ストロング？

今日は少し珍しいタグをご紹介します。とは言いましてもたいしたこと無いので・・・余談程度に読んでください(〃⌒▽⌒)もう題名の通りその名も「ストロング」タグです（笑早速例を見てみましょう。例）<strong>ここが強調されます</strong>表示結果）ここが強調されますはい、何も珍しくありませんね(´･ω･`)ただ単に太字になっているだけで表示結果は「B」タグと何も変わりません。ちなみに「B」タグは・・・例）<b>ここが太字になります</b>表示結果）ここが太字になりますでしたよね(〃⌒▽⌒)で、ストロングに戻りまして・・・何が「B」タグと違うかと言いますと・・・意味が全く違います「B」タグはただ文字を太字に表示するだけのタグです。意味など何も持ちません。変わって、ストロングタグが太字に表示されているのは結果だけの話で・・・Webページ内で強調したい部分に対して使用するタグなのです。グーグルなどロボット型検索エンジンは人間の手を介さずプログラムが自動で検索結果に使うページを集めてきます。その際に優先キーワードとして挙げられますのがこのストロングタグの中身です。（もちろんストロングだけではありませんが・・・）せっかくＨＰを作るからにはいろいろな人に見てもらいたいですよね？そして見てもらうためには、検索した人が指定したキーワードにマッチしたページであることが条件となります。誰も自分が知りたいことがないページ、興味がないページは見ようとしませんよね(´･ω･`)あなたのページを必要としてくれている人に見てもらうためにも適切な指定をしたいですよね(〃⌒▽⌒)しっかりタグの意味を理解し、適切なタグを使うように心がけましょう(￣▽￣人)では、またあしたー(ﾟ▽^*)ﾉ⌒☆

Sep 16, 2004

コメント(2)

全83件 (83件中 1-50件目)

1 2 >

ジャンル別一覧

出産・子育て
ファッション
美容・コスメ
健康・ダイエット
生活・インテリア
料理・食べ物
ドリンク・お酒

ペット
趣味・ゲーム
映画・ＴＶ
音楽
読書・コミック
旅行・海外情報
園芸

スポーツ
アウトドア・釣り
車・バイク
パソコン・家電
そのほか
すべてのジャンル

人気のクチコミテーマ

私のPC生活

デバイスの有効化・無効化をオンライ…

(2024-11-04 20:30:05)
パソコンの調子が悪い

USBメモリ格安データ復元　石巻市か…

(2024-11-09 21:34:14)
アイフォン・アイポッドの必需品

iPhone16pro 購入

(2024-10-20 21:02:57)

七鍵＠楽天

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

楽天について

Yahoo Japanが検索結果表示を刷新

大人気ぶろぐ？

絶対にまねしてはいけないページ作成

文字を斜めに傾ける

今日は満月ですね(￣▽￣人)

文字の太さを変えてみる

実はspanだけでなく

スタイルシートで二つ以上の指定を一度に

文字の色を変える方法

文字の大きさを変えてみる

事例を元にした「相互リンクの際の相手サイトの選び方」

楽天で使えるインラインフレーム応用（横スクロールを表示しない）

スタイルシートのお勉強を始める方に

楽天で使える面白い小技（インラインフレームもどき）

最近よくみかける「RSS」って一体なんなのよ？

訪問者数アップのための落とし穴

インラインフレームもどきの中の文字色を変えてみよう

IE7の仕様一部明らかに

テーブルでこんなことまでできちゃいます

楽天で使えるインラインフレームもどきの応用！

ユーザビリティってなに？

楽天で使えるスタイルシート（余白編）

<s>の復習

<H>タグで見出しを付ける

<font>の復習３

<font>の復習（２）

<font>タグの復習（その１）

<I>の復習

<EM>の復習

BASEFONT

<big>タグ

<b>の復習

タグを覚えよう【第５８回目】 - マウスカーソルの形をいろいろ変えてみよう

タグを覚えよう【第５６回目】 - ＨＰで使える画像の形式

タグを覚えよう【第５５回目】 - いろいろ動かせるタグ（復習）

タグを覚えよう【第５４回目】 - テーブルの応用２

タグを覚えよう【第５３回目】 - テーブルの応用

タグを覚えよう【第５２回目】 - 特殊文字

タグを覚えよう【第５１回目】 - 表示位置を変える復習

タグを覚えよう【第４９回目】 - 嫌われるページ・・・

タグを覚えよう【第４８回目】 - テーブルの属性

タグを覚えよう【第４５回目】 - 何かの周りの線（２回目）

タグを覚えよう【第４４回目】 - テーブルの基礎

タグを覚えよう【第４３回目】 - ＨＰに画像をはろう（復習）

タグを覚えよう【第４２回目】 - 文字の色いろいろ（復習）

タグを覚えよう【第４１回目】 - 文字の大きさを変更する

タグを覚えよう【第４０回目】 - 楽天で「OnMouse」？

タグを覚えよう【第３９回目】 - 長さの単位

タグを覚えよう【第３７回目】 - ストロング？

タグを覚えよう【第５８回目】　-　マウスカーソルの形をいろいろ変えてみよう

タグを覚えよう【第５６回目】　-　ＨＰで使える画像の形式

タグを覚えよう【第５５回目】　-　いろいろ動かせるタグ（復習）

タグを覚えよう【第５４回目】　-　テーブルの応用２

タグを覚えよう【第５３回目】　-　テーブルの応用

タグを覚えよう【第５２回目】　-　特殊文字

タグを覚えよう【第５１回目】　-　表示位置を変える復習

タグを覚えよう【第４９回目】　-　嫌われるページ・・・

タグを覚えよう【第４８回目】　-　テーブルの属性

タグを覚えよう【第４５回目】　-　何かの周りの線（２回目）

タグを覚えよう【第４４回目】　-　テーブルの基礎

タグを覚えよう【第４３回目】　-　ＨＰに画像をはろう（復習）

タグを覚えよう【第４２回目】　-　文字の色いろいろ（復習）

タグを覚えよう【第４１回目】　-　文字の大きさを変更する

タグを覚えよう【第４０回目】　-　楽天で「OnMouse」？

タグを覚えよう【第３９回目】　-　長さの単位

タグを覚えよう【第３７回目】　-　ストロング？