CSS

CSSで要素を横並びにする方法(floatとdisplay)とdisplayの使い方の基本

CSSで要素を横並びにする方法

図形に文字を回り込ませる方法（インラインで）

本題に入る前にHTML・CSSで画像に文字を回り込ませる方法について簡単にまとめてみます。

そのまま後ろに文字。

imgタグは後で解説するようにインライン要素なのでそのままで、右に回り込みます。

<img  src="インコ３.jpg" alt="ぴーちゃんは生後２ヶ月" width="400" height="533" />  セキセイインコは今やペットとして世界各地で人気があり、ジュウシマツやブンチョウと並んでポピュラーな鳥である。
	わりと丈夫でもあるが、適温は20-30度で、特に雛や病鳥は30度に保っていた方がよい。寿命は平均7-8年と言われるが、健康管理に気をつけると12-14年生きる。

ただし画像に係るのは最初のほうだけです。

imgタグにCSSプロパティ「float: left」を指定する

インラインで挿入する場合はタグ内のstyle属性を使って、「style=”float:left”」と記述します。

floatは文字を回り込ませたり要素を隣に並べたりするときに使うプロパティです。

すると以下のように文字が完全に上まで回り込みます。

画像と文字の間に適切な間隔（マージン）を設定する

画像の右側と下に間隔を開けたい場合にはmargin指定します。
すると写真と文字の間隔が空きます。

margin-right:20px;margin-bottom:20px"

としてみました。

画像全体のなかのCSSの記述は以下のようになります。

<img  src="インコ３.jpg" alt="ぴーちゃんは生後２ヶ月" 
   	  width="400" height="533" style="float:left;margin-right:20px;margin-bottom:20px">

すると確かの画像とテキストが離れていることがわかります。

前提知識として

spanタグやaタグなどのインライン要素は、自動的に横並びになリます。
しかしブロックレベル要素は、自動的に改行が入り、
上から下へブロックが並びます。
なのでブロック要素を横並びにするにはCSSでプロパティを指定しなくてはなりません。

ちなみに要素とは
<タグ>〜</タグ>の１まとまりを言います。
例えば
<h2>インコはどこで飼う</h2>
は要素です。

Sample Content

インライン要素とブロックレベル要素とはなにか

見出し・段落・表など、文書を構成する基本となる要素例えば「hタグ」、「pタグ」、「divタグ」などは、
幾つかの要素を内に含むブロックを作る特徴があり、自動的に改行され、上から下へと表示されます。
これを「ブロックレベル要素」と言います。

それに対して、「インライン要素」は、主にブロックレベル要素の内容として用いられるもので。
例えば「strongタグ」「spanタグi」「mgタグ」「aタグ」などは前後に改行が入らず、
文章の一部として表示されます。
上から下へと表示されず、「br」で改行を指定しない限り、自動的に横へ表示されます。
幅と高さをCSSで指定することはできません。
また左右のpaddingとmargin（余白）は指定できますが、縦の指定できません。

ブロックレベル要素の中に他のブロックレベル要素やインライン要素を配置することができますが、
インライン要素の中にブロックレベル要素を配置することはできないというルールがあります。
<span><p>これは待つがっている一例です</p></span>

といった記述はできません。

ブロックレベル要素を横並びさせるプロパティ

ブロックレベル要素を横並びさせるプロパティはいくつかありますが主に２つをマスターすれば大概のことはできると言われています。

float

先程floatを使ってテキストを回り込ませましたが。
この様にfloatはテキストを回り込ませたり、ブロックレベル要素を隣に並べたりするときに指定するプロパティです。

値によって次のような働きをします。

float:left; 指定した要素を左に寄せて、次の要素を右に回り込ませます。
float:none; 初期値で、配置を指定しませんので要素の次の回り込みを無くします。
float:right; 指定した要素を右に寄せて、次の要素を左に回り込ませます。

デザイン上必要がない、下にある要素も横に流れ込みますので
そうならないようにしたいときには「clear: both;」などで規制をかける必要があります。

display

displayプロパティの値については。

初期設定である

block

はp、div、ul、h1〜h6などのブロックレベル要素タグの初期値はこの状態になっています。
この状態では縦に並んでいきます。

none

は非表示にする場合設定します。

横並びさせるためのメニューについては以下が基本です。

inline

要素がインライン要素化され、横に並びます。
ただ横に流れるだけですので、高さや幅の指定ができません。
左右のmargin/paddingの指定はできますが、上下のmargin指定を行うことはできません。

inline-block

横並びの際には、インライン要素とブロック要素の両方の要素を兼ね備えた働きをします。
インライン要素のようにブロック要素を横並びにし、かつ、ブロック要素と同じように高さや上下マージンの指定ができます。

ただし、内側の要素が一方が大きすぎる場合などでは横並びにならない場合もあります。

table-cell

table-cell はその要素を「table」の「td」として扱っていますので横並びになります。
table機能がそのまま使えて
指定した要素を横に均等に配置したり、縦中央に配置（vertivcal-align）することもできます。

flex

親要素に「display: flex」を設定すると子要素が横並びになります。
この「flex」には一緒に使って非常に便利な機能が備わっていますのでおすすめです。

ただ奥が深いので。

簡単な例のみ紹介します。

floatプロパティの使い方

まずブロックレベル要素を並べてみます。

例えば<LI>タグはList Itemの略で、ブロックレベル要素です。
リストの項目を記述する際に使用します。

「UL」は「unordered list（順序がないリスト）」の略で順序がない箇条書きのリストを表示する際に使用するタグです。

これを使って以下のように記述をしました。

<h2>floatを使って要素を横に並べてみよう</h2>
 	 <p id=size>やり方は３つだよ</p>
 	<ul >
   
	<li>redの色のインコ</li>	 
	   
	<li>#3cb371の色のインコ</li>	 
	   
	<li>#adff2fの色のインコ</li> 
   
	<li>blueの色のインコ</li>
	 
	</ul>

すると以下のように縦に記述されます。

このリストを横に並べるためにCSSの「floatプロパティ」を利用します。

なおその下に

 <p >横に並んだね</p>

を入れておきました。

横並びさせる方法

まずHTML文書の方にデザイン変更をする場所の目印を付けます。

class=””をulタグに付け加えます。

全体として以下のようになります。

<h2>floatを使って要素を横に並べてみよう</h2>
 	 <p id=size>やり方は３つだよ</p>
 	<ul class="side">
   
	<li>redの色のインコ</li>	 
	   
	<li>#3cb371の色のインコ</li>	 
	   
	<li>#adff2fの色のインコ</li> 
   
	<li>blueの色のインコ</li>
	 
	</ul> 
 	 	
      <p >横に並んだね</p>

その上でCSSに以下のように書き込みます。

side liとセレクトを２つ以上並べることを子孫セレクタと言ってデザイン適用範囲を絞り込むものです。
つまりliタグにのみ影響を与えるという形にしました。

その上でfloat: leftで左橋から右に回り込むように指定しました。

更に、文字をleft;font-size : 20pxと若干大きくするよう指定しました。

.side  li{
  float: left;  float: left;font-size : 20px;
}

するとリストが横に並びましたし、文字も大きく表示されていますが。
横並びにさせたくない
その下にあるpタグのセンテンスも横に引っ張られてきました。

floatの影響排除

これはfloatを使った場合よくありがちなことでその影響を排除するには
例えば一番下のpタグに目印を付け

<p class=”noside”>横に並んだね</p>

CSSタグで横並びしないようにclear:both;で横並び解除を指定します。

 .noside{
  	clear:both;
  }

すると以下のように表示されます。
「横に並んだね」が改行されているのがわかります。

見栄えを良くする

ただ横並びにするとくっつきすぎていますので感覚を空けたいし。
●も邪魔です。

そういうときには
CSSに以下のように記述をします。

list-style: none;

margin: 40px;

リストのマークをスタイルシートにて表示しないにする

<ul style="list-style:none">

とすればマークは消えます。

また間隔を開けるためにmargin(間隔）を指定します。

全体としてCSSは以下のように記述されています。

.side  li{
  float: left;font-size : 20px;
  list-style: none;
     margin: 40px;
  }
.noside{
  	clear:both;
  }

実際の表示は以下のようになります。

今度は高さと幅を指定してみました。

width: 100px;

height: 50px;

全体としてのCSSの記述は以下です。

.side  li{
  float:left;  width: 100px;
  height: 50px;
  list-style: none;
     margin: 40px;
  }
.noside{
  	clear:both;
  }

すると以下のように表示されました。

高さと幅が反映されていないことがわかります。

このほうが見栄えが良いですね。

displayプロパティの使い方

横並びさせることができる４つの値についてまとめてみます。

inline

先程の最後のCSSの記述を

float: left;

から

display: inline;

に変更をしてみます。

.side  li{
  display: inline;;  width: 100px;
  height: 50px;
  list-style: none;
     margin: 40px;
  }
.noside{
  	clear:both;
  }

するとやはりfloatと同じ様に横並びになります。
しかし横の間隔などは反映されてますが、
高さや幅や余白を指定をしても高さや幅上下の間隔（余白）は反映されません。

inline-block

ブロック要素の特徴とインライン要素を併せ持つとても便利な値です。

さきほどのCSSの記述をdisplay: inline;からdisplay: inline-blockに変更し、 floatを使ったときに勝手に回り込まないように設定しておいた .noside{ clear:both; }という記述を削除します。

.side  li{
  display: inline-block; width: 100px;
  height: 50px;
  list-style: none;
     margin: 40px;
  }
.noside{
  	clear:both;
  }

高さや幅は反映されますし、
次のpタグにclear:both; を記述しなくても勝手に回り込むことがなくなります。

更にはinline-blockでは「text-align」や「vertical-align」の指定をすることもできます。

table-cell

この働きをみていくためにdivタグを使って先ほど横に並べたセンテンスを使ってボックスをまず作っていきます。

HTMLだけを考えた場合、<DIV>タグというのはあまり使い道がないんですが。
CSSを使うにあたってはい非常に重要な働きをします。

divタグそれぞれにclassを使って目印を付けていきます。
今回は「box_番号」とします。またdivタグの間には
「redの色のインコ」などの文を一つ入れました。

最初に復習で。
単に横並びするプロパティを入れずにブロックレベル要素を箱にして表示させてみます。

縦に並ぶんでしたね。

まずはHTML文書。

<div class="box_1">
  redの色のインコ
</div>
 
 
<div class="box_2">
  #3cb371の色のインコ
</div>
 
 
<div class="box_3">
  #adff2fの色のインコ
</div>

  
<div class="box_4">
  blueの色のインコ
</div>

その上でCSSに以下のように記述します。

ボックスの中の文字の色、幅・高さ、背景色、枠を破線で指定しました。

.box_1 {
    color: white;
    width:100px;
    height:100px;
    background-color: red;
     border: dashed 1px green;
}
 
.box_2{
  color: black;
  width:100px;
  height:100px;
  background-color: #3cb371;
 border: dashed 1px green;
}
 
.box_3{
  color: black;
  width:100px;
  height:100px;
  background-color:  #adff2f;
  border: dashed 1px green;
}
.box_4{
  color: white;
  width:100px;
  height:100px;
  background-color:  blue;
  border: dashed 1px green;
}

すると以下のように表示されます。

次に先ほど解説をしたinline-blockの復習をしてみます。

このプロパティをCSSに書き込むとブロック要素が横並びになるんでしたね。

CSSの各ブロック要素にそれぞれ

display: inline-block;

と記述します・。

。

.box_1 {
	display: inline-block;
　　　　
    color: white;
    width:100px;
    height:100px;
    background-color: red;
     border: dashed 1px green;
}
 
.box_2{
	display: inline-block;
　　　　　　
  color: black;
  width:100px;
  height:100px;
  background-color: #3cb371;
 border: dashed 1px green;
}
 
.box_3{
	display: inline-block;
　　　　　
  color: black;
  width:100px;
  height:100px;
  background-color:  #adff2f;
  border: dashed 1px green;
}
.box_4{
	display: inline-block;
  color: white;
  width:100px;
  height:100px;
  background-color:  blue;
  border: dashed 1px green;
}

すると以下のようになります。

このやり方でメニューバーなどが簡単に作れますね。

要素の間が離れていますが。
「inline-block」では、要素間を自動的に調整し、隙間をとった配置を行うからです。

これらの特徴を踏まえた上で活用していきたいものです。

それでは次にHTML文書はそのままで。
「table-cell」を記述していきます。

.box_1 {
	display:table-cell;
    color:white;
    width:100px;
    height:100px;
    background-color: red;
     border: dashed 1px green;
}
 
.box_2{
	display: table-cell;
　　
  color: white;
    width:100px;
  height:100px;
  background-color: #3cb371;
 border: dashed 1px green;
}
 
.box_3{
	display: table-cell;
　　
  color: black;
  width:100px;
  height:100px;
  background-color:  #adff2f;
  border: dashed 1px green;
}
.box_4{
      display:table-cell;
    color:white;
  width:100px;
  height:100px;
  background-color: blue;
  border: dashed 1px green;
}

すると以下のように表示されます。

隙間がなくなったことがわかります。

次に上下左右の間隔がどうなるか、margin（横の間隔）padding（上下の間隔）を記述してみます。

.box_1 {
	display:table-cell;
    color:white;
    width:100px;
    height:100px;
    background-color: red;
     border: dashed 1px green;
     margin: 30px; padding: 10px;
}
 
.box_2{
	display: table-cell;
　　
  color: white;
    width:100px;
  height:100px;
  background-color: #3cb371;
 border: dashed 1px green;
 margin: 30px; padding: 10px;
}
 
.box_3{
	display: table-cell;
　　
  color: black;
  width:100px;
  height:100px;
  background-color:  #adff2f;
  border: dashed 1px green;
  margin: 30px; padding: 10px;
}
.box_4{
display:table-cell;
    color:white;
  width:100px;
  height:100px;
  background-color: blue;
  border: dashed 1px green;
  margin: 30px; padding: 10px;
}

すると以下のようになります。

paddingは効いているらしく全体として大きくなっていますが。間隔が空きませんので。marginは効かないようですね。

Flexbox

Flexboxは複雑なコードを書かなくても要素内の縦横の配置を変えることができるすぐれものです。
HTMLでの記述で要素の順番があってもCSSだけで自由に表示順序を変えることができ
要素間の幅の指定も要素内の分量が違っても、高さや幅を柔軟調整できるので調整が楽です。

例えば

先程使っていたmargin（横の間隔）padding（上下の間隔）を記述し４つのブロック構成要素から
横並びを指定するために使った「display:table-cell;」を取り除き。
代わりに<div class=”flex”>~</div>という形で目印を付けた上でdivタグで囲います。

その上でCSSで

.flex{display:flex;}

と記述をします。

すると以下のようになります。

いちいち個別に横並び指定をしなくても良いですし。
先程は反映されなかったmargin（横の間隔）もしっかり効いています。

Flexboxプロパティと値にはたくさんのものがあって。「flex」と「display:flex;」と一緒に使います。
詳しくは別記事に譲りますが。

一つだけ例を上げておきます。

同じ親要素に

flex-direction:row-reverse;

をくわえて以下のように記述をします。

.flex{display:flex;
flex-direction:row-reverse;
}

すると以下のように要素が右に寄り順番が逆に表示されます。

まとめ

ブロックレベル要素を横に並べる方法について簡単にまとめてみました。

あくまでも基本だけですが。これだけでも最低限のことはできるようになります。
displayは奥が深いので。

マスターすると様々に使えそうです。

更に深い内容は別記事で書いてみたいと思います。

CSS　セレクタとプロパティと値の基本まとめ

CSS 幅と高さの指定方法　widthとheightプロパティ基本

サイト構築関連

プログラミング関連

気になるキーワードで記事検索

自己紹介

酒場マリアジョイ

ウエブマーケティング入門酒場　
マリアジョイ
疲れたら一休み(^_-)-☆

AviUtl

AviUtlの初期設定・使い方の実際
・エンコードなどについて
書いた記事をまとめてあります。

普段使い画像編集ソフト

普段遣い画像編集ソフト
軽快にちゃっちゃか編集できるすぐれものです。

CSS