CSSレイアウト入門 (全15回)
CSSでよく見るレイアウトを組み上げていく方法について説明していきます。
このレッスンでは HTML5 / CSS3 を使用しています。
-
#01 CSSでレイアウトを組み上げよう (02:59)
- 概要
- 必要となる知識
- 必要となるツール
- ひながたファイルの作成
-
#02 reset.css､normalize.cssを使おう (02:55)
- User Agent Stylesheet
- reset.css
- normalize.css
-
#03 Developer Toolsを使ってみよう (01:46)
- Develper Toolsの起動
- Elementsパネルの見方
-
#04 ワンカラムレイアウトを作ろう (02:43)
- ワンカラムレイアウト
- 内容を固定幅にする方法
- footerの背景色を指定する方法
-
#05 アイキャッチ画像を配置してみよう (02:49)
- アイキャッチ画像の配置
- background-sizeプロパティ
- background-positionプロパティ
-
#06 2カラムレイアウトを作ってみよう (02:38)
- float
- clear
- 親要素の高さを出す方法
-
#07 clearfixを使ってみよう (02:25)
- cleafix
- overflow:hidden
-
#08 カラムに余白をつけてみよう (02:51)
- marginの付け方
- paddingの付け方
- box-sizing
-
#09 3カラムレイアウトを作ってみよう (02:50)
- 3カラムレイアウト
-
#10 可変幅のカラムを作ってみよう (02:59)
- 可変幅のカラム
-
#11 リストでメニューを作ってみよう (02:35)
- ヘッダーメニューの作り方
-
#12 メニューを完成させよう (01:57)
- マウスオーバーしたときの動作
-
#13 positionプロパティで使ってみよう (02:49)
- positionプロパティ
-
#14 画像付きリストを作ってみよう (02:51)
- 画像付きリスト
-
#15 画像付きリストを完成させよう (03:00)
- 画像付きリスト
- li要素の最後だけスタイルをあてない方法
#01 CSSでレイアウトを組み上げよう
#04 ワンカラムレイアウトを作ろう
2017年4月7日
補足情報 上下左右に余白ができてしまう場合
normalize.cssのバージョンアップに伴い、body要素に余白がつくようになりました。レッスンと同じように進めたい場合はstyles.cssに以下を加えるようにしてください。
body {
margin: 0;
}
#right {
background: lightgreen;
float: left;
width:...
この動画内で、親要素の背景色を反映させるために以下のようなコードを使用しています。
.clearfix:aft...
動画内で font-size: 0; にしたあと a に font-size: 16px; と指定として余白を...
styles.css に main.product ではなく main .product と書かれていますが、...
動画内で「幅と高さはそこに含まれる画像のものにしたいので、 display: inline-block; 」と説明され...
補足情報 必要となる知識について
・HTML入門 (全15回)
https://dotinstall.com/lessons/basic_html_v4
・CSS入門 (全17回)
https://dotinstall.com/lessons/basic_css_v4
・CSS3入門 (全19回)
http://dotinstall.com/lessons/basic_css3_v2
・Chrome Developer Tools入門 (全10回)
http://dotinstall.com/lessons/basic_chrome_dev_v2