- ベストアンサー
ＨＰにて、文章と画像の配置構成がうまくいかない
下記のような構成でHTMLとcssを使用し、作ろうと試行錯誤しましたが うまくいきません。 お手数ですが、わかる方いらっしゃいましたら、ご教授お願い致します。 (1)文章 (2)文章 文章 文章 画像画像画像 画像画像画像 (3)文章 (4)文章 文章 文章 画像画像画像 画像画像画像 (5)文章 文章 画像画像画像
- hiro721
- お礼率63% (12/19)
- その他([技術者向] コンピューター)
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<!DOCTYPE html> <html lang=ja><meta charset=utf-8> <style> article { clear:both; } article section { float:left; width:48%; min-width:300px; } article.すこし格好よく section { position:relative; } article.すこし格好よく section header { position:absolute; top:0px; left:0px; } article.すこし格好よく section p { padding-left:2em; margin:0 0 1ex 0;} </style> <body> <article> <section><header><h2>(1)文章</h2></header><p>文章<p><img><img><img></p></section> <section><header><h2>(2)文章</h2></header><p>文章<p><img><img><img></p></section> <section><header><h2>(3)文章</h2></header><p>文章<p><img><img><img></p></section> <section><header><h2>(4)文章</h2></header><p>文章<p><img><img><img></p></section> <section><header><h2>(5)文章</h2></header><p>文章<p><img><img><img></p></section> </article> <article class=すこし格好よく> <section><header>(1)</header><p>文章<p>文章<p><img><img></p></section> <section><header>(2)</header><p>文章<p>文章<p><img><img></p></section> <section><header>(3)</header><p>文章<p>文章<p><img><img></p></section> <section><header>(4)</header><p>文章<p>文章<p><img><img></p></section> <section><header>(5)</header><p>文章<p>文章<p><img><img></p></section> </article> 何か特別な理由があって上手く表示できない場合は以下を追加 <script>(function(){for(var i=0,a="header section article".split(/ /);i<a.length;i++)document.createElement(a[i]);})()</script> <style>article,section,header { display:block; }</style>
その他の回答 (2)
Dreamweaverを使えば好きな場所に配置できますよ
補足
dremaweaverは入ってないですね＞＜ また会社で体験版を落とすことができないので、使用できないです、、。 ご回答ありがとうございます
- yambejp
- ベストアンサー率51% (3827/7415)
質問の意図がわかりかねますが、格子状の表示をするのであれば 構造的にテーブルですのでtableタグで成型するのが妥当では？
お礼
tableタグでも構成できると思うのですが、勉強不足で自分の描いているものができない状態でした。 お答えいただいたのに、自分の力不足ですみません＞＜ ご回答ありがとうございました。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_3_thumbnail_img_sm.png)
お礼
ご丁寧に事細かく記載ありがとうございます。 おかげ様でＨＴＭＬ知識の低い私でも不要部分を削除し、構成することができました。 ＨＴＭＬ知識についてはまだまだ未熟なので、勉強していきたいと思います（＾＾：） 本当にありがとうございました。