2020/02/04SHAREツイートシェアはてブLINEPocketこんにちは、@codeship_techです。文字に下線をどうやって引けばいいですか??ということで、文字の下線についての質問ですね。下線はwebサイト内の文字を目立たせたい、お洒落に見せたい時によく使いますよね。実は線の引き方はいくつかパターンがあるんです!それではこちらの質問に答えていきます。text-decoration、border、擬似要素の3パターンで書けます!作り方は他にもあると思いますが、頻繁に使われている作り方は3パターンかと思います。それぞれ解説していきます。1text-decorationを使用して下線を引く場合text-decorationはみなさん馴染みがありますよね!よく使うaタグに初期設定として引かれている下線がtext-decorationです。このプロパティではシンプルな線のみ引くことができます。color:#f00;/*色を赤に*/}2borderを使用して線を引く場合この作り方を使う人が多いのではないでしょうか。borderを使うことで、普通の線だけでなく様々な種類の線を引くことができます。|線の種類|太さ|色|このように記述します。/*点線*/様々な種類の線を引くことができます。それは、borderは文字の持っている領域にのみ適用されることです。線の位置や長さなどは全て文字の大きさ(文字の領域)に依存するということです。シンプルに線を引きたいだけならおススメですが、もし長さを変えたい、特殊な場所に線を使用したい場合にはborderでは線を引くのが難しくなります。ポイントborderは種類は多いけど、大きさや位置に制限があるそこで、おススメするのが次に紹介する疑似要素を使った線の引き方です。3擬似要素を使って線を引く場合みなさんは擬似要素をご存知でしょうか。すごく便利なもので、簡単に言えばHTMLに記述しなくとも、CSSだけいろいろできる書き方です。first-letterは擬似要素の1つです。“線のように見える箱”を作ります。5px;}このように記述をすることで下線を引けます。上下左右はdisplayで変えるため、displayに関する知識が必要になります。次回、この方法を使用した上下左右の線の引き方、擬似要素、diplayなどを詳しく解説します。本日は、文字の下線の引き方について解説しました。CodeShipってどんなところ?授業日記についてのご意見CodeShipの授業について「こんな事が知りたい・紹介して」というご意見・ご提案がありましたら、CodeShip公式Twitterアカウント(【CodeShip】プログラミングスクール)までDMまたはリプライにてお寄せください。キャリア選択の実現”を目指す、池袋のオフラインプログラミングスクール。活かす・趣味など、プログラミングを学習する全てのを目的達成を応援するため、技術やプログラミング、キャリアについての情報発信をしています。日々プログラミング学習を進める皆さんの支えや気づきになるよう、CodeShipの授業内での技術・プログラミング・キャリアに関する質疑応答や、卒業生のインタビューなども公開していきます。【Q&A】擬似要素ってなんで使うの??NEW【Q&A】効率よくコードから文章を探す方法を教えてください。