以下ようにdiv要素をたくさん使うのですが、このdiv要素を極力少なく書く方法はありますか?
よろしくお願いします。
CSS
*{ margin:0; padding:0; } #wapper{ width:900px; margin:20px auto; } #header{ margin:20px auto; padding:15px 20px; border:solid 1px #CCC; } h1{ color:green; font-size:58px; } #contents{ border:solid 1px #CCC; padding:10px; overflow:auto; } #left{ float:left; width:45%; } #manner{ margin:0px 10px 20px 10px; border:double 5px blue; overflow:auto; padding:5px; } #manner div{ float:left; width:70%; } #manner img{ float:right; width:25%; height:auto; margin-top:5px; } #syacho3{ margin:auto 10px 20px 10px; border:solid 1px blue; overflow:auto; padding:5px; } #syacho3 img{ float:left; width:25%; height:auto; margin-top:5px; } #syacho3 div{ float:right; width:70%; } #rina3{ margin:auto 10px 20px 10px; border:solid 1px blue; overflow:auto; padding:5px; } #rina3 div{ float:left; width:70%; } #rina3 img{ float:right; width:25%; height:auto; margin-top:5px; } #syacho4{ margin:auto 10px 20px 10px; border:solid 1px blue; overflow:auto; padding:5px; } #syacho4 img{ float:left; width:25%; height:auto; margin-top:5px; } #syacho4 div{ float:right; width:70%; } #right{ float:right; width:45%; } #keigo{ overflow:auto; } #keigo img{ display:block; margin:auto; height:420px; } #sodan{ border:solid 1px blue; overflow:auto; margin:20px auto auto auto; padding:5px; } #sodan div{ float:left; width:70%; } #sodan img{ float:right; width:25%; height:auto; margin-top:5px; } #footer{ clear:both; padding:20px 0px; border:solid 1px #CCC; text-align:center; margin-top:20px; }
HTML
<!DOCTYPE html> <html> <head> <title>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="style1.css"> </head> <body> <div id="wapper"> <div id="header"> <h1>test</h1> <p>testは、~です。</p> </div> <!--header_end--> <div id="contents"> <div id="left"> <div id="manner"> <div> <p> あかさたなは2まやらわ1あかさたなはまやわあかさたなはまやらわあかさたなはまや わあかさたなはまやらわ </p> </div> <img src="images/lake1web.jpg" alt="見本" /> </div> <!--manner_end--> <div id="syacho3"> <img src="images/lake1web.jpg" alt="見本" /> <div> あかさたなはまやらわ </div> </div> <!--syacho3_end--> <div id="rina3"> <div> あかさたなはまやらわ </div> <img src="images/lake1web.jpg" alt="見本" /> </div> <!--rina3_end--> <div id="syacho4"> <img src="images/lake1web.jpg" alt="見本" /> <div> あかさたなはまやらわ </div> </div> <!--syacho4_end--> </div> <!--left_end--> <div="right"> <div id="keigo"> <img src="images/lake1web.jpg" alt="見本" /> </div> <!--keigo_end--> <div id="sodan"> <div> あかさたなはまやらわ </div> <img src="images/lake1web.jpg" alt="見本" /> </div> <!--sodan--> </div> <!--right_end--> <div id="footer"> 株式会社トラスト </div> <!--footer_end--> </div> <!--contents_end--> </div> <!--wapper_end--> </body> </html>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。