質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2006閲覧

要素の幅いっぱいに下線 点線を引きたい

tkm0604

総合スコア552

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/20 04:24

編集2021/04/20 04:27

下の画像のように点線を引きたいです。

イメージ説明

僕は以下のようにHTML cssを書きました。

html

1<div class="letter_ps_wrap"> 2 <p class="letter_ps"><span class="letter_ps__large">追伸:</span><br> 3 最後に、断言しておきます。<br> 4 わずか12か月の間に、これだけの<span class="letter_ps__warning">車検台数を成功確率100%で増やせるのは、私達だけ</span>です。<br> 5 類似の車検FCの加盟店実績と見比べてみてください。<br> 6 私達XXXの加盟店は商圏や立地に違いがあっても、<span class="letter_ps__warning">加盟店の83%が年間車検台数1,000台<br>を越えています。</span>こんな実績があるのは私達だけです。<br> 7 もし、あなたが車検台数を増やして地域で信頼させる繁盛店を目指しているなら、まずは<span class="letter_ps__warning">説明会に<br> 8 お越しください。</span><br> 9 なお、XXXに加盟できる地域は次々と埋まってきておりますので、目の前のチャンスを逃さない<br>ようにご注意ください。 10 </p> 11</div>

scss/sass

1 .letter_ps_wrap{ 2 background-color: #fffdeb; 3 box-shadow: 5px 5px 10px 0 grey; 4 transform: rotate(-3deg); 5 .letter_ps{ 6 font-size: 21.44px; 7 letter-spacing: 0.1em; 8 line-height: 2.576; 9 padding: 40px 70px 50px; 10 text-align: left; 11 text-decoration:underline dotted; 12 font-weight: bold; 13 .letter_ps__large{ 14 font-size: 44px; 15 } 16 .letter_ps__warning{ 17 color: $secondary_base; 18 } 19 20 } 21 }

結果は 以下の画像のようになっています。

イメージ説明
文字の幅の分しか点線が引かれていないのと、文字と点線の間の間隔が取れていません。
どうすれば、見本のように要素全体に点線が引けて、文字と点線の間の間隔が取れるようにできるのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

background-image にCSSグラデーションで描画することで実現できます。
下記リンクが参考になるでしょう。

CSSのみで罫線(点線と実線)を引いたノートのようなデザインを作る | 失敗から学ブログ

サンプルを作成してみましたので、ご参考に。

CodePenサンプル

投稿2021/04/20 07:55

hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tkm0604

2021/04/21 04:59

ありがとうございます。「ノートのようなデザイン CSS」 で検索すればいろいろ出てきて、それらを参考に意図したデザイン仕上げられました。 検索の際のワードもいろいろ試せるようにします!! ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問