HTML/CSSで下線(アンダーライン)を引く方法

サイトのデザインをしていると、画像や配置など基本的なものをより良くしようと作業を進めていきます。 そして、基本が出来上がると、もう少しデザイン性を高められないかと下線や文字の色などの細部に目がいくようになります。 この細部のデザインの作業も、ユーザーの利便性を上げるために、サイトをより向上させていくには重要な要素となるので、 この機会にぜひCSSを使用しての下線の引き方の基本を習得してみてはどうでしょうか。

サイトの下線は必要か

WEBサイトを閲覧していると、気になる言葉や内容について詳細が知りたいときなどにクリックすると該当のページに移動できればとても楽に情報を得ることができます。またサイトの運営者としてはリンク先から自身のWEBサイトに訪問してもらえる機会が多い方がいいのですから、リンクを設定できることは自身のサイトに誘導するのに効果的な方法になります。

リンクがあると基本的には上の図のように文字の色が青になり下線が引かれます。ユーザーにとっては一目瞭然で利便性のいいサイトになります。しかしもし下線がなかったら気になる言葉にマウスをあててマウスが反応をしたらリンクがあると判断します。ユーザーにとっては掘ってみないとわからない宝探しと同じようなものになります。

それなら全てのサイトのリンクに文字の色を変え、下線を引けばいいのですが、サイトの運営者としてはデザイン性を考えた時に無い方がいいのではないか、と考えることもあるのではないでしょうか。

SEO対策にも影響する

実はこのユーザーにとっても利便性があるという点を考えると、SEO対策にも関連していきます。GoogleにしてもYahoo!にしても、検索エンジンの順位についての基準ははっきりと公表をしていませんが、基本的な考え方はユーザーにとって利便性の高いサイトが好まれる傾向があります。それは情報のわかり易さに合わせてデザイン的にユーザーが見やすく迷わないようにできていることも入ります。

それではこのリンクのある個所に下線を引くということはどのようになるのでしょう。Googleはリンクについても評価の対象にしており、クリック率の高いリンクやわかり易く表示されているリンクのあるサイトについては高い評価をするようになり、逆にクリック率が低いものや、リンクがわかりにくくなっているサイトは評価が低くなりがちです。またリンクがわかりにくくなっているものはスパムとして認識されることがあります。実際にリンクが無いように作られているスパムのサイトもあるので、検索エンジンにとってユーザーを守るために必要なことになります。

コアアルゴリズムアップデートも2021年6月から開始

アルゴリズムとは、検索順位を決定する際にGoogleなどが独自に検索順位を決定するためのルールのようなものですが、詳細は悪用されないように各社、原則非公開にしています。

アルゴリズムの改定は常に行われていますが、コアアルゴリズムアップデートのタイミングでは大幅に改定されるので、アップデートが終了した時に一時的、もしくは改定の内容によっては大幅な順位の下落が起こる場合があります。

現在は8月に終了の予定なので、自身のサイトの大幅な順位の下落が起こっていないか注意しておくことが必要です。このコアアルゴリズムアップデートのスケジュールなどはGoogleのTwitterで事前に告知も行われているので、こちらのチェックもしておくと慌てなくてすみます。

このようにSEO対策は一定の基準があるわけではなく、その時のユーザーの利便性によって変わってくるので、今回のリンクや下線の設定についても一度、設定したもので長年の対策になっているとは限りません。WEBマーケティングの担当者は常に新しい情報に目を配っていくことが大切になってきます。

下線の色がユーザーに与える心理的な印象

色が無意識のうちに人に与える影響はおおきなものがあります。洋服やインテリアの配色でも華やかな印象の色、落ち着く雰囲気を作る色などを選んでいくことはありませんか。

この他にも色は食欲を無くす色、興奮する色など感情をこえて行動に影響することがあります。下の図は色相環と呼ばれるもので配色を考える時に使用するものです。

この円の反対側に位置する色同士が補色と言われており、合わせるとお互いが目立つ色合いになります。また補色と間違えられやすいものに反対色というものがあります。これは補色と近い関係にある色の組み合わせを表すもので、補色に近いものと思っていれば違いも分かりやすくなります。ちなみに補色の組み合わせは皆さんが目にするロゴなどでもよく使われているのではないでしょうか。

補色とは反対に色相環でいくと隣り合った色合いのことを類似色相と言います。色相をみていても感じるかと思いますが、落ち着いた調和のとりやすい色の組み合わせが作りやすくなっています。企業のロゴなどの例を挙げると下のロゴのようなものがあります。

下線に活かすとどうなるのか

青色の下線　　→　　集中力を高める効果があり、じっくり読んでほしい記事に効果的に働きます。　　また、デメリットなことを記載した場所に使われることが多いです。

黄色の下線　　→　　気持ちを元気にする効果があるので大事なことを伝える時に効果的に働くと言われています。また警告ほどではないが、注意を促したい記載事項に使われることがあります。

赤色の下線　　→　　興奮させる働きがあるので、強調したい時や購買意欲を掻き立てたい時などに使用すると効果的だと言われています。その効果ゆえに使いすぎるととても「うるさく」「落ち着かない」サイトとなってしまうので注意が必要です。また一般的には警告を促したい時に使われることがあることが知られています。

また下線が太くなればなるほど強調したいときに使うことができます。

下線を多用すると起こること

学生時代に試験勉強をしていると、あれもこれも大切だと感じ、教科書がマーカーだらけになって、結局どれが大切かわからなくなってしまったという経験はないでしょうか。このような事にならないためにも、自身のサイトが何を伝えたいのかを明確にして計画を立てることが大切です。下線は本当に必要とする個所にのみ使用することをお勧めします。

下線にも様々なデザインがある

一言で下線といっても色々なものがあります。下線を引くのであればサイトにあったデザインがあれば、表現の幅が広がるというものです。サイトのデザインをより魅力的にするためにはどのようなものがあるでしょうか。

HTMLやCSSを利用して下線を引くにはどのような方法があるのでしょうか。次からは実践的にサイトに下線を引いていく方法を解説していきます。

HTML（HTML5）/ CSSで下線を引く（デザインする）方法 

実際にサイトの作業をする前にHTMLとCSSの違いについて解説します。HTMLとCSSはどちらもサイトを作成するための要素ですが、働きが少し違います。HTMLは単純に文字を入力してテキストを作成するためのものになります。この作成された単純な「文字」にバラエティ豊かなデザインを添えていくのがCSSの役目になります。HTMLでもCSSでも同じような作業が可能なものもありますが、少し意味や方法が違ってきます。

例えばHTMLで文字を大きくする時には「h1」タグなどを利用して大きくしますが、CSSでは指定した場所の文字サイズを変えていくことができます。SEO対策としては「h1」タグで見出しということを明確にすることが大切になってきますが、部分ごとの文字サイズの変更であればCSSで対応することも可能です。

また、文字の色の変更もHTMLでもCSSでも変更が可能ですが、それぞれの役割を鑑みると、文字の色はCSSで変更することをお勧めします。

今回、ご紹介をする方法は基本的にリンクを貼るのとは関係なく下線が引かれている状態の作成方法です。教科書の強調したい部分に線を引くようなものをイメージすればわかり易いかと思います。

色を付ける（text-decoration-color）

下線とテキストに色を付けるためのコードを紹介します。

例えば、「詳細は後日、当ホームページにて公開します。」という文章に下線を引くことにします。

まずただの下線のみであれば、

➜　　　　　詳細は後日、当ホームページにて公開します。

となり、この時のHTMLは

となります。

これに該当下線部分に色を付けるとします。

➜　　　　　詳細は後日、当ホームページにて公開します。

となるわけですがこの時にはCSSコードも加わり、

という風になります。この方法ですと文字の色と同じ色で下線も自動的に変更されます。このコードでは線の太さまで調整することはできません。

このように表示すると現在、公開できないことを明記しつつ、後日、戻ってきたユーザーがこのサイトで詳細がわかることを期待させることができます。

これを下線と文字の色を変るとなると別のCSSのコードが必要になります。

➜　　　　　詳細は後日、当ホームページにて公開します。

このような表示を表すCSSのコードは下記のように表示されます。

ただ上の見本で感じた人もいるかもしれませんが、実際には違和感があり、下線とテキストは同じ方が安定したデザインになります。

点線にする

もう少し軽い感じで強調したい時には下線を点線にすることもできます。

今回、線を2pxの点線、色を水色（#87CEFA）に設定するためのCSSコードを加えたものは

となります。

そして表示は

➜　　　　　詳細は後日、当ホームページにて公開します。

このような形になります。

実線で引くよりはかなり軽い感じになり、太さや色について変更できる幅は広がります。

点線と似ているものに破線というものがあります。点線が文字通り点を並べることによって線を作るもので破線は短い線を並べて一本の線を表現しているものですが、ミシン目ともいわれています。製図や複数のデータをまとめる時などを作成する場合には使う種類が決まっています。また書類の切り取り線などでは点線を使用することが多くなります。この破線を表現するCSSは点線の「dotted」の部分を「dashed」に変更することで表示できます。

太さを調整する

線の太さの調節は「px」で表現することができます。先ほどもCSSのコードにあったものでいけば「2px」の部分で、数字を大きくしていけば線が太くなっていきます。色と同じくサイトに合ったデザインを自由に選べるので可能性が広がってくるのではないでしょうか。

➜　　　　　詳細は後日、当ホームページにて公開します。

➜　　　　　詳細は後日、当ホームページにて公開します。

二重線にする

次は

➜　　　　　詳細は後日、当ホームページにて公開します。

といったよう二重線を引いてみます。

CSSのコードは

といった形になり、6ポイントの水色の下線が引かれます。6ポイントと言えば太めの線になりますが、もう少し細めがよければこの部分の数字を小さくします。

位置を調整する 

位置を調整するCSSのコードはありますが、このコードが通用するのはIE（Internet Explorer）のみとなります。現在、Google chromeやfirefoxなどを利用するユーザーも多いので、使用する時には正確に閲覧できないユーザーがいる可能性があることを念頭に使用するかどうかを決めた方がよいでしょう。

ちなみにコードは「border-bottom」を入れた上で「above」などを入れて余白の位置を調整することができます。

マーカー風に引く

下線よりは少し柔らかい感じにするには、マーカーのような感じで下線を引くこともできます。

➜　　　　　詳細は後日、当ホームページにて公開します。

この時のCSSのコードの表示は

という形で出来ます。

現在、50％のサイズでマーカーが指示されていますが、この数字を上下させることにより太さを変更することができます。現在は50％ですが、数字を挙げていく毎に線が細くなっていきます。つまり、50％より70％で表示させる方が線は細くなるという訳です。pxでは数字が上がるほど太くなっていっておりましたので、ご注意ください。

そして

「transparent 50%, #a8eaff 50%」の数値をどちらも「0」にすると

➜　　　　　詳細は後日、当ホームページにて公開します。

となります。ちなみに今回の色は「#FFFF00」で指定しました。この色については後ほど解説しますので、今は「黄色=#FFFF00」だということを認識いただくといいでしょう。

下線として波線を引く

波線の下線を引くのはどのようにすればよろしいでしょうか。

➜　　　　　詳細は後日、当ホームページにて公開します。

波線のコードを使用すると現在はfirefoxでしかコードは通用しないので、どのブラウザでも表示されるためには波線の画像を組み込む必要があります。

CSSのコードとしては

となりますが（●●●）には波線の画像のURLが入ります。このURLはすでに挙げられている画像を取得して挿入することもできますが、自身で作成した画像をサーバーなどにアップロードしてURLを取得し、使用することもできます。「20px」は波線の大きさで数を小さくすれば画像も小さくなります。

波線の画像のURLを取得する

それでは自身で作成した画像（今回の場合は波線）のURLを取得するにはどうしたらよいでしょうか。サーバーにアップロードしてURLを取得することも可能ですが、はてなブログなどを利用してサイトを作成している場合でしたら「はてなフォトライフ」に一旦アップロードをして取得することもできます。

このサイトははてなブログを利用しているユーザーしか使えないわけでなく、写真の共有サイトですので、このサイト自体に登録して使うことが可能です。300m／月までなら無料で使用することができ、写真も公開、非公開が選べるようになっています。

ここに一旦、波線の画像をアップロードすると画像のURLが作られます。写真であればこのURLを共有したユーザー同士が閲覧できるという仕組みですが、今回はURLの取得するために使用しています。

ストライプ

なんとなく聞き慣れないような気もしますがストライプの下線とはどのようなものでしょうか。

上記のように文字通りのストライプを下線にしたものです。ただの線で表現するのとは違い、少しポップな感じのWEBサイトには向いているのかもしれません。

この下線を表示するには少し複雑になり、まずは疑似要素を作成する必要があります。

疑似要素とはアイコンを使用する際に使われることが多いものですが、HTMLを追加せずに「before」や「after」といったコードを使ってCSSで疑似的にHTMLの要素を追加して装飾を行うことを言います。この方法はCSSのコードの入力の量が増えますし、ミスが起きやすくなるので注意しましょう。

それではこの疑似要素を使ってCSSコードで作成するとどうなるでしょう。今回は「after」を使用して作成します。

このコードでまずは余白を設定します。次に

一見、このストライプは青のストライプと考えてしまいますが、コードで表現させようとすると上の見本のように白と青の色で指示をだしてストライプが構成されていることになります。そして最初の7pxがストライプの太さになっています。同じく後ろの色の部分で表示されるpxはそれぞれの色の幅を指示しているものになります。

ストライプを見出し全てに表示させる場合はこのclass名の指示が無く「h1」といった見出しタグで直接指示することも可能です。

途中で色が変わる

下線の色を途中から変えることもできます。

➜　　　　　詳細は後日、当ホームページにて公開します。

今回は全ての文章に下線を引きます。

上記は今回、h4のタグに対して下線を引きました。ストライプの時にもありましたが、今回も「after」の疑似要素を使用しています。その他の部分も考え方はストライプを作成した時と似ているので、どちらかをマスターしていけば、自身が作成したい下線のバラエティもある程度広がっていくのではないでしょうか。

色を指示する

ここまで来て色の指定で不思議な数字の羅列が気になった方もいるのではないでしょうか。初めてサイトの作成することになった人でもwordやexcelは使用したことがあると思います。文字の色を変えたりする時に、色を指定すると知らない内にこの数字で色を指定していることになるのです。これはカラーコードと呼ばれているものであり、下記のように色の見本を掲載しているサイトも多数あります。実際に作成しない人でも作成者に指示を出すときに「淡い赤」や「クリーム色」などといってもニュアンスがはっきり伝わらないことが多くあります。そのような時には電話やメールであってもこのカラーコードを伝えれば、間違いなく希望の色が伝わるので、活用することをお勧めします。

原色大辞典のサイト

複数行にする

複数行に下線を引くというとどのようなイメージがわきますでしょう。ここではノートの罫線のような下線の引き方を解説いたします。例えば下記のようなサイトになります。

これはまず下線の画像を用意して、p要素に下記のコードを入れるとできます。

25pxは画像の高さを表しているので、開けたい分だけ広げることができます。次の0pxは余白にあたります。この設定ですと、余白は0となっています。

今回は点線で作成しましたが、使用する画像によって下線を変えることができるので、雰囲気にあった下線を選ぶことができます。

下線を消す方法 

SEO対策的な観点からはリンクが貼られていることがわかり易い方が検索順位に関係するとお伝えしましたが、それでもデザイン的にリンクの下線は外したいという場合の作業はどのようになるのでしょうか。リンクを貼ると自動的に下線が引かれるように設定をされているので、そのリンクを消すためのCSSのコードを入れる必要があります。

この場合、下線を消しても、文字の色を変えてリンクが貼られていることをユーザーに分かるようにしておくことをお勧めします。一般的には文字の色は青色であればリンクが貼られていると認識できます。

下線を消す方法

下線を消すにはこのリンクを貼った時に自動的に入っているコードを打ち消す必要があります。そのコードが「text-decoration:none;」となります。

テキストとしてはこのようなものになっており、全ての文章にリンクが貼られている状態です。

➜　　　　　詳細は後日、当ホームページにて公開します。

そしてこのテキストのHTMLのコードは下記のようになります。

●●にはリンク先のURLを入れます。

これをCSSのコードで表現すると

上記のようなテキストになります。

下線はありませんが、文字の色でユーザーが見てもリンクが貼っていることはわかるようになっています。

カーソルが当たった場合のみ下線を出す方法

最近ではネットで検索をすることが多いユーザーは、自身が知りたい用語や項目があると下線が無くてもカーソルを当ててみてリンクが無いかどうか調べることがあります。上記のような下線を消して、文字の色を変えることにより、リンクがあることを期待させることができる方法もありますが、もう一つの方法としてはマウスを当てると、リンクを示す下線が出てくる表示の方法もあります。

テキストとしては下記のような形です。

このように表示をさせるには疑似クラスを使用して設定をします。先ほど疑似要素というものを説明いたしましたが、似たような名前でも若干働きが違います。CSSをさらに使いこなしていくには疑似要素と同じく知っておくことをお勧めします。

疑似要素と疑似クラスの違い

この疑似クラスとは疑似要素が指定されたテキストの一文字や一文など要素の中の一部に対して適用されるものですが、疑似クラスは今回のようなマウスをあてると下線が出てくるといったような文書構造以外の部分や単体のセレクタ（デザインの指定をどの部分まで適用するかを指示するコード）では表現できない内容を指示する時に使います。

疑似クラスには「:link」「:visited」「:hover」のようなものがあり、今回は「:hover」を使用して表示させます。

HTMLのコードで表示させると

となり、

CSSのコードであれば下記のようなものになります。

このようにCSSを利用することによりユーザーの利便性を保ちつつ、さらにデザイン性を高めていけるようになりたいものです。

下線にアニメーションを付ける方法 

下線にも動きを持たせてよりデザイン性の高いサイトを作成することができます。上記の形式でいけばカーソルを合わせると下線が表示されるのに近いものですが、今回はそれにさらに動きをつけていくというものです。

このような下線を引くには先ほど出てきた疑似クラスの「:hover」を使用して表示させます。

下線が左から表示されていく

下線が消えている状態で該当の文章にカーソルを合わせると、下線が左から右へと流れるように表示されていく仕組みです。カーソルを外せば同じ動きで右から左へと下線が消えていきます。

この時のCSSは下記のようになります。

少し違ったパターンでは下線が左から出てくるのは同じですが、今度は左から消えていくパターンもあります。この時のCSSは

となります。

下線が中央から表示されていく

下線が消えた状態で同じくカーソルを合わせると、中央から左右に下線が広がり、離すと左右から下線が中央に向かって消えていくというものです。

この時のCSSは

となります。

同じく中央から表示された後に中央から左右に向かって下線が消えていくという動きもあります。

CSSは下記のようになります。

左から右へマーカーで引くように下線を引く

カーソルを合わせるとマーカーのような下線が左から右へと移動していくように引かれ、消える時には右から消えていくようになっています。

CSSのコードは下記のようになります。

下線を多用しない 

これだけ色々な下線があれば多用してバラエティゆたかなサイトにしてみたいと思った人もいるかもしれません。覚えたのだから、色々使用したくなる気持ちもよくわかりますが、例えば下のようなサイトが出てきたらユーザーの立場としてどのように思うでしょうか。

さすがにこのようなデザインを検討する人も少ないかもしれませんが、あれもこれも見てほしいという制作者の意図が強すぎて訪問したユーザーには何が言いたいのか伝わりにくいばかりではなく、魅力も半減してしまいます。

上記の見本では「背景+太字+下線+多彩な文字の色」と装飾が多数重なっています。そしてこれは現在、準備中のスポットの紹介のサイトですから、実際にリンクは「詳細は後日、当ホームページにて公開します。」の一文にしか貼られていません。

しかしユーザーにしてみれば色々、リンクが貼られているのではと勘違いもしてしまいます。

装飾を同じ個所で使うのは2種類程度で抑えるぐらいがデザイン性も向上し、ユーザーにとっても見やすいサイトとなります。

その為にもサイトの制作をする時に一番伝えたいこと、次に伝えたいことなど情報の重要度をまとめておくことが大切です。

まとめ

自社のサイトの重要な部分を表現する時には下線を使用します。それが殺風景な印象を与えてしまうことや、雰囲気がそぐわない時には担当者はやはり悩んでしまうところです。そのような時にはCSSも利用してサイトを作成することによってデザインの幅を広げ、訪問したユーザーの利便性と先を読みたくなるようなデザインにしてはどうでしょうか。

ただあれもしたいこれもしたいとサイトを作成する案が定まらない時に、そのままの状態を反映させてしまうと、まとまりのないサイトができてしまい、それでは本末転倒です。一度、全てをクリアにしてシンプルなサイトを作成してみるのも一つの方法です。

さらに制作サイド側も冷静な判断をするためには、時間をおくことが必要です。ユーザーの動向や、第三者の意見を踏まえ、その上で考えると最初には見えてないことが見えるようになります。

ユーザーに何を伝えたいか？その軸がしっかり固まったうえでリニューアルやブラッシュアップをしていくというのがベストな方法です。

どんなに検討しても一回で理想のサイトは完成するものではありません。何度も検討を繰り返し、それを重ねていくことで魅力的なサイトとなる、ということを念頭おいて改善をしていくことをお勧めします。