CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのspan（スパン）要素とは？divとの違いと使い方を実例付きで解説

span要素とは？

HTMLの<span>要素は、<div>とよく似た汎用的なHTML要素です。

<div>は主にWebページのレイアウト構築に使われる汎用コンテナで、ブロックレベル要素であるため、利用できる範囲で最大限のスペースを占有します。

一方、<span>はインライン要素です。必要な分だけのスペースしか取らず、主にテキストの一部を強調したい場合などに使用されます。

divとspanの見た目の違い

以下のコードは、<div>と<span>の挙動の違いを視覚的に確認できるサンプルです。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Divs vs Spans</title>
   <style>
       * {
               box-sizing: border-box;
               font-size: 1.4rem;
               font-family: monospace;
           }
           .div-style {
               background: purple;
               color: blanchedalmond;
               height: auto;
               padding: 20px;
               margin: 10px;
           }
           .span-style {
               background: orange;
               color: black;
           }
           .highlight {
               font-style: italic;
               display: inline-block;
               height: 100px;
               width: 75%;
               display: flex;
               align-items: center;
               background:mediumslateblue;
               color: ivory;
           }
           h3 {
               text-decoration: underline;
           }
   </style>
</head>
<body>
   <h3>Divs</h3>
       <div class="div-style">I'm a div</div>
       <div class="div-style">I take up as much space as I can</div>
   <h3>Spans</h3>
       <span class="span-style">I'm a span</span>
       <span class="span-style">
I only take up exactly as much space as I need.
</span>
       <span class="span-style">I emphasize text a lot.</span>
 
       <div class="div-style">
           <span class="span-style">Spans can go inside divs...</span>
           <p>... have different styling than other text...</p>
           <span class="span-style"
               >...and are inline elements that can't have height or width
               manipulated unless you set
               <span class="highlight">display: inline-block</span></span
           >
       </div>
</body>
</html>

この例では、クラスを使って複数の<div>や<span>をグループ化し、CSSで文字色や背景色をまとめて変更しています。

ここで重要なポイントがあります。<span>はインライン要素のため、そのままでは高さ（height）や幅（width）を指定しても反映されません。サイズを操作したい場合は、display: inline-blockプロパティを追加する必要があります。

divとspanを組み合わせたレイアウト例

次に、<div>と<span>を実際に組み合わせて動作させた例を見てみましょう。

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Divs/Spans</title>
       <style>
           * {
               box-sizing: border-box;
               font-size: 1.4rem;
               font-family: monospace;
           }
           .div-style {
               background: purple;
               color: blanchedalmond;
               height: auto;
               padding: 20px;
               margin: 10px;
           }
           .span-style {
               background: orange;
               color: ivory;
           }
           h3 {
               text-decoration: underline;
           }
           .nav {
               background:goldenrod;
               padding: 20px;
           }
           .headline {
               font-weight: bold;
               font-size: 1.6rem;
           }
           .flex-container {
               display: flex;
           }
           .container {
               display: flex;
               flex-direction: column;
           }
           .sidebar-main-container {
               background:indianred;
               padding: 20px;
           }
           .sidebar {
               background: white;
               color: black;
               width: 40%;
               padding: 20px;
           }
           .main-container {
               width: 60%;
               padding: 20px;
               background:green;
               font-size: 1.2rem;
           }
           .main-content {
               width: 100%;
               margin: 10px 0px;
               display: flex;
           }
           .child-container {
               width: 50%;
               font-size: 1.0rem;
           }
           .pink {
               background: pink;
               color: black;
           }
           .red {
               background: red;
           }
           p{
               font-size: 1.2rem;
           }
           .footer {
               text-align: center;
               background: cornflowerblue;
           }
           .footer span {
               font-size: .7rem;
           }
       </style>
   </head>
   <body>
       <h3>Using Divs and Spans Together:</h3>
 
       <div class="div-style container">
           <div class="headline">Div 1: Main Overall Container</div>
           <div class="nav">
               <h2>Div 1a: Header</h2>
               <p>Divs can create boxes for web layout</p>
           </div>
           <div class="sidebar-main-container">
               <p>Div 1b: Sidebar-Main Content</p>
               <div class="flex-container">
                   <div class="sidebar">
                       <span style="font-size: 1.2rem;">Div 1b.1</span>
                       <span style="font-size: 1.2rem; color: purple;">Sidebar Container</span>
                   </div>
                   <div class="main-container">
                       <span style="font-size: 1.2rem;">Div 1b.2</span>
                       <span style="font-size: 1.2rem; color: orange;">Main Container</span>
                       <div class="main-content">
                           <div class="child-container pink">Child 1 1b.2.1</div>
                           <div class="child-container red">Child 2 1b.2.2</div>
                       </div>
                   </div>
               </div>
               <div class="footer">
                   <span>Footer</span>
                   <span>Container</span>
                   <span>Goes Here</span>
               </div>
           </div>
          
       </div>
      
   </body>
</html>

まとめ

<span>と<div>は、他のHTML要素と組み合わせることで、Webサイトの基本的な構成要素を作り上げます。<div>がページ全体の骨格（レイアウト）を担うのに対し、<span>はテキストの一部を個別にスタイリングするのに適しています。

<span>は<div>とは独立してスタイルを適用できるため、強調表現や細かいデザイン調整に柔軟に活用できます。両者の特性を正しく理解し、使い分けることが、効率的で保守性の高いHTML/CSSコーディングへの第一歩となります。

  1. CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

    CSS Flexbox（フレックスボックス）モデルは、従来のCSSボックスモデルを改善するために考案されました。Flexboxモデルには、ボックスモデルの主要な要素（margin、padding、border、content）がそのまま含まれていますが、さらに柔軟性が加わり、コンテナ（親要素）の中に子要素を最適な形で配置できるようになっています。 このチュートリアルでは、Flexboxモジュールの基本をわかりやすく解説し、よりレスポンシブなサイト制作に役立てられるようサポートします。 以下は、基本的なFlexboxモデルのデモ用スターターコードです。解説を読みながら、実際にコードを動かして

  2. CSSのdisplay:noneで要素を非表示にする方法

    CSSで要素を画面上から完全に取り除きたい場合は、displayプロパティにnoneを指定します。この値が設定された要素はブラウザ上に一切表示されず、レイアウト上のスペースも占有しません。例1：p要素を非表示にする以下の例では、p.demoクラスにdisplay: none;を適用しています。その結果、「9AM」というテキストはページ上に表示されません。一方、span.demo1にはdisplay: inline;を指定しているため、オレンジ色の背景を持つインライン要素として通常どおり表示されます。<!DOCTYPE html> <html> <head>