親子におすすめの新型プラネタリウムとは?

メニューを作るために画像画像画像画像画像画像と並べた所、一番右端に隙間ができてしまいます。画像画像画像画像画像画像□←こんな感じの半角スペースです。画像と画像の間の余白はマージンを0に指定して削除できましたが、右端の余白はどうすれば削除できるんでしょうか?ちなみにメニューに使用した画像6個分の大きな画像を1つ貼った場合このような余白はできませんでした。

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

A 回答 (3件)

こんにちは。


コーディング環境でたまに見られる事例です。

<img><img><img><img><img><img>
<div>~</div>
<p>~</p>
というソースがあったとします。

↑最後の<img>で改行しました。
インライン要素である<img>の後ろに(ソース内)改行があると
それが半角スペースと認識されるケースがあります。
(↓■=半角スペース)

<img><img><img><img><img><img>■
<div>~</div>
<p>~</p>

また、

<img>
<img>
<img>
<img>
<img>
<img>

<div>~</div>
<p>~</p>

というソースを書くと、

<img>■
<img>■
<img>■
<img>■
<img>■
<img>■

<div>~</div>
<p>~</p>

となり、画像の後ろに必ず半角スペースが入ってしまう!というケースもあります。

これを防ぐには、

<img><img><img><img><img><img><div>~</div>
<p>~</p>

↑<img>で改行させずにタグを続けるか、

<div><img><img><img><img><img><img></div>
<div>~</div>
<p>~</p>

↑のようにブロック要素に入れてやると直ると思います。

見当違いな回答だったらごめんなさい。
参考になれば幸いです。
    • good
    • 1

えー、削除された質問に回答したものですが、


第一に画像がローカルのアドレスになっていたため、
まずそこから修正するといいと思います。
ところで、半角スペース1つ分がそこまで見た目に影響するのでしょうか。
    • good
    • 0

カテゴリーがブログになっているようですが、どこのブログですか?


それくらいは書いていただかないと、見ている側もどこのブログサイトを
お使いなのか、見当がつきません。

もしも、ブログでなくWeb作成のことなら
私なら、その画像を入れる表を作り、その中に
それぞれの画像を入れて、升目の大きさを画像の大きさに合わせます。
これのほうが、表示したときに配置を崩されずにすみますので。
    • good
    • 0

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

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

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

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

Q画像を縦に並べたら隙間ができることについて

画像を縦に並べたところ隙間ができてしまいます。

隙間無くくっつけたいのですがどうすればいいのでしょうか。



以下htmlです。

<img src="img/nakama_img01.gif" width="687" height="227" alt="画像1" /><br />
<img src="img/nakama_img02.gif" width="687" height="197" alt="画像2" /><br />
<img src="img/nakama_img03.gif" width="687" height="244" alt="画像3" />

<br />で改行せずくっつけてタグを並べても同じ結果でした。

よろしくお願いします。

Aベストアンサー

スタイルシートで次の1行を入れてください。

img { vertical-align: bottom; }

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方の隙間が開く。

QCSSで画像の横に余計な余白が・・・

質問させて下さい。

以下のようなソースを書いた時のことです。

HTML部分-------------------------------

<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>
<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>



CSS部分-------------------------------

#box-s{
width:300px;
float:right;
text-align:left;
border: 1px solid #000000;
clear: none;
margin: 2px;
padding: 4px;
}


と書くと、IEだと問題ないのですが、firefoxでみると画像の
右側の余白がかなり不自然に開くんです。
少しぐらいの崩れは良いのですが、、、あまりに違いすぎる
のでどなたかお助け願えないでしょうか。

質問させて下さい。

以下のようなソースを書いた時のことです。

HTML部分-------------------------------

<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>
<DIV id="box-s">
<img src="********" width="290" height="140" border="0" >
</DIV>



CSS部分-------------------------------

#box-s{
width:300px;
float:right;
text-align:left;
border: 1px solid #000000;
clear: none;
margin: 2px;
padding: 4px;
}


と書くと、IEだ...続きを読む

Aベストアンサー

表示内容のimgがwidth:290pxで、divがwidth:300pxの指定になっているので、そのようになります。

例えば、#box-sの指定でwidthを省略すれば、お望みの表示になりませんか?

質問には関係ないですが、idは唯一ということになっているので、ご提示のような場合はclassなどで指定するほうがよろしいかと…

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は指定しましょう

QCSSの左横に隙間ができてしまいます。

画像の左横に謎の隙間(8mmほど)ができて埋まりません。
そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。
padding や vartical-align、text-alignなど試してみましたが、ダメでした。

とても困っています、どなたかご教示くださいますようお願いいたします。

<< CSS >>
#header {
width:940px;
height:59px;
margin: 0 0 20px 0;
}
#logo {
width:300px;
height:59px;
float:left;
margin: 0 20px 0 0;
}

#menu {
width:620px;
height: 59px;
padding: 0;
margin: 0;
float:right;
}
#menu img {
padding-top:8px;
border:none;
}
#menu ul {
margin:0;
}
#menu ul li {
margin: 0px;
padding: 0px;
list-style-type: none;
display:inline;
float:left;
}

<< HTML >>
<div id="header">
<div id="logo">
<img src="img/logo.gif" width="298" height="59" alt="ロゴ">
</div><!-- /#logo -->

<div id="menu">
<ul>
<li><img src="img/btn_A.gif" width="194" height="51"></li>
<li><img src="img/btn_B.gif" width="140" height="51"></li>
<li><img src="img/btn_C.gif" width="149" height="51"></li>
<li><img src="img/btn_D.gif" width="137" height="51"></li>
</ul>
</div><!-- /#menu -->
</div><!-- /#header -->

画像の左横に謎の隙間(8mmほど)ができて埋まりません。
そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。
padding や vartical-align、text-alignなど試してみましたが、ダメでした。

とても困っています、どなたかご教示くださいますようお願いいたします。

<< CSS >>
#header {
width:940px;
height:59px;
margin: 0 0 20px 0;
}
#logo {
width:300px;
height:59px;
float:left;
margin: 0 20px 0 0;
}

#menu {
width:620px;
height: 59px;
padding: 0;
margin: 0;
float:right;
}
#...続きを読む

Aベストアンサー

リストの整形はぶらうざによって差があります。ul要素やli要素に、またmarginで左を空けていたり、パディングで空けていたりします。
そのため、
#menue ul,#menue ul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;line-height:20px;
}
のようにセレクタをグループ化してまとめておけば、ブラウザ間の差を吸収できます。
そのうえで、
#menue ul li{display:inline;}
または
#menue ul li{float:left;}
です。floatの場合はblockのまま、inline-blockの場合は、text-align:centerで横に並べます。
 この場合
「ユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )」
という仕様--ルールのためli間にスペースができます。white-spaceに
normal,pre,nowrap,pre-wrap,pre-lineのいずれを指定しても・・
 そのためHTMLを
<ul><li><img src="img/btn_A.gif" width="194" height="51"></li><li>
<img src="img/btn_B.gif" width="140" height="51"></li><li>
<img src="img/btn_C.gif" width="149" height="51"></li><li><img src="img/btn_D.gif" width="137" height="51"></li></ul>
とかくことになります。

 なお、
#menue ul li{width:23%;position:relative;}
#menue ul li a{display:block;width:100%;height:100%;text-decoration:none;}
#menue ul li img{display:block;width:100%;height:100%;}
とすると、ウィンドウ幅に合わせて伸縮しますから、そもそもの悩みはなくなります。





この場合でも、

リストの整形はぶらうざによって差があります。ul要素やli要素に、またmarginで左を空けていたり、パディングで空けていたりします。
そのため、
#menue ul,#menue ul li{
display:block;list-style:none;
margin:0;padding:0;
text-align:center;line-height:20px;
}
のようにセレクタをグループ化してまとめておけば、ブラウザ間の差を吸収できます。
そのうえで、
#menue ul li{display:inline;}
または
#menue ul li{float:left;}
です。floatの場合はblockのまま、inline-blockの場合は、text-align:centerで...続きを読む

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="...続きを読む

QCSS、width100%でもできる余白

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<div id="logo"></div>
<div id="menu"><ul><li>home</li><li>profile</li><li>works</li></ul></div>
</div>
</div>
<div id="contents"><div class="centerbox">contents</div></div>

<div id="footer"><div class="centerbox">footer</div></div>

</body>
</html>


CSS

body{color:white; width:100%;}
.centerbox{width:500px; height:100%;}
a:hover{background-color:red;}

/*base layout*/
#header{width:100%; height:auto; text-align:center; background-color:black;}
#lang{text-align:right;}
#lang li{list-style:none; display:inline; margin-left:10px}
#logo{float:left; width:150px; height:80px; background-color:white;}
#menu{text-aign:right; margin-top:50px;}
#menu li{list-style:none; display:inline; margin-left:10px}
#contents{width:100%; height:300px; background-color:gray; text-align:center; border-top:6px double yellow; border-bottom:6px double yellow;}
#footer{width:100%; height:100px; text-align:center; background-color:black;}

CSSに関する質問です。
上下に三分割し、中央の繰り返し背景を横一杯に広げたいのですか、幅を100%にしても余白が出来てしまいます。
どうすれば中央の背景を横一杯に広げることが出来るでしょうか?

また、ヘッダーのHeightをAutoにしているのに、なぜかロゴの下に余白ができます。

コードは以下のとおりです。

HTML

<html>
<head><link rel="stylesheet" type="text/css" href="css.css" /></head>
<body>

<div id="header">
<div class="centerbox">
<div id="lang"><ul><li>EN</li><li>CZ</li></div>
<di...続きを読む

Aベストアンサー

スタイルシートの書き始めに、
html,body{margin:0;padding:0;}
の一行を入れておくようにすれば回避できます。
 これは常に入れておきましょう。

 なお、今後のために・・・どの部分が影響しているかは
*{border:solid 1px red;}
を入れてみると、わかりやすいです。

また、firefoxの開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/developer_tools/ )にあるFirebug | Firefox アドオン | Mozilla Japan の公式アドオン紹介サイト ( https://addons.mozilla.jp/firefox/details/1843 )を使うと、このあたりがよくわかると思います。

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の方も修正する方法でもよけ...続きを読む

Q画像とテーブルの隙間をなくす。

トップページ一番上に画像を配置し、その下に表を載せ、その表の中にコンテンツを掲載しようと思っています。
ソースはこんな感じです。

<IMG src="images/obj_top_main.jpg" width="860" height="210" border="0">
<TABLE border="0" width="860" height="100%" cellpadding="0" cellspacing="0">
<TR>
<TD bgcolor="#ffffff">ここにコンテンツ</TD>
</TR>
</TABLE>


この、「画像と表の間」を0にして付けたいのですが、方法がわかりません。
CSSで出来そうな気がするのですが…
方法があれば教えてください。

Aベストアンサー

テーブルにクラスをつけて、

.クラス名{margin-top:0px;}

とするとどうでしょうか。

若しくは、画像とテーブルの幅が同じなので、画像をテーブルの中に入れてしまうという手もあると思います。

Qtable内で画像と文字をセンター合わせするには?

HTMLについて質問が御座います。

直接HTML内のtableに画像とテキストを配置した場合に、画像も文字も上下センター合わせにしたいのですが上手くいきません…。

例えば以下ですと…

<table>
<tr>
<td>
<img src="hoge"> ここにはテキスト
</td>
</tr>
</table>

とある場合に、それぞれをセンターで合わせる方法は可能でしょうか?

文字だけの場合、vertical-alignで出来るのですが文字が一緒にいると上手くいきません。
今回は背景での指定は行いたくないです。

お分かりになる方いらっしゃいましたらアドバイスよろしくお願いいたします。

Aベストアンサー

td{vartical-align:middle;}
td img{display: inline-block;vertical-align: middle;}


人気Q&Aランキング