ホームページ作成(文章や文字)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

下線を引きたい

文章の一部に下線を引きたい場合の方法を説明します

さまざまな場面で、文中に下線を引く場合がよくあると思います。

強調したい場合、注意事項などなど。この様な下線を引く場合には、下記の方法で簡単に引く事が可能になります。

また、下線自体の”色”や”太さや形状”を変化させたい場合には、それぞれ
下線を引きたい(色を変えたい)
下線を引きたい(線種や色も変えたい)
を参考にしてわかりやすホームページを作成してみてください。

sample

文章の一部に下線を引く方法です。

HTML <u>〜</u>

<u>〜</u>を使用する場合は、文中の下線を引きたい部分を<u>〜</u>で囲います。

書き方は

文章の一部に<u>下線を引く</u>方法です。
こうなります
IE7
IE
Firefox
Opera

ホームページ作成TOP > 文章や文字 > 下線を引きたい > このページのTOP ▲

HTML <ins>〜</ins>

<ins>〜</ins>を使用する場合は、文中の下線を引きたい部分を<ins>〜</ins>で囲います。

書き方は

文章の一部に<ins>下線を引く</ins>方法です。

<ins>は、挿入や追加した部分を表現する事が目的なものですので、本来下線を引く為のものではないです。結果的に下線になります。 <ins>〜</ins>の〜に文字を入れておけば斜体になります。

こうなります
IE7
IE
Firefox
Opera

ホームページ作成TOP > 文章や文字 > 下線を引きたい > このページのTOP ▲

スタイルシート text-decoration:underline

下線を引きたい部分に、text-decoration:underline;のスタイルを適応します。文章中の一部の場合は<span>〜</span>に対して設定します。

このtext-decorationを使用して、TOP > リンク > リンクの下線を消す方法事ができますので参考にして下さい。

要素に直接書く
書き方は

文章の一部に<span style="text-decoration:underline">下線を引く</span>方法です。
headに書く
書き方は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--
  span {text-decoration:underline}
 -->
 </style>
 </head>
 <body>

<p>文章の一部に<span>下線を引く</span>方法です。</p>

 </body>
</html>
こうなります
IE7
IE
Firefox
Opera

ホームページ作成TOP > 文章や文字 > 下線を引きたい > このページのTOP ▲