TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLで文字(テキスト)にアンダーラインを付ける方法【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLで文字(テキスト)にアンダーラインを付ける方法【初心者向け】

初心者向けにHTMLで文字(テキスト)にアンダーラインを付ける方法を解説しています。下線をつけることで文章が読みやすくなり、目立たせることができるはずです。難しい知識は必要ないので、HTML初心者でもぜひ覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

この記事では、HTMLで文字(テキスト)にアンダーラインを付ける方法を解説します。

アンダーラインを付ける方法を利用して見ている人に訴えたい内容を強調することが可能です。

アンダーラインは下線とも言いますが、下線の使い方を活用することで、コンテンツの内容が伝わりやすくなります。

本記事はテックアカデミーのはじめての副業コースのHTMLカリキュラムの内容をもとに解説しています。

目次

そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

アンダーラインを付けるタグとその書き方

アンダーラインの効果

アンダーラインは日本語でいうと下線です。

文字通り表示したテキストの下に下線を引くことができます。

アンダーラインをつけることで、見出しの印象を強くしたり、下線を引くことで文中の重要な単語を強調したりすることができます。

 

書き方

アンダーラインはタグを追加するだけで簡単に記述できます。

<u>アンダーラインが引かれます。</u>

このようにするとフォントと同じ色のアンダーラインが引かれます。

 

<u>タグは、<u>内の文字列にアンダーラインを引くという意味のタグなので、見出しなどにもアンダーラインを引くことができます。

<u><h1>見出しにアンダーラインが引かれます。</h1></u>

このようにすると、見出しの下にアンダーラインが引かれます。

 

uタグの装飾方法

<u>タグでも確かに線は引けるのですが、フォントと同じ色の線で太さなどは変えることができません。

そのため実際のWebデザインで使用するには少し不自由を感じます。

そこでアンダーラインを引く時に使用されるのが、spanタグです。

 

spanタグとは

spanタグ自体に特別な意味はありません。

つまり、spanタグを利用したからといって表示上変化は起こりません。

では、spanタグにはどのような利用法があるかというと、spanタグで囲まれた部分をインライン要素としてグループ化することが可能です。

<span>インライン要素としてグループ化される</span>

 

インライン要素とは、文章が記載されている部分のみを範囲指定できます。

グループ化とは、指定した内容をひとまとめで認識させることです。



HTMLでspan要素で囲った部分を改行する方法を現役デザイナーが解説【初心者向け】 | TechAcademyマガジン


HTMLでspanを使用して右寄せ表示する方法を現役デザイナーが解説【初心者向け】 | TechAcademyマガジン


 


サンプルコード


<span style="border-bottom: solid 1px red;">
  アンダーライン１行目<br>
  アンダーライン２行目
</span>


 


解説


span で、アンダーライン１行目とアンダーライン２行目という文字列をインライン要素としてグループ化しています。


style=”border-bottom: solid 1px red;では、赤いアンダーラインを実装しています。


 


 


実行結果




実際に書いてみよう


それでは実際にアンダーラインを記述していきましょう。


 


uタグの例


まずuタグですが上に挙げた例と同じように文字をuタグで加工するだけで実現できます。


 


HTML


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <u>アンダーラインが引かれます。</u>
  </body>
</html>


解説


<u>アンダーラインが引かれます。</u>でアンダーラインを引いた状態の文字列にしています。






実行結果








spanタグの例


次にspanタグですが、少し太めのアンダーラインを引いてみましょう。


 


HTML


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTML</title>
  </head>
  <body>
    <span style="border-bottom: solid 5px red;">アンダーライン</span>
  </body>
</html>


 


解説


<span style=”border-bottom: solid 5px red;”>アンダーライン</span>で、アンダーラインの部分に太い赤線が表示されています。


5pxを指定することで太さが5pxというサイズの太めの線になりました。


 


 


実行結果




[PR] Webデザインで副業する方法とは
まとめ


今回はHTMLでテキストにアンダーラインをつける方法について解説していきました。


書くと分かるように、とても簡単にアンダーラインを引くことができたと思います。


また、spanタグではstyle指定の他にも様々なプロパティを設定することができるので気になる方は調べてみてください。


HTMLで強調タグと区切り線を使う方法も合わせてご覧ください。


 


この記事を監修してくれた方






中本賢吾（なかもとけんご）

アジマッチ有限会社　代表取締役社長開発実績PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。		










HTMLを学習中の方へ


これで解説は終了です、お疲れさまでした。


    

  • つまずかず「効率的に」学びたい
    • 

  • 副業や転職後の「現場で使える」知識やスキルを身につけたい
    • 



HTMLを学習していて、このように思ったことはありませんか？


テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。


合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を完全オンラインでしっかり習得できます。


まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。


時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

            


          

          


  
  



  
  






  

    

      記事を検索
    

    
  



  
  

  
      

      

        関連するキーワード
      

          

  
  
      

      

        関連する記事
      

      

  

    

      
        

      
    

    

      

        HTMLでテーブル内に日付を表す方法を現役エンジニアが解説【初心者向け】
      

      

        HTMLでテーブル内に日付を表す方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも...      

      
      HTML      
    

  



  

    

      
        

      
    

    

      

        HTMLのtextarea要素の使い方を現役デザイナーが解説【初心者向け】
      

      

        HTMLのtextarea要素の使い方について解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方 の記事を読むとさらに理解が...      

      
      HTML      
    

  



  

    

      
        

      
    

    

      

        HTMLでよく使う数学記号を現役デザイナーが解説【初心者向け】
      

      

        HTMLでよく使う数学記号について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HTML...      

      
      HTML      
    

  



  

    

      
        

      
    

    

      

        HTMLでCache-Controlを使用する方法を現役エンジニアが解説【初心者向け】
      

      

        HTMLでCache-Controlを使用する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
...      

      
      HTML      
    

  



  

    

      
        

      
    

    

      

        HTMLでテーブルのセルを結合する方法を現役エンジニアが解説【初心者向け】
      

      

        HTMLでテーブルのセルを結合する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

&nb...      

      
      HTML      
    

  



  

    

      
        

      
    

    

      

        HTMLの仕様に関連するW3Cについて現役デザイナーが解説【初心者向け】
      

      

        HTMLの仕様に関連するW3Cについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそも、HT...      

      
      HTML      
    

  


    

  
  
      

      

        あわせてよく読まれている記事
      

      

  

    

      
        

      
    

    

      

        CSSでnth-of-typeとnth-childの違いを現役エンジニアが解説【初心者向け】
      

      

        CSSのnth-of-typeとnth-childの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
そもそもCSSについてよく分からないという方は、CSSの書き方について解説した記事を読むとさらに理解が深まります。
 
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
 

田島悠介

今回は、CSSに関する内容だね！



大石ゆかり

どういう内容でしょうか？



田島悠介

nth-of-typeとnth-childの違いについて詳しく説明していくね！



大石ゆかり

お願いします！


 
nth-of-typeについて
nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似要素です。
擬似要素とは、指定した要素の一部にCSSを反映できる方法のことほ指します。
以下、コード例です。
//兄弟関係にある<span>のうちx番目の<span>を選択
span:nth-of-type(x){ 〜 }
<span>要素の数だけを数えて、x番目の<span>要素のみを選択します。
 
nth-childについて
nth-childとは、指定した全ての要素の中でx番目にある指定の要素を選択する擬似要素です。
//<span>と兄弟関係にある、全ての要素の中でx番目にある<span>を選択
span:nth-child(x){ 〜 }
兄弟関係にある全ての要素を数えるため、x番目にある要素が<span>ではない場合、適用できません。
 
[PR] Webデザインで副業する方法とは2つの違い
nth-childとnth-of-typeはx番目の要素を選択するのでとてもよく似ているものの、指定の要素以外の要素を数えるか、数えないかという違いがあります。
下記のようなHTMLで考えた場合、
<div>
  <span>1</span>
  <span>2<!--このspanに適用！--></span> 
  <span>3</span>
</div>
span:nth-child(2)もspan:nth-of-type(2)も<span>2</span>を選択します。
しかし、例えば下記のようなHTMLの場合には、span:nth-child(2)は、<p>を1番目と数えるので、<span>1</span>を選択し、span:nth-of-type(2)は<span>だけを数えるので、<span>2</span>を選択します。
<div>
  <p>Number</p>
  <span>1<!--nth-child(2)で適用！--></span>
  <span>2<!--nth-of-child(2)で適用！--></span>
  <span>3</span>
</div>


次は下記のようなHTMLで考えてみましょう。
HTML
<html>
  <head>
    <meta charset="utf-8">
    <title>nth-of-typeとnth-of-child</title>
  </head>
  <body>
    <ul>
      <li>
        <h2>List01</h2>
        <span>01</span>
        <span>02</span>
        <span>03</span>
        <span>04</span>
        <span>05</span>
      </li>
      <li>
        <h2>List02</h2>
        <span>06</span>
        <span>07</span>
        <span>08</span>
        <span>09</span>
        <span>10</span>
      </li>
      <li>
        <h2>List03</h2>
        <span>11</span>
        <span>12</span>
        <span>13</span>
        <span>14</span>
        <span>15</span>
      </li>
    </ul>
  </body>
</html>

CSS
body{
  margin:30px;
  font-size:20px;
  font-weight:bolder;
}
ul{
  list-style:none;
}
li{
  display:flex;
}
h2{
 
      

      
        CSS
      
    

  






  

    

      
        

      
    

    

      

        3の倍数などn番目の要素だけCSSをスタイルする方法を現役エンジニアが解説【初心者向け】
      

      

        3の倍数などn番目の要素だけCSSをスタイルする方法について解説します。これができると規則的にデザインを変更することができるので、個別でCSSを設定するという手間が省ける上に、可読性の高いコードとなります。ぜひ参考にしてみてください。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
 
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
 

田島悠介

今回は、CSSに関する内容だね！



大石ゆかり

どういう内容でしょうか？



田島悠介

3の倍数などn番目の要素だけCSSをスタイルする方法について詳しく説明していくね！



大石ゆかり

お願いします！


 
疑似クラスの説明と使い方
通常、CSSのセレクタでは、HTMLタグやクラス名、id名で指定して、デザインを作っていきますが、擬似クラスでは、指定された要素の状態や、条件を追加することができます。
例えば、マウスがのっている時だけに適用させたい場合は、タグ名:hoverとします。
CSS：
a:hover{ color:red; }
 
このように、条件や状態を追加することができる擬似クラスはたくさんあります。

:active／アクティブ状態
:visited／訪問済みのリンク
:focus／<input>などの要素が入力状態
:checked／checkboxなどでチェックされている状態
:first-child／最初の子要素
:nth-child／親要素の中で、全ての子要素の内、x番目の子要素
:nth-of-type／親要素の中で、x番目の子要素

などなど、まだいっぱいあります。
 
3の倍数の要素にスタイルを適用する方法
3の倍数の要素にスタイルを適用するには、x番目の要素を選択できる :nth-of-type を使用します。HTMLで、余分なクラス名をつけることなく、CSSだけで適用できます。
HTML：
<html>
  <head>
    <meta charset="utf-8">
    <title>nth-of-typeを使ってみよう</title>
  </head>
  <body>
    <span>01</span>
    <span>02</span>
    <span>03</span>
    <span>04</span>
    <span>05</span>
    <span>06</span>
    <span>07</span>
    <span>08</span>
    <span>09</span>
    <span>10</span>
    <span>11</span>
    <span>12</span>
    <span>13</span>
    <span>14</span>
    <span>15</span>
    <span>16</span>
    <span>17</span>
    <span>18</span>
    <span>19</span>
    <span>20</span>
  </body>

CSS：
@charset "UTF-8"; /*文字コードの指定*/
body{
  display:flex;
  flex-wrap:wrap;
  margin:30px;
  font-size:20px;
  font-weight:bolder;
}
span{
  display:block;
  width:100px;
  height:100px;
  margin:5px;
  background:gold;
}
 

 
このうち、3の倍数のボックスのみをグリーンに変えるには、下記のように書きます。
span:nth-of-type(3n){ background: limegreen; }
span:nth-of-type(3n)は、3×n番目の<span>という意味です。nは自然数なので、3×n番目 = 3の倍数番目ということになります。

 
[PR] Webデザインで副業する方法とはn番目の要素にスタイルを適用する方法
nth-of-type()の()の中には、3nだけでなく、好きな数字を入れてx番目の要素を選択することができます。10番目のボックスの色を赤にするには、
span:nth-of-type(10){ background:tomato; }
と書きます。

 
疑似クラスを使ってみよう
このように、nth-of-typeを使えば、好きな番号のボックスの色をCSSだけで変更することができます。
また、

偶数番目のボックスの文字色を白にする場合：span:nth-of-type(2n){ color:white; }
奇数番目のボックスの文字色を赤にする場合：span:nth-of-type(2n+1){ color:tomato;
      

      
        CSS
      
    

  






  

    

      
        

      
    

    

      

        PythonのSyntaxErrorの解決方法を現役エンジニアが解説【初心者向け】
      

      

        PythonのSyntaxErrorの解決方法について解説します。
そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。
 
なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。
 

田島悠介

今回は、Pythonに関する内容だね！



大石ゆかり

どういう内容でしょうか？



田島悠介

PythonのSyntaxErrorの解決方法について詳しく説明していくね！



大石ゆかり

お願いします！


 
PythonのSyntaxErrorの主な種類、読み方、原因
プログラミングを行っていると多くのエラーに遭遇します。その中でも代表的なものが「SyntaxError」です。
SyntaxError は直訳すると文法エラーという意味で「シンタックスエラー」と読みます。SyntaxErrorは、プログラムが文法的に正しくないと判断された場合に発生します。
判断はプログラムを実行する前に行われるのでSyntaxErrorを解消しないとプログラムを実行することができません。
それではSyntaxErrorはどのような場合に発生するのでしょうか。いくつか例をあげて確認してみましょう。まずは正常に動作するプログラムのソースコードです。
for i in range(1,10):
  print("*" * i)

実行結果は以下のようになります。
*
**
***
****
*****
******
*******
********
*********

それでは、for文の「:」を忘れた場合はどうなるでしょうか？
for i in range(1,10)
  print("*" * i)

実行結果は以下のようになります。ちょうど「:」に該当する部分でSyntaxErrorが発生していることが分かります。
<span class="ansi-cyan-intense-fg ansi-bold">  File </span>
<span class="ansi-green-intense-fg ansi-bold">"<ipython-input-2-80458efb33d9>"</span>
<span class="ansi-cyan-intense-fg ansi-bold">, line </span><span class="ansi-green-intense-fg ansi-bold">1</span><span class="ansi-yellow-intense-fg ansi-bold">    for i in range(1,10)</span>
<span class="ansi-white-intense-fg ansi-bold">               
      

      
        Python
      
    

  






  

    

      
        

      
    

    

      

        擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説
      

      

        CSSでnth-of-typeを使って、特殊な「擬似クラス」を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次アンダーラインを付けるタグとその書き方実際に書いてみようまとめこの記事を監修してくれた方HTMLを学習中の方へ
そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。
 
【動画の解説はこちら】

 

田島悠介

今回はnth-of-typeという擬似クラスを使ってみよう。擬似クラスは、セレクタのうしろに追記することで要素の中でさらに条件をつけることができるものだよ。



大石ゆかり

田島メンター！nth-of-typeはどういった条件を指定できるんですか〜？



田島悠介

指定した要素が親要素から見て、同じ種類の要素のみを数えたとき何番目になるかというのを見るんだ。まずは基本の書き方を見てみよう。



大石ゆかり

分かりました！


 
nth-of-typeとは
nth-of-typeとは、指定した要素のうちx番目の要素を選択し、CSSに適用するための擬似クラスです。
擬似クラスとは、指定した要素の一部にCSSを反映できる方法を指します。
 
以下、コード例です。
//兄弟関係にある<span>のうちx番目の<span>を選択
span:nth-of-type(x){ 〜 }
<span>要素の数だけを数えて、x番目の<span>要素のみを選択します。
疑似クラスについて詳しく学びたい方は、HTML5で定義された擬似クラスをご覧ください。
 
nth-of-typeの書き方
「nth-of-type(2n)」の前に「：」（ｺﾛﾝ）がついていることに注目してください。
li:nth-of-type(2n){
  /*適用する内容*/
 }
( )内部の「n」を使って、何番目であるかを記しています。
今回は「2n」番目であることから、2の倍数である偶数番目に適用されます。
また、「3n-1」や「odd」「even」という指定もできます。
「odd」「even」はそれぞれ奇数、偶数という指定方法です。
 

田島悠介

()内で指定された部分にのみ、スタイルが適用されるんだ。



大石ゆかり

この場合は偶数が対象ということですね。



田島悠介

次は実際の例で見てみよう。今回はリスト項目の指定の部分のみ、色を変えるというのをやってみるよ。


 
[PR] Webデザインで副業する方法とは実際に書いてみよう
実際にHTMLとCSSを書いてみましょう。
HTML
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CSS nth-of-type</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>

    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
 
      

      
        CSS
      
    

  






  

    

      
        

      
    

    

      

        CSSで縁取り文字をデザインする方法を現役デザイナーが解説【初心者向け】
      

      

        CSSで縁取り文字をデザインする方法について解説します。
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。
 
なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のCSSカリキュラムをもとに執筆しています。
 

田島悠介

今回は、CSSに関する内容だね！



大石ゆかり

どういう内容でしょうか？



田島悠介

縁取り文字をデザインする方法について詳しく説明していくね！



大石ゆかり

お願いします！


 
縁取り文字のデザイン例
雑誌などの紙媒体ではよく縁取り文字を使用したデザインを見かけます。ユーザーの注目を集めたり、印象に残るようなデザインにする1つの方法として、特に強調したい文言や、タイトルに縁取り文字が用いられることがあります。Webサイトでも、特にバナー画像等で見かけることが多いかもしれません。
今回は画像作成ソフトを使わずに、HTMLとCSSだけで縁取り文字をデザインしてみましょう。
 
CSSで縁取り文字をデザインする方法
今回は、CSSのtext-shadowプロパティを使用して作っていきます。text-shadowは本来、テキストに影をつけるためのプロパティですが、影の方向や量を工夫することで、縁取り文字を作ることができます。
 
[PR] Webデザインで副業する方法とはtext-shadowの使い方
text-shadowでは、X軸方向のオフセット(ずらし具合)、Y軸方向のオフセット、ぼかしの半径、影の色の値を設定することができます。
text-shadowの使い方：
textshadow:X軸方向のオフセット Y軸方向のオフセット ぼかしの半径 色;

各値は半角スペースで区切ります。
 
このうちの影のぼかしの半径の値を0にすることにより、縁取りのデザインを作っていきます。まずは、text-shadowの値と表示の関係を確認してみましょう。
HTML：
<span class="text1">HELLO</span>
<span class="text2">HELLO</span>
<span class="text3">HELLO</span>


CSS：
.text1{
  text-shadow:1px 0 5px black;
}
.text2{
  text-shadow:0 5px 5px black;
}
.text3{
  text-shadow:1px 1px 0 black;
}


また、text-shadowでは、カンマ区切りで、複数の影を設定することができますので、X軸方向のオフセットとY軸方向のオフセットを少しずつずらした影をつけることによって、文字の上下左右に縁取りをつけることができます。
縁取りを作る時のtext-shadowの構造を確認してみましょう。
HTML：
<span class="text1">HELLO</span>
<span class="text2">HELLO</span>
<span class="text3">HELLO</span>
<span class="text4">HELLO</span>
<span class="text5">HELLO</span>



CSS：
.text1{
  text-shadow:1px 0 0 black;
}
.text2{
  text-shadow:0 1px 0 black;
}
.text3{
  text-shadow:-1px 0 0 black;
}
.text4{
  text-shadow:0 -1px 0 black;
}
.text5{
  text-shadow:
    1px 0 0 black,
    0 1px 0 black,
    -1px 0 0 black,
    0
      

      
        CSS
      
    

  






  

    

      
        

      
    

    

      

        CSSの隣接・直下・間接セレクタの違いを現役エンジニアが解説【初心者向け】
      

      

        CSSの隣接・直下・間接セレクタの違いについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
 
CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。
 
なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。
 

田島悠介

今回は、CSSに関する内容だね！



大石ゆかり

どういう内容でしょうか？



田島悠介

隣接・直下・間接セレクタの違いについて詳しく説明していくね！



大石ゆかり

お願いします！


 
隣接セレクタとは
隣接セレクタとは、基準要素の隣の要素を指定するためのセレクタです。
CSSでは以下のように記述します。
HTML
<span>1</span>
<span>2</span>
<span id="me">3</span>
<span>4</span>
<span>5</span>
CSS
#me + span { background: gold; }
/* #meの隣にあるspan */
実行結果
4の背景色がgoldになります。
 
直下セレクタとは
直下セレクタとは、基準要素の1つ下にある子要素を指定するためのセレクタです。
CSSでは以下のように記述します。
HTML
<div id="me">
  <span>1</span>
  <div>
    <span>2</span>
    <span>3</span>
  </div>
</div>
CSS
#me > span { background: gold; }
/* #meの直下にあるspan */
 
実行結果
1の背景色がgoldになります。
 
[PR] Webデザインで副業する方法とは間接セレクタとは
間接セレクタとは、基準要素以降にある要素を指定するためのセレクタです。
HTML
<span>1</span>
<span>2</span>
<span id="me">3</span>
<span>4</span>
<span>5</span>
CSS
#me ~ span { background: gold; }
/* #me以降にあるspan */
実行結果
4と5の背景色がgoldになります。
 
それぞれのセレクタの活用場面
HTMLの構造や要素間の関係から特定の要素を選択できます。
そのため、HTMLにclassやidが付いていなくても選択可能です。
システムで自動的に出力されるHTMLなど、自分で自由にHTMLを書くことができない場合でもCSSでスタイルを設定できます。
HTML
<section>
  <h1>タイトル</h1>
  <p>テキスト1</p>
  <p>テキスト2</p>
  <p>テキスト3</p>
  <ul>
    <li>リスト1
      <p>リストの中のテキスト</p>
    </li>
    <li>リスト2
      <p>リストの中のテキスト</p>
    </li>
  </ul>
  <p>テキスト4</p>
</section>
CSS
section > p{ color: tomato; }
h1 + p{
      

      
        CSS
      
    

  




    

  
  
  




                


      

        

          
          
あなたの目的に合わせて学べるコース

        

        

          

            
              
              
              
            
            

              
副業したい方

              

                Web制作の力を身につけ
                

                副業までサポート
              

              はじめての副業コース
            

          

          

            
              
              
              
            
            

              
転職したい方

              

                未経験から
                

                Webエンジニアに
              

              Webエンジニア転職保証コース
            

          

          

            
              
              
              
            
            

              
スキルアップしたい方

              

                AIも統計解析もできる
                

                Pythonを学ぶ
              

              Pythonコース
            

          

        

      

      

        ※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは
        こちら 
        のページをご確認ください。


    


    


    

      
        
      
    


    
    
    

        
          

            
              TechAcademyから
              

              現役エンジニアの方へ
              

              お知らせ
            
          

        
    


    

                    

          
            オーダーメイドコース
          
        

          





  




          

                

    






  

    

      
        TechAcademy（テックアカデミー）
        
        
      
              
          Webデザインコース
          
          
        
            

  Webデザイン
  
  

  HTML
  
  

  HTMLで文字(テキスト)にアンダーラインを付ける方法【初心者向け】