display属性

 
■概要
 
display俗世は、要素をどう表示するかを指定します。

 
 
■none
 
要素をレンダリングしないように設定します。
 
■例

<style>
　.display-none { display: none }
　.invisible { visibility: hidden }
</style>
<div class=”display-none”>あ</div>
<div>い</div>
<div class=”invisible”>う</div>
<div>え</div>

出力結果

あ

い

う

え

 
■block
 
divタグ、pタグ、liタグなどが該当します。
 
width, height属性の指定が可能です。block要素の後ろに出てくるタグは、前にあるblock要素の右側に配置できる場所があっても、次の行に描画されます。
 
■例

<style>
　.block1 { width: 400px; border: 3px solid #333 }
　.block2 { width: 300px; border: 3px solid #999 }
</style>
<div class=”block1″>block 1</div>
<div class=”block2″>block 2</div>
hello

出力結果

block 1

block 2

hello

 
■inline
spanタグ、bタグ、iタグ、aタグなどが該当します。
 
blockと違って改行されないし、widthとheightの指定ができません。
■例

<style>
.inline1 {
　background: #09c;
}
.inline2 {
　width: 200px; /* この値は無視されます */
　border: 3px solid #999;
}
</style>
<p>
　情報伝達の手段として、一般的な<span class=”inline1″>電子メール</span>ですが、
　LINEやインスタグラムなど、短いメッセージやイメージの共有に慣れてしまうと、
　面倒で苦手、という声も聞きます。
　<span class=”inline2″>基本となる形を理解</span>していれば、
　怖がる必要はありません。
　以下に基本の形式を紹介します。
</p>

出力結果

　情報伝達の手段として、一般的な電子メールですが、
　LINEやインスタグラムなど、短いメッセージやイメージの共有に慣れてしまうと、
　面倒で苦手、という声も聞きます。
　基本となる形を理解していれば、
　怖がる必要はありません。
　以下に基本の形式を紹介します。

 
■inline-block
 
blockとinlineの間くらいだと考えられます。改行はできないが、大きさの指定ができます。
ただし、Internet Explorer7以下では使えません。
 
■例

<style>
.inline-block1 {
　display: inline-block;
　background: #09c;
　height: 45px;
　/* inline要素の高さは、フォントの高さで設定されるが、
　inline-blockを利用すると、任意の高さに変えることができます。 */
}
.inline-block2 {
　display: inline-block;
　width: 200px; /* この値は正常に反映されます */
　border: 3px solid #999;
}
</style>
<p>
　情報伝達の手段として、一般的な<span class=”inline-block1″>電子メール</span>ですが、
　LINEやインスタグラムなど、短いメッセージやイメージの共有に慣れてしまうと、
　面倒で苦手、という声も聞きます。
　<span class=”inline-block2″>基本となる形を理解</span>していれば、
　怖がる必要はありません。
　以下に基本の形式を紹介します。
</p>

出力結果

　情報伝達の手段として、一般的な電子メールですが、
　LINEやインスタグラムなど、短いメッセージやイメージの共有に慣れてしまうと、
　面倒で苦手、という声も聞きます。
　基本となる形を理解していれば、
　怖がる必要はありません。
　以下に基本の形式を紹介します。