CSSを使う際、その要素がインライン要素かどうかを理解していますか。
今回はインライン要素とはどのようなものなのか、その特徴を1つずつ詳しく解説していき、デフォルトでインライン要素のタグについても紹介していきます。
インライン要素の対にもなるブロック要素についてはblockとは？ブロック要素の特徴を分かりやすく解説で詳しく解説していますので、今回のインライン要素と比較しながら見てみて下さい。
それではインライン要素について解説していきます。
Contents
特徴1：インライン要素は横に並ぶ
まず、インライン要素は横に並んでいきます。
ブロック要素は縦に並んでいきましたが、インライン要素は横に並ぶのが特徴としてあります。
そのため、例えば、1つのブロック要素の中にインライン要素を加えたとしても、行が変わったりすることなく、テキストが表示されます。
特徴2：デフォルトの幅はテキストの幅と同じ
インライン要素のデフォルトの幅はテキストの幅と同じになります。
つまり、デフォルトでは上下左右に全く余白はなく、テキストの幅がそのインライン要素の幅ということを表しています。
先述した特徴と併せると、インライン要素は横に並び、デフォルトの幅はテキストの幅と同じのため、インライン要素を隣り合わせに並べると、全くの余白のないテキストが表示されることになります。
特徴3：幅(width)、高さ(height)を指定できない
インライン要素は幅(width)、高さ(height)を指定をすることが出来ません。
先ほど、デフォルトの幅はテキストの幅と同じと解説しましたが、そこから幅(width)、または高さ(height)を新しく指定することが出来ません。
そのため、インライン要素の幅(width)、高さ(height)はデフォルトの幅である、テキストの幅で固定されることになります。
特徴4：paddingは指定できるが、使わない方が良い
インライン要素では幅(width)、高さ(height)を指定することは出来ませんが、余白は部分的に指定することが出来ます。
その中で、paddingは指定出来ますが、使わない方が良いといえます。
インライン要素にpaddingを使うと、デザイン崩れを起こしてしまうことが多発します。そのため、paddingを使うのはおススメできません。
特徴5：marginは左右のみ指定できる
先ほどpaddingを使用しない方が良いと解説しましたが、marginに関しては左右の余白のみ指定することが出来ます。
そのため、もしもインライン要素の左右に余白を作りたい場合にはmarginを使うようにしましょう。
インライン要素の上下に余白を作りたい場合にはそのインライン要素で余白を作るのではなく、前後のブロック要素や親要素で余白を作ってみて下さい。
特徴6：CSSで『display: inline;』を指定してインライン要素に変更できる
最後に、インライン要素はCSSで『display: inline;』をインライン要素以外の要素に指定することでインライン要素に変更することが出来ます。
デフォルトでブロック要素のタグなどはこの『display: inline;』を指定することによって、その要素をインライン要素にすることが出来ます。
ここまで解説したインライン要素の特徴を活かした場合には『display: inline;』でインライン要素に変更してみましょう。
・主なインライン要素のタグ一覧
<a>～</a><span>～</span>今回はインライン要素の特徴とCSSでインライン要素以外のタグをインライン要素にする方法を解説していきました。
インライン要素と比較して考えられる、ブロック要素の特徴と照らし合わせて、その時に使う要素にどの特徴が必要かを考え、選択してみて下さい。
