WebデザインでCSSレイアウトを復習。(メモ)
HTMLやCSSは、適当にやってきて、ちゃんと勉強した記憶があまりないです。
以前から使っていたので、何となく使えているけど、各バージョンの知識を混同している予感。。。(・∀・)
●HTMLやCSSの復習
基本情報(MDNを見れば全て分かる?)
デジタルデザインの入門は、「ドットインストール」というサイトが参考になります。
・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)が指定できない。
という特徴がありました。
(参考)
この違いを意識すれば、CSSレイアウトが思い通りにできるでしょうか?
Scatman John / Scatman's World