|
|
|
2004年09月06日
カテゴリ：バカネコＰＣ講座
前回、行間を広くするには、本文を、<span style="line-height: 180%"> と </span> で囲めばよい．．． と、紹介したが、この行間隔を調整するHTMLでは、本文の途中で画像を使った場合に 文字と画像が重なってしまって、思うように表示されないことがある。 このヤロー、だましやがったな！ と言う方は、帰ってよろしい。 対処法を覚えておきたいと思う方だけ、続きを読んでいただきたい。 別に難しくも何ともない。 画像を<div>と</div>で挟むだけだ。 実に単純！ たとえば <div><img src="画像の保管場所"></div> のように書く。 これにより、この画像は別区画として扱われ、前後の文章や文字が 重なるなどの不具合は起きなくなる。 これも覚えておくと、トラブルの際にあわてずに済む。 ただ、別区画であるから前後に空行が自動挿入されて、 少し間延びした印象になるのが、難点と言えば難点か。 この方法は、毎回このページで載せている「子猫の里親募集」の 写真に、毎回使っている。 気になる方はソースを調べてみるのもよろしかろう。 このように、HTMLはタグでサンドイッチするだけの、単純な言語なのである。 恐るるに足らず。 以上、昨日の補足、終わり。 さて、本題に入ろう。 今日は、よく誤解される「画像サイズ」のお話。 楽天日記では使える画像に容量制限があるのに、トップページなどに 大きな画像のせている方が多くいる、いったいこれはどうやっているのか、 という質問をいただいたことがある。 どうやるもこうやるも、別に、秘策などはない。 普通に50KB以下の画像を、画像倉庫に保存して、 それを載せているだけのことである。 このような疑問は、画像の見かけの大きさと、ファイルサイズを 混同してしまうことから起こる。 見かけの大きさとは、文字通り、画像の縦と横の長さのことを言う。 見たままのサイズのことだ。 単位はピクセルなどで表す。 ファイルのサイズとは、キロバイトなどの単位で表す、データ量のことである。 ご存じの通り、コンピュータはすべてのデータを、０と１で処理する。 ファイルサイズとは、そのファイルに含まれる０と１の総量、と考えれば 理解しやすいかもしれない。 見かけの大きさと必ずしも比例しない。 だから、画像の見かけが大きくとも、 ファイルサイズは小さい場合もあり、その逆のケースもある。 もし、画像が大きすぎて画像倉庫に入らない、と言われたなら、 それはファイルサイズのことを言っている。 決してタテ、ヨコのサイズの意味ではない。 ファイルサイズが大きすぎるのなら、オーバーしないように、 予めダイエットするしか、他に方法はない。 画像のダイエットは、バカネコ講座の「画像を切り貼りする」に 解説してあるので、気になる方は、ご参照いただきたい。 見かけのサイズを変更するには、縦横の幅を表す width や Height の値を 書き換えればよい。 具体的には、 <img src="画像の保管場所" width="300" height="200" border="0"> の中で、width="○○" や Height="○○" の数字を書き換えるのである。 モト画像の縦横比に比例させれば、拡大も縮小も自由である。 縦横比を変えて、故意にひしゃげた表示をすることも可能だ。 もう、お分かりのことと思うが、表示サイズを変えたとて、データの総量が 増減するわけではない。 タテヨコの表示寸法を書き換えても、変化するのは見かけの大きさだけである。 したがって、持っている情報量は変化しないから、拡大すれば画質は落ちる。 ファイルサイズのダイエットをしておいて、見かけだけ、モトの大きさにしたら、 当然そうなる。 つまり、「解像度を落とした」ことになる。 ここまで読み通したアンタは、えらいっ！ これで、ファイルサイズと表示サイズの両方をあやつれる、 画像ファイルの達人になった．．．かもしれない。 この記事がおもしろかったと思う人は１票！ クリック →  ネコでもわかる バカネコ講座はこちら。 →超初心者ＰＣ講座 笑って楽しみたい方はこちら → 爆笑ガイド パソコン買い替えの前にチェック → 費用の削り方 画面右上「日記リンク追加」をクリック、「◎追加する」ボタンを押すとこの日記がリンクできます。 子猫の里親募集にお力添えをいただける方、または、このサイトの新着記事の通知をご希望の方はご利用ください。 お気に入りの記事を「いいね！」で応援しよう
[バカネコＰＣ講座] カテゴリの最新記事
|
|
|||||
