SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.06.20
  • CATEGORY
TITLE

【CSS】display:inline-blockとnoneの使い方を解説!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】display:inline-blockとnoneの使い方
についての解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • displayinline-block、noneの使い方について学びたい方へ
  • inline-blockとnoneの使い方についての解説になります。

今回は前回の続きの記事なります。
前回の記事ではinlineblockの違いについての解説しております。

前回の記事

display:inlineとblockに違い、使い方についての記事になります。

displayについて

displayについて

displayとは、ボックスの種類を指定します。
今回は2種類の値を覚えましょう、書き方は以下のようになります。

指定できる値
  • inline(初期値) 
    解説の記事ありますよ
    指定した要素をインラインボックスとして表示します
  • block 
    解説の記事ありますよ
    指定した要素をブロックボックスとして表示します
  • inline-block
    指定した要素をインラインボックスとして表示され、ブロックボックスとして表示します
    インラインボックスのように改行はされません、ブロックボックスのように、高さ、幅の指定は
    可能になります
  • none
    指定した要素は非表示になります

display:inline-block インラインブロックとは

display:inline-block インラインブロックとは

インラインブロックとは、指定した要素をインラインボックスとして表示され、ブロックボックスとして
表示します。
書き方は以下のようになります。

/*--インラインブロック--*/
要素 {display:inline-block;}

インラインボックスの特徴、要素の例は以下になります。

インラインボックスの特徴
インラインブロックの特徴
  • 要素の改行はされずに、次に続く要素はその要素の横に配置されます(inline的)
  • margin、paddingを上下左右に指定できます(block的)
  • width、height、margin、padding、borderを指定できます(block的)
  • 横幅は中身の長さによって自動的に広がります(inline的)

メニューバーとして用いられる

親要素である「div」に「text-align: center」を指定し要素全体を中央配置にしております。
display: inline-blockを指定することにより、横並びが可能になります。
「margin」、「padding」ともに上下左右の指定も可能になります。

メニューバーとして用いられる

  • HOME
  • 会社概要
  • よくある質問
  • お問い合わせ
<div>
	<ul>
		<li>HOME</li>
		<li>会社概要</li>
		<li>よくある質問</li>
		<li>お問い合わせ</li>
	</ul>
</div>
div {text-align: center;}

div ul li {

	/*--inline-blockを指定--*/
	display: inline-block;
	
	/*--padding 可能--*/
	padding: 10px 26px;
	
	/*--margin 可能--*/
	margin: 0 10px;
	
	background: #febe3e;
	color: #333333;
	font-weight: bold;
}

横幅は中身の長さによって自動的(文字数、大きさ)によって広がります。
横幅を均等にしたい場合はwidthを指定しましょう。

widthを指定し横幅を均等にしよう

widthを指定したことにより、横幅が均等になります。
height、borderの指定も可能になります。
今回は、paddingの左右の値を26pxから0に変更しております。

widthを指定

  • HOME
  • 会社概要
  • よくある質問
  • お問い合わせ
<div>
	<ul>
		<li>HOME</li>
		<li>会社概要</li>
		<li>よくある質問</li>
		<li>お問い合わせ</li>
	</ul>
</div>
div {text-align: center;}

div ul li {

	/*--inline-blockを指定--*/
	display: inline-block;
	
	/*--width 可能--*/
	width: 100px;
	
	/*--padding 可能--*/
	padding: 10px 0;
	
	/*--margin 可能--*/
	margin: 0 10px;
	
	/*--border 可能--*/
	border: solid 2px #ffffff;
	
	/*--以下 省略--*/
}

ボタンに用いられる

inline-blockを指定することにより、paddingの指定が可能になります。
inline-blockを指定していない
a(アンカーリンク)は背景色は広がりません。

ボタンに用いられる

<a href="#" class="btn01">ボタン</a>
.btn01 {
	/*--inline-blockを指定--*/
	display: inline-block;
	
	/*--padding 可能--*/
	padding: 20px 100px;
	
	color: #333;
	text-decoration :none;
	text-align: center;
	background: #ffbf4b;
	transition: .4s;
	
	/*--水平方向 垂直方向 色--*/
	box-shadow: 10px 10px #f9a5a5;
}

.btn01:hover {

	/*--水平方向 垂直方向 色--*/
	box-shadow: 0px 0px #f9a5a5;
}

今回は、box-shadowを使ったボタンにしました。
他にもボタンの種類を紹介しておりますので、ご参考程度に!

box-shadowのボタン記事

box-shadowとボタンの組み合わせをご紹介

display:none ノンとは

display:none ノンとは

none(ノン)とは、指定した要素は非表示になります。
書き方は以下のようになります。

/*--none(ノン)--*/
要素 {display:none;}

要素を非表示にする

noneを指定した要素は非表示になります。
noneを指定した場合は文字や画像、なんでも非表示になります。

要素を非表示にする

要素を表示にする

要素を非表示にする

	<p>要素を表示にする</p>
	<p class="none">要素を非表示にする</p>
.none {

	/*--非表示にしたい要素 none--*/
	display: none;
}

レスポンシブデザインなどに用いられる

CSSでの切り替え、jQueryでの切り替え2パターンのご紹介

例えば、「PCではAの画像を表示し、スマホではAの画像を非表示にしBの画像を表示」するなど
切り替えたい要素に便利です。
今回はCSSでの切り替え、jQueryでの切り替え2パターンのご紹介をしております。

PC画像とスマホ画像を切り替える記事

コピペ可能、またデモサイトでの確認も可能です。

注意!
注意:あくまでも非表示になっているだけであり、読み込み自体は行われているため、
表示速度が早くなるわけではありません、注意しておきましょう。

まとめ

今回はこれで以上です。

前回の記事「inlineとblockの違いについて」の記事を読んで更に理解度を深めておきましょう。
displayプロパティは現場では必ず必要になってきます。

スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top