七鍵＠楽天

別の記事へテスト送信

ぴよぴよ

欲しい本･･･と言うか購入する本

Blogは辞めてWeb日記に

http://www.7key.jp/diary/latest/Blogの必要性とメリットを感じなくなったのでWeb日記として再スタートをすることとしました。当初来年からの切り替えを狙っていたのですが、デザイン変更が思いのほかスムースに運んだので、微妙なタイミングですが切り替えます。楽天外ではありますが、これからも変わらぬ応援の方を頂けたら…嬉しいですね(￣▽￣人)

何が堅すぎる車掌だ～渡辺淳一～

http://watanabe-junichi.net/archives/2005/11/post_8.htmlどうも著名な方らしい。著名だとその人格まで肯定されている錯覚に陥る事がある。本人はとてもよくその錯覚に陥る。はっきり言う。渡辺淳一が誇らしげに自慢しているこの行為は、万引きや食い逃げと何ら変わるものでは無い。サービスに対して対価を払うのは当然の行為である。対価を払う必要が無いと判断するのであれば、そのサービスは拒否すべきである。サービスは受けるが対価は払わないなんて理屈は通用するはずが無い。ほとんどの日本人は、どんなに遅くとも小学校を卒業するくらいまでにこのことを学習する。そんな常識も弁えず、偉そうに車掌殿に説教をしたことを誇らしげに全世界に向けて自慢をしているこいつの腐り切った根性にどうしようもなく腹が立つ。何だか分不相応な賞をたくさんもらっている様だが全て剥奪することを奨める。日本が世界に誇るそれらの賞の名前が地に落ちることとなるから。

戒名無料作成ツール

http://homepage3.nifty.com/jiyujoho/kaimyo.htm妻へ私が死んだら以下の戒名にして下さい。聖 西 院日 鹿 墳 変 居士坊主に頼んで付けさせたら30万ほどするらしいから。

巨人軍もIT参入。しかし結果は…。

http://www.excite.co.jp/News/sports/20051029170505/Fuji_SP_320051029011.html楽天・三木谷社長の緊急独占インタビューをみた直後だからでしょうか。何とも陳腐な印象を受けました。代表が面白いと思うコンテンツではなく、ユーザが面白いと思うコンテンツではないと、もはや時代の流れに乗れないのでしょうね。しかし、楽天にソフトバンクは流石とでも言いましょうか。楽天ソフトバンク巨人

しばし休業

長期出張に付きしばらく不在にします。といっても2,3日ですがね。日本の首都を堪能してきますので首都近辺の人は御縁がありましたらすれ違いましょう(￣▽￣人)

アフィリエイトをこれから始めようとしている方へ

先週たくさん買った書籍の中の一つです。中身の方は…。まぁ当たり前のことばかり。ほとんどがWWW上の「お小遣いゲット」系サイトから得られる情報ばかり。中級者以上の方であれば、98/100は知っているテクニックだろうと思います。でもね、これだけの情報を探すのにかかる人件費に比べれば、この書籍の料金って安いと思いますよ。そんなわけで初心者限定でお奨め。巻末にアフィリエイト単語集のようなものまでついているので重宝するかも。

誇りと怒りを忘れた日本人

http://www.hirakawa-i.org/mailmagazine.html2.奥山篤信コーナー　誇りと怒りを忘れた日本人何に対して怒りを感じるかを見る事が、その人のことを知る近道だと思う。自戒を込めて…。もう少し熟読します。

男脳女脳診断テスト

http://www.chaoo.net/sindan/こんなテストってよく見かけるのですが、どのように作成しているのでしょうか。著名な心理学者が監修…とも考えにくいですし（笑ちなみに私の脳は下記の通りらしいです。中性的男性脳あなたは、標準的な男性脳の持ち主ですが、同時に女性的な面も、いくらか持ち合わせています。どちらかというと何かに挑戦するのが好きで、空間能力や論理的な考え方を使う分野で力を発揮できます。比較的に人との対話を重視し、仕事面ではチームの取りまとめをすることに適しています、努力次第で、女性的な考え方や感情なども得られます。

口は災いの元

http://internet.watch.impress.co.jp/static/yajiuma/>雑誌「Tarzan」元編集長のブログが炎上中より。ほんとにここに書いてある事に尽きると思うのですよ。

Operaがついに無料化

http://jp.opera.com/pressreleases/ja/2005/09/20/いえ、無料化と言うとかなり言いすぎ。元々無料ですから。問題なのは広告非表示版が無料と言うこと。よりシェアを伸ばそうと言う意図からかどうかは知る由もありませんが、一ファンとしては応援したい気持ちでいっぱいです。ちなみに全く関係ありませんが…http://www.asahi.com/national/update/0919/TKY200509180192.htmlキリゾー＆モッコロが正しいと信じきっていた私は一体(´･ω･`)

神奈川県知事

私は神奈川県民ではありませんが…http://matsuzawa.cocolog-nifty.com/blog/世の中の正義なんて不変的なものでもしかしたら神奈川県知事に「正義」なんて朧なものがあるのかもしれません。ただ、反対意見を退け自分に都合の良い民主主義を掲げるのはどうかと思いました。私自身正直ゲームなんてどうでも良いですし、例えどんな規制がゲームに対してかかろうとも知ったことでは無いですが一連の騒動における対応は知事としてどうかと。このままではいずれインターネットが廃止される条例なんてものまで出そうな勢いで私的には政治に対する不信感が一層強まりました。有害ゲーム以上に青少年に悪影響を及ぼす"恐れのあるメディア"がインターネットですから。

ぱねるすに挑戦…

http://www.higopage.com/panels/こんなゲーム見つけちゃいました。２回目以降チャレンジしていると…またどつぼにはまって寝不足になりそうなので１回で切り上げ(´･ω･`)どんな基準で判断されているのかが気になりますが>物事に対する判断が遅く優柔不断何となく当たってそう>手先が器用で、それを生かす根気があるようです。ただマウス使いに慣れているだけのような>何事にも真剣に取り組むようです。間違いなくはずれです(´･ω･`)測定結果あなたの脳力 運動神経 191 記憶力 118反射神経 66判断力 137集中力 386持続力 129正確性 341あなたの総合脳力 S+28 1368 p ※現在の平均 B ( 603 p )分析結果 あなたはロダンと同等の脳力を持っています。物覚えが良く、創造力豊かなようです。物事に対する判断が遅く、優柔不断なようです。頭が良く、考えることがわりと得意なようです。手先が器用で、それを生かす根気があるようです。何事にも真剣に取り組むようです。

test

ホームページ作成の第一歩

日記に壁紙

既に何回まで書いたかタグ講座。覚えて無いくらいさぼっていたってことですね(´･ω･`)少し反省しつつも久々に更新。今回は日記に壁紙を指定してみましょう(￣▽￣人)記述例）<div style="width:100%;height:100%;background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg);">※【楽天アフィリエイトをご利用の場合】ＨＴＭＬタグ中に改行がないように、リンク登録時に表示されたＨＴＭＬ中の改行を修正してご利用ください。また、セキュリティ上<LAYER><IFRAME>タグはご利用いただけないため、このタグ含むバナー／テキストは掲載できません。</div>表示結果）※【楽天アフィリエイトをご利用の場合】ＨＴＭＬタグ中に改行がないように、リンク登録時に表示されたＨＴＭＬ中の改行を修正してご利用ください。また、セキュリティ上<LAYER><IFRAME>タグはご利用いただけないため、このタグ含むバナー／テキストは掲載できません。例文は特に意味ないです(´･ω･`)本当は背景画像を指定する際は「BODY」というタグに指定するのですが残念ながらここ楽天では指定できません。なんで、変わりに背景を指定できるものを何か作ってやらないとだめってことですね。同じような例で「TABLE」タグに背景画像を指定した例がこちらhttp://plaza.rakuten.co.jp/hacdic/diary/200410100000/参考にして下さい(〃⌒▽⌒)

タグを覚えよう【第５７回目】　-　直リンクってなに？

直リンクとは「直接リンク」の略で「ちょくりんく」「じかりんく」と読みます。また、別名で「直リン」「ダイレクトリンク」などと呼ばれることもあるようです。で、実際どのようなことを指して「直リンク」と呼ぶかと言いますと、「他人のサーバにある画像やファイルを自分のサーバにアップロードせず、自分のサイト上で使用すること」です。こんな表現では分かりにくいと思いますので、実例を挙げて具体的に説明しましょう。あなたはある素材屋さんを見ているとき、とてもすばらしい写真を見つけました。あなたは一目でその写真を気に入ってしまい、自分のページでもその写真を表示したいと思いました。そこで、そのサイトにある画像のＵＲＬを直接指定して、自分のページにその画像を表示させました。この行為が直リンクです。なぜここまで強調して説明をしているかと言いますと、直リンクはＨＰを作成する上で絶対に行ってはいけなことだからです。素材屋さんはある条件さえ守れば自由に画像などの素材をあなたのサイトで使用してもいいよ、と言ってくれています。でも、決して直リンクをすることを許してくれているのではありません。Ｗｅｂサイトはアクセスが多くなればなるほど使用しているサーバに負担がかかり、処理が重く（表示が遅く）なる、ということを知っていれば、直リンクを行ってはいけない理由はおのずと分かるでしょう(´･ω･`)考えてもみてください。直リンクを行いますとあなたのページが開かれるたびに、被害者となっているサーバはアクセスを受けることとなります。つまり、見ず知らずのあなたのせいでサイト全体が重くなってしまうことになりますよね。Ｗｅｂサイトの管理人の多くは、訪問者が快適に自分のサイトを見てくれるように見やすいページを目指し、場合によっては有料のＷｅｂサーバをレンタルすることもあります。このように苦労してサイトを運営しているにもかかわらず直リンクのせいで、自分のページを見てももらえないのにページが重たくなれば・・・管理人としては面白くないでしょう。面白くないだけならまだしも、Ｗｅｂサーバに処理が集中しすぎて、最悪の場合そのサーバーを追い出される、なんてこともあるのです。　以上のような理由から、多くのＷｅｂサイトで直リンクを禁止しています。特に注意書きが無い限り、直リンクはマナー違反行為だということを覚えておいて下さい。では、この辺りで素材屋さんが提供してくれている画像やファイルを直リンクではなく正しく使う方法を紹介します。ただ、以下の方法は素材屋さんなど「その画像をあなたのページで使うことを許可します」と明言されているページにのみ使ってください。言うまでもありませんが、他人の作成した画像（ファイル）を勝手に（無断で）使用することは大問題です。これは直リンク以前に「著作権法違反」と呼ばれる立派な犯罪です(´･ω･`)直リンクに当てはまらなくても、絶対に行ってはいけません。１．素材屋さんのサイトから使いたい画像（ファイル）をダウンロードする。２．そのダウンロードした画像をあなたのＷｅｂサーバにアップロードする。３．２でアップロードした画像（ファイル）に対してリンクを張る。アップロードとダウンロードはこちら、画像にリンクを貼る方法はこちらを参照ください。

休業

ちょっぴり多忙につき今日、明日と日記お休みします。質問の方は遠慮なくどうぞ(￣▽￣人)

タグを覚えよう【第５０回目】　-　リンクを作ろう（復習）

今日はリンクを作る復習をしましょう(〃⌒▽⌒)皆さんリンクって知っていますか？文字や画像をクリックすると別のページに飛ぶ・・・あれのことですね。「楽天」でＨＰを作っていたら、特にタグを記述しなくてもリンクって作れてしまいますよね。ただ、自動でできてしまうからその分覚えにくいって欠点もあるでしょう。そんなわけで今回はリンクの作り方の復習です(〃⌒▽⌒)まずは基本から。例）<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>表示結果）画像の周りの線幅を「０」にしてね(￣▽￣人)　って記述でした。リンクの説明はこれでおしまいです。楽天内ではあまり記述することが無いかもしれませんが、この「リンク」こそインターネットの醍醐味です。次から次へと別のページにジャンプしておもしろいサイトを発掘できるからおもしろいですよね(￣▽￣人)しっかりマスターしましょう(〃⌒▽⌒)

タグを覚えよう【第４７回目】　-　テーブルのセルを結合

今日は久しぶりにテーブルを勉強しましょう(￣▽￣人)とは言いましても、既に解説したことの復習です。セルの結合ってどうするのか覚えていますか？これも知っていると意外と便利ですよ(〃⌒▽⌒)□ 横方向の結合１<table border="1"><tr><td colspan=2>○</td><td>×</td></tr><tr><td>×</td><td>○</td><td>×</td></tr><tr><td>○</td><td>×</td><td>×</td></tr></table>□ 表示サンプル○××○×○××横方向にセルを結合したい場合は「colspan」にて指定します。この「colspan」に「2」を指定した場合は、セルがテーブルの列を 2 つ使用することを示します。□ 横方向の結合２<table border="1"><tr><td colspan=3>○</td></tr><tr><td>×</td><td>○</td><td>×</td></tr><tr><td>○</td><td>×</td><td>×</td></tr></table>□ 表示サンプル○×○×○××同様に「colspan」に「3」を指定した場合は、セルがテーブルの列を 3 つ使用することを示します。気をつけてもらいたいのは、（当たり前なのですが）セルを結合するとセルの数が一つ減ります。３つのセルを結合した場合には、２つのセルがなくなっているということを忘れないで下さい。そうしないといびつな形のテーブルができあがってしまいます(´･ω･`)□ 縦方向の結合<table border="1"><tr><td colspan=3>○</td></tr><tr><td>×</td><td rowspan=2>○</td><td>×</td></tr><tr><td>×</td><td>×</td></tr></table>□ 表示サンプル○×○×××縦方向にセルを結合したい場合は「rowspan」を使います。使用方法や注意事項は「colspan」と同様です。セルが減ったときのつじつまが合うようにだけ気をつけて下さい(￣▽￣人)□ 縦と横方向の結合<table border="1"><tr><td>○</td><td>×</td><td>×</td></tr><tr><td>×</td><td rowspan=2 colspan=2>○</td></tr><tr><td>×</td></tr></table>□ 表示サンプル○×××○×「rowspan」と「colspan」の両方を指定することにより縦方向と横方向のセルを結合することもできます。どうでした？慣れれば簡単なのですがどうも最初はとっつきにくいようです。この手段もいろいろ応用できますのでいざと言うときにはこちらまでお越し下さい（笑では、またあしたー(ﾟ▽^*)ﾉ⌒☆

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

今日は何かの周りに線を引く方法を紹介しましょう。どこかで聞いたような聞いたこと無いような・・・そんな内容になっています(〃⌒▽⌒)まぁ、ただ今回は漠然と何か・・・ではよく分かりませんのでという画像に的をしぼりましょう。ただ、今回は画像で紹介するだけで・・・方法自体は「TD」にでも「P」にでも「DIV」にでも「SPAN」にでも・・・はたまた「I」や「B」、「H2」までほんとうにいろいろなことに使用できるものとなっています。しっかりマスターしましょう(￣▽￣人)例）<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px 9px;"><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg" alt="サンプル画像" border=1 width="150" height="150" style="border-width:3px 6px 9px 12px;">表示結果）違いはわかりますか？ＨＴＭＬで記述する場合はborder=3のように全体に対する記述しかできませんでしたよね。スタイルシートを使用し、スペースで区切り複数の値を指定することによって上下左右を異なった幅にすることができるというわけです(￣▽￣人)上記例で分かるかと思いますが、値を1つ指定： 上下左右が指定幅値を2つ指定： 記述した順に上下、左右が指定幅値を3つ指定： 記述した順に上、左右、下、が指定幅値を4つ指定： 記述した順に上、右、下、左が指定幅となっています(〃⌒▽⌒)線の太さは単語もしくは数値で指定します。単語はthin ：細いmedium ：普通thick ：太いを指定することができます。ただし、単語で太さを指定した場合、実際に表示される太さはブラウザによって異なりますので注意が必要です。明日はさらにいろいろな線の引き方を細かく見ていきましょう(〃⌒▽⌒)では、またあしたー(ﾟ▽^*)ﾉ⌒☆

タグを覚えよう【第３８回目】　-　リストの向かって右側に絵を入れる方法

今日は実践編として・・・リストの右側に絵をいれる方法を解説します(〃⌒▽⌒)いろいろな方法があると思いますがなるべくシンプルな方法を解説していきますね(￣▽￣人)まずはテーブルを使った方法例）<table border=0><tr><td><ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul></td><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif"></td></tr></table>表示結果）リスト１リスト２リスト３表示がくずれる際はセルの幅を指定してみましょう(￣▽￣人)例）<table border=0><tr><td style="width:300px;"><ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul></td><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif"></td></tr></table>表示結果）リスト１リスト２リスト３さらに・・・画像の上から文字を記述したい場合は・・・画像をセルの背景にしてやればよさそうですよね(￣▽￣人)例）<table border=0><tr><td style="width:300px;"><ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul></td><td style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif);width:300px;height:140px;background-repeat:no-repeat;">ここに文字(￣▽￣人)</td></tr></table>表示結果）リスト１リスト２リスト３ここに文字(￣▽￣人)テーブルって本当に応用範囲広いですよね(￣▽￣人)アイデア次第でいろいろなことができちゃいます。しっかり使いこなしたいですよね(〃⌒▽⌒)最後に、テーブルを使わない方法もひとつ紹介しておきましょう。例）<div style="background-image:url(http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/7.gif);width:300px;height:140px;background-repeat:no-repeat;background-position:right;"><ul><li>リスト１</li><li>リスト２</li><li>リスト３</li></ul></div>表示結果）リスト１リスト２リスト３実は・・・今日はある方からの質問を元にお送りいたしました(〃⌒▽⌒)皆さんも解説してもらいたい内容がもしありましたら・・・遠慮なくどうぞ(￣▽￣人)では、またあしたー(ﾟ▽^*)ﾉ⌒☆

タグを覚えよう【第３４回目】　-　タグってなに？

今日はスタイルシートの話を進めようかとも思ったのですが・・・実は今までHTMLタグについての話を全くしていなことに気づきました(´･ω･`)これじゃ順番が違いますよね(´･ω･`)ってことで今日はHTMLタグっていったいなんなのか、ということをお話しましょう(〃⌒▽⌒)少し復習になりますが、HPってなんでできてるの？で「ＨＴＭＬファイルの中身はＨＴＭＬ専用の特別な記述方法で書かれています」と話をはぐらかせていましたよね。この「ＨＴＭＬ専用の特別な記述」に使う記号のことを「ＨＴＭＬタグ」と呼びます。タグとはもともと「荷札」と和訳されるのですが、コンピューターの世界では多少意味が違っていまして、「命令の始まりと終わりを示す記号」ということになっています(〃⌒▽⌒)不等号でタグ名を囲む（<タグ名>）ことにより命令の始まりを示す記号を記述することができ、不等号でスラッシュ（/）とタグ名を囲む（</タグ名>）ことにより命令の終わりを示す記号を記述することができます。そしてこのHTML タグにより、文字の大きさ、色、太字、見出し、画像表示、表、などなど・・・Ｗｅｂページに必要な命令を出すことができるというわけですね(￣▽￣人) こんな説明では分かりにくいと思いますので、簡単な例を挙げてみましょう。すでに復習ですので分かりますよね(〃⌒▽⌒)HTMLファイルへの記述例）このように<b>太字</b>を記述できます。ブラウザへの表示結果）このように太字を記述できます。まず、「<b>」を記述することにより「ここから太字ですよ」と>命令を出します。この命令のことを「開始タグ」と呼んでいます。また、太字の命令が出された後にくる文字はずっと太字のままになりますので、どこかで太字の終了を命令してやる必要があります。それが「</b>」という記述なんですね(〃⌒▽⌒)「</b>」により、「ここで太字は終了ですよ」と命令を出しているのです。この命令は「終了タグ」と呼んでいます。ただし、HTML タグの中には終了タグをもたないものもありましたよね？「BR」や「HR」などがそうでしたよね(〃⌒▽⌒)これで話が終わりではありません。よい機会ですのでもう少し言葉の意味を覚えておきましょう(￣▽￣人)<font size="+1" color="#ff0000">文字を記入</font>１２２３１まず、「１」～「３」まで、ここで紹介しています全てをひっくるめて「要素」と呼ぶことを覚えて下さい。開始タグから終了タグまで全てが「要素」と言うわけですね。「１」はタグ名と先ほど紹介しましたが、正しくは「要素名」と呼ばれています。どんな命令を出すか、ということを決定するためのものでもあります。「２」は「属性」と呼ばれているもので、タグに指定することができる追加情報のようなものです。「３」は「内容」と呼ばれ、見ての通り実際に表示される部分になっています。　ＨＴＭＬの勉強を進めていく上で、「要素」「要素名」「属性」「内容」といった用語は避けて通れないものでしょう。しっかりと覚えておいて下さいね。ではまたあしたー(ﾟ▽^*)ﾉ⌒☆

今日は・・・

勝手ながら１日１タグおやすみです・・・家が床下浸水→停電したんですよ(´･ω･`)台風め(´･ω･`)なかなか落ち着いて講座も書けませんので明日ゆっくり落ち着いて書きますね。ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

タグを覚えよう【第２４回目】　-　ブラウザについて

ＨＰを作る際に、まず準備するのの中にブラウザと呼ばれるソフトが入るでしょう。今日はブラウザについて説明します(〃⌒▽⌒)とは言いましても、これはもうすでにご存知ですよね。あなたは今このＨＰを見てくれていますが、そのためにブラウザと呼ばれている道具を使っていると思います。ここではそのブラウザを２，３点紹介しましょう(〃⌒▽⌒)とは言いましても、すでにあるのに何で用意しなければならないのかと疑問に思いませんか。確かにＨＰを見るだけでしたら一つのブラウザで十分でしょう。何も問題はありません。しかし、ＨＰを作った際のテスト表示用として用意するブラウザは一つでは足りません。なぜなら、同じＷｅｂページでもブラウザによって表示のされ方が違うからです。まったくおかしな話ですが、現実問題違うので作る側としましてはぼやいていても始まりません。動作確認用に有名ブラウザを数点用意するくらいの準備は整えておきたいですね(￣▽￣人)。以下に私が動作確認用に使っていますブラウザを挙げておきます。IntarnetExplorer言わずと知れたWindows標準ブラウザ。世界中で使用者がもっとも多いブラウザです。略して「IE」と呼ばれることもあります。必ず動作確認をしておきたいブラウザでしょうNetscapeNavigator以前はIEと勢力を争い「２大ブラウザ」とも呼ばれていました。現在では多少勢力が弱まりましたが愛用者がまだまだ多いのも事実。特にLinux系のOSに標準で搭載されていることもありますのでしっかり確認をしておきましょう。OperaBrowser世界最速ブラウザとの声も高いこのブラウザ。使用者が急増しています。こちらも最低限チェックしておきたいブラウザの一つです。MozillaFirefoxWindows以外のOSを使用している人に愛用者が多いブラウザ。Mozillaとしてさまざまなブラウザがリリースされていますので最低限どれか一つは確認しておきたいですね。なぜこんな手間のかかることをしなければならないかは、考えてみればすぐにわかることです。あなたが、どこかのＨＰを訪れたときに、表示が大きく崩れたＨＰであれば中をじっくり見ようと思いますか？もう一度訪れようと思いますか？おそらくすぐにブラウザの「戻る」ボタンを押すのではないでしょうか。もう、こうなったら中身以前の問題ですよね（読んですらもらえないのですから）(´･ω･`)たかだか表示だと思うかもしれませんが「第一印象」は大事です。自分の予期せぬ表示によりせっかく来てくれたお客様を逃さないためと思えば、このくらいの手間はたやすいことですよね(〃⌒▽⌒)今日はタグ講座をお休みしてブラウザの予備知識を解説しました。特に「楽天」内では、デザインにこだわるあまりに・・・InternetExplorer以外のブラウザで見た際に多いのですが大きく表示がずれてしまっているページが悲しいくらいたくさんあります(´･ω･`)せめてチェックくらいはHPの管理者としてやっておきましょうね(〃⌒▽⌒)ではまた明日ー(ﾟ▽^*)ﾉ⌒☆

タグを覚えよう【第１４回目】　-　楽天で使える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%以上の確信を持ちません。そして大抵のハッカーは優秀な技術者です。もしあなたが、無理に見積もり通りにやらせたりはしないと言えば（しかも本気で！）、大抵の場合は、おおまかな見積もりを出してくれるんじゃないでしょうか。この見積もりはえらく高く思えたり、あるいはえらく低く思えるかもしれません。実際、その通りなのかもしれません。結局それは見積もりでしかないんですから。でもそれがあなたの欲しかったものでしょ。のようにしたらスクロールと一緒に背景画像もスクロールする、ってことになりますね(〃⌒▽⌒)以上、インラインフレームもどきでしたがいかがですか？見た目複雑そうな記述ですが・・・少しずつ意味を理解していけば簡単でしょ？あとはこれをそのままこぴぺで使うも良し(〃⌒▽⌒)改良を加えてオリジナルな使い方をあみだすも良し(〃⌒▽⌒)がんばってくださいね(￣▽￣人)では、またあしたー(ﾟ▽^*)ﾉ⌒☆