2019/05/07)文章に線を引く方法には3つの手法があります。シンプルな線を引く場合や、見た目にこだわった線を引きたい場合など、用途に合わせて使い分けましょう。まとめシンプルな下線を引く「text-decoration」シンプルな下線を引きたい場合は「text-decoration」プロパティを使います。ポピュラーな下線を引く方法であり、シンプルな下線を引くことが出来ます。こだわりがなけれなこの方法だけ覚えておくだけでも問題ないでしょう。シンプルな下線を引いてみよう文字にシンプルな下線を引くには、下記のように書きます。underline;text-decorationに「underline」を指定することで下線を引くことができます。シンプルな下線の実行結果<p>今思い浮かんだダミーの文章です。class='demo_01'>今思い浮かんだダミーの文章です。underline;}今思い浮かんだダミーの文章です。今思い浮かんだダミーの文章です。シンプルな下線が引かれているのが確認できると思います。線の色、線の形状、線の位置など細かい指定はできますが、まずは基本形のこの書き方を覚えておきましょう。下記のように半角スペースで区切って指定します。線の色;好きな順序で指定することができ、特に指定する必要がない場合は省略できます。線の位置それぞれ指定の方法を解説しています。線の位置についてどこに線を引くか?をキーワードで指定します。none...線なしのことです。ブラウザの初期値になります。リンクなどデフォルトで下線がついているスタイルをなくしたい場合なども、「none」を指定することでなくすことが出来ます。line-through...取り消し線です。文字の中央に線が表示されます。underline...下線です。文字の下部に線が表示されます。overline...上線です。文字の上部に線画表示されます。線の形状について線の形状をキーワードで指定します。キーワードには下記のようなものがあります。solid...一本の直線です。何も指定しない場合の初期値となります。double...二重線です。dotted...点線です。dashed...破線です。wavy...波線です。線の色について線の色を指定します。何も指定しない場合、現在の文字の色になります。色の指定方法は、カラーネームや、カラーコードで行います。色の指定方法の詳細については、文字の色を指定する方法と同じですので、「文字色を変える「color」プロパティの使い方解説」を御覧ください。実際に指定してみようそれでは実際にスタイルを指定してみましょう。いくつか例を上げてみます。簡単な下線や、取り消し線などを引く場合は、「text-decoration」が最も簡単です。文字と下線がくっついるのが若干気になる点です。現状、下線と文字の距離を自由に変更できるプロパティは用意されていないので調整することが出来ません。線の太さをを自由に変えることも出来ません。「text-decoration」は非常に簡単に下線を引くことが出来ますが、その分カスタマイズは出来ないんですね。これらの問題点を解消したい場合は、「text-decoration」ではなく、後述する「border-bottom」を使うと解決できます。3種類を同時に指定することができると説明しましたが、それぞれ専用のプロパティが用意されているので、別々に指定することもできます。text-decoration-line...線の位置を指定するプロパティです。text-decoration-style...線の形状を指定するプロパティです。text-decoration-color...線の色を指定するプロパティです。「text-decoration」は上記3つのプロパティのまとめて指定しているんですね。ちなみに分けて書いても、まとめて書いても結果は同じになります。下記の二つは同じ意味になります。dotted;}わんだふるなアンダスタンドを!基本的には「text-decoration」を使って方が簡潔に書くことができるのでそちらを使えば問題ありません。「親要素のスタイルを継承している子要素の、下線の色だけを変えたい」という場合などに、個別のプロパティを使うと良いでしょう。「border-bottom」を使うことで、「text-decoration」では出来なかった、線の太さの変更や、文字と下線の距離の調整が出来るようになります。「border-bottom」は線の「形状」・「太さ」・「色」の3つの値を指定することが出来ます。それぞれ半角スペース区切りで指定します。3つの値のうち初期値のままでいい場合は省略も可能です。線の形状について主な線の形状は以下の様なものがあります。none...線なしです。solid...一本の直線です。double...二重線です。dashed...破線です。dotted...点線です。線の形状の種類は「text-decoration」と似ていますが、波線が用意されていないので注意しましょう。例として、3pxのオレンジの一本線を引いてみましょう。orange;}わんだふるなアンダスタンドを!線の太さを変えることで、印象もかなり変わりますね。線と文字の間に適度な隙間が空いているのですっきりとした印象にもなりました。文字と下線の隙間に関しては、padding-bottmで変更することも出来ます。「background」プロパティは元々は背景色を指定するためのプロパティですが、背景色にグラデーションを指定し一部を透明にすることで蛍光ペンで引いた様なスタイルを作ることが出来ます。使い方は下記のように記述します。0%);「線の太さ」は、透明にする割合を指定していて、値が大きほど透明部分が大きくなり線は細くなります。0%);とした場合、40%が透明になるので、60%の太さの線が表示されます。蛍光ペンのような線を引く「background」すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。関連記事related【css】透明度を表すrgbaとopacityの違いや使い方を解説html&CSS入門HTMLの見出しタグの使い方。文字色を変える「color」プロパティの使い方解説html&CSS入門パンくずリストhtml&CSS入門すずりデザイナー/フロントエンド/アフィリエイタープログラマーを経てWEBデザイナーになりました。現在は主にBtoCのサイトをデザイン・制作しつつ、情報発信についての知識を発信しています。