CSSでpositionを使い要素を並べる｜static、relative、absolute、fixedを解説

テキストの位置指定

要素の配置の中で、インラインの左寄せ、右寄せ、中央寄せなどの調整方法にも触れておきます。text-alignを以下のように設定だけです。ちなみに、上下中央に揃える場合は「vertical-align: middle;」を使用します。

左寄せ）text-align: left;
右寄せ）text-align: right;
中央寄せ）text-align: center;

また、ボックスの中に配置したテキストがはみ出す場合の処理はoverflowを記述します。

はみ出した部分をそのままにする）overflow: visible;
はみ出した部分を隠す）overflow: hidden;
はみ出した部分をスクロールで閲覧できるようにする）overflow: scroll;

要素の表示し方を制御する（display）

さらに思い通りに要素を並べられるようになるにはdisplayプロパティを覚える必要があります。displayプロパティを使うにあたり、以下のあたり把握しておきましょう。「display: 値」という形式で指定します。

block

要素が横に広がっている状態であり、次の要素は下に配置されます。幅や高さ、余白を自由に設定でき、以下のような記述が可能です。縦にブロックが積み重ります。

【CSS】
.sample{
display: block;
background: #82ECBF;
width: 200px;
height: 20px;
padding: 10px;
margin: 5px;
}

【HTML】

inline

ブロック要素は、テキストの一部に使われて横に並ぶ性質があります。そのため、blockの中に存在するのが一般的です。幅と高さは指定できませんが、左右の余白の調整は可能です。上下の余白は調整できませんので注意が必要です。以下の例はテキストの部分だけに背景色がついたインラインらしいものです。

【CSS】
.sample{
display: inline;
background: #82ECBF;
}

【HTML】

inline-block

blockと inlineの両方の性質を持っており、幅と高さを設定できるのが特徴です。
以下の例は幅と高さを指定し、余白の調整も行ったメニューのようなデザインです。横並びに配置されたメニューを作成できます。

【CMS】
.sample{
display: inline-block;
background: #82ECBF;
width: 200px;
height: 20px;
padding: 10px;
margin: 5px;
text-align:center;
}

【HTML】

none

要素を非表示にします。「display:none; 」を指定するだけです。