角を丸くする 

PhotoShop / PhotoShop-E


画像の場合 (例: 下左図)

PhotoShop / PhotoShop-E で「全てを選択」 → 「選択範囲を変更」 → 「滑らかに」 → Rを指定
画像の片方のみが角の場合も 適用できる

テキスト文を入れた枠の場合 (例: 下右表枠)

( InternetExplorer9 以降で、角を丸くする「radius」が対応。 スマホも対応。 )

CSSを使ったこの枠は、ニュースやお知らせを記入して簡単に更新できる。
画像では更新のたびに画像加工が必要だが、 この方法では table内文章のように簡単にテキスト文を記入できる。
table との違いは、この例のように、枠の角を丸くしたり、 点線、破線、2重線や、凸、凹み線にできる他、 枠周囲のスペース
を margin として指定できる。
このボックス角の丸め = radius : 15px

作り方:
・従来のtableを置き、<td> </td> の間に
・このページのソースの<div>〜</div>をcopy して設定値を替える。
・枠の全体幅は、表幅とmargin 値によって決まる。margin 値は表のセル境界からの値である。

この表示のように、CSSを使った枠の処理は便利だが、角を丸くする「radius」は InternetExplorer9 以降が必要。
Google Chrome / FireFox はこの表示のように対応している。

InternetExplorer 9 は対応しているがサーバードメインによっては対応しない
Yahooドメイン/FC2/Cyberhome/SpeedNet はOK

上の表枠が角丸にならないブラウザの場合は → こちら参照

  | CSS   | ホームページ作成体験  |