お問い合わせ
角の丸い（お問い合わ）せボタン【基本形】
div要素で左右の位置決めをして、a要素をインラインCSS(style)で装飾
・ボタン内での余白はpaddingで調整
・colorは文字色、背景色はbackground-color
・角の丸みはborder-radiusで調整
角の丸い〔TOPへ戻る〕ボタン
基本は、お問い合わせボタンと同じ。text-shadowを使って、文字に影をつけることもできる。
さらに、box-shadowを使って、ボタンに影をつけることもできる。
角の丸いテーブル（テーブルがひとつでいい場合）
テーブルが一つでいい場合は、table要素のstyleで、テーブル全体の背景色(backgroud-color)、角の丸み(border-radius)を指定するのが簡単。
強調したセルは、td要素のstyleで、border-radiusでそのセルも角の丸みを指定し、background-colorで背景色、枠線の幅と色をborder-widthとborder-colorで調整。
角を丸めるために、border-collapse:separate、セル間に余計な空白ができないように、border-spacing: 0 を、テーブルとセルに必ず入れておくこと。
（※ border-collapse:separateを忘れると角が丸くならないので要注意！）
tableのstyleで全体の四隅の丸を落とした場合は、強調したセルで角を落とした部分の背景もtableの背景色に塗られるので奇麗に仕上がる。（下にある複数の例と比べるとわかりやすいです）
強調したセルは、td要素のstyleで、border-radiusでそのセルも角の丸みを指定し、background-colorで背景色、枠線の幅と色をborder-widthとborder-colorで調整。
角を丸めるために、border-collapse:separate、セル間に余計な空白ができないように、border-spacing: 0 を、テーブルとセルに必ず入れておくこと。
（※ border-collapse:separateを忘れると角が丸くならないので要注意！）
tableのstyleで全体の四隅の丸を落とした場合は、強調したセルで角を落とした部分の背景もtableの背景色に塗られるので奇麗に仕上がる。（下にある複数の例と比べるとわかりやすいです）
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
こういうパターンもできます。
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
| 11 | 12 | 13 |
| 21 | 23 | |
| 31 | 32 | 33 |
いくつか縦に並べたい場合
不本意ながら、必要に応じ、必要なセルのボーダーを丸めます。(WordPressに何か仕込まれているようで、本来ならtableの入れ子で比較的簡単にできるはずなのですが、なぜか余計は空白ができてし、うまく行きません。)
そのセルの左上の角の丸みは、border-top-left-radiusで指定できます。右下の角の丸みは、border-bottom-right-radiusで指定できます。top/bottom, left/rightの組合せです。四隅にべつべつの丸みを与えることもできます。
そのセルの左上の角の丸みは、border-top-left-radiusで指定できます。右下の角の丸みは、border-bottom-right-radiusで指定できます。top/bottom, left/rightの組合せです。四隅にべつべつの丸みを与えることもできます。
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
| 上下のテーブルをぴったり続ける場合は、この行は不要です (これが最小高さのようです) | ||
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
ここで課題が。表題のセルの角を取った部分が白になってしますのです。解決方法が思いつかなかったので、ここは「わざとこうしたんですよ」的な逃げの一手で！
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
| 上下のテーブルをぴったり続ける場合は、この行は不要です (これが最小高さのようです) | ||
| 11 | 12 | 13 |
| 21 | 22 | 23 |
| 31 | 32 | 33 |
ちなみに、テーブルのなかにテーブルを作ると、こうなります。濃い灰色の部分が外側のテーブルで、それ以外の色の部分が内側のテーブルの範囲です。それぞれ内側のテーブルの下の部分に数行分のスペースが仕込まれます。
| |||
|
| ||
多少複雑なケース
| 11 | 13 | 14 | 15 | 16 | |
| 21 | 22 | 23 | 24 | 25 | 26 |
| 31 | 32 | 33 | 34 | 35 | 36 |
| 11 | 16 | 11 | 16 | ||
| 21 | 22 | 23 | 24 | 25 | 26 |
| 31 | 32 | 33 | 34 | 35 | 36 |
| 41 | 42 | 43 | 44 | 45 | 46 |
お問い合わせフォーム