« 赤ちゃんと温泉マナーと、格安子連れ旅行術、各県選抜温泉11をそれぞれリニューアル | トップページ | 子連れ温泉ガイドTOP頁と全国温泉リスト頁をリニューアル »

テーブル素材で作った飾り枠をそのままboxの外枠ボーダーに使いたい

今、毎日のように昔作ったウェブサイトのデザインを、せっせと今風にスマホでも読めるレスポンシブデザインに作り替えてます。

はい、もう疲れて死にそう。

でもって、切り替えるときに2000年代初頭に作った古い「フレーム枠」とか、レイアウトのための「テーブル飾り」とかを廃止したいわけですね。

フレームはobjectを組み込む形で作り替えました。

テーブル飾りはまあdivで囲んでboxでデザインすることになるんですが、せっかく見た目は今までのテーブル枠の装飾が気に入っていたんで、ぜひそれを活かしたまま使いたかったわけです。

まずその1

Map1


これはテーブル枠を使用していた時のスクリーンショットです。

この赤っぽい点線はテーブル素材の画像で、6つのパーツからできています。

で、このデザインならばテーブルを廃止して、boxの外側のボーダーを赤っぽい破線に変えて、角を丸めればなんとかなりそうということになりました。

cssの方はこんな感じです(contentの外側をこのボーダーで囲むとして)

#content{
border: 1px solid #e1315f;
background : none 0% 0% / auto auto repeat scroll padding-box border-box #ffffcc;
border-style: dashed;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

できあがりはこんな感じ

Map2

だいたいおんなじようなイメージにできたと思います。

ちなみにIEでは角が丸くなりません。きっぱり四角い角のまま。

google choromeで見ると丸くなってます。

次はもうちょっと難関。

角をまるめるとか、破線とか、点線とか、二重線とかで代替できるものではなく、もっと装飾的なテーブル枠。

なお、修正前のスクリーンショットを撮り忘れたのでこちらは使用前がありませんが、ほぼ修正前と修正後は同じになりました。

Family



こんなふうなテーブル素材です。こちらはさっきのものより複雑で、四隅のパーツの他、上下左右も異なるパーツ(内側の破線の色が薄いので)を使用していて、全部で8つの画像でできています。

こんなパーツですね。

Rs_1g Rs_3gRs_4g
 Rs_5g


 Rs_6g

  Rs_8g
Rs_2g
Rs_7g

(なんか並べ方がでたらめになった。こんだからブログは苦手なんじゃ)

それを8つ合体してひとつの画像にします。

Rsall

ホントにただ並べて合体させただけ。

そしてこの画像をboxのborderの下敷きにします。勝手に上下左右はboxのサイズに合わせて伸び縮み・・・じゃなくて、繰り返しになるようにします。

cssはこう。

.そのboxにつけた名前 {
 width:640px;
 border-image: url("合体させた画像名.gif") 20 round;
 border-style:solid; border-width:20px;
  padding:20px;
  background-color : #ffffcc;
  margin-left:70px;
}

とまあ、昔作ったテーブル飾りをテーブルを廃止した外枠の飾りにする方法の自分用のメモでした。

|

« 赤ちゃんと温泉マナーと、格安子連れ旅行術、各県選抜温泉11をそれぞれリニューアル | トップページ | 子連れ温泉ガイドTOP頁と全国温泉リスト頁をリニューアル »

web」カテゴリの記事

パソコン・インターネット」カテゴリの記事

日記・コラム・つぶやき」カテゴリの記事