CSSだけ使用して画像の角や、領域を丸める方法 html ワードプレスなどで使えます

CSSだけ使用して画像やヘッダーなどの領域の角を丸める方法を紹介します。

丸める方法

丸める方法といってもとても簡単です。
border-radius: 20px; 
これをCSSファイルなどに記述すればOKです。
上記の記述で、半径20ピクセルで角が丸くなります。
※ブラウザの種類や、最新版じゃなかったりすると、適応されない場合もあります。

記述例

グローバルナビ
上記画像がCSSファイルに記述前の、グローバルナビです。

CSSファイルに記述

CSSファイルに記述
今回はワードプレスで作ったサイトで説明します。
ワードプレスの「外観」→「テーマの編集」からスタイルシートのグローバルナビ部分に
border-radius: 20px;
を追加記載します。 

記述後のグローバルナビ

記述後のグローバルナビ
このような感じで角が丸まります。

最後に

とても簡単なので、いろいろなところを丸めてみては!!

The following two tabs change content below.
AKIRA

AKIRA

上尾市在住の、リサイクルショップで働くサラリーマン。 Twitter・Facebookやってます。 小心者なので、誰か声かけてくれると嬉しいです。
スポンサーリンク
スポンサーリンク
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です