- 締切済み
幅を可変にし2段組をCSSで組む場合どうしたらよい
下のような表をCSSでtableを使わずに組むにはどうしたらよいのでしょうか。 ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿__ | | | | 文字列AAAAAAAAA | ____________ _________ | | | | | | | | | 文字列BBBBBBBBB | |★img | |★img | | |＿＿＿＿＿＿＿＿＿＿|___|＿＿_＿|__|_________|__| 枠線がまがってしまいましたが、上記の位置関係で実施にはborderはありません。 この文字列AAAAAAAAAAAはページによって可変なので幅を指定したくありません。 文字列のすぐ後ろぐらいにイメージが来るようにしたいと思います。 左側のタイトルが2行の横にイメージがきます。 イメージは文字列Bの下のラインにそろうように 配置したいのです。いくつか試したのですが、 imgが下方向にいかないのと、 文字列BBBBBBBBBBBBBBB 部分の左側の幅が可変にできません。何か良い方法はないでしょうか。 <h1 id="title"> <ul id="ultitle"> <li class="gloap">文字列AAAAAAAAAAAAAAA </li> <li>文字列BBBBBBBBBBBBBBB </li> </ul> </h1> <p id="icon"><img 1><img 2></p> のようにしました。CSSを色々書きましたが上手くいきませんよろしくお願い致します。 上の表が崩れてしまいましたので、イメージ画像を添付します。 よろしくお願い致します。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<!-- /* ナビ画像も伸縮させる */ html,body{margin:0;padding:0;} div.header,div.section,div.footer{width:100%;min-width:480px;max-width:900px;margin:0 auto;} div.header{position:relative;} div.header h1,div.header div.abstract{ ＿margin-right:30%;/* 幅固定ならpxを */ } div.header div.nav{ ＿position:absolute;top:0;right:0; ＿width:29%;/* 幅固定ならpxを */ ＿height:100%; } div.header div.nav ul{ ＿position:absolute; ＿bottom:0; ＿width:100%; } div.header div.nav ul,div.header div.nav ul li{display:block;list-style-type:none;margin:0;padding:0; } div.header div.nav ul li{float:left;width:49%;position:relative;margin-left:1%;} div.header div.nav ul li img{display:block;width:100%;height:auto;} /* 色分け */ body{background-color:gray;} div.header,div.footer{background-color:silver;} div.section{background-color:white;} div.header div.nav{background-color:yellow;} --> 基本は、No.1の考え方と同じです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.1です。 よく見るとこれは、h1があるのでheader部分ですか？ 先に文書構造がわからないと書きましたが、それでしたらHTML自体が間違っています。 ★メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_input ) h1はheading要素ですが、内部には%inlineしかもてません。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 7.5.5 見出し: H1、H2、H3、H4、H5、H6要素 <!ENTITY % heading "H1|H2|H3|H4|H5|H6"> <!-- There are six levels of headings from H1 (the most important) to H6 (the least important). --> <!ELEMENT (%heading;) - - (%inline;)* -- heading --> ^^^^^^^^^^←内容の種類 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-H1 )］より HTMLが間違っている場合、ブラウザは何とかそれを表示しようと、次のブロック要素、この場合<ul>が登場した時点で、ここに</h1>を付け加えるなどの対策をとります。この処理はブラウザによって異なるため、ブラウザ間で大きな差が出てきます。 もちろんスタイルシートを適用させるためのDIMも期待したものと変わってしまいます。 いずれにしても、スタイルシートを期待通り適用させるためには、正統なHTMLが絶対条件です。(HTML5では、この様なエラー時の処理DOM解釈は統一されることになります。) これがその文書のheaderに当たるもので、『左側のタイトルが2行の横にイメージがきます。』ということは見出し<h1>～<h6>でマークアップされるべき要素が二つあるということですから・・ <body> <div class="header"> <div class="hgroup"> <h1>見出し</h1> <h2>見出し</h2> <p>記事</p> </div> <div class="nav"> <ul> <li><a href=""><img src="" width="" height="" alt=""></a></li> <li><a href=""><img src="" width="" height="" alt=""></a></li> </ul> </div> </div> <div class="section"> ・・・・・・・・・・・ とかになるはずです。どのような内容かによって、このマークアップは変わります。私にはわかりません。 ※HTML5では、見出し<h1>～<h6>は、ひとつのセクショニングブロックに対してひとつしか登場しない原則ですから、それから類推すると上のようにhgroupで囲むか、 <body> <div class="header"> <h1>見出し</h1> <div class="abstract"> <h2>要約</h2> <p>記事</p> </div> <div class="nav"> <ul> <li><a href=""><img src="" width="" height="" alt=""></a></li> <li><a href=""><img src="" width="" height="" alt=""></a></li> </ul> </div> </div> <div class="section"> ・・・・・・ になるはずです。★<li>はリストの項目(すなわち等価)です。必要なら<dl><dt>でマークアップしましょう。 HTML５的には、 <body> <header> <hgroup> <h1>見出し</h1> <h2>見出し</h2> <p>記事</p> </hgroup> <nav> <ul> <li><a href=""><img src="" width="" height="" alt=""></a></li> <li><a href=""><img src="" width="" height="" alt=""></a></li> </ul> </nav> </header> <section> ・・・・・・・・・・・ とかになるはずです。どのような内容かによって、このマークアップは変わります。私にはわかりません。 ※HTML5では、見出し<h1>～<h6>は、ひとつのセクショニングブロックに対してひとつしか登場しない原則ですから、それから類推すると上のようにhgroupで囲むか、 <body> <header> <h1>見出し</h1> <div class="abstract"> <h2>要約</h2> <p>記事</p> </div> <nav> <ul> <li><a href=""><img src="" width="" height="" alt=""></a></li> <li><a href=""><img src="" width="" height="" alt=""></a></li> </ul> </nav> </header> <section> ・・・・・・ ★これで、誰でも文書構造は理解できるでしょう。もちろんgoogleも理解してくれますし、スタイルシートを書くのも、数年後に修正するのも簡単になるはずです。 <!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 class="header"> ＿＿<h1>幅を可変にし2段組をCSSで組む場合どうしたらよい</h1> ＿＿<div class="abstract"> ＿＿＿<h2>要約</h2> ＿＿＿<p>文書のヘッダの右横に、二つの画像によるナビゲーションリンクを横に並べて配置し、かつリキッドスタイルでデザインしたい。</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href=""><img src="./images/LogoRed.gif" width="80" height="80" alt=""></a></li> ＿＿＿＿<li><a href=""><img src="./images/aomori.gif" width="80" height="60" alt=""></a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2001 - 2004 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
マークアップで文書構造がわからないので、書き直してみます。 ・・・HTMLは文書構造をマークアップするものです。 <div class="section"> <h2>章見出し</h2> <p>記事</p> <p>記事</p> <p>記事</p> <div class="figurer"> <p><img><img></p> </div> </div> ・・・HTML5で記述すると <section> <h2>章見出し</h2> <p>記事</p> <p>記事</p> <p>記事</p> <figurer> <p><img><img></p> </figure> </section> ・・・となりますかね。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML4.01仕様書「7.5.4要素のグループ化: DIV要素とSPAN要素」( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTML5 における HTML4 からの変更点「3.1.新しい要素」( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )］より ここで、ひとつのsectionごとに、その挿絵(figure)を右下に配置するわけですから、 div.section{position:relative;} div.section h2,div.section p{margin-right:40%;} div.section div.figure{position:absolute;height:100%;width:38%;top:0;right:0;} div.section div.figure p{margin-right:0;position:absolute;bottom:0;} とか・・・。 いずれにしても、もう少し詳しい条件が必要です。 1)画像は常に二つあるのか？ 2)画像のサイズも伸縮させる必要があるのか？ 3)sectionやfigureに最大サイズ/最小サイズが必要なのか 4)sectionは常にfigureより長いのか ・・・・ figureは、通常は該当記事の前においてfloatさせるのが普通です(floatはそのためにある)が、なぜそうしないのですか？ [例] <section> <h2>見出し</h2> <section> <h3>見出し</h3> <figure></figure> <p>記事</p> <p>記事</p> <p>記事</p> </section> <section> <h3>見出し</h3> <figure></figure> <p>記事</p> <p>記事</p> <p>記事</p> </section> </section> そのようにデザインするということは、文書構造から来る必然性があるはずです。言い換えれば文書構造さえしっかりできていれば、どのようにもデザインできるはずです。
