下のような表を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を色々書きましたが上手くいきませんよろしくお願い致します。
上の表が崩れてしまいましたので、イメージ画像を添付します。
よろしくお願い致します。
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.3
- 回答日時:
<!--
/* ナビ画像も伸縮させる */
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の考え方と同じです。
No.2
- 回答日時:
No.1です。
よく見るとこれは、h1があるのでheader部分ですか?
先に文書構造がわからないと書きましたが、それでしたらHTML自体が間違っています。
★メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。. ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
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-html4 … )]より
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>でマークアップしましょう。
HTML5的には、
<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>
No.1
- 回答日時:
マークアップで文書構造がわからないので、書き直してみます。
・・・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-html4 … )]より
【引用】____________ここから
HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[HTML5 における HTML4 からの変更点「3.1.新しい要素」( http://standards.mitsue.co.jp/resources/w3c/TR/h … )]より
ここで、ひとつの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>
そのようにデザインするということは、文書構造から来る必然性があるはずです。言い換えれば文書構造さえしっかりできていれば、どのようにもデザインできるはずです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- PHP PHPの構文で間違えが分からない 5 2022/07/11 16:38
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- PHP SQLとPHPの連結方法がわからないのでアドバイスお願い致します 1 2022/07/12 12:16
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS htmlとcssで吹き出しの中に文字を置きたいのですが、 html 〈div class bb〉 〈 3 2023/02/04 22:44
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTML属性での「""」 「''」違い
-
<div id="container">の使いか...
-
htmlのolやulなどlistにtitleや...
-
インラインフレームのページ内...
-
スペースを使わず文字位置を揃...
-
複数のボタンを等間隔に、かつ...
-
HTML5 iframe の代わり
-
横並びdivで一部の初期高さがず...
-
<!-- #BeginLibraryItemとは
-
div要素が重なってします
-
HEADタグとheaderタグ
-
divとpの使いわけ
-
標題<h1>に、網掛けはできますか?
-
htmlの見出しタグ(<h1>)の次...
-
画面を縮小するとカラムが落ち...
-
フッターがウインドウの一番下...
-
CSSで、contentsがfooterに重な...
-
特定範囲内のCSSの継承を断ち切...
-
セクションをdivで囲むと見出し...
-
背景画像に全体または部分的に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
HTML属性での「""」 「''」違い
-
div要素が重なってします
-
<div id="container">の使いか...
-
複数のボタンを等間隔に、かつ...
-
html の divとtable の役割
-
divとpの使いわけ
-
ヘッダーとフッターだけ背景を...
-
min-heightとheightの違いについて
-
セクションをdivで囲むと見出し...
-
画面を縮小するとカラムが落ち...
-
ヘッダーを左右に二分割する方...
-
1時間30分を簡単に表したいで...
-
スペースを使わず文字位置を揃...
-
CSSで、contentsがfooterに重な...
-
h1に自分自身へのリンクを張...
-
divの中に外部のHTMLを埋め込む
-
divを横に並べる方法
-
hタグの右横に画像を表示
-
h1のテキストサイズよりh2の方...
おすすめ情報