今回は【CSS】display:inline-blockとnoneの使い方
についての解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
- display
inline-block、none
の使い方について学びたい方へ - inline-blockとnoneの使い方についての解説になります。
今回は前回の続きの記事なります。
前回の記事ではinline
とblock
の違いについての解説しております。
前回の記事
display:inlineとblockに違い、使い方についての記事になります。
displayについて
displayとは、ボックスの種類を指定します。
今回は2種類の値を覚えましょう、書き方は以下のようになります。
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」ともに上下左右の指定も可能になります。
<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に変更しております。
<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
を使ったボタンにしました。
他にもボタンの種類を紹介しておりますので、ご参考程度に!
display:none ノンとは
none(ノン)とは、指定した要素は非表示になります。
書き方は以下のようになります。
/*--none(ノン)--*/
要素 {display:none;}
要素を非表示にする
none
を指定した要素は非表示になります。
none
を指定した場合は文字や画像、なんでも非表示になります。
<p>要素を表示にする</p>
<p class="none">要素を非表示にする</p>
.none {
/*--非表示にしたい要素 none--*/
display: none;
}
レスポンシブデザインなどに用いられる
例えば、「PCではAの画像を表示し、スマホではAの画像を非表示にしBの画像を表示」するなど
切り替えたい要素に便利です。
今回はCSSでの切り替え、jQueryでの切り替え2パターンのご紹介をしております。
注意!
注意:あくまでも非表示になっているだけであり、読み込み自体は行われているため、
表示速度が早くなるわけではありません、注意しておきましょう。
まとめ
今回はこれで以上です。
前回の記事「inlineとblockの違いについて」の記事を読んで更に理解度を深めておきましょう。
displayプロパティは現場では必ず必要になってきます。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事