webページをレイアウトするプロパティの紹介!web専門学校で学んだcssの基本

cssレイアウトプロパティ web制作

cssの中でも、レイアウトに関するプロパティを紹介していきます。

ブログなどで、画像を横並びにしたい時とかありませんか?

cssは文字の色や大きさ変えるだけではありません。要素を自由自在に移動させることがcssの本領です。

cssの記述場所や文法が知りたい方は、こちらの記事も合わせてお読みください。

css記述の基本「セレクタ」について。web専門学校で学んだcssの基本
「自分のサイトやブログのデザインをちょっとアレンジしてみたい」という人向けにcssについて簡単にまとてみました。 まずはcssの特徴を見てから、記述方法を見ていきたいと思います。 cssとHT...
スポンサーリンク

floatプロパティ

floatプロパティは、指定した要素を左または右に寄せる効果があります。

さらにその後に続く要素は、その反対側に回り込みます。

つまり、ブロックを横並びにするときに使うプロパティですね。

※横並びにする要素にはwidth(横幅)を設定しておいてください。

float:left;

指定したタグを左に寄せ、続くタグはその右側に回り込みます。

float:left;

float:right;

指定したタグを右に寄せ、続くタグはその左側に回り込みます。

float:right;

clearプロパティ

clearプロパティは、要素の回り込みを解除するためのものです。

floatプロパティを使うとその後の要素はすべて回り込んでしまいます。

回り込みが不要な要素(横並びにしない要素)に指定しましょう。

clear:left;

左寄せした要素に対する回り込みを解除。

clear:left;

clear:right;

右寄せした要素に対する回り込みを解除。

clear:right;

clear:both;

左か右寄せした要素に対する回り込みを解除。bothはどちらの回り込みにも対応しているので、とりあえずこれを使えば間違いありません。

clear:both;

positionプロパティ

positionプロパティは要素の配置方法を指定するプロパティです。基本的に次に紹介するtop、bottom、left、rightプロパティとセットで使います。

position:relative;

現在表示されている場所を基準にします。(相対配置)

position:relative;

position:absolute;

ブラウザの左上を基準にします。(絶対配置)

position:absolute;

top、bottom、left、rightプロパティ

top、bottom、left、rightプロパティは基準となる位置からの距離を指定するプロパティです。

top:○px;

topプロパティは、要素のもともとの位置(上)から、移動後の位置までの距離を指定します。

top:○px;

bottom:○px;

bottomプロパティは、要素のもともとの位置(下)から、移動後の位置までの距離を指定します。

bottom:○px;

left:○px;

leftプロパティは、要素のもともとの位置(左)から、移動後の位置までの距離を指定します。

left:○px;

right:○px;

rightプロパティは、要素のもともとの位置(右)から、移動後の位置までの距離を指定します。

right:○px;

displayプロパティ

displayプロパティは要素の表示形式を指定します。

display:inline;

要素をインライン形式にします。

display:inline;

display:block;

要素をブロック形式にします。

display:block;

display:none;

要素を非表示にします。ブログで消したい部分があれば、これを指定することで非表示にできます。

display:none;

overflowプロパティ

overflowプロパティは、ボックスからはみ出した文字などをどうするか指定します。

overflow:visible;

はみ出したまま表示します。

overflow:visible;

overflow:hidden;

はみ出した部分は表示しません。

overflow:hidden;

overflow:scroll;

はみ出した部分をスクロールで表示します。

overflow:scroll;

最後に

cssのレイアウトに関するプロパティでした。

横並びはテーブルを使えば簡単ですが、スマホサイトで見た時に上手くいかない場合があります。

floatを使うことで、それぞれのデバイスに合った並びに自動で表示してくれるのはとても便利です。

また、ブログで自動的に表示されてしまう不必要な要素も、displayプロパティで簡単に消すことが出来ます。

こんな風に、ちょっとしたレイアウトのアレンジなどに使ってみてください。