• ベストアンサー

画像を分割して並べる?

ウェブサイトで、見かけるのですが、大きな画像を いくつかに分割して、複数の小さな画像がうまく配置され、 1つの大きな画像になっているものがあります。 なぜ、そのようなことをしているのでしょうか? 私もホームページを作っているのですが、 大きな画像の場合は、こうゆうことをしたほうが良いのでしょうか? そして、その方法ですが、 1:(分割の方法) 画像を、マウスでの範囲選択で、いくつもに分割すれば、微量のズレも出るはずです。 2:(表示の方法) 分割できたとして、サイトに表示するには、 テーブルタグかなにかで、並べるのでしょうか? 解説と共に、1と2の方法をレクチャーしてください。

  • HTML
  • 回答数4
  • ありがとう数0

質問者が選んだベストアンサー

  • ベストアンサー
  • shy00
  • ベストアンサー率34% (2081/5977)
回答No.1

画像を分割する理由・・・ それは、見る方のネットワーク環境によりますが、大きな画像と言うものは 読み込みに時間がかかります。 そこで、大きなものも分割し、小さくすることで読み込み時間を短くする ことが出来るのです。 http://www.forest.impress.co.jp/article/2002/08/20/okiniiri.html のようなツールを使うと、簡単に分割したものが作成出来ますよ

参考URL:
http://www.forest.impress.co.jp/article/2002/08/20/okiniiri.html

その他の回答 (3)

  • D-onk
  • ベストアンサー率10% (3/29)
回答No.4

1:(分割の方法) 画像を、マウスでの範囲選択で、いくつもに分割すれば、微量のズレも出るはずです。 私はMicrosoft Photo Editorでカーソル位置を確認しながら分割しましたことがあります!ヤレバできる!たぶんペイントでも・・

  • kusukusu
  • ベストアンサー率38% (141/363)
回答No.3

> 1つの大きな画像になっているものがあります。 > なぜ、そのようなことをしているのでしょうか? これは「見かけの速さ」を表現するためです。 大きな画像を一枚で表示するとの、分割して表示するのではどちらが速いか…これは一枚で表示した方が速いのです。 と言うのも、Webサーバーとブラウザの間では、画像一枚毎に "GET /pic/hogehoge.png HTTP/1.1" 200 843 と言うようなやりとりをしています。 つまり、画像が増えれば(分割すれば)それだけサーバーとのやり取りも増え、その分時間が遅くなります。 ただ、体感では分割した方が速く感じます。 これは錯覚を利用したものですが、どちらがいいかはサイト制作者の判断でしょう。 ちなみに私なら分割しません。 見かけの速さより実際の速さを重視しますから。

noname#3598
noname#3598
回答No.2

>なぜ、そのようなことをしているのでしょうか? ♯1の方もおっしゃっているように 画像の読み込み時間を短縮するためです。 最近は高速回線の家庭が増えたのであまり神経質にならなくても いいでしょうが、遅い回線で見ている人もいるという作り手側の配慮です。 >画像の分割の方法 画像を分割することを「スライス」と言います。 スライス方はもちろんマウスでドラッグ~・・・なんかじゃ無理ですよ 専用のソフトが必要です。 フリーもあるみたいですし、あとはPhotoshopとかFireworksに スライス機能がついているかと(私はフォトショでやっています) 単に画像を置くだけならそのまま配置してもかまいませんし 「フレームなんだけどフレームに見せない」 「画像の中にテキストを配置したい」 なんて小技をやりたいなら、テーブルの中に置く事が必要です。 テーブルは行間と線の太さを0にし配置します。 <table cellpadding="0" cellspacing="0">

関連するQ&A

  • 画像を分割したい

    いつもお世話になってます。 アイフレームのサイトを作ろうと思い画像を制作したのですが 画像を分割するのを忘れて一枚画像にしてしまいました。 リンクを付けたりするのはクリッカブルマップに出来ますが アイフレームにする為にはテーブルタグを使わなければならず 一枚画像を分割しなければならなくなりました。 しかし何度やってもずれてしまい、上手く分割できません。 そこで質問です。 画像をうまく分割する方法を教えてください。

  • 画像、枠、タイトルなどが分割されるのはなぜ?

    ずーっと疑問に思っています。 webデザイナーの方が制作するホームページでは画像や枠、タイトルなどがいくつもに分割されていますが、なぜでしょうか? 自分で制作するときは画像は1つ、枠も1つ、タイトルも1画像として扱っていますが、デザインするにあたって支障があるのでしょうか? 因みにホームページビルダーを使っていて、慣れている“どこでも配置モード”にしています。“標準モード”で枠をとって配置していません。 なぜ1つの画像をいくつかに分割して配置するのか教えてください。 また、画像を分割する方法は?

  • イラストレーターで画像の分割

    イラストレーターの操作で初歩的な質問です。 質問は、アートボード上に配置した画像を任意の形に切り抜く方法についてです。 通常、クリッピングマスクを施した後に画像とパスをグループ化して使っています。 しかし、この方法ですとクリッピングマスクを施した画像を同レイヤー上にコピーすると、一画像しか表示されないので、別レイヤーに貼り付けています。 いくつも同画像をコピーしたい時にはレイヤーが増えてしまい、使いづらい時が多々あります。 自分で作成したオブジェクトの一部を切り抜く時は「オブジェクトの分割」を使ったりしていますが、画像の場合は分割ボタンを押しても上手くいきません。 根本的に画像の分割のようなことは出来ないのでしょうか? 上手く質問の意図が伝えられたか心配ですが、 ご回答よろしくお願い致します。

  • 分割画像を1つの画像として保存。

    ラジオ局の私がいつも聴いている番組のサイトにて、毎週画像が更新されるのですが、その小さい画像をクリックすると新たなページで大きく表示されます。 この大きくなった画像を保存したいのですが、大きく表示された際、1つの画像でなく『1つの画像が4分割されて成り立っている』ので1回に4つの画像を保存しなければいけません。 こういった、『分割された4つで1枚の画像』を『大きな1枚』として保存する方法がわからなく、困っています。 どなたかこの事例についてのご回答をしていただけませんか? 宜しく御願い致します。

  • 分割した画像を結合して表示。何故?

    お世話になります。 http://www.tut.ac.jp/ の画像は、いくつも分割されたものが結合されて表示されています。 一つの画像で表示しても良いもののように思うのですが、何故このような分割した画像として、ブラウザでそれを結合して表示するようなことをするのでしょうか。 他でもこのような方法を見たような気がします。 メリットなど教えていただけるとありがたいのですが。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • テーブル内の画像がずれてしまいます(IE8)

    テーブル内の画像がずれてしまいます(IE8) 画像(写真を含めたHP1ページ分の画像)を分割して写真の部分にリンク(lightbox) を貼ってあります。 一度リンクにとんで(写真を大きく表示して)closeした後は正しく表示されるのですが、 更新するとまた複数の(リンクを貼ってある)写真の部分が下に落ちて、 全体が大きく崩れて表示されてしまいます。 ソースを見ると、分割した画像はテーブルの細かく区切られたセルのcolspanとrowspanで 配置されているようです。 画像がずれて表示される原因と回避方法を教えていただけないでしょうか。

    • ベストアンサー
    • HTML
  • JPG画像一括4分割

    こんにちは いつもお世話になっています。 雑誌を自炊用にスキャンしたJPG画像があります。 左右上下に文章が分割されているので、4分割してOCRにかけるつもりです。 複数画像を一括で4分割できる方法、ソフトを教えてください。 フォトショップエレメント6 xnconvert を試しましたが、失敗しています

  • ドラッグできる画像

    こんにちは。2回目の質問です。 またJavaScriptについての質問なんですが、 HTMLページに画像が複数あって、マウスで自由にドラッグして好きな場所に配置したいです。これはHPで解説してくれているページを見つけたんですが、ちょっと違います。 どこが違うかというと、画像の重なり具合が調節できないこと。参考までにつぎのHPをみてください。(注:ポップアップの広告が出ます) http://holden.hp.infoseek.co.jp/sample/c_img5.html ここのお地蔵さんは、招き猫の上に表示することはできません。ただしドラッグしている間は別ですが。 このお地蔵さんと招き猫のようにドラッグで移動できて、さらに画像の上下(前後)をマウスクリックで変えるようにするにはどうしたらいいでしょうか? また2つ以上の画像を配置したい場合はどうしたら良いですか? JavaScriptの記述は私が参考に出したHPのもの意外でもかまいません。できればJavaScriptの記述を書いてほしいです。 お願いします。

  • ブログの画像の位置を変えたい(ヤフー)

    はじめまして。 タイトルどおりなのですが。 今、ヤフーのブログを使っています。 画像をアップロードすると、一番上に表示されますよね。そこで、複数の画像を文と文の間とかに位置をうごかしたいのです。 それで、このサイトを見つけました ↓ http://maasama.at.infoseek.co.jp/page034.html だいたいこの通りにやって、一応、配置を換えることは出来たのですが・・・。 マウスを写真の場所にもっていくと写真の長いURLが表示されてしまいます。 特に問題ないのですが、 普通はマウスをあわせてイメージ1・イメージ2とでてきますよね。 他の方は配置を変えていても、イメージ1とかで表示されているのですが、どうやってやるのでしょうか。。 教えてください。

  • dreamweaver使用して、画像のプレビューが表示されない

    ホームページを制作していて困っているのですが、 現在ドリームウィバーを使用してホームページを作っています。 テーブルタグ内にレンタルカウンターの画像を配置すると、 プレビューで背景画像のみ表示されて、 テキストや他の配置した画像が全部表示されなくなります。 ですがサーバーにアップすると、 問題無くレンタルカウンターの画像も含めて表示されるのですが これはドリームウィバー上の設定の問題なのでしょうか? 作ったHTMLと同じフォルダー内に無いカウンターの画像のリンクを配置している事が原因なのでしょうか? 同じ経験をされた方や、お分かりになる方がいらっしゃったら教えてください。 よろしくお願いします!