超簡単 html 講座

2008年09月16日

昨日までの連休の間、
久々にいろいろなブログを見て回りました。

最近はWeb製作の知識があまりなくても
ブログなどを作れるようになったせいか、
ちょっと前なら考えられないマナー違反のサイトが
結構ありましたので
そのことを書いてみたいと思います。

なお、ここで「サイト」というのは
「ブログ」と読み替えていただいても結構です。
ブログを運営している人は
是非チェックしてみてくださいね。

で、チェックしてみて
マナー違反だと指摘されたとしても
怒らないでくださいね。

こういうことをしていると嫌われますよという
指摘だと思って
おおらかな気持ちで読んでくださいね。^^;



1.自動的に音声が再生されるサイト
著作権違反で音楽を流しているようなサイトは言語道断ですが、
たとえ自作の素晴らしい音楽であったとしても、
サイトを開くと自動的に音声が流れるサイトは
明らかにマナー違反です。

サイトを訪れる人全員のPCが
どのくらいの音量設定をしているか把握しているなら
音声を流してもいいかもしれません。

でもミュートにしている人もいれば
最大にしている人だっているわけです。

サイト運営者にとって心地いい音楽であったとしても
訪問者にはそうでないかもしれません。

もしかするとサイト訪問者は真夜中にふと目覚めて
ネットをうろついてやってくるかもしれません。
そのとき急に大音量で音声が流れたら…。
その人の隣に赤ちゃんがすやすや寝てるかもしれませんよ。

今回特に気になったのが
アフィリエイトブログでCM動画が自動再生されるサイトです。
僕はこんなサイトを開いてしまったら
迷わずに閉じてしまいますね。
見たくもないCMを喜んで見るような暇人じゃないですし、
こんなマナー違反のサイトのアフィリエイトリンクを
クリックしようなどとは間違っても思いません。
仮にその商品を欲しいと思ったとしても
マナー違反のサイト経由で買おうなんてこれっぽっちも思いませんので
商売としては大失敗でしょうね。
少なくとも僕はCM動画が自動的に流れるようなサイトは
二度と開きたくありません。

ネットは24時間、誰がやってくるかわからない世界です。
そういうふうにあらゆる人のことを考えて、
音声の自動再生はやめるべきものだと思います。



2.大きな画像をサムネイルとして載せているサイト
これは10年位前までは切実な問題でした。

画像データというのは巨大な画像でも
小さいサイズで表示が可能です。

例えば http://hoge.co.jp/photo.jpg という
4048x2693ピクセルの大きな画像データがあったとします。
これを
<img src="http://hoge.co.jp/photo.jpg" width="120px" />
というタグで貼り付ければ
横幅120ピクセルの小さな画像として表示が可能です。

でもこの小さな画像を表示するために
4048x2693ピクセルの大きな画像データを
読み込まないといけないわけです。

これは表示に時間がかかりますし
不必要に大きなデータを
閲覧者にダウンロードさせることになります。

ネットの回線スピードが遅かった時代は
こんなことをやってるサイトは
総すかんをくらってましたね。
従量制で回線使用料を払っていた時代に
こんなサイトを開いてしまったら
サイト運営者をぶん殴りたい気分になりました…。(ーー;)

今はケータイを除いて従量制はあまりないと思いますが、
不必要な大きなデータを表示するようなサイトは
明らかにマナー違反です。

サムネイル画像はサムネイル画像としてきちんと準備し、
高解像度が見たいと思ってクリックした人に
その大きな画像を見せるというのが
ネットで画像公開するときのマナーです。



3.直リン(じかりん or ちょくりん)してるサイト
この言葉を知らない人はここで是非覚えてくださいね。

サイトを持っているあなたが
ネット上で面白い画像や素敵な音楽を見つけたとします。
この画像・音楽を公開しているサイトの運営者さんは心優しくて
この画像・音楽を皆さんのサイトでも使っていいですよと
嬉しいことを言ってくれてます。
(もし「使っていいですよ」と言ってない物を
 勝手に使ったら著作権法違反です。
 警察にお世話になる覚悟を持ってやってください。)

さて、例えば素敵な画像があったとして、
そのURLが http://hoge.co.jp/photo.jpg だったとします。
これを自分のサイトで公開するときに、そのまんま
<img src="http://hoge.co.jp/photo.jpg" />
として公開するのが直リンです。

人様の使用しているサーバ内のデータを
自分のサイトで表示することになりますね。

これをやってしまうと
貴方のサイトが表示されるたびに
人様のサーバがデータを送り出すことになります。

簡単に言えば他人をタダ働きさせてることになります。

逆を考えてみてください。
貴方が面白い写真を撮ってそれをサイトで公開したとします。
貴方の写真は http://hoge.co.jp/photo.jpg です。
それを見た人が自分のサイトでも公開したいと思いました。
その人が自分のサイトに
<img src="http://hoge.co.jp/photo.jpg" />
というタグを書いて公開しました。
さて、この人のサイトを誰かが見るたびに
貴方のサイトのサーバ内の画像データが表示されます。
貴方の写真データを保管しているサーバが、
他人のサイトが表示されるたびに
画像データを送り出す作業を行うことになります。
もし画像データの表示回数が多くなれば
貴方のサーバの負荷が大きくなり、
貴方のサイトの表示ができなくなるかもしれません。
善意で写真を公開したのに
直リンをされたために貴方のサーバに負担がかかり
パンクする可能性もあるのです。

これが直リンの実害です。

自分のサイトに面白いものを表示するために
他人のサーバに負担をかける、
これはあきらかにマナー違反ですよね。

というわけで昔から直リンは本当に嫌われます。
もしそういうことをやっている人がいたら
すぐにやめるようにしてください。

具体的には、そのデータを一度ダウンロードして、
それを自分の使用しているサーバにアップロードして
それを表示するようにしてくださいね。



以上、今日は長々と書いてしまいましたが、
サイトを持っている人なら最低限知っておいて欲しい
そして是非守って欲しいマナーです。


もし思い当たる人がいて
その解決方法がわからないという人がいましたら
ここのコメントでもいいですし
メールフォームで問い合わせていただいて結構です。
できる限り丁寧にお答えしようと思ってますので。(^_-)

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 21:54|PermalinkComments(2)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年04月05日

久しぶりの html 講座です。

今日は
「今見ているページの直前に見ていたページに戻る」という
リンク方法について説明してみます。



●JavaScript(ジャヴァスクリプト)を使ってみましょう

★戻り先がわからない!

以前に他のページへ移動する方法として「Aタグ」の説明をしました。

<a href="飛び先URL">文字や画像</a>

こんな形式でした。
ページを移動するにはこのAタグを使うのが簡単で一般的です。


でも、皆さんはあちこちのサイトで
「前のページに戻る」というリンクを
見たことがあると思います。

この「前のページに戻る」というのは
上のようなAタグでは実現できないというのがわかりますか?

例えばAというページからBというページに移動した場合、
Bページ内に

<a href="AページのURL">前のページに戻る</a>

とすればよさそうですね。
でももしCというページからBページに移動してきた人は
どうなるでしょう?

CページからBページに来た人が
上の「前のページに戻る」というリンクをクリックすると
Aページに移動しちゃって
前のページであるCページには戻れませんね。

どのページからやってきても必ず前に見ていたページに戻るには
Aタグによる普通のリンク方法じゃダメなんですね。


では、どうやっているのか。
これには JavaScript という技術を使います。
JavaScript とは、ブラウザにいろんなことをさせることのできる
プログラムなんです。

具体的には

<a onclick="history.back();">前のページに戻る</a>

このように書きます。

Aタグなのに飛び先がありませんね。
でもそのかわりに onclick="history.back();" というのがあります。

この onclick="〜" というのは
「この部分がクリックされたら〜をする」
という意味です。
(この部分は JavaScript ではなく、
html の基本機能の「イベント属性(イベントハンドラ)」と
呼ばれるものです)

そして history.back(); というのが JavaScript で、
直前のページに戻りなさいという命令のプログラムです。

つまり「前のページに戻る」という部分をクリックすると
history.back(); というプログラムが実行されて、
ブラウザは直前に表示していたページに戻るという仕組みです。
ですから戻り先のURLがなくてもいいわけなんですね。


☆リンク方法はAタグだけじゃない!

さて上の JavaScript を使って
普通のAタグのリンクのように
指定するページに移動させることも可能です。

先ほどの history.back(); という命令文を
location.href="飛び先URL"; という命令文に変えればOKです。

ただし、onclick="" の "" 中にまた "" が出てきますので
混乱が起こります。
ですから外側か内側の "" を '' で代用しましょう。

<a onclick="location.href='飛び先URL';">リンク先の名前など</a>

または

<a onclick='location.href="飛び先URL";'>リンク先の名前など</a>


実は onclick="〜" というイベント属性は
いろいろなタグで使うことができます。

例えば

<img src="画像のURL" alt="画像の説明文" onclick='location.href="飛び先URL";'>(HTMLの場合)
<img src="画像のURL" alt="画像の説明文" onclick='location.href="飛び先URL";' />(XHTMLの場合)

こういうふうに使うと
画像をクリックすれば指定先に移動することができます。

<div onclick='location.href="飛び先URL";'>リンク先の名前など</div>

<span onclick='location.href="飛び先URL";'>リンク先の名前など</span>

こんなこともできます。

つまりAタグを使わなくてもリンクは設置できちゃうわけですね。

ただし、JavaScript が使えなかったりOFFにしているブラウザでは
うんともすんとも動いてくれません。^^;
また、マウスが使えない環境だと、
その部分をクリックできない場合があります。

そんなわけで普通のリンクは
やっぱりAタグを使うのが無難ですね。(^_-)


最後に余談ですが、
この世には JavaScriptJava というものがあって
これは別物です。
ですので JavaScript を「ジャヴァ」と略して呼ぶのは
混乱の基となりますので略さないようにしましょう!



今回登場しました JavaScript ですが
これを極めるととても面白いサイトが作れます。

例えば Google マップ なんかは
JavaScript を使ったすごいページの代表です。

そんなわけで、人とは違った面白いサイトを作ってみたい人は
この JavaScript を勉強してみるのもいいかもしれませんよ。(^_-)

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 18:25|PermalinkComments(4)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年03月23日

久々の超簡単 html 講座なんですが、
今日は html についてじゃありません。^^;

3月16日の「プロフィール画像のタネ明かし」のときに
画像を作ってみたけど保存できないという方がいらっしゃったので
その方法について書いてみたいと思います。


でもその前にとても大事なことですが、
著作権に充分注意してください!

今日お教えする方法を使えば
ブラウザに表示できる画像は全て保存することができますが、
それを公開してよいかどうかは全くの別問題です。

「あ、この写真いいなぁ」と思って保存した画像を
自分のPCのデスクトップ画像に使うとか、
自分の携帯電話の待ち受け画像にするという
全くの個人使用程度ならあまり問題ないかもしれませんが(※)
「ブログに貼り付ける」とか「プロフィール画像に使う」など
多数の人が見られる使用方法には著作権問題が発生します。
(※)問題ある場合もあります。

ですので、そういう使い方をする場合は、
「この画像はそういう使い方をしていいですよ」と書いてあるか
必ず確認してください。
もしかしたら「このサイトへリンクしてくれればいいですよ」と
条件付で使用許可してあるものもあるかもしれません。
「著作者表示を付けてくれればOKですよ」というのもあります。

画像を使用する際は、作者の指示するルールを守ることが大事です。



では本題。

★その1:オーソドックスで基本的な方法

保存したい画像の上にマウスカーソルを持っていき、
右クリックをして「名前を付けて画像を保存」をクリック。
お好きな名前を付けて画像を保存してください。

この方法が基本ですねー。
一番手っ取り早い、ごく普通の方法です。


でも右クリックできない場合や Flash で表示されている画像、
また再生中の動画の1シーンなどを保存したい場合は
上の方法ではうまくいきません。
そこで下の力技の方法のご紹介です。
(※動画は全てうまくいくとは限りません)


★その2:力技

Windows には画面キャプチャーの機能があります。
画面キャプチャーというのは
今PCの画面に映っているものをそのまんま保存する
ということをいいます。
PCの画面全体をデジカメで撮影するという感じに近いかもしれません。


さて、この方法を使うと画面全部を保存してしまうので、
必要な部分を切り出すための画像編集ソフトが必要になります。
デジカメを購入するとそういったソフトがオマケについてたりしますので
そういうものを持っている人はそれで結構です。

もし画像編集ソフトをお持ちでない人には
とてもよいフリーソフトがありますのでご紹介しておきます。

JTrim

これのセットアップ版をダウンロードして実行すれば
簡単にインストールができます。

このソフトは僕が一番最初に使った画像編集ソフトで
とてもお世話になりました。
とても軽いソフトなので今でも時々お世話になってます。
画像の一部を切り抜いたり、サイズを変更したり、
回転させたりするといった基本的なことはこのソフトで充分です。
(お絵かきソフトではありません)


準備が整ったところで画面キャプチャーの方法に戻りますが、
キーボードの右上のほうに「print screen」という
キーがあればそれがその機能のボタンです。
ちなみに僕の使ってるノートPCの場合は、
右上のほうに「prt sc」というキーがあり、
左下にある「Fn」というキーと一緒に押さないと機能しません。
このキーはPCにより表記や位置が違ったり押し方が違うかもしれませんので
PCのマニュアルを引っ張り出して一度確認してみてください。

さて「print screen」キーを押すと通常ではうんともすんとも言いません。
不安になるので、困ったものです。^^;
でも、うんともすんとも言わなくても、PC内ではしっかり保存されています。
※もしかしたらプリンターが動き出したり画面保存の窓が開いたりするPCがあるかもしれませんが、それは何か追加ソフトがインストールされていると思いますので、そのソフトを停止してください。

「print screen」を押したあとに画像編集ソフトを立ち上げます。
そして「Ctrl + v」でペーストするとキャプチャーされた画面が
貼り付けられます。

あとは必要部分を切り抜き、好きなサイズに変更し、
お好きな名前を付けて保存してください。
※画像編集ソフトによってその使用方法は異なりますので、使い方についてはそれぞれのソフトのヘルプをご覧ください。


具体的にやってみましょう。

1.保存したい画像をブラウザで表示し、「print screen」キーを押します。
画面を表示したところ


2.画像編集ソフトを立ち上げます。(JTrimを立ち上げてみました)
JTrimを立ち上げたところ


3.「Ctrl + v」を押してキャプチャーした画面を貼り付けます。
キャプチャー画面を貼り付けたところ


4.切り出したい部分を拡大して範囲指定をします。
必要部分を拡大して範囲指定したところ


5.切り抜きます。(トリミング)トリミング直前

トリミング直後


6.名前を付けて保存します。
保存しているところ


これで必要な画像を保存できました。
完成画像

画像提供元 ImageChef (Keyboard)


こんな感じでブラウザに表示される画像を保存できますので
ご参考にどうぞ。

でも著作権にはくれぐれもご注意を!

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 14:04|PermalinkComments(8)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年02月08日

今日あゆかっちさんからとてもいい質問をいただきました。

僕の講座内で「<marquee>流れる文字</marquee>」って書いてあるのに
なぜこの部分は流れないのか?

今日はこのことについて説明したいと思います。

ただし、ちょっとややこしいので
頭を柔軟にしてからゆっくり読んでくださいね!



●html の特殊文字について

★html を書くときに注意が必要な文字があります。
その代表的な文字が「<」と「>」です。(半角文字ですよ)

html 内に「<」この文字が出てくると
ブラウザは「タグが始まるぞ」と判断しますし、
>」が出てくると「タグが終わったぞ」と判断します。

それでは文章中に、タグとしてではなく
単なる文字として「<」と「>」を使いたいときは
どうしたらいいのでしょう?

そのためのルールがありますのでご紹介します。

<」をタグの一部じゃなくて文字として表示したい場合は
&lt;」と書きます。
>」をタグの一部じゃなくて文字として表示したい場合は
&gt;」と書きます。

ですから
<marquee>流れる文字</marquee>
とブラウザに表示させたい場合は、

&lt;marquee&gt;流れる文字&lt;/marquee&gt;

と打ち込まないといけないわけです。

さて、余談になりますが「lt」というのは「less than」
「gt」というのは「greater than」の略です。
中学のときの数学で習った「小なり」「大なり」ってやつですね。(^_-)


☆さてさて、上の説明を読んでおかしなことに気付いた人いますか?
疑問を感じた人はとても鋭い人です。

<」を表示するためには「&lt;」って書くと説明しましたが
&lt;」って書いてるのに「<」って表示されてないじゃん!

こう疑問に思った人はすごいです!

この種明かしは「&」の文字です。
実はこれも html では特殊な文字なんです。

ブラウザに「&」と表示させたい場合は、
&amp;」と書かなくてはいけません。

ですから前半で僕が「&lt;」と書いたのは
実は「&amp;lt;」と打ち込んでいるんですよ。
だって「&lt;」って記事に書き込むと
ブラウザは「<」って表示しちゃうんですから。
それを避けるためには「&」の文字を
&amp;」と入力して「単なる&っていう文字を表示してよ」って
ブラウザに伝えてあげなきゃならないんですよ。

そして「&amp;lt;」と表示させるためには
&amp;amp;lt;」と打ち込んでるわけです。^^;

わかりますか?^^;
わからない人はよ〜く考えてみてくださいね。(^_-)


さて、特殊な書き方をする文字は他にもありますので
ちょこっとお教えしておきます。
「 」(半角スペース) &nbsp;
「"」 &quot;
「©」 &copy;
「±」 &plusmn;
「«」 &laquo;
「»」 &raquo;
「®」 &reg;
「§」 &sect;
「¥」 &yen;
「♠」 &spades;
「♣」 &clubs;
「♥」 &hearts;
「♦」 &diams;



今日の内容がすんなり理解できる人は
頭がかなり柔らかいと自負していただいていいですね。(^^)

よくわからない人は
じっくりゆっくり考えてみてくださいませ。(^_-)

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 20:54|PermalinkComments(22)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年02月05日

今日は知っててもあまりためにならないテクニックのご紹介。

説明がめんどくさいんで見てください。

うろうろ〜

※一部ブラウザでは動かないかもしれません。<(_ _)>



●文字を動かす!

★ちょっと変わったテクニックとして
文字を動かす方法がありますのでご紹介します。
ただし、あまり多用するとウザイんでほどほどに…。^^;
それとブラウザによって動きが違ってたりしますので
それを了解した上で使ってくださいね。

このように文字を動かすときはマーキーというタグを使います。

<marquee>流れる文字</marquee>
流れる文字
こんだけです!(^^)



上のほうの「うろうろ〜」みたいに往復で動かすときは

<marquee behavior="alternate">うろうろ〜</marquee>
うろうろ〜


逆方向なら

<marquee direction="right">逆方向</marquee>
逆方向


そのほかに移動スピードを調整することもできます。
詳しくお知りになりたい方は下のページをご参考にどうぞ。

<MARQUEE>−HTMLタグリファレンス


☆でもこのマーキータグは文字だけじゃなくて
画像も動かせるんですよ。

文字のところをイメージタグに置き換えればOKです。
こんな感じです。

<marquee behavior="alternate"><img src="http://netsurf.notetuj.in/banner.png" alt="ネッ鉄"></marquee> (HTMLの場合)
<marquee behavior="alternate"><img src="http://netsurf.notetuj.in/banner.png" alt="ネッ鉄" /></marquee> (XHTMLの場合)
ネッ鉄


さてここで下のような画像を用意します。

<img src="http://livedoor.blogimg.jp/hy650410/imgs/7/9/7932be86.gif" width="17" height="17" alt="走るマリオ" />
走るマリオ

これをマーキータグではさんで速さを調整します。

<marquee direction="right" scrolldelay="60"><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/9/7932be86.gif" width="17" height="17" alt="走るマリオ" /></marquee>
走るマリオ

これがこのブログの下で走ってたマリオの正体です。(^_-)

※このマリオを自分のサイトでも走らせたい方は
Bダッシュ同盟
こちらをこっそりとご覧ください。



皆さんもいろんな物を走らせてみてくださいませ。(^^)

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 20:52|PermalinkComments(18)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年02月03日

昨日のサムネイルリンクは大失敗でした。

表示されなきゃ意味ないじゃん!!!o(`ω´*)o


というわけで、お詫びの気持ちを込めまして、
再度、お友達サイトをサムネイルによるリンクでご紹介してみます。

chobi日記:勉強になりました - livedoor Blog(ブログ)
今日も幸せ…? ^^もちろん☆ - livedoor Blog(ブログ)
七転び八転び
小さな天使と癒し愛
【A Day In The Life】
iBLOG
欠伸している場合じゃないヨ!
sakebara〜酒と薔薇の日々〜
さくらPaPa≡⊂⌒⊃≡Slowlife - livedoor Blog(ブログ)
オールトの雲 【Oort-Cloud】 - livedoor Blog(ブログ)
せまいながらも楽しい我が家?
悔いのない人生を送るために - livedoor Blog(ブログ)
きまぐれ≪Kingyoの記憶☆彡≫/ウェブリブログ
特定アジアと世界を眺めるブログ
三十路女の大きな独り言 - livedoor Blog(ブログ)




ちなみにこのサムネイル画像は、こつこつ作りました。(ーー;)
まぁ、1時間くらいでできましたけど。

使用したソフト:
CrenaHtml2jpg
Macromedia Fireworks MX 2004


なお、サイトの画面をキャプチャしてくれるサービスについて
以下のページが参考になるかと思います。

ページのサムネイルorキャプチャをWEB上で作るサービスまとめ:phpspot開発日誌


このくらいで、昨日の大失敗を許してください…。・゚・(ノд`)・゚・。

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 13:07|PermalinkComments(22)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年02月02日

今日はリンクについての小ネタを一つご紹介。

お友達のサイトや面白いサイトを見つけてそれを紹介したいときには
リンクを貼り付けますよね。

例えばこんな感じで。

<a href="http://netsurf.notetuj.in/" target="_blank">ネットサーフィンの鉄人</a>
ネットサーフィンの鉄人

これはこれでノーマルなリンク方法なのですが、
もし相手のサイトを見たまんま紹介できると楽しいですよね。
こんな感じで。

http://netsurf.notetuj.in


そのサイトを実際にブラウザで表示して、それを画像として保存して
それをアップロードしてリンクタグを入れて…と、結構めんどくさいんですが、
これを簡単にやってくれるサービスがあるんです。



ここでリンク先の URL を入力して「サムネイルを作成」というボタンをクリック。
そうするとリンク先の画面がサムネイル(小さな紹介画像)となって
ありがたいことにリンクコードまで作成してくれます。

サムネイルサイズも自由に設定できますし、
影のつけ方や、角の丸みまで設定できる優れ物です。

とってもありがたい素敵な機能ですね。ヽ(^o^)丿


ただし、リンク先を別窓で開かせたいときは
リンクタグ(aタグ)内に target="_blank" を追加するのをお忘れなく!
それから必要ならイメージタグ内に border="0"
付け加えてくださいね。(^_-)

あと、サイトのタイトルに特殊文字が含まれるときに
文字化けすることがあるようですのでご注意を!(特に「〜」)


サンプルとしてお友達のサイトをご紹介してみますね。

http://chobipoco.livedoor.biz
http://blog.livedoor.jp/kirakirara123
http://ayuka47912.blog36.fc2.com
http://peridot115.seesaa.net
http://sazanami2007.blog18.fc2.com
http://ameblo.jp/akinori-i
http://puaaa.blog32.fc2.com
http://kikuchikuwa.blog23.fc2.com
http://blog.livedoor.jp/sakurapapa16
http://blog.livedoor.jp/nankuri7
http://ameblo.jp/ksn2603
http://blog.livedoor.jp/hummingbird008
http://mihonokimagure.at.webry.info
http://www.tokua.com
http://blog.livedoor.jp/machix01



追記:
時間帯によってうまく表示されないようです。
いいサービスなのでサーバの増強を切に願うところです。(ーー;)

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 11:11|PermalinkComments(22)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年01月27日

今日はいよいよお待ちかね(?)の
画像の位置調整についてです。
これはすぐにでも役に立つ技術だと思いますので
是非理解して使ってみてください。



注意!
この記事内に出てくる「ネットサーフィンの鉄人」と「あしあっと」のコードは
「教授用に発行されたコード」です。
ですので、この記事内のコードをそのままご自身のブログ等に張り付けると
動作不良を起こします。
各自に発行されたコードに
必要な変更を加えるようにしてください!
(2008/1/29 追記)

注意!その2
「あしあっと」のバナーが表示されなくなったので、
例をQRコードに変更しました。
ちなみにこのQRコードはこのブログ用です。
(2009/6/18 追記)

●画像の位置調整

★ブログパーツなんかを自分のブログのサイドバーに設置する際、
「あ、左に寄っちゃってるのを真ん中にしたいなー」なんて
思うことがよくありませんか?

今日はその方法です。

実はいろんな方法があるのですが
基本的な div タグディブタグ)と CSS を使った
基本的な方法をご紹介します。

で、その前に CSS とは何ぞや?

CSS とは Cascading Style Sheets の略で
一般的には「スタイルシート」と呼ばれています。
その名前から想像がつくかもしれませんが、
これはブラウザで表示するための見栄えを調整する技法です。
この CSS を使えるようになると
サイトの見た目を良くすることができます。


というわけで、具体的にやってみましょう。

例えば、このブログにQRコードを貼り付けたいとします。

こういうブログパーツを貼り付けるときは
ブログの管理画面でプラグインというのを表示させ
フリーエリア」というものを追加します。

フリーエリアには自分の好きなタグを
貼り付けることができるんですね。

で、そのフリーエリアを用意してQRコードの画像のタグ
<img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" />
これを貼り付けてみると…

QRコード

こんなふうになりました。

これを左右の中央に設置したいなぁと思った場合には下のタグを使います。

<div align="center">真ん中に持ってきたい物</div>

要は「真ん中に持ってきたい物」を <div align="center"></div>
はさんでやればOKです。
これは HTML のサイトでも XHTML でも同じ書き方です。

<div align="center"><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" /></div>

これを設置してみると…。

QRコード

ちゃんと真ん中に寄ってくれましたね。(^_-)

ちなみに
<div align="right"><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" /></div>

としてみると…。

QRコード

右に寄りました。


さてさて、
「そんな極端に移動させたいんじゃなくて、左寄りでいいんだけど、
ちょっとだけ右に動かしたいんだよ!」という人もいらっしゃるでしょう。

そういう人のために(?)CSS をお知らせしちゃいましょう。

例えば、左寄りでいいんだけど10pxくらいの余白が欲しい場合

<div style="margin-left:10px;"><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" /></div>

としてみると…。

QRコード

左に10pxの余白ができましたね。

今度は「右寄せがいいんだけど右側に20pxの余白が欲しい」という場合です。

<div align="right" style="margin-right:20px;"><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" /></div>

としてみると…。

QRコード

右よりになって右側に20pxの余白ができましたね。

この margin-leftmargin-right の指定をすると
左右の余白を調整することができるわけです。

で、このディブタグ内の style="〜" の部分が CSS なんです。


さて、もうちょっとやってみましょう。
もし「ネットサーフィンの鉄人」とQRコードをまとめて設置したい場合

<a href="http://netsurf.notetuj.in/?1"><img src="http://netsurf.notetuj.in/banner.png" alt="ネットサーフィンの鉄人" border="0" /></a>
<img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" />

ネットサーフィンの鉄人
QRコード

う〜ん、ピッタリくっついちゃってますね…。

まずは二つのバナーを少し離してみましょう。

<div style="margin-bottom:8px;"><a href="http://netsurf.notetuj.in/?1"><img src="http://netsurf.notetuj.in/banner.png" alt="ネットサーフィンの鉄人" border="0" /></a></div><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" />

ネットサーフィンの鉄人
QRコード

これは上のバナーの下に 8px の余白を空けなさいと命令してるわけですね。
style="margin-bottom:8px;" というのが「下の余白が 8px」という指定部分です。

でもそれなら、下のバナーの上に 8px の余白を空けても同じはずですね。
やってみましょう。

<a href="http://netsurf.notetuj.in/?1"><img src="http://netsurf.notetuj.in/banner.png" alt="ネットサーフィンの鉄人" border="0" /></a><div style="margin-top:8px;"><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" /></div>

ネットサーフィンの鉄人
QRコード

見た目は同じになりましたね。(^_-)
style="margin-top:8px;" というのが「上に 8px の余白を空ける」という命令です。

さて左側にピッタリくっついているのが気にくわないので
左側に 15px の余白をつけてみましょう。

<div style="margin-left:15px;"><a href="http://netsurf.notetuj.in/?1"><img src="http://netsurf.notetuj.in/banner.png" alt="ネットサーフィンの鉄人" border="0" /></a><div style="margin-top:8px;"><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" /></div></div>

ネットサーフィンの鉄人
QRコード

全体をディブタグで囲んで「この部分の左余白は 15px ですよ」と指定してるわけです。
こんなふうにディブタグは入れ子にして使うことができます。

もちろん真ん中に寄せるのであれば

<div align="center"><a href="http://netsurf.notetuj.in/?1"><img src="http://netsurf.notetuj.in/banner.png" alt="ネットサーフィンの鉄人" border="0" /></a><div style="margin-top:8px;"><img src="http://livedoor.blogimg.jp/hy650410/imgs/7/a/7a223297.gif" alt="QRコード" /></div></div>

ネットサーフィンの鉄人
QRコード

これでOKですね。


今日はこのへんまでにしたいと思います。

でもこのディブタグの方法は
ブログパーツに限ったことではなくて
普通の画像でも文字でも使えます。

例えば
<div style="margin-left:20px;">教授さん、好きよ!</div>
<div style="margin-left:40px;">教授さん、大好きよ!</div>
<div style="margin-left:60px;">教授さん、ほんとに好きなのよ!</div>
というふうに記事に書くと

教授さん、好きよ!

教授さん、大好きよ!

教授さん、ほんとに好きなのよ!

こんなふうになります。(^^)

なお、1行空いてしまった理由ですが、
ディブタグを使うとその部分が一まとまりの塊として認識されて
</div> の後ろが自動的に改行されるからです。
もしこれがイヤなら

<div style="margin-left:20px;">教授さん、好きよ!</div><div style="margin-left:40px;">教授さん、大好きよ!</div><div style="margin-left:60px;">教授さん、ほんとに好きなのよ!</div>

と、改行を入れずに書いてみてください。

そうすると

教授さん、好きよ!
教授さん、大好きよ!
教授さん、ほんとに好きなのよ!

となりますので。(^_-)


注意!
この記事内に出てくる「ネットサーフィンの鉄人」と「あしあっと」のコードは
「教授用に発行されたコード」です。
ですので、この記事内のコードをそのままご自身のブログ等に張り付けると
動作不良を起こします。
各自に発行されたコードに
必要な変更を加えるようにしてください!
(2008/1/29 追記)



う〜ん、はたしてわかっていただけたでしょうか?
あまり自信がないので、
わからない部分はコメントで質問をお願いいたします。<(_ _)>

もっと文章力があればいいのですが…。(ーー;)

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 15:59|PermalinkComments(19)TrackBack(1)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年01月26日

今日は久々に html 講座です。

で、今回はバナーリンクなどに使われる技術で
画像をクリックしたらリンク先へ飛ぶ方法を
書いてみようと思います。



●リンクと画像の合わせ技

★まず前回までのリンクと画像表示を思い出してみましょう。

リンクは

<a href="URL">リンク先の名前など</a>

でしたね。

別窓にリンク先を表示させたい場合は

<a href="URL" target="_blank">リンク先の名前など</a>

でした。


次に画像表示ですが、

<img src="画像のURL" alt="画像の説明">

でした。


ここで一つ言い忘れていたことに気付きました。(^^ゞ

皆さんのサイト(ブログ)は HTML で書かれてますか?
それとも XHTML で書かれてますか?

なにそれ?って思われた方が多いかもしれませんね。

これはサイトを表示するためのルールなんです。
実はサイトの書き方について、
「こう書いてあったらこういうふうに表示する」っていう
国際的な規格があるんです。
そのルールがないと、
ブラウザによってバラバラの表示になっちゃいますからね。

で、そのルールにもいろんなのがあるんですが
おおざっぱに分けると HTMLXHTML なんですよ。
(詳しい人、端折っちゃってすみません)

さて、皆さんのサイトはどっちのルールで
作られているんでしょう?

それはソースコードを見ると一目瞭然です。

自分のサイトをブラウザで表示して
その画面上でいつもの右クリックです。
そして「ソースの表示」をクリックしてください。
そうするとサイトのソースコードが表示されます。

するとソースコードの最初のほうに

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

こんな感じの行がありませんか?

この行で「このページは○○というルールで書いてますよ」と
宣言してるんです。

たとえて言うなら、誰かに話しかけるときに
「今から話す言葉は英語ですよ」とか
「今からフランス語で話しますよ」と教えているイメージです。

で、さっきの長い宣言文を見ていただくと

"-//W3C//DTD XHTML 1.0 Transitional//EN"

ってのがありますよね。
ここで XHTML のルールに従っているとわかるわけです。

実はさっきの宣言文はこのブログの宣言文なので
僕のブログは XHTML のルールで書かれているわけですね。

ちなみに

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

こんな宣言をしているサイトもあります。

こういうサイトは XHTML ではなく HTML のルールで
書かれているサイトです。

本当はもっともっと細かい話なんですが、
おおざっぱに分けて HTMLXHTML の2種類のルールがあると
思っていてください。
そして自分のサイトがどちらのルールで書かれているのかを
知っておいてください。

もしこの宣言文のないサイトは…
ブラウザによってまちまちに解釈されて
どんな表示がされるのかわからなくなります。
みんなに同じように見てもらうために
この行は大事な宣言文なんです。

ふぅ…。


さて、なんでこんな話をしたのかというと
HTMLXHTML では一部のタグの書き方がちょっと違うんです。
その代表例がイメージタグなんです。

先ほど示したイメージタグ

<img src="画像のURL" alt="画像の説明">

これは HTML のサイトでの書き方です。

では XHTML のサイトではどう書くのか?
下のようにしてください。

<img src="画像のURL" alt="画像の説明" />

ほんのちょっとの違い(>の前にスペースとスラッシュが入る)ですが、
こういうルールになってますのでご了承ください。
(まぁ、間違ってもたぶんきちんと表示されますが…^^;)



さて次に、画像をクリックしたら違うページが表示される方法です。

例えばバナーをクリックしたら違うサイトに飛ぶような感じですね。
これはリンクと画像表示の組み合わせです。
リンク先の名前の文字の代わりに画像を貼り込みます。
具体的には下のようにします。

HTML なら
<a href="URL"><img src="画像のURL" alt="画像の説明"></a>

XHTML なら
<a href="URL"><img src="画像のURL" alt="画像の説明" /></a>

では具体的にやってみましょう。
僕のこのブログは XHTML のルールですから下の書き方です。

<a href="http://netsurf.notetuj.in/?1"><img src="http://netsurf.notetuj.in/banner.png" alt="ネットサーフィンの鉄人" /></a>
ネットサーフィンの鉄人

あれ? 画像に太枠が…。

実は画像をaタグで挟むと、リンクだということがわかるように
このまんまでは自動的に太枠が付くようになっています。

このまんまでいい人はこのまんまお使いください。

でも「太枠はいらないや」という人は下のようにしてください。

<a href="http://netsurf.notetuj.in/?1"><img src="http://netsurf.notetuj.in/banner.png" alt="ネットサーフィンの鉄人" border="0" /></a>
ネットサーフィンの鉄人

これで太い枠は消えましたね。(^_-)
「border(境界線)は必要ないよ」って書き加えてあげる感じです。


☆さて今日は HTML と XHTML で書き方が違うタグがあるという説明が
長くなってしまいましたが、そのあたりについてもうちょっと補足します。

HTML と違って XHTML は「開いたタグは必ず閉じろ!」という
原則があるんです。

例えば <a href=〜> というタグは </a> というタグで
終わっています。
<a> で始まった部分は </a> ここまでですよ、とわかります。
この2つがペアになってるわけで
始めと終わりがはっきりわかりますよね。

でも HTML では単体で終わっちゃうタグがあるんです。
<img> は </img> で終わってないでしょ?
この画像表示のイメージタグもそうですし、
改行を表す <br> というタグ、
水平線を表す <hr> なんてのもあります。
これらはペアにして使うタグじゃないんです。

こういうふうな単体で使うタグは
XHTML では「単体で終わってますよ」と示すために
<br> なら <br /><hr> なら <hr />
書くようなルールになってるんですね。



というわけで、今回はこのへんで終わります。

画像の位置調整についても書こうと思っていたんですが、
HTML と XHTML について書いてたら長くなっちゃいましたので
次回にしたいと思います。

では次回をお楽しみに!

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 15:10|PermalinkComments(11)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

2008年01月12日

今日はいよいよ画像を表示する方法です。
これもブロガーさんには必須の技術ですよね。

かなり長くなると思いますので覚悟してくださいね。
とはいえ覚えることはちょっとだけですけどね。



● 画像表示の方法(その1)

★今日は最初に3つの言葉を覚えてください。

まずは「サーバ」(Server) という言葉です。
サーバー」と言ったりもします。
で、サーバというのはブログやホームページなどの
データを保存しておくコンピュータのことをいいます。

例えばこのページのデータはライブドアのサーバ内に保存されています。
皆さんがブラウザに「http://blog.livedoor.jp/hy650410/」と打ち込んだり、
「http://blog.livedoor.jp/hy650410/」へのリンクをクリックすると、
このページのデータがライブドアのサーバから送り出されて
皆さんのブラウザがそれを表示するというわけです。
インターネットで見聞きすることのできるデータは
サーバに保管されているわけですね。

そして大事な言葉として「アップロード」と「ダウンロード」があります。
アップロードというのはサーバにデータを保管すること
ダウンロードというのはサーバのデータを取り出すことをいいます。

皆さんがホームページやブログで写真を公開したい場合、
まず最初にサーバにその写真のデータを保存しておく必要があります。
これを「写真のデータをアップロードする」と言います。
アップロードする」という言葉は「サーバにデータを保存する」という意味ですので
「データをサーバにアップロードする」というのはちょっとくどいかもしれません。
そう言ったとしても別に問題はありませんが「馬から落馬する」みたいな感じがします。
慣れた人だと「写真をアップする」なんて略したりもします。

ダウンロードは、最近音楽データをサーバから取り出す場合などに
よく聞いておなじみだと思います。
「あゆの新曲、ダウンロードしちゃった!」とか言いますよね。
これは「あゆの新曲の音声データをサーバから取り出した」ということですね。

サーバ」「アップロード」「ダウンロード」この3つの言葉は
基本ですから覚えておいてくださいね。



さて、いよいよ画像を表示する方法です。

画像を表示するにもやっぱりタグを使います。
このタグはimgタグイメージタグ)です。

まず前提として表示したい画像がサーバに保存されているとします。
ブログをやっている人なら、
各ブログごとに画像の保存方法が説明されていると思いますので
それに従って画像をアップロードしているものとして話を進めます。

今、仮に保存された画像データのURLを
http://blog.com/abc.jpg とします。
これは、ブログの場合だとアップロードしたときに
この画像のURLは「http://〜」ですよって表示されると思いますので
きちんとメモしておいてくださいね。

この画像を表示するときは下のように書きます。

<img src="http://blog.com/abc.jpg" alt="画像の説明文">

基本はこれだけです。これも簡単でしょ?(^^)

ところで、このタグ内の alt="〜" を省略しているのをよく見かけます。
実際、これを省略しても大半のブラウザは画像をきちんと表示してくれます。
ですからめんどくさくなって省略する人が多いんですが、
これは必ず書くようにルールとして決まっています

無くてもきちんと表示されるのにどうして?って思うでしょ?
実は画像の表示されないブラウザってものも世の中にはあるんです。
特に大事なのは目の不自由な方のための音声読み上げブラウザです。
この alt="〜" ってのが無いと音声読み上げブラウザは
目の不自由な方にどう説明していいか困ってしまいますよね。

もっと極端な言い方をすれば、imgタグalt="〜" が入ってないサイトは
目の不自由な人は来てもらわなくて結構です」と宣言してることになります。
ですからこの alt="〜" は必ず入れるようにしてくださいね。

以上でなが〜い基礎部分は終了!


☆さて、いざ画像を表示してみたところ
画像のサイズが気に入らないってことがあるかと思います。

そういう場合の画像の大きさを指定する方法をご紹介します。

例えば横88ピクセル、縦31ピクセルで表示したいときは下のように書きます。
(ピクセルとは画面上の点1個のことです)

<img src="http://blog.com/abc.jpg" alt="説明文" width="88" height="31">

こうすると、画像のデータがどんなサイズであろうが
横88ピクセル、縦31ピクセルで表示されます。
width="〜" が横のサイズ、height="〜" が縦のサイズですね。

「横は7割くらいの長さで、縦は2割増しのサイズがいいなぁ」という場合は

<img height="120%" width="70%" alt="説明文" src="http://blog.com/abc.jpg">

こんな指定方法もあります。
わざと順番を入れ替えてみましたが、タグ内で順番を変えてもOKです。

これで好きな大きさで画像表示ができるようになったわけですね。(^_-)

でもここで大事な注意点を。

まず、小さな画像を大きく表示する場合
これは想像がつくと思いますが、画像は荒くなります。

逆に大きな画像を小さく表示する場合
画質的はあまり問題ありませんが、小さな画像を表示するために
無駄に大きなデータをダウンロードさせることになって
表示に時間がかかってしまいます。

ですから、表示したいサイズの画像データをアップロードするというのが
最もよい方法です。
もし画像のサイズを編集するソフトをお持ちでない場合は
JTrim」というフリーソフトをおススメします。
これは僕が一番最初に使ったフォトレタッチソフトで、
とても使いやすくて、ずいぶんお世話になりました。


それから★の部分では書きませんでしたが、
画像データそのままのサイズの表示でOKの場合でも
なるべく width と height は指定しておくようにと言われています。
これはブラウザがページを表示するときに差が出てくるからです。

ページを表示するときに、画像がなかなか表示されないということを
皆さんも経験していると思います。
これはページが表示されるときに、html のデータと画像のデータは
別々に送られて来るから起こる現象です。

さて、もし width と height が指定されていないとどうなるでしょう?
ブラウザは画像データが送られてくるまで、
どのくらいのスペースをあけておいたらいいのかまったくわかりません。
ですから適当にスペースをあけておいて文章などを表示するわけですが、
後から予想と全然違うサイズの画像データが届いたら
スペースを調整しなおして文字を並べなおさないといけませんよね。
そんな面倒なことにならないために
最初から画像の大きさをブラウザに教えるために
width と height を入れておくのがいいというわけです。


というわけで今日はこのへんまで。
長丁場、お付き合いいただいてありがとうございました。<(_ _)>



次回は、画像とリンクのコラボレーションと、
画像とテキスト部分との位置関係を取り上げてみたいと思ってます。


さて、私事ですが、
昨夜このブログにやっとグーグルのページランクが付きました。
このページランクというのは…と説明しだすと
今日の講座以上の長さになるので省略です。(^^ゞ

いやー、めでたい、めでたい!

ということで、今夜はチンタオビール以来の酒盛りをしようと思います。

祝杯じゃ〜! 上げ潮じゃ〜!!ワッショイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワッショイ

でもまだ2か…。(´-ω-`)

にほんブログ村 IT技術ブログ プログラム・プログラマへ  人気blogランキング  ブログランキング  <- クリックするといいことあります。教授に。
hy650410 at 18:52|PermalinkComments(12)TrackBack(0)clip!
dff.jp | クリック募金 _ クリックで救える命がある。

走るマリオ