chevron_left

CSS実践 レイアウト・アニメーションを極める

PREMIUM

スライド資料

会員登録して、全てのスライドを見よう

1 / 13

授業の概要

センタリングを理解する

CSS実践 レイアウト・アニメーションを極める (全5回)の3回目です。
センター配置のための様々なcssプロパティーがあるが使い所がわからない、またはセンター配置が効かなくて困った経験がある人のための授業です。この授業でセンター配置を完全に理解しマスターしてしまいましょう。

こんな人にオススメ

センター配置を自由自在に操りたい方

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
自己紹介&アジェンダ
01:59
play_arrow
演習の元となるhtmlの準備
03:27
play_arrow
Inlineとかblockの振る舞い
02:24
play_arrow
Inlineのセンタリング
01:04
play_arrow
disply:Inlineを書いてみよう
05:46
play_arrow
disply:blockを書いてみよう
08:13
play_arrow
親宣言していこう
05:44
play_arrow
blockの親要素と子要素
07:41
play_arrow
Q:display:inline-blockとfloatとの使い分けはどのように?
01:15
play_arrow
Q:heightとwidthはpxで指定されていましたが、remで指定しなくてもいいものなんでしょうか?
02:07
play_arrow
Q:positionだとウインドウサイズを変えた時に動いちゃいますけど、動かないようにセンタリングはできないのでしょうか?
00:56
play_arrow
Q:vertical-alignのお話が出ましたが、imgに対して使うことはありますか?
02:37
play_arrow
Q:margin:0 auto; した場合margin-bottomが効かない?ですが、何か方法はありますか?
02:58
play_arrow
Q:ブログや企業サイトなど殆どのサイトは全体をセンタリングしていますが、全体をセンタリングをしない方がよいケースもあるのでしょうか?
01:27
play_arrow
Q:remでも%でもどちらでもいいのでしょうか。それともremのほうがお薦めでしょうか。
01:16
play_arrow
Q:「overflow:hidden を使えない場合がある」の件ですが…
01:11
play_arrow
Q:センターにする時に、displayプロパティでした方がいいですか?
01:22
play_arrow
Q:親要素にblockを使って、子要素にinline-blockを使用する場合はどんな場面があるでしょうか?
02:15
play_arrow
Q:セマンティック = 意味論的 って意味でしょうか?
00:56
play_arrow
Q:ulを真ん中に寄せるのはどんな方法がおすすめですか?