CSSスキル - 第4章 Lesson8

インライン要素をブロック要素に変えるプロパティの使い方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

インライン要素にボックス系のCSSはかけれませんが、ブロック要素に変えるdisplayプロパティを使えばそれらのCSSが利用出来るようになります。
ここでは、表示形式を変えるdisplayプロパティについて、解説したいと思います。



この動画で学べること

・displayプロパティを使う方法



リンクの部分のスタイルをかける方法

現在、<a>タグには余白がなくて詰まったような感じになっているので、背景をもう少し大きくしたいと思います。
こういう時に使うのがpaddingでした。
では、paddingをかけて内側の余白をとってみましょう。



a {
padding: 10px;
}



一度保存してブラウザで見てみましょう。
要素自体は大きくなりましたが、上の文章とかぶってしまいます。
文章からの余白をとりたいので、margin-topをかけてみましょう。



 a {
padding: 10px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
}



保存してブラウザで見てみます。
変化がありません。
これは、<a>タグがインライン要素だからです。
marginは、ブロックレベル要素にしかかけることができません。
こういう時はdisplayプロパティを使い、インラインレベル要素をブロックレベル要素に変更してあげる必要があります。
「inline-block」つまり、インライン&ブロックレベル要素にする値を設定しましょう。



a {
padding: 10px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
}



保存してブラウザで見てみると、<a>タグに対してもmarginをかけることができました。
プロパティdisplayの使い方には他にも以下のようなものがありますので、あわせて覚えておいてください。