【CSS】tableじゃなくってdivで書こう！

ぱっと見なにも変わっていませんが大きな変化が起きました！
「なんやねん！」って思う方は是非スマホから見てください！そうなんです！今まで表示が崩れてしまう原因になっていたtableを使用するのをやめたのです！！！

[adsense]

なぜはじめからdivで書かなかったのだ自分…。
ってことでdivで書きました！具体的には１個１個のパーツの幅をdivで指定しているのでページの幅が変わっても安定して表示されます。臨機応変にパーツが組変わってくれるのです。

これは素晴らしいですね！

今回使ったのはこのコード！

.twoblockinfo {
background-color: rgba(0,0,0,0);
position: relative;
float: left;
display: block;
border: 1px solid #e6e6e6;
width: 476px;
height: 320px;
margin: 1px;
}

.oneblockinfo {
background-color: rgba(0,0,0,0);
position: relative;
float: left;
display: block;
border: 1px solid #e6e6e6;
width: 236px;
height: 320px;
margin: 1px;
}

珍しく引用元や参考サイト無しでのコードです！
サークルでのWEB係を退いた2013年の夏以来ですね、こんなに自分でcssとじゃれ合っているのは。

さてさて。
こうした事によってページの幅を狭めた時にほら！

勝手に良い感じにfitしてくれました！
みなさんもtableが上手く使えないときはもういっそdivで書いてしまいましょう。

mokabuu

ブログ管理人

XInstagramYouTube

2014年1月からmokabuu.comを運営しております。現在10年間で老朽化したサイトをリフォーム中です（2025/1〜）。