画像を分割したい

締切済

質問者：miyahime69
質問日時：2010/02/10 23:58
回答数：2件

いつもお世話になってます。

アイフレームのサイトを作ろうと思い画像を制作したのですが
画像を分割するのを忘れて一枚画像にしてしまいました。

リンクを付けたりするのはクリッカブルマップに出来ますが
アイフレームにする為にはテーブルタグを使わなければならず
一枚画像を分割しなければならなくなりました。
しかし何度やってもずれてしまい、上手く分割できません。

そこで質問です。
画像をうまく分割する方法を教えてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2010/02/11 01:48

＞限られた環境のみを今回はターゲットにしている為、

であっても、tableは表を示す要素(element)であって、配置をするためのものではありません。
　たとえ作っても、訪問者があなたと同じOS,ブラウザ,バージョンがまったく同じわけではないです。
　いずれにしても、画像を分割してtableで配置する必要はありません。
　下記サンプルは、画像は一枚しか使ってません。

body部分は
<body>
　<h1>メニュー</h1>
　<div>
　　<ul id="nav">
　　　<li id="pa1"><a href="p1.html">１ページへ</a></li>
　　　<li id="pa2"><a href="p2.html">２ページへ</a></li>
　　　<li id="pa3"><a href="p3.html">３ページへ</a></li>
　　</ul>
　　<iframe src="./foo.html" width="150" height="300" scrolling="auto" frameborder="1" title="テスト"> こちらの <A href="foo.html">関連文書</A> を御覧ください。
　　</iframe>
　</div>
</body>
</html>
というシンプルなものです。

具体的な手持ちのサンプルを・・・
1) 見やすくするため、タブ(\t)を全角スペース２個に置換してあります。
　　タブに戻してテストすること
2) 適当な画像(w600×h400)をbackground.jpgとして同じ場所に保存する
　いちおう、
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でチェック済みです。・・確認してください。・・・

ここから
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
　　<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
　　<title>サンプル</title>
　　<meta http-equiv="Content-Style-Type" content="text/css">
　　<link rev="MADE" href="mailto:hoge@hoge.com">
　　<style type="text/css">

　　</style>
　　<link rel="START" href="../index.html">
</head>
<body>
　　<h1>メニュー</h1>
　　<div>
　　　　<ul id="nav">
　　　　　　<li id="pa1"><a href="p1.html">１ページへ</a></li>
　　　　　　<li id="pa2"><a href="p2.html">２ページへ</a></li>
　　　　　　<li id="pa3"><a href="p3.html">３ページへ</a></li>
　　　　</ul>
　　　　<iframe src="./foo.html" width="150" height="300" scrolling="auto" frameborder="1" title="テスト"> こちらの <A href="foo.html">関連文書</A> を御覧ください。
　　　　</iframe>
　　</div>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： ORUKA1951
回答日時：2010/02/11 00:28

画像を分割する必要はありません。

＞アイフレームにする為にはテーブルタグを使わなければならず
　これは誤った方法です。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。・・・【中略】・・・
・テキストを画像に置き換えて表現する。
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。
・・・【中略】・・・
こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　明らかに、HTMLの目的に反しています。
2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　具体的にどうしたしたいかを簡単なイメージ図でも上げてみてください。

この回答への補足

具体的な図をＵＰしようとしたら何故か弾かれて出来ないのです。
すでにエンコード再トライが２０回目に突入しました(汗)

目的がどうというよりは知り合い限定のサイトを
今作っているので複数の方に見せるものではありません。
まず入口からパスワード制の予定です。

限られた環境のみを今回はターゲットにしている為、
二つ目の引用は当てはまらないものと思います。

補足日時：2010/02/11 00:32

通報する