極意(39)表の外側に背景を付ける

haikになって、ユーザーの方から一番不満が出ている機能の一つが「表」です。
「表」のどこに不満があるのか?。多分、表の罫線の存在感ではないでしょうか?。
薄くて目立たない罫線は何とか成らないのかと言う不満の声が聞こえて来ています。
せめて罫線の太さとか色についての制御ができれば、そのような不満は出ないと思うのですが、生憎、罫線についてのそのようなオプションがありません。
発想を変えて「表」の外側に色付けの背景でもあれば、少しは目立つのかなと思い当ページの作成と公開に踏み切りました。


枠の中に表を設定する

水色の背景の枠です

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも

[check]上記のおまじないです。

#bs_box(alert,info){{
水色の背景の枠です
|STYLE:responsive|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
}}

[check]解説します。
#bs_box(alert,info)の info で水色の背景となります。
同時に表のセル内の文字も水色になっています。


緑色の背景の枠です

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも

[check]上記のおまじないです。

#bs_box(alert,success){{
緑色の背景の枠です
|STYLE:responsive|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
}}

[check]解説します。
#bs_box(alert,success)の success で緑色の背景となります。
同時に表のセル内の文字も緑色になっています。


赤色の背景の枠です

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも

[check]上記のおまじないです。

#bs_box(alert,danger){{
赤色の背景の枠です
|STYLE:responsive|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
}}

[check]解説します。
#bs_box(alert,danger)の danger で赤色の背景となります。
同時に表のセル内の文字も赤色になっています。


セクションの中に表を設定する

前記の「枠」では、外側の色合いが薄いと思われる方には、セクションとの併用で更に濃い色合いに設定することも可能です。

セクション/デフォルト1の例

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも



[check]上記のおまじないです。

#section(bgcolor=#6C7A89,color=#000000,left){{
&deco(white,,){セクション/デフォルト1の例};
|STYLE:responsive|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
}}


セクション/背景色型の例

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも



[check]上記のおまじないです。

#section(bgcolor=#1F3A93,color=#000000,left){{
&deco(white,,){セクション/背景色型の例};
|STYLE:responsive|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
}}


セクション/背景画像型の例

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも




[check]上記のおまじないです。

#section(a0015_000003_m.jpg,left,color=#000000){{
&deco(white,,){セクション/背景画像型の例};
|STYLE:responsive|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
|あいうえお|かきくけこ|さしすせそ|たちつてと|なにぬねの|はひふへほ|まみむめも|
&br;
}}


段組の中に枠と表を設定する

2段の段組を用意して小規模な表を枠付きで設定した例を紹介します。

水色の背景の枠です

あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ
あいうえおかきくけこさしすせそ

赤色の背景の枠です

たちつてとなにぬねのはひふへほ
たちつてとなにぬねのはひふへほ
たちつてとなにぬねのはひふへほ

[check]上記のおまじないです。

#cols{{{
#bs_box(alert,info){{
水色の背景の枠です
|STYLE:responsive|
|あいうえお|かきくけこ|さしすせそ|
|あいうえお|かきくけこ|さしすせそ|
|あいうえお|かきくけこ|さしすせそ|
}}
====
#bs_box(alert,danger){{
赤色の背景の枠です
|STYLE:responsive|
|たちつてと|なにぬねの|はひふへほ|
|たちつてと|なにぬねの|はひふへほ|
|たちつてと|なにぬねの|はひふへほ|
}}
}}}


枠の中にメールフォームを設定する

標題とは、ちょっとかけ離れたテーマですが、メールフォームの外側に枠をはめた例を紹介します。


戻る


上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 4  
    役に立たなかった 0  


ご意見箱