新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 レスポンシブウェブデザインを使おう (02:22) 無料公開中
- 概要
- 完成版の確認
- 必要となる知識
- レッスンにおける環境
- FontAwesomeの導入
-
#02 開発の準備を整えよう (02:57) 無料公開中
- index.htmlの作成
- styles.cssの作成
- viewportの設定
-
#03 メディアクエリーを使ってみよう (02:37) 無料公開中
- メディアクエリーの使い方
- 動作確認
-
#04 ヘッダーを作り込んでいこう (02:39)
- header
-
#05 セクションのスタイルを整えよう (02:23)
- sectionのスタイル
-
#06 特徴紹介セクションを作ろう (02:28)
- 画像、テキストの配置
-
#07 ニュース一覧を作っていこう (02:02)
- ニュースの配置
-
#08 動画を埋め込んでみよう (02:19)
- フッターの作成
- YouTube動画の埋め込み
-
#09 iframeの縦横比を保持してみよう (02:49)
- iframe縦横比の保持方法
-
#10 要素を左右に振り分けてみよう (02:41)
- 左右への振り分け
-
#11 ニュースを横に並べてみよう (02:02)
- flexbox
- 画像の設定
-
#12 画面幅が広い時のレイアウトを作ろう (02:54)
- 画面幅が広い時のレイアウト
- メニューの作成
-
#13 メニューを出し分けていこう (02:22)
- メニューの出し分け
-
#14 クラス名の衝突を解決しよう (02:20)
- クラス名の衝突
- 解決方法
