浜村拓夫(・∀・)作品集

頭の中にあるイメージを表現できるデザイン力が欲しいです(><)

CSSのブロック要素とインライン要素の違い

WebデザインでCSSレイアウトを復習。(メモ)

 

HTMLやCSSは、適当にやってきて、ちゃんと勉強した記憶があまりないです。

以前から使っていたので、何となく使えているけど、各バージョンの知識を混同している予感。。。(・∀・)

 

●HTMLやCSSの復習

基本情報(MDNを見れば全て分かる?)

developer.mozilla.org

 

デジタルデザインの入門は、「ドットインストール」というサイトが参考になります。

HTML入門 (全24回) - プログラミングならドットインストール

CSS入門 (全22回) - プログラミングならドットインストール

【HTMLタグの簡単検索】TAG index - ホームページ作成情報

 

CSSの肝

CSSを使う上で、知らないと困る最低限の知識・理解は、

ボックスモデル

フロート

ブロック要素インライン要素

等があると思います。

 

上記の内容について、分かりやすい説明がありました。

 

(1)ボックスモデル

XHTML+CSSの「ボックスモデル」の復習 | バシャログ。 | 横浜でWeb制作を行うシーブレインスタッフによる技術情報ブログ

ボックスモデル CSS講座-CSSの基本 - プログラミング探して!

 

(2)フロート

上下に並んだdivタグを左右に配置させる--人気ホームページが作れる簡単作成講座

CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ

 

(3)ブロック要素とインライン要素の変換

ブロックレベル要素とインラインレベル要素の違いとは? ~ポイントは改行の有無~

要素の性質を変更する - スタイルシート

 

●ブロック要素とインライン要素の違い

インライン要素では、

・幅(width)と高さ(height)が指定できない。

・マージンの上(margin-top)と下(margin-bottom)が指定できない。

という特徴がありました。

 

(参考)

www.slideshare.net

f:id:hamamuratakuo:20151007110646j:plain

 

ブロックレベル要素とインライン要素 | 求職者支援訓練制度

f:id:hamamuratakuo:20151007110811j:plain

 

この違いを意識すれば、CSSレイアウトが思い通りにできるでしょうか?

 

 

Scatman John / Scatman's World