CSSで円を描き,内側にテキストを入れる

最終更新日: 公開日: 2019年05月

円をかいて,中に文字を入れるとはこのような絵のこと.



中央

中の文字の位置指定のポイント

CSS は以下のようになる.
円は position: relative と相対指定にして,中の文字は position: absolute で絶対指定とする.

translateX(-50%) は文字の位置が指定した位置からになってしまうので,文字の中心を指定するために使っている.(縦方向の場合は translateY を使っている.)

CSS は以下のようにする.(サンプルコード)

HTML は以下のようになる.

円の中にグラデーションで色指定

グラデーションにしたい場合は以下のように

radial-gradient を使う.circle が指定してあるクラスに gradF9F を追加.



中央

楕円を描きたい場合

楕円にしたい場合は以下のように

円のサイズを変更する.c120 を e120 に変更.



中央

 タグ: , ,  
 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
Apache Chrome Chrome 拡張機能 CSS Git Google HTML javascript Page Speed Insights PHP python SEO Windows WordPress Youtube z-index アナリティクス エディタ サーチコンソール サーバー管理 スライダー タグマネージャー テレワーク デザイン データベース ネットワーク フォーム ページ閲覧解析 マーケティング リッチリザルト レスポンシブ レスポンシブ対応 ログ解析 ローカル環境構築 営業 実装
contact
無料ダウンロード中!
大好評の書籍はこちら
Pagetop