人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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などを使ったりして解決できたら、それでも構いません。

●質問者: nemutaiyo
●カテゴリ:コンピュータ インターネット
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● Lhankor_Mhy
●25ポイント

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


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

a-kuma3さんのコメント
ぼくが書いたのは、矢印が何色あっても、背景画像が一つで済むもんねー (`・ω・´)キリッ

2 ● a-kuma3
●25ポイント

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

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


nemutaiyoさんのコメント
おお!! お二人とも凄すぎです。今度はa-kuma3さんのを試してみます。

nemutaiyoさんのコメント
ちなみにお二人とも「cdn-ak.f.st-hatena.com」を使っていますが、これは画像ストレージか何かですか?もし良かったらどなたか教えて下さい。

nemutaiyoさんのコメント
何度も質問してすみません。透過色の三角を別のサイズで作ろうと思います。GIMPで作りますが、もし簡単に作れるツールがあったら教えてください。

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

a-kuma3さんのコメント
>> ちなみにお二人とも「cdn-ak.f.st-hatena.com」を使っていますが、これは画像ストレージか何かですか? << はてなフォトライフです。 >> 透過色の三角を別のサイズで作ろうと思います。GIMPで作りますが、もし簡単に作れるツールがあったら教えてください。 << 線を引いて、色を塗って、透過色を指定して保存するだけですからね。 ぼくは、ペイントで画像を作って、Irfan View で透過色を指定する、という一番面倒そうな手順を取りましたが =)

3 ● kodairabase
●25ポイント

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>

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

4 ● Lhankor_Mhy
●300ポイント ベストアンサー

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


Lhankor_Mhyさんのコメント
ぐあ、kodairabaseさんのCSSの方がスマートですのう……

nemutaiyoさんのコメント
すぐ試します。少々お待ちください。

nemutaiyoさんのコメント
a-kuma3さんので基本的に私の要求は満たしているのですが、一部rowspanするところがあって、その場合に高さ2倍(それ以上もありえる)の画像を用意しないといけない。と思っているところです。(もちろん、元々の質問内容にその事を書いていないので、みなさんを責めているわけでないです。念のため。まさかこんなに多くのレスポンスがあるとは思いませんでしたので。)

nemutaiyoさんのコメント
kodairabaseさんとLhankor_Mhyさんの最初のは、画像表示カラムがあって、私の希望少し異なっていました。理由は、この矢印の下の行に、それぞれの入力セルがあるからです。(これも質問内容に書いてません。責めているわけではないです)。でも今度のは、画像カラムが無いのでより使えそうです。(画像ファイルも不要ですし)。少々お待ちください。

nemutaiyoさんのコメント
間違えました。画像を表示する用のカラムがありますね。すみません。

Lhankor_Mhyさんのコメント
ちょっと修正してみました。 こんな感じではどうでしょう。 http://jsfiddle.net/mTxCC/1/

nemutaiyoさんのコメント
何度もありがとうございます。早速試してみます。

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ