現在、ホームページビルダー19でホームページを作成中です。
テンプレートから作成を始めたため、スタイルシートが組み込まれています。
右サイドの部分に、営業日カレンダーを入れたのですが、どうしても table width="150"> が効きません。
#hpb-aside{ width: 229px; →この229px以内に幅を納めたいのに、はみ出てしまいます。
cssには詳しくありません。cssファイルにそれらしい記述を探し、以下に貼り付けました。

どなたかわかる方がいらっしゃいましたら教えて下さい。



~html記述~
<div id="shopinfo">
<h3><span class="ja">営業日カレンダー</span></h3></div>
<table border="0" cellpadding="2" cellspacing="1" bgcolor="#666666" width="150">
<tr align="center" bgcolor="#FFFFFF">
<td colspan="7">2016年10月</td>
</tr>
<tr align="center" bgcolor="#CCCCCC">
<td>日</td>
<td>月</td>
<td>火</td>
<td>水</td>
<td>木</td>
<td>金</td>
<td>土</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td bgcolor="#FF9999">1</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td bgcolor="#FF9999">8</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">9</td>
<td bgcolor="#FF9999">10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td bgcolor="#FF9999">15</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td bgcolor="#FF9999">22</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td bgcolor="#FF9999">29</td>
</tr>
<tr align="center" bgcolor="#FFFFFF">
<td bgcolor="#FF9999">30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<font color="#FF9999">■</font>が定休日です。



~cssファイル記述①~
#shopinfo {

}

#shopinfo h3{
text-align: center;
font-size: 1.1em;
font-weight: normal;
line-height: 41px;
margin-top: 0;
margin-left: 0 ;
margin-bottom: 2px;
padding-right: 15px;
height: 41px;
background-image : url(../image/sideBg_8Fa.png);
background-position: left top;
background-repeat: no-repeat;
}

#shopinfo h3 span.ja{
font-size: 1em;
padding-left: 10px;
}

#shopinfo h4{
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
font-size: 1.1em;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #63bcdd;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #63bcdd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #63bcdd;
}

#shopinfo p{
margin-left: auto;
margin-right: auto;
margin-top: 0;
line-height: 1.5;
padding-left: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #63bcdd;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #63bcdd;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #63bcdd;
}

#shopinfo a{
line-height: 1.7;




~cssファイル記述②~
/* ========== aside ========== */

#hpb-aside #ranking ol li{
margin-bottom: 5px;
}

#hpb-aside #shopinfo .en{
display: none;
}

#hpb-aside #shopinfo{
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
background-image: -webkit-gradient( linear, left top, left bottom, from(#fff), to(#eee));
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
-webkit-border-radius: 2px;
}


}


~cssファイル記述③~
#hpb-aside{
width: 229px;
float: right;
padding-top: 20px;
}
.hpb-layoutset-02 #hpb-aside{
padding-top: 0px;
margin-top: -35px;



宜しくお願いいたします。

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

A 回答 (4件)

こんなシンプルなのものでよい。

わかりやすいのでメンテナンスも容易
ウィンドウの幅を変えても・・スマホでもそのまま利用できる。

[全文]
※ タブは_に置換してあるので戻す
※ Another HTML Lint( http://www.htmllint.net/html-lint/htmllint.cgi )
 で検証済み・・
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<title>サンプル</title>
_<meta name="author" content="ORUKA1951">
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rev="made" href="mailto:oruka1951&#64;hoge.com" title="send a mail" >
_<link rel="START" href="../index.html">
_<style type="text/css">
<!--
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.6em;}
p{text-indent:1em;}
div.header,div.section,div.footer{width:95%;min-width:630px;max-width:1000px;margin:0 auto;padding:5px;}
div.section{position:relative;}
div.aside{
position:absolute;top:0;right:0;width:150px;height:100%;padding:0 10px;
}
div.aside table[summary="営業カレンダー"]{
_width:100%;border-collapse:collapse;
_}
div.aside table[summary="営業カレンダー"] th,
div.aside table[summary="営業カレンダー"] td{
_border:solid 1px gray;text-align:center;
}
div.aside table[summary="営業カレンダー"] th{
_color:white;background-color:silver;
}
div.aside table[summary="営業カレンダー"] tr+tr td:first-child,
div.aside table[summary="営業カレンダー"] tr+tr td.holiday{
_background-color:fuchsia;
}
div.aside table[summary="営業カレンダー"] tr+tr td:last-child{
_background-color:aqua;
}
table[summary="営業カレンダー"] captopn{
font-size: 1.1em;line-height: 41px;margin: 0 0 2px 15px;
background: url(../image/sideBg_8Fa.png) no-repeat;}

div.aside h4{
margin:0 auto;
font-size: 1.1em;
padding:10px;
border: 1px solid #63bcdd;
}
div.aside p{
margin: 0 auto;
line-height: 1.5em;
padding: 5px 10px 10px 10px;
border: 1px solid #63bcdd;
border-bottom-width:0;
}
body>div.section{background-color:rgb(220,220,220);}
div.section div.aside{background-color:yellow;}
-->
_</style>
</head>
<body>
_<div class="header">
__<h1>タイトル</h1>
__<p>このページでは・・・・</p>
_</div>
_<div class="section">
__<h2>見出し</h2>
__<p>本文はsection</p>
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="aside" id="shopinfo">
___<table border="1" summary="営業カレンダー">
____<caption>営業日カレンダー</caption>
____<tbody>
_____<tr>
______<td colspan="7">2016年10月</td></tr>
_____<tr>
______<th abbr="SUN">日</th><th abbr="MON">月</th><th abbr="TUH">火</th><th abbr="WED">水</th><th abbr="THU">木</th><th abbr="FRY">金</th><th abbr="SAT">土</th>
_____</tr>
_____<tr>
______<td></td><td></td><td></td><td></td><td></td><td></td><td>1</td>
_____</tr>
_____<tr>
______<td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td>
_____</tr>
_____<tr>
______<td>9</td><td class="holiday">10</td><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
_____</tr>
_____<tr>
______<td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td><td>22</td>
_____</tr>
_____<tr>
______<td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td><td>29</td>
_____</tr>
_____<tr>
______<td>30</td><td>31</td><td></td><td></td><td></td><td></td><td></td>
_____</tr>
____</tbody>
___</table>
__</div>
_</div>
_<div class="footer">
__<h2>文書情報</h2>
__<dl class="documentHistry">
___<dt id="FIRST-PUBLISHED">First Published</dt>
___<dd>2013-03-03</dd>
__</dl>
_</div>
</body>
</html>
    • good
    • 0
この回答へのお礼

ORUKA1951さん、またまた丁寧に教えていただきありがとうございます。
サンプルまで教えていただき助かります

CSS使うときは、HTMLには文書構造しか書いていけないのですね。
勉強になります。

とりあえず時間がないので、htmlを以下へ変更して対応していますが、来月ひと段落したら、また読み返します。
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" width="150" style="table-layout : fixed;">横幅が小さくなり、とりあえずこれで一旦アップロードできそうです。

ご指摘通り、CSSの使い方自体、まだ初心者で、勉強の余地があります。
一から勉強しなおして、ORAKU1951さんのアドバイスを参考に修正したいと思います。

また質問・相談させていただくかもしれませんが、宜しくお願いいたします。今回はひとまず、有難うございました。

お礼日時:2016/09/21 02:09

相も変わらず、ビルダーは酷い!!ですね。


Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
でチェックしたら泣きたくなるでしょう。
 ホームページ・ビルダー - Wikipedia( https://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC … )
 個人ならともかく商用サイトには使わない。

CSS使うときは、HTMLには文書構造しか書いてはなりません。
 構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 今から17年前の勧告時から・・

<div class="aside" id="shopinfo">
 <table border="1" summary="営業カレンダー">
  <caption>営業日カレンダー</caption>
  <tbody>
   <tr>
    <td colspan="7">2016年10月</td></tr>
   <tr>
    <td>日</td><td>月</td><td>火</td><td>水</td><td>木</td><td>金</td><td>土</td>
   </tr>
・・・【中略】・・・
  </tbody>
 </table>
</div>
に対して
div.aside{
position:absolute;top:0;right:0;width:150px;height:100%}
div.aside table[summary="営業カレンダー"]{width:100%;}
だけで済む話です。

★ 幅はwidthは、デフォルとやではautoです。
★ 幅は抱合親ブロックを基準にしましょう。
 その場合、基準となるのはposition の値が static以外の直近の上位のブロックになります。
 すなわち、absolute,relative,fixed

サンプルは次回
    • good
    • 0
この回答へのお礼

ORUKA1951さん、ご丁寧にありがとうございます!

お礼日時:2016/09/21 02:09

その悩み分かります。

なんとか解決したような気がしますが、忘れました。

すみません。下のリンクが役に立つと思います。


https://www.google.co.jp/webhp?sourceid=chrome-i …
    • good
    • 0
この回答へのお礼

早速のアドバイス有難うございました。

リンク先で調べたところ、style="table-layout : fixed;" がキーワードの様だったので、
htmlファイルを以下へ変更しました。 
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" width="150" style="table-layout : fixed;">
横幅が小さくなり、とりあえずこれで一旦アップロードできそうです。

気になる点としては、ホームページビルダーの編集画面では横幅が変わらず、プレビュー画面で小さくなります。

更に勉強の余地がありそうなので、また行き詰ったら投稿させていただきます。

煮詰まっていたので、助かりました。ありがとうございました。

お礼日時:2016/09/18 12:11

一概にいえませんが、ボーダーやマージンも計算にいれてないと


狂います。
    • good
    • 0

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

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

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

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

QHoly shit!

Holy shit! このことばの意味を教えてください。
また、どんな時に使うことばなのでしょうか。

追伸

wing と win の発音は同じでしょうか。それとも微妙に違うのでしょうか。違うのであれば発音の違いを教えて下さい。

Aベストアンサー

http://eow.alc.co.jp/holy+shit/UTF-8/

Holy shitは上記のサイトにあるように、驚きとか罵倒する言葉です。
Fxxck よりも柔らかい表現ですが・・・

wing と win の発音は同じでしょうか。それとも微妙に違うのでしょうか。>>>

発音方法は全く異なります。

まずwin の発音から説明します。この最後の[n]音の発音は舌先が、上前歯の裏にしっかりと付けて発音します。私の知っている英会話の上級者の発音でも日本語の「ン」で発音する人がいます。そうするとネイティブの夫にはwingにきこえてしまいます。「ン」の発音は舌先が口内のどこにも触れてないからです。

しかるに、w(ing)の ~ingの発音は舌先は下あごにくっついたままですが、舌の後部が「グ」のように喉の奥がもりあがって、発声する鼻音です。従って吐く息は口から出さずに鼻からしか出ていません。この点上記のカナの「ン」に少し似ています。これに対して「グ」の発音は息が口からでます。

少し練習すれば簡単にできます。

Qtableの中にtableを作ると、width指定が機能しない

tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定したいのですが、うまくいきません。ソースを書いてみます。

例:
<table width=300>
<tr><td>

<table width=100>
<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><tr>
</table>

</td><td>

<table width=100>
<tr><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><tr>
</table>

</td><td>

<table width=100>
<tr><td>ccccccccccccccccccccccccccccccccccc</td><tr>
</table>

</td></tr>
</table>

width=300のテーブルの中にwidth=100のテーブルが3つできたのはいいのですが、width=100のテーブルの中に100pxを超える文字列を入れると100pxという値を無視してテーブルが横長くなってしまいます。
これを100pxという値に従わせるにはどうしたらいいでしょうか?

tableの中にtableを作り、中側にあるテーブルの列ごとにwidthを指定したいのですが、うまくいきません。ソースを書いてみます。

例:
<table width=300>
<tr><td>

<table width=100>
<tr><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><tr>
</table>

</td><td>

<table width=100>
<tr><td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td><tr>
</table>

</td><td>

<table width=100>
<tr><td>ccccccccccccccccccccccccccccccccccc</td><tr>
</table>

</td></tr>
</table>

width=300の...続きを読む

Aベストアンサー

連続する半角英数字が改行されていないだけではないですか?
自動改行の仕様はブラウザ依存らしいですが、連続した半角英数字が
自動改行されないのはどのブラウザも同じです。
日本語文字列を入れたり途中でスペースを入れて試してみてください。

Qshitの意味がよく分かりません。

That's that shit」ってどういう意味になるのでしょうか?

Aベストアンサー

こんばんは。

shit は下品な言葉であることはご存知でしょうが、
その意味はすごく広く、時と場合によって変わります。

下記の俗語辞書によれば、
"that shit" = ヤク(麻薬)
であるとのこと。
http://www.urbandictionary.com/define.php?term=that%27s%20that%20shit

以上、ご参考になりましたら。

Qwidth="150" に収まるように・・・

ドリームウェーバーでページを触っているんですが、メルマガ登録のソースをいじると送信ボタンが効かなくなります。以下のソース部分をwidth="150"の場所に収まるようにしてフォームを小さくして、別のページに貼り付けたいのですが・・・

<table border="0" cellpadding="5" cellspacing="2" width="53%" bgcolor="#8888cc">
<tr>
<td bgcolor="#ddddff">
<table border="0" cellpadding="0" cellspacing="2" width="100%">
<tr>
<td colspan="2" valign="top"><span class="m_p"><b>■登録申込み(購読無料)</b></span></td>
</tr>
<tr>
<td width="586" align="right"> <form action="http://e2.wingmailer.com/wingmailer/mr.cgi" method="post">
<input type="hidden" name="uid" value="E048">
<nobr>E-mail:</nobr></td>
<td width="130">
<input type="text" name="email" size="24">
</td>
</tr>
<tr>
<td width="586" align="right"><nobr>お名前:</nobr></td>
<td width="130">
<input type="text" name="opt1" size="24">
</td>
</tr>
<tr>
<INPUT TYPE="hidden" NAME="opt2" VALUE="エヴィエ">
<td width="586"> 
<input type="submit" value="購読する"></form>
</td>
</tr>
</table>
</td>
</tr>
</table>

ドリームウェーバーでページを触っているんですが、メルマガ登録のソースをいじると送信ボタンが効かなくなります。以下のソース部分をwidth="150"の場所に収まるようにしてフォームを小さくして、別のページに貼り付けたいのですが・・・

<table border="0" cellpadding="5" cellspacing="2" width="53%" bgcolor="#8888cc">
<tr>
<td bgcolor="#ddddff">
<table border="0" cellpadding="0" cellspacing="2" width="100%">
<tr>
<td co...続きを読む

Aベストアンサー

みなさんが言われているとおり
<table border="0" cellpadding="5" cellspacing="2" width="53%" bgcolor="#8888cc">
の53%を150に変更してください

なお、table内に<td width="586" align="right">や<td width="586">など
必要のない箇所はさくられたほうがソースきれいになりますよ
 nobrしてるし意味ないくらい幅とっても・・・

Q“You're the shit!”の意味は

“You're the shit!” という英文の意味は何でしょうか。
スラングで特別な意味があるのでしょうか。

Aベストアンサー

こんばんわ

この類の表現(言葉)は、時によって意味が180度変わります
#1の方の回答も#2の方の回答も正解だと思います(今はpositiveな意味のようですね 私もさっき知りました)
つまり、時と場合によって意味が変わると思います

日本語でも今、「ヤバイー」とか言いますよね
以前はnegative表現でしたが、今はどちらかというとpositiveに使っていますね

ちょっと古いかもしれませんが、awesomeという単語はもともと「恐ろしい」という意味で使われてました(aweという部分が含まれてることでわかりますね +someで形容詞ができあがります)が、今は「すんげー(かっこいいー)」的な意味です

このような単語の意味の変化というのは、いろんな言語で見られる現象のようです

ただ意味を知るだけにとどめて、使わないことをお薦めします
よっぽどネイティブに近いぐらい英語を習得しない限り、聞いている人は許してくれないでしょうね

QTABLE内でのwidth指定

<table>
<tr><th colspan="3">●</th></tr>
<tr><td class="1">■</td>
<td class="2">▲</td>
<td class="3">★</td></tr>

<tr><th colspan="3">○</th></tr>
<tr><td class="1">□</td>
<td class="2">△</td>
<td class="3">☆</td></tr>
</table>

このサンプルについて考えています。
●○が、割と長い文字列になります。

この時、例えば2段目の左の列が、■,□のうち長い方の文字列に合わせて「width」が表示されるためには、スタイル「class="1"」の内容をどう記述すれば良いのでしょうか。
デフォルトの「width:auto」では、●○の長さに引っ張られてしまい、余分なスペースが出来てしまいます。
2段目の中の列(▲△部分)が短文を記述するセルなので、●○に合わせる必要のあるスペースは、全てここで吸収してしまいたいのです。

同じ仕組みで幾つかテーブルを組みますので、【class="1"】のwidthにpx,%等といった値自体を指定するのは向いていません。

ご指導おねがいします。

<table>
<tr><th colspan="3">●</th></tr>
<tr><td class="1">■</td>
<td class="2">▲</td>
<td class="3">★</td></tr>

<tr><th colspan="3">○</th></tr>
<tr><td class="1">□</td>
<td class="2">△</td>
<td class="3">☆</td></tr>
</table>

このサンプルについて考えています。
●○が、割と長い文字列になります。

この時、例えば2段目の左の列が、■,□のうち長い方の文字列に合わせて「width」が表示されるためには、スタイル「class="1"」の内容をどう記述すれば良いので...続きを読む

Aベストアンサー

多くのブラウザに対応させるには、縦列の幅指定するしかないのかもしれません。

サンプルソースのスクリーンショット
http://www.dotup.org/uploda/www.dotup.org6435.png

-----[サンプルソース]-----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<style type="text/css">
body {
background-color: #ffffff;
color: #000000;
}
table.test{
background-color: #000000;
border: 1px solid #000000;
empty-cells: show;
border-spacing: 1px;
}
table.test td {
background-color: #ffffff;
color: #000000;
padding: 3px;
}
table.test col.l1 {
width: 3em;
}
table.test col.l2 {
width: 22em;
}
table.test col.l3 {
width: 5em;
}
</style>
<title>&lt;table&gt;要素テスト</title>
</head>
<body>
<h1>&lt;table&gt;要素テスト</h1>

<table summary="サンプルテーブル" class="test">
<colgroup>
<col class="l1">
<col class="l2">
<col class="l3">
</colgroup>
<tr>
<td colspan="3">●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●</td>
</tr>
<tr>
<td>■■■</td>
<td>▲▲▲▲</td>
<td>★★★★★</td>
</tr>
<tr>
<td colspan="3">○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○</td>
</tr>
<tr>
<td>□□□</td>
<td>△△△△</td>
<td>☆☆☆☆☆</td>
</tr>
</table>

</body>
</html>

多くのブラウザに対応させるには、縦列の幅指定するしかないのかもしれません。

サンプルソースのスクリーンショット
http://www.dotup.org/uploda/www.dotup.org6435.png

-----[サンプルソース]-----

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
...続きを読む

QGive a shitの意味。

外国人の友人がよく「give a shit」をよく使います。具体的な意味がわかりません。会話的には・・
「アイツはすぐ、~をするんだよ!みんな迷惑してるんだ。」
「本当は上司がアイツに Give a shit しなくちゃいけないのに言わないんだ。」的な会話で使っています。ニュアンス的に「注意する」とか、「忠告する」又は「文句を言う」だと理解していますが、日本語で言うところ、どんな意味になるのでしょう?また、この言葉は女性は使いますか?

Aベストアンサー

I don't give a shit = I don't care と訳すのが一番わかりやすいかと。
但し、肯定的には殆ど使われません。
上品な女性は使いません。
I don't give a damnも決して上品ではありませんが、似いている意味で使われます。

shitは驚くほど広い範囲で複雑な意味を持つbad wordの典型であるので、英辞郎on the Webでshitを検索すると色々でてきます。意味を理解するのはliving Englishとして重要ですが、使うべき単語・表現では無いことに注意してください。

参考URL:http://www.alc.co.jp/

QTableコーディング widthがうまく設定できません。

Tableコーディングをしていますが、うまくwidthの設定ができません。


以下ソースコードのテーブル部分になります。(html4で組んでます。)
<table cellspacing="0" cellpadding="0" width="780">
<tr><td colspan="3"><img src="Banner_big.jpg" width="780" height="200"><td></tr>
<tr><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td><td width="6"></td><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td></tr>
</table>

したい事としては、780px内に正確に小さい画像を2つ入込みたいのですが、画像が添付画像のようにずれてしまい<td width="6"></td>が大きくしまっているようです。

<td width="6"></td>を取れば、うまく画像は並ぶのですが、勉強を含め理解したいという目的もあります。

解決方法や、論理的な説明、大変申し訳ございませんがどなたかお願いできないでしょうか?

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

Tableコーディングをしていますが、うまくwidthの設定ができません。


以下ソースコードのテーブル部分になります。(html4で組んでます。)
<table cellspacing="0" cellpadding="0" width="780">
<tr><td colspan="3"><img src="Banner_big.jpg" width="780" height="200"><td></tr>
<tr><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td><td width="6"></td><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td></tr>
</table>

したい事として...続きを読む

Aベストアンサー

>Yahooストアにバナーを貼る為に、tableを組んでいました。
 それを先に言ってくれなきゃ・・(^^)

 なら、単純にHTMLの書き間違い。
<table cellspacing="0" cellpadding="0" width="780">
 <tr>
  <td colspan="3">
   <img src="Banner_big.jpg" width="780" height="200">
   <td>
 </tr>
 <tr>
  <td width="387">
   <img src="Banner_small.jpg" width="387" height="200">
   <td>
    <td width="6"></td>
    <td width="387">
     <img src="Banner_small.jpg" width="387" height="200">
     <td>
  </tr>
</table>

だとブラウザは
<table cellspacing="0" cellpadding="0" width="780">
 <tr>
  <td colspan="3">
   <img src="Banner_big.jpg" width="780" height="200">
   <table>
    <tr>
     <td>
     <td><!-- 補完 -->
    </tr>
    <tr>
     <td width="387">
      <img src="Banner_small.jpg" width="387" height="200">
     <table><!-- 補完 -->
      <tr><!-- 補完 -->
       <td width="6"></td>
       <td width="387">
        <img src="Banner_small.jpg" width="387" height="200">
        <table><!-- 補完 -->
         <tr><!-- 補完 -->
          <td>
          </td><!-- 補完 -->
         </tr>
</table>

>Yahooストアにバナーを貼る為に、tableを組んでいました。
 それを先に言ってくれなきゃ・・(^^)

 なら、単純にHTMLの書き間違い。
<table cellspacing="0" cellpadding="0" width="780">
 <tr>
  <td colspan="3">
   <img src="Banner_big.jpg" width="780" height="200">
   <td>
 </tr>
 <tr>
  <td width="387">
   <img src="Banner_small.jpg" width="387" height="200">
   <td>
    <td width="6"></td>
    <td width="387">
     <img src="Banner_small.jpg" wi...続きを読む

QI'm funny as shitの意味

I'm funny as shit の意味はなんですか?

よろしくお願いします。

Aベストアンサー

下品な言い回しですが、すごく面白いと言う意味です。
I am funny as f**k
も同じ意味です。

Q英字フォント時、

こんにちは。
DIVで、widthを指定し、幅を固定したいのですが、
どうしても文字列の幅まで、広がってしまいます。
これが、日本語フォントのときは、
固定されます。
やりたいことは、
DIVの幅を小さくし、一文字ずつ自動改行
させることにより、縦書きを実現したいのです。
(等幅フォントを使います)。

CSS部分~
.haccordion .header{
width: 20px; /*タブの幅*/
font-size:120%;
font-family:monospace
}

HTML部分~
<div class="haccordion">
<div class="header">こんにちは。</div>

これで、こんにちは。は、縦書きになります。
これを、HELLOとすると、横書きになってしまいます。

もう少しなのに、
困っています。
何か分かる人がいましたら、
よろしくお願いします。
ちなみに、ブラウザは、IE(7)です。

Aベストアンサー

IE限定で良ければ以下のような指定で縦書きにできます。
writing-mode: tb-rl;

div でやるなら1文字ごとにスペースを空ければ縦書きのようになります。
これは、単語の途中では折り返さないようになっているためです。
# 規格上、これが正しい動作かは確認してませんが。

日本語の場合は1文字=1単語とカウントされて折り返されるのだと思われます。
# 英語などと違って単語を認識するのが大変なので。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング