HTMLのレイアウトについてメモ
恥極まる話ですが、今までもっぱらHTMLのレイアウトはtableタグを使ってました。
ごめんなさい><
反省というか自戒の為、記録。
tmp1.htmlが今まで通りtableタグでレイアウトを構成したもの。
tmp2.htmlがtableタグを使わないようにしたもの。でも、多分もう少しうまくやればリテラルが減らせるんじゃないかな、と思ってます。
tmp1.html・・・tableタグを使ったもの
<html> <head> <style> * { margin: 0px; padding: 0px; } table.buttonlayout { margin: 50px; } table.buttonlayout th { color: white; background-color: blue; border: 1px solid blue; } table.buttonlayout td { background-color: skyblue; border: 1px solid green; } input { background-color: beige; border: 1px solid gray; } </style> </head> <body> <table class="buttonlayout"> <tr> <th>input-1</th> <td> <input type="text" value="txt1" size="10" /> <input type="text" value="txt2" size="10" /> <input type="text" value="txt3" size="10" /> </td> </tr> <tr> <th>input-2</th> <td><input type="text" value="txt4" size="30" /></td> </tr> </table> </body> </html>
tmp2.html・・・tableタグを使わないよう頑張ったもの
<html> <head> <style> * { margin: 0px; padding: 0px; } .input1 { margin-top: 50px; margin-left: 50px; width: 580px; } .itemname1 { float: left; color: white; background-color: blue; border: 1px solid blue; } .itembutton1 { float: none; margin-left: 100px; background-color: skyblue; border: 1px solid gray; } .input2 { margin-top: 4px; margin-left: 50px; width: 580px; } .itemname2 { float: left; color: white; background-color: blue; border: 1px solid blue; } .itembutton2 { float: none; margin-left: 100px; padding: 4px; background-color: skyblue; border: 1px solid gray; } input { background-color: beige; border: 1px solid gray; } </style> </head> <body> <div class="input1"> <div class="itemname1">input-1</div> <div class="itembutton1"> <input type="text" value="txt1" size="10" /> <input type="text" value="txt2" size="10" /> <input type="text" value="txt3" size="10" /> </div> </div> <div class="input2"> <div class="itemname2">input-2</div> <div class="itembutton2"> <input type="text" value="txt4" size="30" /> </div> </div> </table> </body> </html>
という訳で、今日は自分の不勉強を鬱々と呪っておりました、とさorz