- 締切済み
横一列のみ表示したいのですがうまくいきません。
下記サイトを作っているのですが、横の仏像の背景を下から横一列のみ表示したいのですがうまくいきません。 下記二つをやってもうまくいきません。 親BOXのセレクタ { display:table-cell; vertical-align:bottom; } 親BOXのセレクタ { position:relative; // ← ※ } 子BOXのセレクタ { position: absolute; bottom: 0; } 下記サイトの場合親ボックスはhtmlになるのでしょうか？ http://sample1.digi2.jp/kindergarten/index.html
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
なぜ、table-cellなのか分かりません。 単純に記事全体の背景を一番下に設定すればよいだけです。 デザインのために、DIVを使うと反ってわからなくなりますよ。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 と書かれているように、あくまで、HTML4では不足していた文書構造を示す要素が不足していたために、その文書構造を補完するためのものです。 （HTML5では、文書構造を示す多くの要素が追加され、代わりにDIVは原則使うべきでない形に変わります。） HTMLの文書構造が <body> <header> </header> <section> 本文 </section> <footer> </footer> </body> HTML4.01(XHTML1.0)でしたら、それぞれ<div class="header">になるべきところ ※idでなくclassなのは、header,section,footerなどは複数回存在するはずなので・・ 構造とプレゼンテーションを分離すること。それが最も大事です。 （ある形にデザインしようとするときは、当然文書構造に則したものなので) そうすることで、製作もメンテナンスも楽になるし、デザインもずっと楽になります。 ★横の仏像の背景を下から横一列のみ表示したいのですがうまくいきません。 意味が通じません。 横とはどこに横ですか？？ Q: ページの最後のfooterの横ですか？ bodyの背景を最下段にrepeat-xで指定するだけで希望の物になるはずです。 footerに背景を指定してもよいです。 Q: headerの横ですか？ [サンプルHTML] HTML5を考慮してHTML4.01strictです。 ※本来背景であるはずのものは背景に回してある。 スタイルシートや画像を読み込まない検索エンジンやスクリーンリーダー、展示端末、携帯電話、スマホなどどんな端末でも利用できます。HTMLに不要なものは書かれていないので、書き足すのも修正するのも楽なはずです。 もちろん ・Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# ) でチェック済みです。 スタイルシートはまた暇が出来たら・・ その前に、上記の不明点を <!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"> <!-- --> ＿</style> </head> <body> ＿<div id="header"> ＿＿<h1>○△□園<span>東京都＊＊＊＊＊保育園</span></h1> ＿＿<div class="nav"> ＿＿＿<h2>サイトマップ</h2> ＿＿＿<ul> ＿＿＿ <li><a href="/">Top</a></li> ＿＿＿ <li><a href="/info">information</a></li> ＿＿＿ <li><a href="/polycy">polycy</a></li> ＿＿＿ <li><a href="/contact">contact us</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>園の案内</h2> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/annai">◎◎園の御案内</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li> 給食について</li> ＿＿＿＿＿＿<li>◎◎園で学べる事柄</li> ＿＿＿＿＿＿<li>一時保育・延長保育について</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/policy">保育方針</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>仏教精神</li> ＿＿＿＿＿＿<li>家庭的な雰囲気</li> ＿＿＿＿＿＿<li>共に育ちあう仏教精神</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/admittion">園児募集一時保育</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>子育て相談</li> ＿＿＿＿＿＿<li>延長保育</li> ＿＿＿＿＿＿<li>園児の姿をネット配信</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿＿<li><a href="/plan">毎日、年間計画</a> ＿＿＿＿＿<ul> ＿＿＿＿＿＿<li>一日の流れ</li> ＿＿＿＿＿＿<li>毎月の行事一覧</li> ＿＿＿＿＿</ul> ＿＿＿＿</li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h3>新着情報・お知らせ</h3> ＿＿＿<dl> ＿＿＿＿<dt>2012.12.14</dt> ＿＿＿＿<dd>体育教室,勤労感謝慰,手話おけいこ,避難訓練,観覧会,食育,七五三,落花生掘り,砂あそび,稲刈り,みそ作り,お店屋さんごっこ,手作りクッキング, お散歩,◎◎園まつり,ＡＢＣ教室の写真をアップしました♪ ＿＿＿＿</dd> ＿＿＿＿<dt>2012.11.6</dt> ＿＿＿＿<dd>体育教室,絵画造形教室,食育,手話おけいこ,お散歩,ABC教室,本堂お集まり,防火訓練,保育参観の写真をアップしました♪</dd> ＿＿＿＿<dt>2012.10.15</dt> ＿＿＿＿<dd>・・・【中略】・・・</dd> ＿＿＿</dl> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>関連情報</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="/appendix/safty">○△□園が行っている安全対策</a></li> ＿＿＿＿<li><a href="/appendix/shool">○△□園私立小学校</a></li> ＿＿＿＿<li><a href="/appendix/safty">○△□園が行っている安全対策</a></li> ＿＿＿＿<li><a href="/appendix/shool">○△□園私立小学校</a></li> ＿＿＿＿<li><a href="/appendix/safty">○△□園が行っている安全対策</a></li> ＿＿＿＿<li><a href="/appendix/shool">○△□園私立小学校</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>Copyright(C) 幼稚園サンプル 2012 - 2016 All Rights Reserved mailto:*****</address> ＿＿<address>宗教法人長福寺◎◎園 福岡県○○市**町○○***○○○<br>(TEL) 0942-**-****</address> ＿＿<address>園事務所<br>（TEL) 0942-**-****/FAX0942-**-****</address> ＿</div> </body> </html>
