CSS

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

Sponsored Link

Sponsored Link

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

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

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

そのまま後ろに文字。

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

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

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

 

前提知識として

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

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

Sample Content

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

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

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

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

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

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

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

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>やり方は3つだよ</p>
 	<ul >
   
	<li>redの色のインコ</li>	 
	   
	<li>#3cb371の色のインコ</li>	 
	   
	<li>#adff2fの色のインコ</li> 
   
	<li>blueの色のインコ</li>
	 
	</ul>

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

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

なおその下に

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

を入れておきました。

横並びさせる方法

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

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

<ul class=”side”>

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

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

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

side liとセレクトを2つ以上並べることを子孫セレクタと言ってデザイン適用範囲を絞り込むものです。
つまり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プロパティの使い方

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

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(上下の間隔)を記述し4つのブロック構成要素から
横並びを指定するために使った「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は奥が深いので。

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

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

Sponsored Link

Sponsored Link

関連記事

  1. CSS WEBアイコンフォントの使い方 Font Awesome…
  2. ソースコードを記事中に表示させるために必要なことは?簡単にソース…
  3. CSS最低の書き方の基本 CSSはどこにあるの?
  4. テキストエディタATOM インストールから基本編集・操作を詳説(…
  5. CSS レスポンシブデザインに欠かせないmax-widthとmi…
  6. HTMLの学習の前に環境を整える(Windows版)エディタとブ…
  7. HTML・CSSを実際に記事を作りながら覚えていこう
  8. HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

サイト構築関連

  1. ソースコードを記事中に表示させるために必要なことは?簡単にソースコード変換ができるサイトやプラグインEnlighter – Customizable Syntax Highlighterも紹介
  2. WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 
  3. エックスサーバーでSSL化設定をするやり方を詳細に解説してみた
  4. WordPress新エディタ「Gutenberg」の使い方
  5. WordPressのフォルダ構成とバックアップの仕方
  6. 簡単なワードプレスのバックアップ方法 エックサーバーでの詳細説明
  7. Windows10でブルーライトカットの設定 コントロールパネルの使い方
  8. 【Basics of site construction】ワードプレスで日付を消す方法

プログラミング関連

Sponsored Link

おすすめ記事

知っておくと便利なセレクタまとめ

セレクタについてはその基本を以下の記事にまとめてありますが。https://maliaj…

WordPressエディタ「Gutenberg」の使い方 総まとめ

WordPressエディタ「Gutenberg」の使い方についていくつか記事を書いてみました。その過…

WordPressエディタ「Gutenberg」で用意されている各ブロックの解説 

前記事で新エディタ「Gutenberg」を使って記事を書くために必要な最低限のものについて解説しま…

WordPress新エディタ「Gutenberg」の使い方

使い勝手がかなり違うように見える新エディタだが使い方はシンプル。新エディタはブロックを…

aタグの活用 記事の途中にジャンプさせたりCSSでリンクボタンを作る

HTMLのリンク<aタグ>の書き方外部リンクタグの基本HTMLはハイパーテキストですので他の…

HTML ul ol liタグで作る箇条書きリスト 使い方の基本

箇条書きリスト作成の基本の基本箇条書きを作るタグにはul・li、 ol・liの組み合わせがあって…

HTML CSS テーブル(表)の作り方とその装飾の仕方 基本

表(table)の作り方表を作るには。テーブルタグを使います。&lt;TABLE&g…

HTMLとCSS 初歩的な文字装飾 基本まとめ

文字装飾の基本をまとめておきます。難しくありませんので、一つ一つ確実に押さえておきたいです。…

自己紹介

自己紹介

酒場マリアジョイ

酒場マリアジョイ

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

AviUtl

AviUtl

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

Sponsored Link

普段使い画像編集ソフト

普段使い画像編集ソフト

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

人気の投稿とページ

MPC-BE 優れた動画再生ソフトの設定と使い方基本的なことの詳細
HTMLで動画や画像を埋め込みする方法を詳説
HTMLとCSS 初歩的な文字装飾 基本まとめ
AviUtlでGIF形式で動画を保存することができる出力プラグイン Direct GIF Export 2
Windows10でブルーライトカットの設定 コントロールパネルの使い方
AviUtil カメラ制御の基本の基本を詳しく解説
AviUtl タイムラインの空いているところを右クリックして出てくるメニュー詳説
コーデックとしてUt Video Codec Suiteの特徴と設定の仕方
AviUtlのすべてのエフェクトについての解説⑬アニメーション効果(3)
AviUtl タイムラインの使い方①基本

ソフト・アプリの使い方

PAGE TOP