× 無料のユーザー登録をすると学習状況を管理することができるようになります

CSSレイアウト入門 (全15回)

CSSでよく見るレイアウトを組み上げていく方法について説明していきます。

このレッスンでは HTML5 / CSS3 を使用しています。

#01 CSSでレイアウトを組み上げよう
2015年12月2日
今回のレッスンについては以下も参考にしてみてください。

・HTML入門 (全24回)
http://dotinstall.com/lessons/basic_html_v3
・CSS入門 (全22回)
http://dotinstall.com/lessons/basic_css_v3
・CSS3入門 (全19回)
http://dotinstall.com/lessons/basic_css3_v2
・Chrome Developer Tools入門 (全10回)
http://dotinstall.com/lessons/basic_chrome_dev_v2
#04 ワンカラムレイアウトを作ろう
2017年4月7日

normalize.cssのバージョンアップに伴い、body要素に余白がつくようになりました。レッスンと同じように進めたい場合はstyles.cssに以下を加えるようにしてください。

body {
  margin: 0;
}
なぜ右に配置するのに float: left を使うのでしょうか? PREMIUM - #06 2カラムレイアウトを作ってみよう
#right { background: lightgreen; float: left; width:...
.clearfix の疑似要素は before ではなく after を使っているのはなぜですか? PREMIUM - #07 clearfixを使ってみよう
この動画内で、親要素の背景色を反映させるために以下のようなコードを使用しています。 .clearfix:aft...
font-size: 0; でなぜ余白が埋まるのでしょうか? PREMIUM - #11 リストでメニューを作ってみよう
動画内で font-size: 0; にしたあと a に font-size: 16px; と指定として余白を...
main と .product の間に半角空白が必要なのはなぜですか? PREMIUM - #13 positionプロパティで使ってみよう
styles.css に main.product ではなく main .product と書かれていますが、...
inline-blockを使うことでなぜ幅と高さが設定されるようになるのでしょうか? PREMIUM - #13 positionプロパティで使ってみよう
動画内で「幅と高さはそこに含まれる画像のものにしたいので、 display: inline-block; 」と説明され...