id:nemutaiyo
ポイントあり375ptベストアンサーあり
コンピュータインターネット

HTMLの<TD>タグで背景画像のサイズの自動調整ができません。


やりたいことは、下のサイトの上部の矢印を表示させたいです。

http://www.jinjour.jp/wp-content/uploads/2011/10/biz_shikou014_001_01.png

現状のHTMLタグは以下のようになっています。問題は文字数にあわせて、矢印を幅を調整したいのですがやり方が分かりません。（最初は、<TD>タグの背景画像に設定しましたが、<TD>内で背景画像を自動調整する機能はないらしくできませんでした。

<table><tr><td>商品企画</td><td>原材料調達</td><td>加工・製造</td><td>出荷</td><td>販売</td></tr></table>

なにか良い方法は無いでしょうか。

※ちなみに、<table>にこだわっていません。ただし矢印毎に画像ファイルを用意しておくことはしたくありません。（項目数が多いからです。）
※JavaScript、HTML5 canvasなどを使ったりして解決できたら、それでも構いません。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録：
  • 終了：2011/12/03 16:25:29
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:Lhankor_Mhy No.4

回答回数811ベストアンサー獲得回数232

ポイント300pt

おのれ、a-kuma3め！
新しくサンプル作ってみました！画像なし！
http://jsfiddle.net/mTxCC/

他6件のコメントを見る
id:nemutaiyo

何度もありがとうございます。早速試してみます。

2011/12/03 16:02:44
id:nemutaiyo

Lhankor_Mhyさん。あなたの作られたコードが一番私に都合が良いです。画像が不要なのが一番良いです。私のやりたい事まで後少し修正が必要ですが、Lhankor_Mhyさんのコードを元にやっていきます。（できない場合は、また質問しますので、よろしくお願いします。その時は、私もhttp://jsfiddle.net/を使用して、何がしたいのかを明確にします。）
長い時間助けてくれてありがとうございます。ベストアンサーに選ばせて頂きます。

2011/12/03 16:23:21

その他の回答（3件）

id:Lhankor_Mhy No.1

回答回数811ベストアンサー獲得回数232

ポイント25pt

サンプルを作ってみました。
http://jsfiddle.net/JWwU4/

id:nemutaiyo

ま　まじですか! 早すぎます。それになんですかこのサイト。自由にJSが書ける?? 早速自分のサイトで使えるか見てみます。ちょっとお待ちください!!

2011/12/03 13:55:20
id:a-kuma3

ぼくが書いたのは、矢印が何色あっても、背景画像が一つで済むもんねー　(｀・ω・´)ｷﾘｯ

2011/12/03 14:37:11
id:a-kuma3 No.2

回答回数4964ベストアンサー獲得回数2150

ポイント25pt

ぼくも作ってみました。
http://jsfiddle.net/czqVb/

Result の幅を広げて確認してみてください。
ポイントは、矢印の右はじだけ画像にしてて、矢印の中身が透明色で、矢印の外側に背景色を塗ってます。

他3件のコメントを見る
id:nemutaiyo

今回の私が作りたいことに、より一致したのはa-kuma3さんの方でしたので、ベストアンサーに選ばせて頂きます。Lhankor_Mhyさんも大変参考になりました。お二人ともありがとうございます。

2011/12/03 15:12:21
id:a-kuma3

ちなみにお二人とも「cdn-ak.f.st-hatena.com」を使っていますが、これは画像ストレージか何かですか？

はてなフォトライフです。

透過色の三角を別のサイズで作ろうと思います。GIMPで作りますが、もし簡単に作れるツールがあったら教えてください。

線を引いて、色を塗って、透過色を指定して保存するだけですからね。
ぼくは、ペイントで画像を作って、Irfan View で透過色を指定する、という一番面倒そうな手順を取りましたが　=)

2011/12/03 16:12:58
id:kodairabase No.3

回答回数661ベストアンサー獲得回数80

ポイント25pt

CSS3対応ブラウザが必要ですが、こんな感じでどうでしょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
td.arrow {
   height: 80px;
   background: lightblue;
   position: relative;
}
td.arrow:after {
   content:"";
   position: absolute;
   left: 100%;
   top: 0px;
   border-top: 40px solid transparent;
   border-left: 20px solid lightblue;
   border-bottom: 40px solid transparent;
}
td.space {
   height: 80px;
   width: 20px;
   position: relative;
}
</style>

</head>
<body>
<table>
<tr>
<td class="arrow">あいうえお</td>
<td class="space"></td>
<td class="arrow">ABCD</td>
<td class="space"></td>
</tr>
</table>
</body>
</html>
id:nemutaiyo

おっと！他にもやり方があるのですね。この質問を閉めようかと思いましたが、早速試してみます。ちょっとお待ちください。

2011/12/03 15:14:14
id:Lhankor_Mhy No.4

回答回数811ベストアンサー獲得回数232ここでベストアンサー

ポイント300pt

おのれ、a-kuma3め！
新しくサンプル作ってみました！画像なし！
http://jsfiddle.net/mTxCC/

他6件のコメントを見る
id:nemutaiyo

何度もありがとうございます。早速試してみます。

2011/12/03 16:02:44
id:nemutaiyo

Lhankor_Mhyさん。あなたの作られたコードが一番私に都合が良いです。画像が不要なのが一番良いです。私のやりたい事まで後少し修正が必要ですが、Lhankor_Mhyさんのコードを元にやっていきます。（できない場合は、また質問しますので、よろしくお願いします。その時は、私もhttp://jsfiddle.net/を使用して、何がしたいのかを明確にします。）
長い時間助けてくれてありがとうございます。ベストアンサーに選ばせて頂きます。

2011/12/03 16:23:21

コメント（4件)

  • id:a-kuma3
    a-kuma3 2011/12/03 16:45:47
    お、すげえなあ。何でああいうふうに見えるのか、ぱっと理解できないぞお。

    ＃ 触媒キャラ、っていうのも面白いかな　=)
  • id:a-kuma3
    a-kuma3 2011/12/03 17:04:16
    border の色を変えると、inset や outset みたいに斜めに色の境界ができるのか。
  • id:Lhankor_Mhy
    Lhankor_Mhy 2011/12/03 19:33:51
    a-kuma3さん
    　
    こういうの楽しいっすね。
    今度は俺が煽っちゃおうかなーｗ
  • id:a-kuma3
    a-kuma3 2011/12/03 20:02:53
    犬を散歩に連れてってる間に、勝負がついてました。
    とはいえ、あれ以上は思いつきません。

    ＞今度は俺が煽っちゃおうかなーｗ
    かかってこいやー。
    いつものように、穴だらけの回答で待ってるぜ。

    ＃ いつも穴だらけ...　＞＜

この質問への反応（ブックマークコメント）

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ