新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 ECサイトをマークアップしよう (02:31) 無料公開中
- 完成版の確認
- 素材の確認
- プロジェクトフォルダの設定
-
#02 ファビコンを設定しよう (02:44) 無料公開中
- index.htmlの作成
- titleタグの設定
- ファビコンの設定
- ソースコード比較機能の紹介
-
#03 Emmetを活用していこう (02:44) 無料公開中
- Emmetの活用
- ロゴ画像の設置
-
#04 CSSを読み込んでいこう (02:42) 無料公開中
- 画像サイズの設定
- linkタグ
- style.cssの作成
-
#05 余白をリセットしていこう (02:05) 無料公開中
- bodyのmarginリセット
- h1のmarginリセット
- imgのvertical-align設定
-
#06 containerクラスを設定しよう (02:59)
- containerクラスの設定
- paddingの追加
-
#07 メニューを配置していこう (02:17)
- メニューのマークアップ
- Emmetによる展開内容の確認方法
-
#08 ヘッダーのスタイルを整えよう (02:44)
- フレックスボックスの設定
- リストスタイルの設定
-
#09 Bootstrap Iconsを使っていこう (02:39)
- Bootstrap Iconsの設定
- アイコンの設置
-
#10 メニューのスタイルを整えよう (03:00)
- フレックスボックスの設定
- フォントサイズの設定
-
#11 リンクのスタイルを整えよう (02:56)
- 余白の設定
- aタグのスタイル設定
-
#12 ヒーローセクションを作り込もう (02:58)
- ヒーローセクションのマークアップ
- object-fit
-
#13 商品紹介のセクションを作ろう (02:47)
- セクションの設置
- 見出しの設定
-
#14 リストの項目を作り込んでいこう (02:20)
- 構造の確認
- 項目のマークアップ
-
#15 項目の幅を設定しよう (02:56)
- 幅の設定
- 余白のリセット
-
#16 余白を調整していこう (02:17)
- 余白の調整
- マウスホバー時の挙動を調整
-
#17 商品を増やしてみよう (02:47)
- リスト項目の追加
- 余白の調整
-
#18 ｢もっと見る｣リンクを作ろう (02:59)
- リンクの設置
- スタイルの調整
-
#19 フッターをマークアップしよう (02:47)
- フッターのマークアップ
- アイコンの設定
-
#20 フッターのレイアウトを整えよう (02:43)
- フッターのスタイリング
- フレックスボックスの設定
-
#21 フッターを完成させよう (02:07)
- 文字サイズの調整
- 余白の調整
-
#22 メディアクエリの設定をしよう (02:06)
- メディアクエリの実装
- 動作確認
-
#23 商品紹介を3列にしよう (01:30)
- リスト項目の設定
- 動作確認
-
#24 .containerを固定幅にしよう (01:47)
- containerクラスの設定
- 動作確認
-
#25 検索フォームをマークアップしよう (02:46)
- 検索フォームのマークアップ
- 表示/非表示の設定
-
#26 フォームのスタイルを整えよう (02:29)
- スタイルのリセット
- フォームのスタイリング
-
#27 確認用のスタイルを外していこう (01:54)
- 枠線の削除
- 背景色の削除
