- 締切済み
画像を分割したい
いつもお世話になってます。 アイフレームのサイトを作ろうと思い画像を制作したのですが 画像を分割するのを忘れて一枚画像にしてしまいました。 リンクを付けたりするのはクリッカブルマップに出来ますが アイフレームにする為にはテーブルタグを使わなければならず 一枚画像を分割しなければならなくなりました。 しかし何度やってもずれてしまい、上手く分割できません。 そこで質問です。 画像をうまく分割する方法を教えてください。
- miyahime69
- お礼率30% (3/10)
- 画像・動画・音楽編集
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞限られた環境のみを今回はターゲットにしている為、 であっても、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.html ) The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済みです。・・確認してください。・・・ ここから <!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"> <!-- body>div,ul#nav ul#nav li{margin:0px;padding:0px;} body>div{ position:relative;width: 600px;height:400px; background: black url(./background.jpg); } ul#nav{position:relative;display:block; margin-left:auto;margin-right:auto; } ul#nav li{position:absolute; display:block;list-style:none; width: 120px;height: 30px;text-align:center;} ul#nav li a:link{display:block; width:100%;height:100%;border-style: outset; border-width: 2px 6px 6px 2px;border-color: gray;} ul#nav li a:focus,ul#nav li a:hover{color: yellow;} ul#nav li a:active{border-style: inset;padding-left:2px; border-width: 6px 2px 2px 6px;color:blue;padding-top:2px;} ul#nav li#pa1{left: 30px;top: 20px;} ul#nav li#pa2{left: 400px;top: 120px;} ul#nav li#pa3{left: 30px;top: 220px;} ul#nav li#pa1 a:active{background-image:url(./background.jpg); background-position: -28px -18px;} ul#nav li#pa2 a:active{ background-image:url(./background.jpg); background-position: -398px -118px;} ul#nav li#pa3 a:active{background-image:url(./background.jpg); background-position: -27px -218px;} iframe{position:absolute;width:200px;top:50px;left:180px} --> </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>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
画像を分割する必要はありません。 ＞アイフレームにする為にはテーブルタグを使わなければならず これは誤った方法です。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 非視覚系メディアでのレンダリングに際して問題を起こすことがあるため、単に文書内容を整形する目的だけで表を用いるべきでない。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Tables in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから Webページのプレゼンテーションを向上させようという志は素晴らしいものではあったが、そのためのテクニックには思わぬ副産物があった。こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。 ・・・【中略】・・・ ・ テキストを画像に置き換えて表現する。 ・余白制御のために画像を用いる。 ・ページレイアウトの目的で表を用いる。 ・・・【中略】・・・ こうしたテクニックによって、Webページはより複雑化し、限られた環境にしか適応しなくなり、相互運用性問題に悩まされることとなり、障害を持つ人々にアクセス障壁が設けられてしまう。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より 明らかに、HTMLの目的に反しています。 2.2 HTMLとは何か? ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2 ) 具体的にどうしたしたいかを簡単なイメージ図でも上げてみてください。
補足
具体的な図をＵＰしようとしたら何故か弾かれて出来ないのです。 すでにエンコード再トライが２０回目に突入しました(汗) 目的がどうというよりは知り合い限定のサイトを 今作っているので複数の方に見せるものではありません。 まず入口からパスワード制の予定です。 限られた環境のみを今回はターゲットにしている為、 二つ目の引用は当てはまらないものと思います。