「text-decoration:underline」で指定し、太さ、種類、色を変えられます。前のテキスト下線の位置を変える後のテキスト下線は離すことができます。前のテキスト下線の位置を変える後のテキストCSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。underline」を指定すると下線を引くことができます。class="example">下線と文字の色を変える</span>後のテキスト</div>colorで文字色を変えると下線の色も変わります。下線の色だけ変えることもできます。カラーコード」で指定すると下線の色だけ変えられます。種類」で指定すると下線の種類(デザイン)を変えられます。カラーコードを合わせて指定することもできます。class="example3">下線の種類を変える</span>後のテキスト</div>種類の値は下記の通りになります。red">wavy(波線)</li></ul>ただ、種類によっては文字と被って見づらくなります。下線の位置を少し離したいところです。その方法は下記のとおりです。太さ」で指定すると下線の太さを変えられます。class="example7">下線の位置を変える</span>後のテキスト</div>下線の位置を変える「text-underline-offset」は下線の位置を指定するCSSです。指定した値分、文字から下線を離すことができます。class="example4">下線の位置を変える</span>後のテキスト</div>なお、text-underline-offsetはIEでは効きません。borderとの違いborder-bottomを使うことでテキストに下線を引き、その下線の色やデザインを変えることができます。class="example6">border-bottom</span>基本的に同じことができますが、できることできないことに微妙な違いがあります。文字と線の隙間を広げるborderではpadding-bottomを使うことで隙間を広げることができます。これはIEでも効きます。text-decorationでは「text-underline-offset」を使いますが、これはIEでは効きません。IEはほぼ使われないため無視してもいいかもしれません。文字と線の隙間を詰めるborderでは先述した通りpadding-bottomを使いますが、これを0にしても線とテキストの隙間は0にはなりません。マイナスも効きません。text-decorationはもとからくっついているためあとは離すだけです。波線の有無text-decorationはwavyで波線を指定できますが、borderでは波線を指定できません。下線は「text-decoration:underline」で指定し、太さ、種類、色を変えられる。太さ下線の位置を変えるtext-underline-offset以上、下線の太さ、色、種類を変える方法でした。「この記事の内容がよくわからなかった...」「なんかうまくいかなかった...」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。わからないまま突き進むより基本を学ぶのが結局近道です。htmlやCSSをマンガで楽しく学ぼう【180ページ単行本1冊相当量】htmlから収益化までホームページ作成の基本をひととおり、マンガでクスっと笑いながら学べます。9年間ホームページを作ってきた作者の実績に基づき作られた確かな内容です。マンガでわかるホームページ。