ウェブページの作成において、displayプロパティは非常に重要な役割を果たします。
displayプロパティは、HTML要素がどのように表示されるかを指定するためのものであり、CSSの基本中の基本といえます。
その中でも、display:inlineは、文字やイメージなどの要素を行内で表示する方法のひとつであり、とてもよく使われます。
本記事では、display:inlineの使い方を分かりやすく解説します。
【display:inlineを使うメリットとデメリット】
まずは、display:inlineを使うメリットについて見ていきましょう。
メリット1: 余白が自動的に設定されるため、スペースを取らない
display:inlineを使うと、要素間に自動的に余白が設定されます。
そのため、行の高さや文字サイズに合わせて要素がスムーズに配置され、スペースを取らないデザインを実現できます。
メリット2: 複数の要素を横に並べることができる
display:inlineを使うと、複数の要素を横に並べることができます。
例えば、ナビゲーションメニューのような横並びのメニューを作成する場合に便利です。
では、display:inlineを使う際のデメリットについて見ていきましょう。
デメリット1: 高さや幅を指定できない
display:inlineは、高さや幅を指定することができません。
そのため、他の要素と同じ高さや幅に設定することができない場合があります。
デメリット2: ブロック要素をinline表示にする場合には注意が必要
ブロック要素をinline表示にする場合には、余白や改行の処理に注意が必要です。
ブロック要素をinline表示にすると、改行や余白が自動的に設定されなくなり、意図しない表示になる場合があります。
【display:inlineの使い方】
display:inlineの使い方について解説していきます。
使い方1: 文字を横並びにする
文字を横並びにしたい場合には、display:inlineを使います。例えば、以下のようなHTMLコードを記述します。
<p>これは<span style="display:inline;">赤い</span><span style="display:inline;">青い</span>ペンです</p>次に、HTMLコードにおいて「display :inline」を使用する場合について説明します。
display :inlineの使い方
HTML要素を「display :inline」で指定する場合は、以下のように記述します。
<span style="display:inline;">内側のテキストや要素</span>また、CSSでスタイルを指定する場合には、以下のように記述します。
codespan {
display: inline;
}display :inlineの特徴
「display :inline」は、要素を横並びに表示するためのプロパティです。そのため、以下のような特徴があります。
改行されない
「display :inline」で要素を指定すると、要素の前後に改行が入らず、連続したテキストと同様に表示されます。
<p>これは<span style="display:inline;">改行されない</span>文章です。</p>幅と高さの指定ができない
「display :inline」では、要素の幅や高さを指定することができません。要素の大きさは、内包するコンテンツの大きさによって自動的に調整されます。
<span style="display:inline; background-color: #ccc;">幅や高さが指定できません。</span>marginとpaddingが左右にのみ効果を発揮する
「display :inline」では、marginやpaddingの指定が左右方向のみ効果を発揮します。上下方向の余白は、要素が占める高さに影響を与えず、反映されません。
<span style="display:inline; padding: 10px 20px; background-color: #ccc;">上下方向のpaddingが効果を発揮しません。</span>まとめ
今回は、「display :inline」の使い方について解説しました。要素を横並びに表示するためのプロパティであり、改行されない、幅と高さが指定できない、marginとpaddingが左右にのみ効果を発揮するという特徴があります。
使い方を覚えて、スマートなデザインを実現しましょう。
