現状のHPを無料で診断いたします。
お気軽にお問い合わせください。
お役立ち
ニッティ・グリッティの
お役立ち情報
CSSでテキストを円形に配置する方法
UPDATE :
投稿者 : ニッティ・グリッティ
先週から引き続き SVGのpathに沿ってテキストを配置する方法について試してみようと思います。
pathを変更すれば、円に沿ってテキストを配置することもできます。
まず、変更したのは、2か所、dで始まるpathと、<tspan>で一部テキストの色を変更しています
HTML
<svg viewBox="0 0 500 500">
<path id="circle" fill="transparent" d="M114.17 66.88C114.17 88.95 96.24 106.88 74.17 106.88C52.09 106.88 34.17 88.95 34.17 66.88C34.17 44.8 52.09 26.88 74.17 26.88C96.24 26.88 114.17 44.8 114.17 66.88Z"/>
<text width="200">
<textPath xlink:href="#circle">
Go <tspan class="color-red">above</tspan> and beyond your expectations! NITTY GRITTY
</textPath>
</text>
</svg>SVGのpathは、画像編集ソフトで可能ですが、https://vectr.com/でも作成できます(作成して、エクスポートしたsvgファイルからpathの部分を抜き出してください)
一部分のテキストの書式を変更したいときは、変更したい部分を<tspan>でくくり、cssを適用すれば大丈夫です
すると、こんなふうになりました！
ランキング
BLOG
お役立ち情報
-
雑に選んでいませんか？フォントでデザインに表情をつけよう！
2024.12.03
CATEGORY
お役立ち情報 -
【初心者さん必見！】使えると超おしゃれ！「ブレンドツール」とは！~イラレの便利機能紹介Part6~
2024.12.02
CATEGORY
お役立ち情報 -
テンプレートで簡単!?もう悩まないプレゼン資料作成!
2024.11.28
CATEGORY
お役立ち情報 -
ホームページ集客のコツとは？コンサルティング会社が紹介！
2023.08.21
CATEGORY
お役立ち情報 -
IT導入補助金のご案内
2023.08.07
CATEGORY
お役立ち情報 -
【3分でわかる】Threads（スレッズ）とは？登録方法やTwitterとの違いをご紹介
2023.07.07
CATEGORY
お役立ち情報
