はい！ってなわけで何にも考えてなく惰性で生きてたらぶち当たったテーマですね。
このテーマについて2014年という時代背景も考慮しつつ久しぶりに考えてみました。
当時の角丸デザインのアイディア
スマホなら当時からborder-raidusなんかあるじゃんと思うかもしれませんが、残念ながらPCだとIEの対応がネックになってました
jQuery？PrototypeJs？YahooUI？MooTools？
jQueryのプラグインやHTCとかあるじゃんってのは無しです、当時、まだまだブラウザーが非力で異常に重くなった経験があるんで。しかも当時はJavaScriptのフレームワークも好き勝手に乱立状態
（意外な事に当時はjQueryではなくPrototype JavaScriptが優勢だったんです。世の中わかりませんねー）
しかも他のブラウザーもベンダープレフィックスなるものを各ブラウザ専用に記述しなくてはいけなかったり
IEだけ分岐処理してみたいな、そんな状況だったので当時はこの方法がベターかなと思ったり思わなかったり汗
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプルコード</title>
<style type="text/css">
#nest1 .nestobj {
width: 299px;
background: #fdeff4;
border-left: solid 3px #ee6f9a;
border-right: solid 3px #ee6f9a;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="nest1">
<img src="top.gif" alt="" style="display:block;">
<div class="nestobj">
これは画像を仕様したサンプルです<br >
これは画像を仕様したサンプルです<br >
これは画像を仕様したサンプルです<br >
これは画像を仕様したサンプルです<br >
これは画像を仕様したサンプルです<br >
これは画像を仕様したサンプルです<br >
</div>
<img src="bottom.gif" alt="" style="display:block;">
</div>
</body>
</html>
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
これは画像を仕様したサンプルです
多すぎる制約
上記の方法がベストとなってたのですが、沢山あったりすると切り出しが大変だったりと。。。
しかも高さはフレキシブルなのですが横軸は対応できない…汗
で根性で横対応にするとさらにソースが複雑になるという。。
最近、思う事など
今はどうでしょうか逆になんでもできる様になったと思ってデザインで角丸を異常に多用してみたりしてませんか？？今一度、過去の技術的制約を見直してみても面白いかとと思ったりします。そこから生産性について再度考えてみたり。IE8がまだまだ現役な事実も考慮したり。
でもいい時代になってきましたねー
ではでは次回は地獄のグラデ編です。
