現在、ホームページビルダー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;
宜しくお願いいたします。
A 回答 (4件)
- 最新から表示
- 回答順に表示
No.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@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>
ORUKA1951さん、またまた丁寧に教えていただきありがとうございます。
サンプルまで教えていただき助かります
CSS使うときは、HTMLには文書構造しか書いていけないのですね。
勉強になります。
とりあえず時間がないので、htmlを以下へ変更して対応していますが、来月ひと段落したら、また読み返します。
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" width="150" style="table-layout : fixed;">横幅が小さくなり、とりあえずこれで一旦アップロードできそうです。
ご指摘通り、CSSの使い方自体、まだ初心者で、勉強の余地があります。
一から勉強しなおして、ORAKU1951さんのアドバイスを参考に修正したいと思います。
また質問・相談させていただくかもしれませんが、宜しくお願いいたします。今回はひとまず、有難うございました。
No.3
- 回答日時:
相も変わらず、ビルダーは酷い!!ですね。
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
サンプルは次回
No.2
- 回答日時:
その悩み分かります。
なんとか解決したような気がしますが、忘れました。すみません。下のリンクが役に立つと思います。
https://www.google.co.jp/webhp?sourceid=chrome-i …
早速のアドバイス有難うございました。
リンク先で調べたところ、style="table-layout : fixed;" がキーワードの様だったので、
htmlファイルを以下へ変更しました。
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#666666" width="150" style="table-layout : fixed;">
横幅が小さくなり、とりあえずこれで一旦アップロードできそうです。
気になる点としては、ホームページビルダーの編集画面では横幅が変わらず、プレビュー画面で小さくなります。
更に勉強の余地がありそうなので、また行き詰ったら投稿させていただきます。
煮詰まっていたので、助かりました。ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
あるあるbotに投稿したけど採用されなかったあるある募集
あるあるbotに投稿したけど採用されなかったあるあるをこちらに投稿してください
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
html の divとtable の役割
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TRタグの余白をcssで設定するには
-
tableにul,または,olを入れられ...
-
値が0なら非表示にしたい
-
ホームページ 表の上の余白を...
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
-
テーブルの装飾
-
文字の中央そろえを一括で指定...
-
テーブルの表示がずれます
-
テーブルのヘッダとボディの幅...
-
テーブルの行の背景色をマウス...
-
htmlのtable内に画像
-
[CSS] tableの行の間隔をあける
-
テーブルのセルに画像をピッタ...
-
safariで特定条件下でデーブル...
-
Htmlのtd要素の中で半角の空...
-
divの中にtableを入れています...
-
ホームページビルダ14で、表の1...
-
テーブルの枠自体を折り曲げる
-
表の中の列の順番を入れ替える...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルの行を折りたたみたい...
-
tableにul,または,olを入れられ...
-
TRタグの余白をcssで設定するには
-
テーブルのヘッダとボディの幅...
-
テーブルの任意の列を非表示に...
-
cssで、表示されるテキストによ...
-
ホームページ 表の上の余白を...
-
tableでcolspanを使うと次行以...
-
中に<table></table>が使えるア...
-
html・cssで日付をキレイに揃え...
-
テーブルの行の高さを指定する...
-
テーブルタグのセルの幅の一部...
-
文字列が入っているtdを削除せ...
-
逆L字の表(table)組み
-
テーブルのセルに画像をピッタ...
-
EXCELのセル内にHTMLタグを含む...
-
テーブルタグの中に<ol><li>を...
-
HTML <td></td>タグ セル内余...
-
テーブルの表示がずれます
-
テーブルの装飾
おすすめ情報