span インライン要素と div ブロック要素

インライン要素とは

インライン要素同士が横に並びます、ブロック要素のように上下の余白設定がきかない。

spanタグは汎用的なhtmlタグ、囲んだ要素を強調するなどデザインの微調整に利用されるタグで、個別にフォント調整、文字色、背景色の変更に利用されます。

spanタグはdivタグのような使い方をしますが、インライン要素のため幅や位置、余白などの指定に多少制限があります。

ブロック要素とは

ブロック要素同士は縦に並びます、横幅や高さを指定でき、余白も指定できます。

divタグはブロック要素のため幅や位置、余白の指定は柔軟にできます

インラインとブロックの違いを見てみましょう

spanとdivで記述しました、span要素の場合はインライン要素のため文字の分だけの幅と高さで表示されます。

div要素はブロック要素のためp(段落)のmarginの上下の幅も一緒にブロック要素の幅として表示されます。

インライン要素をブロック要素のようにする

インライン要素をdivタグのようにブロック要素として扱うことができるようにすることができます、そのためには「display: block;」を指定します。

display: blockを使ってブロック要素に

html記述
<span>インライン要素をブロック要素に</span>

CSS記述
span {
display: block;
}

インライン要素をブロック要素として使いたい場合は、display: block; を使ってブロック要素に変更してやる必要があります。

文字を右寄せにする

block要素に指定してから右寄せを指定します

CSS記述
span {
display: block;
text-align: right; (右寄せ)  
}

横幅を指定する

インライン要素はblock要素に指定してから横幅を指定します

CSS記述
span {
display: block;
width: 100px;
}

マージンを指定する

spanタグのマージンは左右のみの指定になります、上下のマージンを指定する時はブロック要素にする必要があります

CSS記述
span {
display: block;
margin: 50px 30px; (上下)(左右)

ブロック要素をインラインに

リスト(ul)はブロック要素なので下のように記述すれば

このように縦方向に表示されます。

display: inlineを使ってインライン要素にする

CSSにinlineを記述すると縦に並んでいたのが横に並びました。

inlineとblockを使って中間の性質にする

display: inline-block; を使用することでインラインのように横並びになりますが、ブロック要素のように幅や高さ余白を指定できます。

widthが20pxなので縦書きのようになっていますが幅を広げると幅の分だけ横書きになっていきます。

spanの装飾のやり方

class属性を使用したやり方

html記述
<span class="oo">クラス名を使う</span>

CSS記述
span .oo {
color:#000000;
font-weight: normal;
}

id属性を使う

<span id="ooi>idを使う</span>

CSS記述
span #ooi {
color:#000;
font-weight: normal;
}
「#」がidを意味します

style属性を使う

html記述
<span style=" color:#fff; font-weight: normal;">スタイル属性を使う</span>

文字色背景色を変更する

CSS記述
span {
color: #000;       文字の色
background-color: #000; 背景色
}

文字サイズを指定する

span {
font-size: 16px;
}

spanの入れ子について

spanタグに入れてもいいのは

インライン要素のみなります、主にspanやaタグが入ります、spanの中にspan、さらにspanといった入れ子でも問題なく使用できる

入れられないものは

ただしspanタグの中にdivやhタグなどはブロック要素なので入れることはできません、ページを表示するとspanの外に出てしまいます

ブロック要素とインライン要素

ブロック要素には

div、p、ul、li、ol、table、header、main、footer、section、form、h1~h6

このようなものがあります。

インライン要素には

span、a、strong、b、font、img、small、input、br、textarea、u

このようなものがあります、この中でimg、input、textareaなどは高さや幅や余白が設定できる性質を持っています。

imgは文書に画像を埋め込みます、置き換え要素になります。

textareaは複数行の入力が可能な入力欄を作成するためのタグです。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事