blog ブログ

2022.09.01

[初心者向け][CSS]地味だけど困った文字の上に「・」問題

WEB

sochan

[初心者向け][CSS]地味だけど困った文字の上に「・」問題
こんにちは、デザイナーの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サイトの制作も積極的に行っておりますので、気になった!という方はお気軽にお問い合わせからご相談ください。

posted article 投稿記事

  • 【初心者向け】実務で使える便利な機能5選(コーディング編)

    2024.09.12

    【初心者向け】実務で使える便利な機能5選(コーディング編)

    WEB
  • 【CSS】カード型レイアウトは「flex」or「grid」どっちがいい?

    2024.06.15

    【CSS】カード型レイアウトは「flex」or「grid」どっちがいい?

    WEB
  • スライダーライブラリ「Splide」を使ってみた

    2024.04.10

    スライダーライブラリ「Splide」を使ってみた

    WEB
  • PHP7からPHP8へのバージョンアップでエラー発生?

    2024.01.30

    PHP7からPHP8へのバージョンアップでエラー発生?

    WEB
View more

contact お問い合わせ・ご相談

制作のご依頼や予算のお見積りなど、まずはお気軽にお問い合わせください。

contact