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

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

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

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

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

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

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

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

最新記事

チャーさん

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

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

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