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

htmlでホームページを作っています。
リンクつきのバナーをページに2個ずつ
□  □
□  □
↑このような感じで並べようと思い、
<img align="left" src="画像url" alt="名前" border="0">
<img align="right" src="画像url" alt="名前" border="0">
で並べてみました。
横の間隔はこれでうまく言っているのですが、
これを縦に並べていく時、上のバナーと下のバナーがくっついてしまいます。
そこにも一行分くらいの間隔を開けたいです。どうすればいいでしょうか?

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

A 回答 (3件)

連投ご無礼します。


ご質問の件だけなら、imgタグ内に hspace="20" vspace="20" でできますね。
数値は適当に試してください。
表でcellpading="20"とかcellspacing="20" とかでも可能かと思います
    • good
    • 0

上下のバナーを一つに括って、行間を padding または margin で指定しては如何でしょうか



<style>
aside { float:right; }
aside ul { list-style-type:none; margin:0; padding:0; }
aside ul li { padding:0.5em; }
</style>

<aside><ul>
<li><a href><img src></a>
<li><a href><img src></a>
</ul></aside>
    • good
    • 0

テーブルタグ使ったら、いかがですか?


<table border="0" width="600">
<tr><td><a href="http://xxx">
<img src="画像url" alt="名前" border="0"></a></td>
><td><a href="http://xxx">
<img src="画像url" alt="名前" border="0"></a></td></tr>

これで、<tr></tr>間を繰り返し、最後に</table>
となります。
widthはたまたま600にしましたが、<td width="300">を前提にしてますから
imgにも幅設定して、それに合わせてください。
表の真ん中にimgを配置するなら、それぞれの前に
<p align="center">を配置すればきれいに仕上がります。
    • good
    • 0

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

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

このQ&Aを見た人はこんなQ&Aも見ています

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

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

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ホームページで画像を横に並べるには?

ホームページ作成超初心者です。
初歩的な質問で恐縮です。

ホームページに画像を横に並べて(左→右)表示させたいと思っています。

<img src="画像ファイルのURL">
というHTMLで画像を表示できるところまでわかったのですが、続けて入れると画像が縦に並んでしまいます。

ド素人で申し訳ないですが、どなたか方法を教えて頂けませんか?
よろしくお願いいたします。

Aベストアンサー

<img src="画像ファイルのURL"><img src="画像ファイルのURL"><img src="画像ファイルのURL">・・・


とした場合、横に並びますよ
ただし、画像のサイズとブラウザサイズにもよりますが・・・

ブラウザサイズを無視して横に並べたいのであればTableを組んでしまうのも手です

<table>
<tr>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
<td><img src="画像ファイルのURL"></td>
</tr>
</table>

これで、横に並べれます


あと、アドバイス
<img src="画像ファイルのURL"> → <img src="画像ファイルのURL" width="横寸法" height="縦寸法" alt="画像の名前">
のように、width、height、altは指定しましょう

Q画像を複数横に並べ、かつそれぞれの画像の下に文字を表示する

はじめまして!!質問のとおりです。

画像を横に複数表示しつつ、さらにそれぞれの画像の下に文字を表示(それそれの画像の横幅の範囲内に)するには、どうすればいいのでしょうか??

回答よろしくお願いしますm(_ _)m

Aベストアンサー

TABLEタグで横並びの1画像ずつ区切ってみてはいかがでしょう?
最小の画像横幅より狭くTD の幅指定をして画像の下に回り込みで
テキストを入れる形を取りborder=0に指定すれば罫線は表示されません。

http://www.geocities.co.jp/SiliconValley-Bay/7770/file/hf.html
http://www.tagindex.com/hp_guide/menu/02.html

Q画像を縦に4つ並べたい場合

2カラムのレイアウトのページを作成しています。
左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。

現在は
<p><img src="画像ファイル.jpg" /></p>
↑これを4つ書いています。

テーブルタグを使うと便利だと思ったのですが、レイアウト目的でテーブルを使うのはあまりよくないと聞きました。

また、画像と画像の間に10px位のスペースを空けたいです。(brは使いたくありません)

よい方法があれば教えていただけませんでしょうか。
何卒よろしくお願いします(>_<)

Aベストアンサー

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="画像ファイル.jpg" /></p>
>↑これを4つ書いています。

 とは考えないのです。ここをクリアできると、HTMLもスタイルシートも簡単になり、また本当にすばらしいデザインへの道も開けます。原則に忠実になるとデザイン性が失われると、曲解される人がいますが実際は逆です。
【引用】____________ここから
スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )]より

 前置きが長くなりましたが、次のように考えられるようになった最初のステップは卒業です。
★4項目程度の目次と本文からなるページがあります。
★これを、右側に画像として項目を立てに配置して、その左に本文を並べたい
 結果は同じですが、過程がまったく異なりますね。

具体的には、
「HTMLでリストとして目次をマークアップしてあるのだが、それを本文の左にたてに画像ボタンのように表示したい」と考えます。
 すなわち
<div class="section"><!-- 本文を示すclass名 -->
 <div class="section" id="section1">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section2">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section3">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div class="section" id="section4">
  <h1>見だし</h1>
  <p>記事</p>
 </div>
 <div id="contentTable">
  <ol>
   <li><a href="section1">セクション1</a></li>
   <li><a href="section2">セクション2</a></li>
   <li><a href="section3">セクション3</a></li>
   <li><a href="section4">セクション4</a></li>
  </ol>
 </div>
</div><!-- 本文終わり -->
とマークアップされているとすると・・・これなら簡単でしょう。
スタイルシートで
div.section{position:relative;}
#contentTable{position:absolute;top0;left:0;width:20%;text-align:center;}
div.section div.section{margin-left:21%;}
#contentTable ol,#contentTable ol li{list-style:none;display:block;margin:0;padding:0;}
#contentTable ol li{background-color:yellow;position:relative;}
#contentTable ol li+li{margin-top:10px;}

とします。
画像は指定していませんが、「セクション1」などの文字の代わりに<img src="***" width="180" height="20" alt="セクション1">とかにして、
#contentTable ol li img{display:block;width:100%;height:auto;}
とすると、ウィンドウ幅に関係なく、常に本文の20%幅の画像が表示されるでしょう。

 1999年当時の古いHTMLの書き方とは、すこし違うと思いますが、逆にとても楽になるはずです。HTMLはそのままで、ボタンを横に並べたり、プルダウンで細かい項目を出したり、リンク先の写真を登場させたりなどが、HTMLを書き換えなくてもできるようになります。

初心者の方だと思います。
 最初の最初にしっかり身につけて置いていただきたいのは、HTMLは文書構造を記述するもので、スタイルシートはそれをどのように表現(プレゼンテーション)するかを指定するものです。HTML5の勧告を目前にした今、とても重要な考え方です。
 いわゆるtableを文書の整形の為だけに用いてはならない。はそのひとつにしか過ぎません。

>2カラムのレイアウトのページを作成しています。
>左にメニューを持ってきたいため、アイコン画像を縦に4つ並べたいです。
>現在は
><p><img src="...続きを読む

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qテーブルの横に画像を

テーブルのすぐ隣に画像を表示させるには、どうしたら良いでしょうか?

教えてください。

よろしくお願いします。

□…テーブル ★…画像

□★

こんな感じです。

Aベストアンサー

<img src="***.png" alt="**" style="float:right">
<table>
<tr><td>***</td></tr>
</table>

<table style="float:left">
<tr><td>***</td></tr>
</table>
<img src="***.png" alt="**">

こんな風にすると良いかも。

Q2列に表示させたい

お世話になります。HTML初心者で教えていただきたいのですが、よろしくお願いします。
以下のタグで、「月別来館者数の推移」まで表示できたら、次の表は3cm程間を空けて右に表示させたいのですが、
タグをどのようにすればいいのでしょうか。
タグを直していただければ助かります。
よろしくお願いします。



 <tbody>
<tr>
<td width="200" valign="Top" class="normal">
<p><span class="textitle"><font size="2"><b>
来館者数</b></font></span><br>
<br>
<font size="2">平成17年○月分<br>
<br>
<font size="2">月別来館者数の推移</font></p>
</td>

</tbody>
</table>

<font size="2">平成  年  月  日現在</font></tr>
<table border="1" bordercolor="black" vspace="5" hspace="30" align="Left">
<tbody>
<tr>
<td align="Center" width="70"><font size="2">資料1</font></td>
<td align="Center" width="70"><font size="2">約   冊</font></td>
</tr>
<tr>
<td align="Center" width="70"><font size="2">資料2</font></td>
<td align="Center" width="70"><font size="2">約   題</font></td>
</tr>
<tr>

</tbody>
</table>

お世話になります。HTML初心者で教えていただきたいのですが、よろしくお願いします。
以下のタグで、「月別来館者数の推移」まで表示できたら、次の表は3cm程間を空けて右に表示させたいのですが、
タグをどのようにすればいいのでしょうか。
タグを直していただければ助かります。
よろしくお願いします。



 <tbody>
<tr>
<td width="200" valign="Top" class="normal">
<p><span class="textitle"><font size="2"><b>
来館者数</b></font></span><br>
<br>
...続きを読む

Aベストアンサー

ちょっと雑になっちゃいましたが・・・

<table width="500">
<tbody>
<tr>
<td width="200" valign="Top" class="normal">
<p><span class="textitle"><font size="2"><b>
来館者数</b></font></span><br>
<br>
<font size="2">平成17年○月分<br>
<br>
<font size="2">月別来館者数の推移</font></p>
</font>
</td>

<td width="67" valign="Top" class="normal">
<font size="2">       </font>
</td>

<td width="200" valign="Top" class="normal">

<font size="2">平成  年  月  日現在</font>
<table border="1" bordercolor="black" vspace="5" hspace="30" align="Left">
<tbody>
<tr>
<td align="Center" width="70"><font size="2">資料1</font></td>
<td align="Center" width="70"><font size="2">約   冊</font></td>
</tr>
<tr>
<td align="Center" width="70"><font size="2">資料2</font></td>
<td align="Center" width="70"><font size="2">約   題</font></td>
</tr>
<tr>

</tbody>
</table>
<p> 
</td>

</tbody>
</table>

ちょっと雑になっちゃいましたが・・・

<table width="500">
<tbody>
<tr>
<td width="200" valign="Top" class="normal">
<p><span class="textitle"><font size="2"><b>
来館者数</b></font></span><br>
<br>
<font size="2">平成17年○月分<br>
<br>
<font size="2">月別来館者数の推移</font></p>
</font>
</td>

<td width="67" valign="Top" class="normal">
<font size="2">       </font>
</td>

<td width="200" valign="Top" class="normal">

<font size="2">平成  年...続きを読む

Qイラストレーターに取り込んだ画像の白い部分を透明にできますか?

例えば図面などのデータがあったとした場合、その線の部分、つまり黒い部分だけを残し、残りの白紙部分を全て透明にすることはできますか?
以前フォトショップで白紙部分をDeleteして透明にし、それをtifで保存すればイラストレーターに持ってきてもその部分は透明なまま作業ができると聞いたことがあったのですが、やってみてもできませんでした。
画像の白紙部分を簡単に透明にできる方法がありましたら教えていただければと思います。

Aベストアンサー

Illustrator 上に、すでに配置されている白黒画像であれば、画像を選択して、透明を「乗算」 に変更してみてください。
画像の下のパスが、透けて見えます。

QCSSで画像を均等に横並びに配置するには?

テーブルを使わずに、CSSで画像を自由に配置する方法がわからず困っています。
下記のようなイメージで配置したいです。6列。行は可変。
■…画像
画像の数に応じて、はみだした画像は自動的に下に改行される感じです。

■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■

HMTLソースは以下のとおりです。

<ul>
<li><a href="*"><img src="img/01.jpg" /></a></li>
<li><a href="*"><img src="img/02.jpg" /></a></li>
<li><a href="*"><img src="img/03.jpg" /></a></li>
<li><a href="*"><img src="img/04.jpg" /></a></li>
<li><a href="*"><img src="img/05.jpg" /></a></li>
<li><a href="*"><img src="img/06.jpg" /></a></li>
<li><a href="*"><img src="img/07.jpg" /></a></li>
<li><a href="*"><img src="img/08.jpg" /></a></li>
<li><a href="*"><img src="img/09.jpg" /></a></li>
<li><a href="*"><img src="img/10.jpg" /></a></li>
<li><a href="*"><img src="img/11.jpg" /></a></li>
</ul>

どのようにCSSを定義すればスマートでしょうか?
よろしくお願いします。

テーブルを使わずに、CSSで画像を自由に配置する方法がわからず困っています。
下記のようなイメージで配置したいです。6列。行は可変。
■…画像
画像の数に応じて、はみだした画像は自動的に下に改行される感じです。

■ ■ ■ ■ ■ ■
■ ■ ■ ■ ■

HMTLソースは以下のとおりです。

<ul>
<li><a href="*"><img src="img/01.jpg" /></a></li>
<li><a href="*"><img src="img/02.jpg" /></a></li>
<li><a href="*"><img src="img/03.jpg" /></a></li>
<li><a href="*"><img src="img/04.jpg" /><...続きを読む

Aベストアンサー

列数も考慮して画像の大きさや均等、隙間も考えなければいけませんが、
方法は沢山ありますのでお好みです。
ul li でリストを使うのでしょうか?
ul li だと縦並びになるのでリストをCSSでつくるなら横並びに設定します。
li {float: left; margin: 0 20px 20px 0; padding: 0; list-style:none; }
イメージはこんな感じでmarginの数値を調整すれば隙間が出来て列数を上手く調整。
----------------------------------------------------------

下記が一番単純な方法

.xxx img{ margin: 0 20px 20px 0; border-style: none; }

<div class="xxx">
<a href="*"><img src="img/01.jpg" /></a>
<a href="*"><img src="img/02.jpg" /></a>
<a href="*"><img src="img/03.jpg" /></a>
<a href="*"><img src="img/04.jpg" /></a>
<a href="*"><img src="img/05.jpg" /></a>
<a href="*"><img src="img/06.jpg" /></a>
<a href="*"><img src="img/07.jpg" /></a>
<a href="*"><img src="img/08.jpg" /></a>
<a href="*"><img src="img/09.jpg" /></a>
<a href="*"><img src="img/10.jpg" /></a>
<a href="*"><img src="img/11.jpg" /></a>
</div>
-----------------------------------------
隙間nargin値の調整やdiv枠のwidthで幅を調整したりして6列にすれば良い。
質問の意味がイメージと違っていましたか?

列数も考慮して画像の大きさや均等、隙間も考えなければいけませんが、
方法は沢山ありますのでお好みです。
ul li でリストを使うのでしょうか?
ul li だと縦並びになるのでリストをCSSでつくるなら横並びに設定します。
li {float: left; margin: 0 20px 20px 0; padding: 0; list-style:none; }
イメージはこんな感じでmarginの数値を調整すれば隙間が出来て列数を上手く調整。
----------------------------------------------------------

下記が一番単純な方法

.xxx img{ margin: 0 20px 20p...続きを読む


人気Q&Aランキング