ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
PREMIUM
【サポート終了】CSSレイアウト入門
CSSでよく見るレイアウトを組み上げていく方法について説明していきます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(15)
よくある質問一覧
(5)
未完了
#01 CSSでレイアウトを組み上げよう
(02:59)
無料公開中
概要
必要となる知識
必要となるツール
ひながたファイルの作成
未完了
#02 reset.css、normalize.cssを使おう
(02:55)
無料公開中
User Agent Stylesheet
reset.css
normalize.css
未完了
#03 Developer Toolsを使ってみよう
(01:47)
無料公開中
Develper Toolsの起動
Elementsパネルの見方
未完了
#04 ワンカラムレイアウトを作ろう
(02:43)
無料公開中
ワンカラムレイアウト
内容を固定幅にする方法
footerの背景色を指定する方法
未完了
#05 アイキャッチ画像を配置してみよう
(02:49)
アイキャッチ画像の配置
background-sizeプロパティ
background-positionプロパティ
未完了
#06 2カラムレイアウトを作ってみよう
(02:39)
float
clear
親要素の高さを出す方法
未完了
#07 clearfixを使ってみよう
(02:25)
cleafix
overflow:hidden
未完了
#08 カラムに余白をつけてみよう
(02:51)
marginの付け方
paddingの付け方
box-sizing
未完了
#09 3カラムレイアウトを作ってみよう
(02:50)
3カラムレイアウト
未完了
#10 可変幅のカラムを作ってみよう
(03:00)
可変幅のカラム
未完了
#11 リストでメニューを作ってみよう
(02:35)
ヘッダーメニューの作り方
未完了
#12 メニューを完成させよう
(01:57)
マウスオーバーしたときの動作
未完了
#13 positionプロパティで使ってみよう
(02:49)
positionプロパティ
未完了
#14 画像付きリストを作ってみよう
(02:51)
画像付きリスト
未完了
#15 画像付きリストを完成させよう
(03:01)
画像付きリスト
li要素の最後だけスタイルをあてない方法
なぜ右に配置するのに float: left を使うのでしょうか?
-
#06 2カラムレイアウトを作ってみよう
#right { background: lightgreen; float: left; width:...
.clearfix の疑似要素は before ではなく after を使っているのはなぜですか?
-
#07 clearfixを使ってみよう
この動画内で、親要素の背景色を反映させるために以下のようなコードを使用しています。 .clearfix:aft...
font-size: 0; でなぜ余白が埋まるのでしょうか?
-
#11 リストでメニューを作ってみよう
動画内で font-size: 0; にしたあと a に font-size: 16px; と指定として余白を...
main と .product の間に半角空白が必要なのはなぜですか?
-
#13 positionプロパティで使ってみよう
styles.css に main.product ではなく main .product と書かれていますが、...
inline-blockを使うことでなぜ幅と高さが設定されるようになるのでしょうか?
-
#13 positionプロパティで使ってみよう
動画内で「幅と高さはそこに含まれる画像のものにしたいので、 display: inline-block; 」と説明され...
ギャラリー
お知らせ
お知らせ
12/05
『詳解CSS レスポンシブウェブデザイン編』をリリースしました
(12/05)
もっと見る
このレッスンについて
最終更新日
2015年12月2日
(1465日前)
バージョン情報
HTML5 / CSS3
関連キーワード
(5)
基礎講座
(283)
初心者向け
(286)
HTML5
(27)
CSS
(75)
CSS3
(11)
このレッスンを共有する