inline・block・inline-blockまとめ☆

こんにちは!今回はCSSのdisplay要素であるinlineやblock、inline-blockなどの値について勉強したことをまとめてみました♪

img・a・spanなどはinline

タイトルにあるようにimg・a・spanなどはinline要素です。
画像のような3つのaタグを書いてみました。
分かりやすいように背景色をつけています。

cssで特に何も指定していないのに横に並んでいますね!
このように、inline要素は横に並ぶ特徴があるのです!
そしてaタグの幅ですが、要素ぴったりまでしかありませんね。
なのでwidthとheightを100pxずつ試しにつけてみます。

変化は無いようです・・・
このように、inline要素は幅と高さの指定ができません

p・div・ul・h1~h6などはblock

タイトルにあるようにp・div・ul・h1~h6などはblock要素です。
画像のように3つのpタグを書いてみました。
こちらも分かりやすいように背景色をつけています。


縦に並んでいますね!
先ほどのaタグのようにinline要素は横に並びますが、pタグのようなblock要素は縦に並びます
そしてこちらは要素が幅いっぱいまで伸びていますね。
先ほどaタグには幅と高さの指定が効きませんでしたが、block要素であるpタグはどうでしょうか。先ほどと同じようにwidthとheightを100pxずつつけてみました。

効きましたね!
このように、block要素には幅と高さの指定ができます

display: inline-block;とは?

inline-blockとはざっくり言うと、inlineとblockの両方の性質をあわせもったものです。
先ほど高さと幅の指定が効かなかったaタグにdisplay: inline-block;をかけてみると・・・

並びは横並びのまま幅と高さの指定ができました!
そして先ほど縦並びのまま幅と高さの指定ができたpタグにもdisplay: inline-block;をかけてみると・・・

幅と高さの指定を保ったまま横並びになりました!
このようにinline-blockは、配置はinlineのように横並びに、中身はblockのように幅や高さの指定ができるようにしてくれます!

いかがでしたでしょうか!
なかなか難しいですが一緒に頑張りましょう☆

著者:

■□■□■□■□■□■□■□■□■□■□

福岡のホームページ制作・運用は
株式会社レッドキリン

営業時間:平日9:00〜18:00

●福岡オフィス
〒810-0042
福岡市中央区赤坂1-12-6 赤坂Sビル2F
TEL:092-726-5550 FAX:092-726-5558

●宮崎出張所
〒880-0001
宮崎県宮崎市橘通西3-10-32
宮崎ナナイロ東館8FATOMica内

メールでのお問合せ
ホームページ制作実績
会社案内

■□■□■□■□■□■□■□■□■□■□

contact

ホームページ制作に関することなら、
バナー1個からでもお気軽にご連絡ください。

お電話でのお問い合わせ

<福岡本社・宮崎サテライトオフィス共通>
平日9:00〜18:00まで。営業・セールス目的のお電話は固くお断りいたします。

092-726-5550 092-726-5550

メールでのお問い合わせ

ご相談をご希望の場合、まずはお問い合わせフォームよりご連絡ください。
確認後、担当者よりご連絡させていただきます。

お問い合わせフォーム

会社案内ダウンロード

社内で検討されたい方のために、弊社の特徴や実績、会社概要などをまとめた会社案内をご用意しています。ご自由にダウンロードください。

ダウンロードはこちら
yahoo!japanプロモーション広告

当社はYahoo!プロモーション広告の代理店です。
(福岡県福岡市中央区赤坂)

採用関連の電話営業やセールス目的でのお電話は業務の妨げとなりますので固くお断りいたします。
一度電話口でお断りした企業様は着信拒否登録をしております。ご了承ください。