新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 スマートフォン向けサイトを作ろう (02:55) 無料公開中
- index.htmlの作成
- styles.cssの作成
-
#02 Viewportの設定をしよう (01:47) 無料公開中
- デベロッパーツールでの確認
- Viewportの設定
-
#03 ヘッダー部分を作ろう (02:16) 無料公開中
- headerのマークアップ
- スタイリング
-
#04 アイコンを配置してみよう (02:37) 無料公開中
- Font Awesomeのアイコン導入
- idとclassの命名規則
-
#05 特徴紹介セクションを作ろう (02:25) 無料公開中
- 特徴紹介セクション
- 画像幅の調整
-
#06 見出しのスタイルを整えよう (02:34)
- 見出しのスタイリング
- 余白の調整
-
#07 ニュースのセクションを作ろう (01:59)
- newsセクション
- 画像幅の調整
-
#08 共通のスタイルを切り出してみよう (02:22)
- 見出しのスタイル
- 余白、背景色のスタイル
-
#09 紹介動画のセクションを作ろう (02:54)
- 動画の埋め込み
- 領域の調整
-
#10 16:9の領域を作ってみよう (02:53)
- 垂直方向のpadding
- 縦横比の保持
- 動作確認
-
#11 フッター領域を作ろう (00:54)
- footerタグ
-
#12 メニューを作っていこう (02:47)
- navタグ
- メニューのスタイリング
-
#13 閉じるボタンをつけよう (02:40)
- 閉じるボタンの追加
- shownクラスの作成
-
#14 JavaScriptを書いていこう (02:15)
- scriptタグ
- 要素の取得
- クリックイベントの設定
-
#15 エラーを修正してみよう (01:32)
- デベロッパーツールの起動
- エラーの確認方法
-
#16 コードを見やすくしてみよう (01:24)
- 変数
- 改行、字下げ
-
#17 メニューを開閉できるようにしよう (02:35)
- classListの操作
- 即時関数、use strictキーワードの利用
-
#18 メディアクエリーを使ってみよう (02:41)
- メディアクエリー
- 動作確認
-
#19 画像を左右に振り分けてみよう (02:07)
- float、nth-of-typeによるスタイルの変更
-
#20 Flexboxで要素を横並びにしよう (01:36)
- Flexbox
- 動作確認
-
#21 PC向けのレイアウトを作ろう (02:12)
- 幅の固定
- メニューのスタイリング
-
#22 サイトを完成させていこう (02:00)
- サイトの完成
- 余白の調整
