Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

css ワードプレスデザイン

ワードプレスでCSSを使い丸を表示する方法

投稿日:

Pocket

うもチャーさんです。

あなたはワードプレスで丸を表示したいと

思ったことはありませんか。

 

この記事では丸の作りかたを解説してるので

ワードプレスなどで丸を表示したい人はどうぞ。

 

スポンサードサーチ

丸を作るにはこのコードでできます。

 

まずいきなり結論ですが、

丸を表示するコードはこうです。

<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 50%; margin: auto; text-align: left;”> </div>

これをテキストエディタにはるとこのように丸が作れます。

  ↓

 

 

 

丸みを出すにはborder-radius

 

それでは少し補足していきます。

丸を作るには、borderで作った線を丸くします。

borderについてはこちらの記事をどうぞ

 

そのborderで表示した線を丸くするのに使うのが、

border-radiusというタグです。

これを使うとborderの境界線を丸くできます。

 

例を出すとこんな感じです。

 

border-radiusなし版

<div style=”border: 10px solid blue; height: 100px; width: 100px;;”> </div>

(以下のように表示されます)

  ↓

 

 

 

これにborder-radiusを付け加えると

<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 50%; “> </div>

(以下のように表示されます)

  ↓

 

 

こんな風に角が丸まってくれます。

 

そしてborder-radiusは後ろにpxや%をつけるのですが、

この数値を大きくすればするほどより角が丸くなります。

数値が小さいと角の丸みが少ないです。

 

試しに1つ数値を小さめにしたものを乗せておきます。

<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 10px; “> </div>

  ↓

 

 

ちょっとだけ丸みがかりましたね。

こんな風に数値をコントロールすれば、

丸みをコントロールできます。

 

完全に丸くするには冒頭でお話した通り、

border-radiusの数値を50%にすればいいです。

 

また1つ注意点として、

綺麗な丸を作るには高さと幅を同じにする必要があります。

コードを見てください。

 

<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 50%; “> </div>

 

widthとheightがそれぞれ100pxになっていますよね。

これを同じ数値にして四角形を作り、

それをborder-radiusで丸くしないと

丸にならないので注意してくださいね。

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

丸を作りたい場合は以下のコードをそのままコピペしましょう。

<div style=”border: 10px solid blue; height: 100px; width: 100px; border-radius: 50%; “> </div>

 

そして丸みを調整したいときは、

border-radiusの後ろの数値を変えてください。

 

数値を小さくすると緩やかな丸みに

数値を大きくするとより丸くなります。

 

それでは丸の作りかたは以上です。

読んでもらってありがとうございました。

 

チャーさん

-css, ワードプレスデザイン


スポンサードサーチ

関連記事

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。