CSS 文字の下にラインを入れる
公開日：
:
CSS備忘録 css, CSS Jquery
長い文章にノートのように罫線が入っている感じをCSSでやってみました。
CSS
.underline p {
border-bottom: 1px dotted #999;
line-height: 2em;
display: inline;
padding-bottom: 2px;
text-align: left;
width:500px; /*※幅を指定する必要あり*/
word-wrap:break-word;
}
html
<div class="underline"><p>ここに文字を入れる</p></div>
このようになります。とても長い文章の時などに良いかなと思います。他にも画像を使って原稿用紙のようにするというものもあるようです。
また、いろいろ試してみたいと思います。
スポンサー
関連記事
-
-
見出しのデザインを変えてみる
見出しのデザインをいろいろと工夫してみたいと思います。 こんな感じです 囲みの線の色を変
-
-
CSSで画像に枠をつける
いつもつかうCSSなのに、忘れちゃうことがあって、また、ネットで調べなおしたりして時間ばかり掛かって
-
-
ソースコードを表示するのに便利な「SyntaxHighlighter Evolved」
サイトを作っていると、備忘録的にソースコードを分かるところに残しておきたいということがあります。
-
-
CSSだけでタブボックスを実装する
今、力を入れているサイトのメニューが増えてきて、自分でもリンク先を探すのに戸惑ってしまう。 そこで
-
-
CSS 強調したい文字を枠で囲む
ホームページを作っていると、この部分は強調したいという場合が多くあります。 太字にしたり色を変えた
-
-
個別のHTML, ページごとにCSS, JS, PHPを追加・管理できるプラグイン
先日から、備忘録的にCSSコードをWordpressに記載するようにしていますが、どのような表示にな
-
-
CSSアメリカンな吹き出しの 見出しを作る
アメリカンな吹き出しの 見出しを作る ちょっとPOPな記事に合いそうな見出しです。
-
-
CSS 回り込み解除（clear）の指定忘れでレイアウトが崩れた
CSSのレイアウト崩れで悩む 昨日から、CSSのレイアウト崩れで悩んでしまった。 「floa
-
-
CSS 文字の下にラインを入れる（画像使用）
以前気に入って使用していた、文字の下にラインを入れる方法。 画像を使うのでちょっと凝ったライン
-
-
SEOではタイトルが重要。Googleの検索結果表示が変更に
先日から、SEOを意識して各ページの見直しを行っています。 SEOのサイトチェックをするのに、
