CSSとjQueryで正円を描いて、中に文字を入れたい

 

見出し

内容

 

 

 


こんな感じで、円の中に文字を入れたい場合の方法をお伝えします。

 

円を描く方法は、CSS3にある「border-radius」を使います。

#circle{
border-radius:50%;
}

こうすれば、指定した要素の角を丸くして、円を描くことができます。

高さと幅を固定してあげれば、「正方形の角を、丸くする」という処理になり、円になります。

 

幅が変わる場合には、jQueryが必要

ただ、高さを指定できない時もありますよね。

例えば、レスポンシブデザインを採用していて、横幅に応じてコンテンツの幅が変わる場合。

 

この方法ですと、レスポンシブに対応する場合や、画面幅に応じて円の幅が変わる場合、

縦長や、横長の円になってしまいます。

こんな具合に・・

見出し

内容

見出し

内容

見出し

内容

 

これを回避するためには、jQueryで

「横幅を取得して、高さを変える」という処理が必要になります。

 

<script>
$(function(){
var widthA = $("#circle").width(); // 円の横幅を取得
$("#circle").height(widthA); //円の横幅を高さに設定
});
//ウインドウサイズが変わったとき
$( window ).resize(function(){
var widthA = $("#circle").width();
$("#circle").height(widthA);
});
</script>

こんな感じのスクリプトを記入しておくと、高さと横幅が常に揃うので、正円を崩さずにすみます。

もっといい方法があったら、教えてください(汗)

  • このエントリーをはてなブックマークに追加
  • LINEで送る
こんなブログも読まれています