TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLでspan要素で囲った部分を改行する方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

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

初心者向けにHTMLでspan要素で囲った部分を改行する方法について解説しています。インライン要素であるspanで囲まれた部分をブロック要素にして改行する方法をサンプルコードで説明します。書き方と画面上での見え方を確認しましょう。

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

HTMLでspan要素で囲った部分を改行する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

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

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

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

大石ゆかり

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

田島悠介

span要素で囲った部分を改行する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

代表的な改行方法

HTMLで代表的な改行方法といえば<br />タグを用いた方法になります。それ以外にはブロック要素でテキストをマークアップする<p></p>タグを用い改行する方法も考えられます。

 

span要素について

span要素とは、特別な意味を持たない汎用的なタグです。インライン要素で、背景画像を指定したり、部分的に文字色を変更するときなどに使います。そのためコーディングする上では欠かせない、多様に活用できるタグです。

 

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

span要素で囲った部分を改行してみよう

span要素を改行するには、spanタグをブロック要素にします。

サンプルを作成しましたので、確認しましょう。下のボタンは<span>タグをブロック要素にして改行し、フォントサイズを変更しました。このことで協調したい文字を装飾することができます。

See the Pen
span by This is standard (@koutafunahashi)
on CodePen.

 

監修してくれたメンター

舟橋幸太郎

フリーのWebデザイナー、グロースハッカーです。

KaizenPlatform社主催のGrowth Hacker Awardsで受賞歴があります。過去行ったA/Bテストが実績として書籍に掲載されました。

TechAcademyではWebデザインコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

いざという時に便利！HTMLで特殊文字を扱う方法【初心者向け】

HTMLで特殊文字を扱う方法について解説しています。コードをサイト上に表示させるために必要な知識になるので、いざという時に便利でしょう。 HTMLについて...
HTML

HTMLでSEO対策としてのディレクトリ構成を現役デザイナーが解説【初心者向け】

HTMLでSEO対策としてのディレクトリ構成について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

基礎から学ぶ！HTMLにCSSを適用（読み込み）させる方法【初心者向け】

基本的にHTMLだけでは文字を表示するだけで、リッチなデザインが整ったWebデザインを制作することは難しいです。 そんな時に必要になってくるのがCSSです...
HTML

HTMLをブラウザで表示するXAMPPの使い方を現役エンジニアが解説【初心者向け】

HTMLをブラウザで表示するXAMPPの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

HTMLでbuttonタグを使ってリンクを貼る方法を現役エンジニアが解説【初心者向け】

本記事では、HTMLでbuttonタグを使ってリンクを貼る方法についてご紹介します。 HTMLでボタンを作りたい方 ボタンを作るためにbutto...
HTML

HTMLレイアウトで左右分割する方法を現役エンジニアが解説【初心者向け】

HTMLレイアウトで左右分割する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 そもそも...
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を使って、特殊な「擬似クラス」を使う方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次代表的な改行方法span要素についてspan要素で囲った部分を改行してみよう監修してくれたメンター そもそも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でspan要素で囲った部分を改行する方法を現役デザイナーが解説【初心者向け】