痔になりやすい生活習慣とは?

IMGについて質問させてください。

ページの背景として画像を使う場合、画像は縦・横方向に繰り返し使われてページ全面に貼り付けられると思います。
IMGタグで指定する画像を縦方向に繰り返し使うことはできますでしょうか?
テーブルの中で使用する画像なのですが、テーブルの高さが可変なために高さ指定ができないのです。

よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

IMGタグで繰り返し表示の背景を指定することが出来ないか、と言う趣旨にとって宜しいでしょうか?


答えは「出来ません」。もう少し詳しく言うとIMGタグは画像をそのまま埋め込む機能しか持たないため背景表示には不向きです。
入らないところを自動で切ったりなんだりするためには背景画像としての指定が必要で、
背景画像として折り返し設定などを行う場合はCSSが無ければ無理です。
ま、やり方は既に出ている通りなのですけど、勝手に解説しときます。
覚えておくといいことがあると思いますよ…多分。
…ってかCSSリファレンスのあるサイトである程度予備知識をつけておくと今後の質問の手間が省けたり、或いは質問が相手に伝わりやすくなったりすると思います。
http://www.tagindex.com/
http://www.htmq.com/
http://masaboo.cside.com/
http://heo.jp/tag/
http://www2.plala.or.jp/Cool/okite/
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2007/03/21 06:50

縦方向のみに画像を繰り返して貼る場合、IMGではなくCSSを利用します。


具体的にはこんな感じです。

<html>
<head>
<style type="text/css">
<!--
.t1 {
background-image:url("画像URL");
background-repeat:repeat-y; /*Y軸のみ繰り返し*/
}
-->
</style>
</head>
<body>
<table class="t1">←「class="t1"」を追加
<tr><td></td></tr>
</table>

IMGタグでテーブルの背景画像を繰り返す、というのがよく分からなかったのでご参考までに。。
    • good
    • 0
この回答へのお礼

ありがとうございました。

お礼日時:2007/03/21 06:50

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q同じものを繰り返し表示させる

下記の(1)のような「1」~「3」まで選択可能なセレクトメニューにおいて、
「1」を選択すると(2)の部分を1つ、「2」を選択すると(2)の部分を2つ、「3」を選択すると(2)の部分を3つ、表示させるようにしたいと思っています。
(2)の部分を3つ書き、JavaScriptを使用して(1)のセレクトメニューで選択した数によって、
(2)の部分を1つ表示させたり、2つ表示させたり、3つ表示させたりすることはできました。
しかし、3つならまだよいのですが、5つ、6つ、それ以上となると、
(2)の部分を5つ、6つも同じことを書くのは面倒で、無駄が多いように思います。
(2)の部分を1つだけ書いた上で、(1)の選択した数の分だけ(2)を表示させる方法はないでしょうか。
よろしくお願いいたします。

(1)--------------------------------
<select name="id">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
-----------------------------------

(2)--------------------------------
<table>
<tr>
<td>
<select name="number">
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
</select>
</td>
</tr>

<tr>
<td>
<select name="name">
<option value="sato">sato</option>
<option value="sakamoto">sakamoto</option>
<option value="hanada">hamada</option>
<option value="wakui">wakui</option>
</select>
</td>
</tr>
</table>
-----------------------------------

下記の(1)のような「1」~「3」まで選択可能なセレクトメニューにおいて、
「1」を選択すると(2)の部分を1つ、「2」を選択すると(2)の部分を2つ、「3」を選択すると(2)の部分を3つ、表示させるようにしたいと思っています。
(2)の部分を3つ書き、JavaScriptを使用して(1)のセレクトメニューで選択した数によって、
(2)の部分を1つ表示させたり、2つ表示させたり、3つ表示させたりすることはできました。
しかし、3つならまだよいのですが、5つ、6つ、それ以上となると、
(2)の部分を5つ、6つも同じことを書く...続きを読む

Aベストアンサー

いろいろやり方はあるでしょうけど、とりあえず
ただ同じデータを表示するなら以下のような感じで
繰り返し表示処理をするとよいでしょう。

selectタグの名前を変えたりするならもう少し
プログラム的な処理が必要になります。

<html>
<head>
<script language=javascript>
function view(){
var obj=document.getElementById('count');
var str="";
for(i=0;i<obj.value;i++){
str+=document.getElementById('hiddenArea').innerHTML;
}
document.getElementById('viewArea').innerHTML=str;
}
</script>
</head>
<body onLoad="view()">
<form>
<select id="count" onChange="view()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<div id="hiddenArea" style="display:none;">
<table>
<tr>
<td>
<select name="number">
<option value="1000">1000</option>
<option value="2000">2000</option>
<option value="3000">3000</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="name">
<option value="sato">sato</option>
<option value="sakamoto">sakamoto</option>
<option value="hanada">hamada</option>
<option value="wakui">wakui</option>
</select>
</td>
</tr>
</table>
</div>
<div id="viewArea"></div>
</body>
</html>

いろいろやり方はあるでしょうけど、とりあえず
ただ同じデータを表示するなら以下のような感じで
繰り返し表示処理をするとよいでしょう。

selectタグの名前を変えたりするならもう少し
プログラム的な処理が必要になります。

<html>
<head>
<script language=javascript>
function view(){
var obj=document.getElementById('count');
var str="";
for(i=0;i<obj.value;i++){
str+=document.getElementById('hiddenArea').innerHTML;
}
document.getElementById('viewArea').innerHTML=str;
...続きを読む

Q【HTMLタグ】画像を横に連続して貼るには

画像(リンク用)を横に連続して貼るタグを教えてください。

(リンクしない画像を横に貼るタグは分かります)


よろしくお願いします。

Aベストアンサー

<a href="リンク先"><img src="画像"></a>
を並べるだけです。
ただし、幅がないと改行されてしまいますから、
テーブルタグやCSSなどを利用して幅を確保しておきます。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Q同じ画像 複数回使用

htmlでの画像使用についての質問です。

サイト内で同じ画像を複数回使うとき(背景repeat等ではなく)、
いちいち<img src>で同じ画像をダウンロードさせるのは
記述が面倒だし、パフォーマンスも低下すると思うのですが、
何か良い方法はありませんでしょうか。

知っている方がいらっしゃったら教えていただけるとうれしいです
よろしくお願いします。

Aベストアンサー

ブラウザは、同じファイル・・は何度もダウンロードしません。

>記述が面倒だし、

 については、その画像が文書構造上は意味がないもののはずですから、スタイルシートで指定してやればすむことです。

 たとえば、風景写真のアルバムのように、風景写真が文書を構成する要素の場合は<object>ないし<img>でマークアップしますが、その見出しや枠やボタンとして使われるような文書構成に関係ない画像はスタイルシートで記述すればよい。

 たとえば<h2>(レベル2の)見出しに、アイコン画像をいちいち書くのは面倒なので
h2:before { content: url("../images/h2.gif");}
 とすればよい。ついでに背景も指定したけりゃ
h2:before {
content: url("../images/h2.gif");
background:url("../images/h2_back.gif") no-repeat top right;
}
とか、

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 


人気Q&Aランキング