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を書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

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

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

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

cssの効率的な学習方法を知りたいなら読んでください。

  あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記事では、cssの学習方法について お話し …

no image

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

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

no image

cssで三角形を作る方法、コピペで一発でできますよ。

どうも、チャーさんです。   あなたはcssで三角を作る方法を、 探していますか?   この記事ではcssで三角を作る方法を、 書いています。     そしてこ …

no image

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

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

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

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

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

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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