JIMDOの文章枠を角丸にしたい

文章に枠を付けたいで説明した枠を角丸にする方法

文章の枠の付け方は前回説明したとおりですが、その枠を角丸にする方法

角丸を指定する方法は2種類ありますが、今回はborder-radiusというスタイルシートを使います。 

 フチを角丸にするとこのように表示されます。柔らかさが出てステキですね。

上記で使用している角丸のスタイルシートは以下の通りです。
この6pxの6の数値を大きくしたり小さくすることで、角丸の大きさを変えることが出来ます。

<div style="border: 3px solid #999; padding: 1em; border-radius: 6px;">

<p>&nbsp;フチを角丸にするとこのように表示されます。柔らかさが出てステキですね。</p>

</div>

border-radiusの数値は%で指定することも出来ます。
その場合には、表情が異なります。border-radius:30%;で指定したのがこの枠です。

4角それぞれに別々の角丸を指定したい。

 4角にそれぞれに角丸を指定する場合は以下のように指定します。

border-radius:6px 0px 0px 6px;

上記の数値は、それぞれ 左上右上右下左下になります。
工夫次第で、面白い枠線を作ることが出来ます。

 border-radius: 30px 0px 30px 0px;

 border-radius:0px 80% 20px 50px;


padding:1em 0 10px; 
border-radius: 30% 50% 30% 50%;

右のようにスタイルシートを組み合わせれば、様々な形状や雰囲気を出すことも可能になります。

 border-top: 10px solid #900;
border-bottom: 10px solid #333; padding: 3em;
border-radius: 50% 50% 50% 50%;


メルマガに登録でこのような新しい情報が手元にお届けします

この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

コメントをお書きください

コメント: 2
  • #1

    川合 勝 (土曜日, 18 7月 2015 09:35)

    文章に枠を付ける1連のシリーズは素晴らしいです!
    今迄は表を利用して枠替わりにしていましたが、文字の大きさを変えられ無い、外部メモからコピペすると枠が乱れる問題有り、ダミーのコンテンツ文章にコピペしてから、表に移していました。
    今回はコンテンツの文章ですから、枠の中に見出し風にpxの大きい文字を使い、下の行には通常文字にしたり、自由性が有って大変助かります。
    有難う御座います。

  • #2

    PIK村井 (土曜日, 18 7月 2015 10:25)

    川合さん
    ありがとうございます。m(_ _)m
    これからも内容を充実させて参ります。
    たまに、覗きにいらしてくださいね^^

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422