No.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>
ご丁寧に事細かく記載ありがとうございます。
おかげ様でHTML知識の低い私でも不要部分を削除し、構成することができました。
HTML知識についてはまだまだ未熟なので、勉強していきたいと思います(^^:)
本当にありがとうございました。
No.2
- 回答日時:
Dreamweaverを使えば好きな場所に配置できますよ
この回答への補足
dremaweaverは入ってないですね><
また会社で体験版を落とすことができないので、使用できないです、、。
ご回答ありがとうございます
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Mac OS Macか Windowsか?悩んでいます。 6 2023/04/07 09:35
- 年賀状作成・はがき作成 ワード・エクセル2007で印刷 2 2023/05/12 05:40
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- 物理学 物理の単位 1 2022/08/27 11:06
- 日本語 高一漢文 画像あり 〔 スタディあワーク解説 84ページ 〕 画像の文章の 則ち がどのような意味で 4 2023/08/16 15:17
- LINE LINEで表示されているメッセージについて 1 2022/11/17 18:26
- Android(アンドロイド) スマホでWi-Fi使用時に、LINEから画像が送れなくなってしまいました。 1 2022/09/25 10:03
- Word(ワード) wordに画像のある文章を貼り付けたのですが、画像が表示されません。そもそも機能として出来るのでしょ 4 2023/02/13 00:22
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- Illustrator(イラストレーター) ワードに貼った画像のキャンバスと画像本体のサイズの調整 2 2022/05/19 18:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
複数画像のランダム複数表示(...
-
MFCで画像を表示させているので...
-
error LNK2019 未解決のシンボ...
-
imgボタンにfocusの当て方
-
jQueryで、画像クリック→フェー...
-
OpenCV での画素値の比較について
-
jQuery 複数のfind()
-
セクトボックスの連携の仕方。
-
以下のタグはクリックすると画...
-
画像処理 C言語 元画像の幅...
-
Javaの正規表現でimgタグのalt...
-
画像が表示でnull; this.src
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
Slick.jsのオプションrtlについて
-
どの<li><a> が押されたか判別...
-
クリックで色変更後に既に変更...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
Vb.net2005での画像の合成方法
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
(javascript)HTMLで指定した...
-
【OpenCV】二値画像後、白の部...
-
jQuery 複数のfind()
-
ラズパイでno module named zbar
-
外部javascriptの重複を防ぐには
-
条件分岐でキーが入力されてい...
-
かぶらないランダム画像
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
OpenCV での画素値の比較について
-
imgボタンにfocusの当て方
-
指定したフォルダの画像を一括...
-
OpenCVでサンプルコードを使う...
おすすめ情報