Web制作の現場で役立つ！spanタグの基本と応用：改行、CSS、pタグとの違い

spanタグはインライン要素をグループ化し、テキストを装飾したりスクリプトを制御したりするために使用されるタグです。ページの見た目や機能をカスタマイズするうえで、重要な役割を持っています。

本記事では、spanタグの概要やpタグ・divタグとの違い、基本的な活用方法から上級者向けの
テクニックまでを解説します。

はじめに -Web制作者が知っておくべきspanタグの重要性

spanタグを理解する前に、Webページがどのように構成されているのか把握しておきましょう。ここでは、Webページを構成するインライン要素とブロック要素を解説します。

Webデザインにおけるインライン要素の役割

インライン要素とは、テキストの一部として扱われる要素です。インライン要素の対比となる概念にブロック要素がありますが、これは段落やセクションなど大きな構造を作るために使用されます。

一方、インライン要素はブロック要素の一部となる要素であり、テキストにスタイルや機能を与えるのが役割です。例えば、インライン要素の一つであるemタグは囲まれたテキストの強調、strongタグは囲まれたテキストが重要であることを示します。aタグを使ったテキストや画像へのリンクの設定や、spanタグを使った視覚的な装飾などもインライン要素の一つです。

インライン要素とブロック要素の違い

インライン要素とブロック要素の違いは以下の通りです。

項目	インライン要素	ブロック要素
役割	テキストの一部として構造を形作る	ページ全体の構造を形作る セクションを区切る
表示	行の中に表示される 前後に改行が入らない	新しい行から始まる 要素の前後には改行が入る
幅・高さ	一部の例外（imgタグなど）を除き、指定しても効果がない。display: inline-blockを指定することで、幅・高さが指定可能になる。	指定できる
マージン（margin）	左右のみ有効	上下左右全て有効
パディング（padding）	上下左右全て有効 ただし、上下のパディングは周囲の要素を押し広げず、その要素の上下の行の高さを広げる。	上下左右全て有効
含められる要素	他のインライン要素やテキストなど ブロック要素は不可	他のブロック要素を含むほとんど全ての要素

なお、マージンとは要素の外側に余白を設定するプロパティ、パディングとは要素の内側に余白を設定するプロパティです。また、HTML5以降ではインライン要素・ブロック要素という定義はありません。代わりに、インラインレベルコンテンツ・ブロックレベルコンテンツという用語が使われています。

spanタグの基本概念 -意味と正しい使い方

ここでは、spanタグの意味や正しい使い方を解説します。spanタグはインライン要素をグループ化するタグであり、汎用性が高いことからスタイルの適用やスクリプトの制御にも活用されています。

spanタグの定義：意味を持たないインライン要素

spanタグとは、インライン要素をグループ化するタグです。グループ化するという役割しかないため、spanタグは単体で使用しても効果はありません。グループ化した範囲にCSS（Webページのスタイルを定義する言語）を適用することで、デザインを変更できます。

HTML5における位置づけ（セマンティクスの観点から）

HTML5以前では、要素の見た目に焦点が当てられていましたが、HTML5では要素の意味（セマンティクス）が重視されるようになりました。実際にheaderタグやsectionタグなど各要素の意味を表すセマンティックタグが追加され、ページの構造を検索エンジンや開発者が理解しやすくなりました。

spanタグ自体はHTML5でも特定の意味は持ちませんが、それこそが最大の強みでもあります。セマンティックタグにはそれぞれ明確な意味と機能が与えられていますが、逆にいえば与えられている機能以外の用途には使えません。

一方、spanタグは特定の意味を持たないことから汎用的に利用でき、スタイルの適用やスクリプトの制御のために活用されるケースも多く見られます。乱用するとかえってコードが複雑になってしまいますが、適切に活用することで自由度の高いデザインや動作を実現できるでしょう。

pタグとdivタグとの根本的な違い

Web記事の本文などによく使用されるタグとしてpタグやdivタグが挙げられますが、spanタグとは性質が異なります。それぞれのタグの意味と違いは以下の通りです。

pタグ

pタグとは、文章のまとまりや区切りを表す際に使用される、囲まれた範囲を段落として扱うタグです。pタグの場合は要素の前後に改行が入り、上下にマージンが設けられます。

また、pタグはブロック要素のため、pタグの中でspanタグは使用できますが、spanタグの中でpタグは使用できません。

divタグ

divタグとは、囲った範囲をグループ化するタグです。spanタグと同様にdivタグ自体に特定の意味は持ちません。

spanタグはCSSを使った幅や高さの指定が反映されませんが、divタグは可能です。そのため、ヘッダーやサイドバーやコンテンツエリアなどページの大きな構造を作る際に利用されます。

ただし、divタグの場合は前後に改行が入ります。また、divタグはブロック要素のため、divタグの中でspanタグは使用できますが、spanタグの中でdivタグは使用できません。

適切なspanタグの使用例

一般的なspanタグの使用例を以下にまとめました。以下の例では、便宜上style属性で直接スタイルを指定していますが、通常はCSSファイルにスタイルを記述し、それをspanタグに付与して適用します。これにより、コードの可読性が向上するとともに高度なスタイルの変更も可能になります。

適切な例1：テキストの色を指定する

以下のコードでは、「かきくけこ」の部分だけテキストが赤色になります。

表示：あいうえおかきくけこさしすせそ

適切な例2：テキストサイズを指定する

以下のコードでは、「かきくけこ」の部分だけテキストサイズが大きくなります。

表示：あいうえおかきくけこさしすせそ

不適切なspanタグの使用例と改善例

一方、不適切なspanタグの使用例は以下の通りです。これらのシチュエーションでは、spanタグではなく適切なタグを使用した方が正確に表現できるうえにコードの可読性も良くなります。

不適切な例1：強調するためだけに使う

以下のコードでは、spanタグを使ってテキストを太字にしていますが、重要な部分はstrongタグを使って強調した方が適切です。

×

◯

不適切な例2：引用文を示すために使う

以下のコードでは、spanタグを使ってスタイルを変更して引用文を示していますが、引用文を示す際はqタグを使用した方が適切です。

×

◯

不適切な例3：見出しや段落として使う

以下のコードでは、spanタグを見出しや段落のように使っていますが、見出しはh1～h6タグ、段落はpタグを使用した方が適切です。

×

◯

不適切な例4：ブロック要素をグループ化する

以下のコードでは、spanタグを使って複数の要素をまとめていますが、HTMLの文法上、インライン要素であるspanタグは、直接ブロック要素を子や孫に含むことはできません。この場合はdivタグの使用が適切です。

×

◯

初級テクニック -テキスト装飾の基本

ここでは、spanタグを使ったテキスト装飾の基本的なテクニックを解説します。class・id属性を活用したスタイリングやテキストの装飾はもちろん、ホバーエフェクトも重要なテクニックです。

クラスとIDを活用したスタイリング

以下のようにspanタグにclass・id属性を指定し、参照先のCSSにスタイルを記述することで、CSSの適用が可能です。

class属性を使用する場合

HTML

CSS

id属性を使用する場合

HTML

CSS

なお、class属性は対象の種類を表しているため、1ページ中に何度でも使用できます。一方、id属性は固有の名前を付けて一意に定めるためのものであるため、1ページ中に1度しか使えません。class属性は学級名、id属性は学籍番号と考えるとわかりやすいでしょう。

また、CSSの記述もclass属性は「.」を使って要素名と名前を区切りますが、id属性は「#」を使って区切ります。

テキストの一部だけを装飾するテクニック

装飾したい部分をspanタグで囲み、class・id属性を付与します。そして、付与したclass・id名に対して具体的なスタイルをCSSで記述することで、テキストの一部を装飾できます。主なCSSのプロパティは以下の通りです。

プロパティ名	説明
color	文字色
background-color	背景色
font-family	フォントの種類
font-size	文字の大きさ
font-weight	文字の太さ
font-style	文字のスタイル（イタリック・斜体）
text-decoration	文字の装飾（上線・下線・取り消し線など）
text-shadow	テキストの影
letter-spacing	文字の間隔

シンプルなホバーエフェクトの実装

ホバーエフェクトとは、マウスカーソルを要素に重ねた際、その要素の見た目やスタイルが変化する視覚的な効果です。これにより、視覚的な表現が豊かになり、ユーザーの注意を引きやすくなったりサイトのナビゲーションがわかりやすくなったりします。

spanタグとCSSの疑似クラスである「:hover」を組み合わせることで、ホバーエフェクトの実装が可能です。:hover疑似クラスとは、マウスカーソルを要素の上に重ねた時にのみ適用されるスタイルを指します。ただし、ホバーエフェクトの多用や派手なアニメーションはかえって使い勝手が悪くなる恐れがあります。そのため、実装の際はシンプルでわかりやすいエフェクトを意識することが重要です。

また、マウスを使わない場合やスマートフォン・タブレットなどで操作している場合はマウスを重ねるという概念が存在しません。そのため、重要な情報はホバーエフェクトなしでも見られるようにする、ホバーエフェクトがタッチ操作の邪魔にならないようにするなどの配慮が必要です。

実務で頻出するテキスト装飾パターン集

ここでは、頻出するテキスト装飾のパターンを紹介します。なお、一部の古いブラウザでは対応していないCSSプロパティがあるため、正しく表現されない場合があります。

マーカー風の下線

テキストに蛍光ペンで書いたような下線を引きます。background-imageとlinear-gradientを変更することで、下線の位置や太さの調整が可能です。

HTML

CSS

角丸の背景

テキストの一部を角丸の背景色で囲んで目立たせます。タグやラベルの表現も可能です。

HTML

CSS

グラデーションの文字色

文字色をグラデーションにします。以下の例では赤・オレンジ・黄色・緑・青・藍色・紫の順に色が変わっていますが、ブランドカラーを使えばモダンなデザインも表現可能です。

HTML

CSS

中級テクニック -CSSとの連携で広がるデザインの可能性

ここでは、spanタグを使った中級テクニックを解説します。FlexboxやGridなどと組み合わせることで、簡潔に複雑なレイアウトを表現できるようになります。

Flexboxとspanタグの組み合わせ

Flexboxとは、CSSにおいて短く柔軟なコードで配置するためのレイアウトモードです。親要素に対して「display: flex」か「display: inline-flex」を設定することで、子要素がフレックスアイテムとなります。Flexboxを活用することで、要素のプロパティを微調整しなくても配置の整列が可能です。

また、spanタグは本来インライン要素ですが、Flexboxが適用された要素の子となるとフレックスアイテムとなります。これにより、インライン要素には適用しにくい幅・高さ・マージンの制御や他のフレックスアイテムとの整列が容易になるでしょう。具体的には、アイコンとテキストを横並びにして中央にそろえるケースや複数の要素を均等に配置したい場合にspanタグを活用するケースが挙げられます。

Grid内でのspanタグの活用

Grid（CSS Grid Layout）とは、要素を行と列からなる2次元のグリッドに配置するためのCSSのレイアウトシステムです。これにより、複雑なレイアウトを直感的かつ柔軟に簡潔なコードで表現できます。

spanタグもGridが設定された要素の子となることで、グリッドアイテムとして扱われるようになり、Gridで定義されたマス目の中に配置できるようになります。また、grid-columnやgrid-rowを使えば、複数のマス目を横断しての配置も可能です。例えば、短い見出しをspanタグで囲んでそれを横に3列分のスペースを使って表示するといった柔軟なレイアウトが実現できます。

なお、GridとFlexboxとの違いは扱う次元です。Flexboxは行・列のどちらか一方に最適化されていますが、Gridは行・列の両方を扱うのに適しています。それぞれによって得意分野が異なるため、シーンに応じて使い分けることが重要です。

レスポンシブデザインにおけるspanタグの役割

レスポンシブデザインとは、デバイスの画面サイズや解像度にかかわらず自動的に最適な表示になるように設計する手法です。通常、テキストは親要素の幅に合わせて自動的に文章が改行されますが、横幅によっては読みづらくなるケースも少なくありません。

そこで役立つのがspanタグです。特定のテキストをspanタグで囲むことで、文章の途中で改行されるのを防げます。「display: inline-block」も併せて指定すれば、幅・高さや上下のマージンも調整できるでしょう。

また、特定の条件に応じてスタイルシートを適用するメディアクエリ（@media）も効果的です。これにより、画面が大きい場合のみspanタグで囲んだ要素を表示したり位置や幅を調整したりできます。

アニメーションとトランジションの適用

要素をspanタグで囲み、トランジション（transition）を指定することで、変化させるプロパティや変化にかかる時間・速度を指定できます。これは前述したホバーエフェクトだけでなく、「:focus」「:active」「:target」などの疑似クラスによる変化にも適用可能です。

また、「@keyframes」を活用して一連の動きを定義し、spanタグを使ってそれを適用することで、トランジションよりも複雑なアニメーションを表現できます。具体的には、特定の文字を点滅させる、要素をポップアップで表示するなどです。

ただし、アニメーションやトランジションは多用するとページが重くなる恐れがあります。また、過度なアニメーションや点滅はユーザーに不快感を与えるかもしれません。

上級テクニック -spanタグで実現する複雑なレイアウト

ここでは、spanタグを使った上級テクニックを解説します。疑似要素や入れ子を活用することで、高度なコードを簡潔かつ効率的に書けるようになります。

複数のspanタグを組み合わせたデザインパターン

spanタグは、複数のspanタグを組み合わせることによって高度なデザインの表現も可能です。複数のspanタグを使用し入れ子にすることで、外側のspanタグで設定したスタイルをベースに内側のspanタグでさらに細かい装飾を重ね掛けできます。これにより、spanタグ一つでは表現できない奥行きのある視覚効果や複雑な背景を表現できるようになるでしょう。

また、一つ一つの文字や単語をそれぞれspanタグで区切り、異なるスタイルやアニメーションを適用することもできます。これにより、滑らかなアニメーションや細かな演出が可能です。

入れ子（ネスト）の活用と注意点

spanタグの特徴の一つとして、入れ子にできる点が挙げられます。入れ子（ネスト）とは、ある構造の中に同じ構造が含まれている状態です。これにより、高度なコードを効率的に書けるようになります。

なお、spanタグの中に含められるタグはspanタグが子要素として持てる要素やコンテンツのみです。インライン要素であるspanタグは他のインライン要素やテキストを子要素として持てますが、ブロック要素はHTMLの文法上spanタグの中には入れられません。

また、過度な入れ子構造は避けた方が無難です。入れ子が深くなりすぎるとHTMLの構造が複雑になり、コードの可読性が低下する恐れがあります。CSSの適用も複雑になり、意図しない要素にまでスタイルが適用されるかもしれません。そのため、不要な入れ子は避け、シンプルな構造で記述することが重要です。

CSSの疑似要素（::before, ::after）との連携

CSSの「::before」「::after」とは、選択した要素の前や後に新たな装飾やコンテンツを挿入できる疑似要素の一つです。これにより、テキストに応じたアイコンの表示や特定の要素に対して区切り線や図形などの要素の追加ができます。

疑似要素とspanタグを連携させる大きなメリットは、「HTMLはコンテンツの構造」「CSSは装飾的な要素」というように役割を完全に分離できる点です。HTMLを変更せずにCSSだけで装飾や追加の要素を加えられるため、デザイン性と保守性を同時に向上させられます。

実務で使える高度なスタイリング例

ここでは、入れ子と疑似要素を活用したコードを紹介します。以下のコードでは複数の装飾を適用するために入れ子を、特定の要素にさらなる要素を付け加えるために疑似要素を使用しています。

HTML

CSS

spanタグと改行の関係 -インライン要素特有の挙動を理解する

ここでは、spanタグと改行の関係を解説します。インライン要素であるspanタグは意図しない場所で改行される恐れがあるため、displayやwhite-spaceなどを使って改行を制御する必要があります。

インライン要素が改行されるタイミング

インライン要素は横方向に並びますが、親要素の幅が足りない場合、右端に達した時点で改行されます。そのため、改行の際に文字が途切れてしまう場合も少なくありません。

なお、ブロック要素とは異なり、前後に改行が入らないため、異なるインライン要素を連続で配置しても縦並びにはなりません。

意図的な改行の制御方法（display, white-space）

インライン要素の改行を制御する方法として、CSSプロパティのdisplayやwhite-spaceが挙げられます。それぞれの詳細は以下の通りです。

display

要素をどのように表示するかを制御するプロパティです。spanタグで囲んだ要素に対して「display: inline-block;」と指定することで、その要素はインラインブロック要素となります。インラインブロック要素はブロック要素とインライン要素の特徴を併せ持つ要素です。インラインブロック要素は途中で改行されないため、要素をキレイに横並びにしたい場合に役立ちます。

white-space

テキスト内のスペースやタブや改行などの扱い方を指定するプロパティです。spanタグで囲んだ要素に対して「white-space: nowrap;」と指定することで、自動的に改行されることを防ぎます。ただし、テキストが長すぎると画面からはみ出して表示され、デザインが崩れるかもしれません。

モバイル対応で注意すべき改行の問題

スマホはPCよりも画面幅が狭いため、PCでの表示を前提にデザインを進めるとデバイスによってレイアウトが崩れるかもしれません。特に、強制的に改行を挿入するbrタグを多用すると、異なる画面サイズでのレイアウト調整が難しくなり、意図しない場所で不自然な改行が生じたり、柔軟性に欠けるデザインになったりする恐れがあります。そのため、デバイスの画面幅に応じてbrタグを調整したり、特定のテキストだけspanタグで囲って改行させないようにしたりすることが必要です。

関連記事：brタグとは？HTMLタグの中でpタグとの違い

レスポンシブWebデザインにおける改行の扱い

自動的な改行を防ぐ「white-space: nowrap;」は見出し行やページ内の表など、絶対に折り返して表示させたくない部分にのみ使用しましょう。通常のテキストにもwhite-spaceを使用するのは、レスポンシブデザインを実現するうえでおすすめしません。

一方、「display: inline-block;」は改行が必要になった場合に自動的に改行してくれるため、簡単にレスポンシブ対応ができます。昔からあるプロパティのため、ブラウザのバージョンが古くてもデザインが崩れにくいのもメリットの一つです。

spanタグとアクセシビリティ -ユーザーに優しいマークアップ

ここでは、spanタグを使ってアクセシビリティを改善する方法を解説します。Webにおけるアクセシビリティとは、高齢者や障害者などあらゆるユーザーがWebサイトを利用できる状態のことです。

スクリーンリーダーでの読み上げを考慮したマークアップ

主に視覚障害を持つユーザーが使うスクリーンリーダーは、細かな文字の違いを判別できない場合があります。例えば、日付を書いているのにただの数字の羅列として読み上げられるケースや、空白や改行により文章が途切れ途切れに読み上げられるケースが挙げられます。

そのため、正しくスクリーンリーダーが読み上げられるようにテキストを表記することも必要です。日付であれば、「2025/01/01」ではなく「2025年1月1日」と年月日を表記した方がわかりやすくなります。また、単語と単語の間に空白や改行を入れないようにすることや絵文字を多用しないことも重要です。

WAI-ARIAとの連携

WAI-ARIAとは、HTMLやSVG（2次元のグラフやイラストを表示する際に使われる画像形式）で利用できるアクセシビリティを確保するための属性の仕様です。主に、コンテンツの役割を示すためのrole属性とコンテンツの状態や性質を表すaria属性の2つが定義されています。WAI-ARIAと連携することで、HTMLだけでは表現できない意味の補完が可能です。

ただし、あくまで要素の意味を明示するだけで機能は変更されません。また、すでに要素の意味が示されているタグがある場合、role属性の指定は不要です。

セマンティックなHTMLと装飾目的のspanタグの使い分け

前述した通り、h1タグやpタグなどはそれぞれ固有の意味を持っていますが、spanタグ自体に意味はありません。そのため、専用のタグを使うべきシーンでspanタグを使うとSEOやアクセシビリティの低下を招く恐れがあります。

段落やリストや表などコンテンツの骨格に当たる部分や、見出しや日付・時間やリンクなど内容に重要な意味がある部分は専用のタグを使いましょう。一方、要素に意味を与える必要がなく、見た目の装飾やスクリプトの制御のために要素をグループ化したい場合はspanタグの使用が適切です。

アクセシビリティに配慮したspanタグの使用例

ここでは、アクセシビリティに配慮したspanタグの使用例を紹介します。

情報の変化を伝える

リアルタイムで更新される情報の変化を伝えることで、アクセシビリティを高めるコードです。これにより、「接続中」から「接続完了」に切り替わった場合にスクリーンリーダーがその変化を通知できるようになります。

HTML

装飾部分を読み飛ばす

視覚的に意味を持つ装飾部分をスクリーンリーダーに読み飛ばしてもらうコードです。「icon-mail」にはCSSでメールアイコンが表示されることを想定しています。

HTML

JavaScriptとの連携 -インタラクティブなWeb体験を創る

ここでは、spanタグを使ったJavaScriptとの連携を解説します。これにより、ユーザーの操作に応じたリアルタイム処理や複雑なアニメーションの実現が可能です。

動的なクラス操作によるスタイル変更

JavaScriptを活用することで、spanタグのクラスを動的に変更できるようになります。これにより、その要素に適用されるスタイルやスクリプトの変更が可能です。

具体的には、getElementByIdで対象のIDを特定し、classListを使用します。クラスの追加・削除はもちろん、置き換えや切り替えも可能です。

イベントリスナーとspanタグの組み合わせ

イベントリスナーとは、特定のアクションが発生した際に実行される関数です。具体例として、ボタンをクリックしたらメッセージを表示する、特定のキーが押されたらページを移動するなどが挙げられます。

addEventListenerを使用することで、対象のspanタグへのイベントリスナーの追加が可能です。なお、追加したイベントリスナーを削除する場合はremoveEventListenerを使用します。イベントリスナーの削除は、メモリを解放したりバグを回避したりするうえで必要です。

アニメーション制御のテクニック

CSSプロパティのoffset-pathなどを指定することで、要素を定義された経路に沿って配置・移動できます。animationやtransitionと組み合わせれば、手軽に複雑なアニメーションを表現できるでしょう。

なお、offset関連のプロパティ（CSS Motion Path）は比較的新しい機能であり、一部の古いブラウザでは対応していない場合があります。 使用する際は、ブラウザのサポート状況を確認するか、より広範にサポートされているtransformやopacityなどのプロパティを検討してください。

具体的な使い方は以下の通りです。

対象の要素を用意する

画像や文字や図形など、動かしたい要素を用意します。

パスを用意する

offset-pathで指定するpath関数に描かれる線や曲線のデータを渡すことで、経路の指定が可能です。

アニメーションを作る

offset-distance（パス上で要素を配置する位置）やoffset-rotate（パス上に配置された場合の要素の向き）などを指定して、デザインを整えます。

実務で使える簡単なインタラクション実装例

ここでは、テキストをクリックすることでそのテキストの色が切り替わる簡単なコードを紹介します。

HTML

CSS

JavaScript

現場で活躍するspanタグ活用事例

ここでは、実際に使えるspanタグの活用例を紹介します。以下のサンプルコードを基に、コーディングスキルを身に付けましょう。

アニメーションを加えたテキスト演出（フェードイン、タイピング効果など）

フェードイン

テキストの一部分をフェードインさせるコードです。

HTML

CSS

タイピング風

文字をタイピング風に表示するコードです。

HTML

CSS

背景色や影効果を用いた強調表示

背景色や影効果を使ってテキストの一部分を強調するコードです。

HTML

CSS

縦書き・横書きを組み合わせた日本語特有の演出

縦書きと横書きを組み合わせてテキストを表現するコードです。

HTML

CSS

ホバー時の動的な色変更や効果

「テキスト」にマウスカーソルを重ねると、文字色と背景色が反転するコードです。

HTML

CSS

引用やポイントの強調表示

強調したい文字の上に丸を付けるコードです。

HTML

CSS

HTML理解を深めるための学習ソース

ここでは、HTMLの理解を深めるための学習ソースを紹介します。以下のサイトを利用して、HTMLを効率的に習得しましょう。

とほほのHTML入門

「とほほのHTML入門」は、ホームページ作成に関する情報をまとめているサイトです。HTMLやCSSを中心に、仕様や記述方法などを詳しく解説しています。基本的な用語やWebページの作成手順なども解説されているため、初心者でもスムーズに学習できるでしょう。なお、1996年に公開された老舗のサイトですが、2025年現在でも更新が続いています。

Google’s Web.dev

「Google’s Web.dev」は、Web開発者向けのドキュメントやツールなどを提供するサイトです。HTML・CSS・JavaScriptを無料で学習できるコースがそれぞれ用意されています。実際のコードとその挙動も示してくれるため、直感的に学習できるでしょう。また、情報も初心者向けの内容から上級者向けのテクニックまで網羅されています。

Schoo

「Schoo」は、生放送の授業や録画授業を通じてさまざまなスキルを学べるオンライン学習サイトです。デザインや開発だけでなく、HTMLやCSSを含むプログラミングに関する録画授業やコースなどが提供されています。ビジネスの現場で活躍する講師も授業を行っているため、実践に使えるような学びも得られるでしょう。

LinkedInラーニング

「LinkedInラーニング」は、LinkedIn社が提供するオンライン学習サイトです。ビジネスの基礎知識をはじめ、プログラミングやデザインなどさまざまな講座が動画で提供されています。日本語の動画コンテンツは3万本以上、コースは1100個以上あるといわれており、これは国内最大級です。毎月100本以上の動画もアップされるため、最新の情報も学習できるでしょう。

関連記事：LinkedIn(リンクトイン)とLinkedInラーニングの使い方：採用・転職・広報活動だけじゃないビジネス活用術とは

まとめ -spanタグをマスターして制作の幅を広げよう

インライン要素の一つであるspanタグはそれ自体に意味を持ちません。しかし、その特徴を利用してスタイルの適用やスクリプトの制御のために活用されるケースも多く見られます。また、レスポンシブデザインやアクセシビリティへの対応、JavaScriptとの連携の際にも不可欠です。spanタグをマスターして、Web制作の幅を広げましょう。