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

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

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

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

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

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

no image

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

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

no image

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

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

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

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

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

no image

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

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

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

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

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

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

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

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

no image

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

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

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

最新記事

チャーさん

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

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

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