blog ブログ
![[初心者向け][CSS]地味だけど困った文字の上に「・」問題](/cmswp/wp-content/uploads/2022/08/220802_css02.jpg)
こんにちは、デザイナーのsochanです。
日々Webデザインをする中ですごく困るわけではないけれど
どの方法が一番良いのか考えすぎて深みにハマること、ありますよね。
わたしの場合は文字の上に「・」をつけることでした…
目次
文字の上にドットをつける方法
数パターンありますが今回は4つ上げてみたいと思います。
[パターン1]HTMLだけで付けてみる
-例-
強調したい
HTML
＜p＞＜ruby＞強＜rt＞・＜/rt＞調＜rt＞・＜/rt＞し＜rt＞・＜/rt＞た＜rt＞・＜/rt＞い＜rt＞・＜/rt＞＜/ruby＞＜/p＞
一番簡単っぽい雰囲気は出ていますが文字の上にルビを振るタグのため
正しい使い方ではありません。
見た目も忙しないですね。
[パターン2]CSSの疑似要素で付けてみる
-例-
強調したい
HTML
＜p class="dot"＞＜span＞強＜/span＞＜span＞調＜/span＞＜span＞し＜/span＞＜span＞た＜/span＞＜span＞い＜/span＞＜/p＞
CSS
.dot span {
position: relative;
}
.dot span::before {
content: "・";
position: absolute;
top: -1em;
left: 0;
}
疑似要素なので「・」以外でも応用できそうです。
しかし一文字ずつタグで囲っていくのをどうにかしたい…！
[パターン3]CSSで丸を作って付けてみる
-例-
強調したい
HTML
＜p class="dot"＞強調したい＜/p＞
CSS
.dot {
padding-top: .4em;
background-position: top left -2px;
background-repeat: repeat-x;
background-size: 1.3em .3em;
background-image: radial-gradient(.15em .15em at center center,black,black 100%,transparent);
}
丸のサイズを調整できますがCSSをもう少しシンプルにしたい気持ち…
[パターン4]text-emphasisを使う
-例-
強調したい
HTML
＜p class="dot"＞強調したい＜/p＞
CSS
p {
text-emphasis: filled;
-webkit-text-emphasis: filled;
}
IEでは表示されないですが一番簡単なのではと思いました。
filled（図形が単色で塗りつぶされる｜既定値）箇所を
double-circle や triangle にすると ◉ ▲ にもできます。
-例-
オレンジ三角にします
CSS
orange {
text-emphasis: text-emphasis: 'x' #FFA500;
-webkit-text-emphasis: 'x' #FFA500;
}
triangle {
text-emphasis: triangle #FFA500;
-webkit-text-emphasis: triangle #FFA500;
}
簡単ですね！
まとめ
今の所簡単且つCSSもシンプルな
パターン4のこちらに落ち着きました。
HTML
＜p class="dot"＞こちら＜/p＞
CSS
p {
text-emphasis: filled;
-webkit-text-emphasis: filled;
}
今回は文字の上に強調する点「・」を装飾する方法について注目してみました。
後々修正しやすく分かりやすい記述にしようと意識していますが、
知れば知るほど奥が深いな…と思います…
もっと良い方法がありましたら教えて下さい〜！
日の出医療福祉グループ クリエイティブ室では医療・介護・保育を始めとする医療福祉業界の様々な制作を行っています。
DTPやWebサイトの制作も積極的に行っておりますので、気になった！という方はお気軽にお問い合わせからご相談ください。
