このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 ECサイトを模写していこう (02:13) 無料公開中- ECサイトの確認
- サイトマップ、トップページ、下層ページ
- 模写コーディングでのルール
-
#02 macOSで作業用フォルダを設定しよう (02:44) 無料公開中- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#03 Windowsで作業用フォルダを設定しよう (02:37) 無料公開中- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#04 headerのマークアップを進めよう (02:39) 無料公開中- headerのマークアップ
- スタイルのリセット
-
#05 コンテンツに最大幅を設定しよう (02:38)- .containerのスタイリング
- divの追加
-
#06 商品一覧のマークアップを進めよう (02:29)- 商品一覧のマークアップ
- 画像の設定
-
#07 要素のスタイルをリセットしよう (02:36)- スタイルのリセット
- 文字サイズの設定
- CSSの整理
-
#08 リストのスタイリングを進めよう (02:14)- ul、liについたスタイルのリセット方法
- ulのスタイリング
-
#09 リストの要素を3列に並べよう (02:57)- フレックスボックスの設定
- widthの設定
- 画像サイズの設定
-
#10 footerを設置していこう (01:50)- footerのマークアップ
- footerのスタイリング
-
#11 ページ全体の余白を調整していこう (02:53)- 余白の考え方
- 余白の調整
-
#12 下層ページへのリンクを作ろう (02:48)- リンクの設定
- 下層ページの作成
- product-1.htmlの編集
-
#13 下層ページのマークアップを進めよう (01:50)- 下層ページのマークアップ
- CSSファイルの考え方
-
#14 フレックスボックスを使ってみよう (02:26)- フレックスボックスの導入
- 画像サイズの設定
-
#15 下層ページを完成させよう (02:24)- 余白の調整
- ボタンのスタイリング
-
#16 トップページへのリンクを作ろう (02:24)- トップページへのリンク
- リンクのスタイリング
- これまでのまとめ
次におすすめのレッスン
手を動かして学ぶ模写コーディング Level 1-1 256times
模写の仕方をある程度学んだら、簡単な課題にチャレンジしてみましょう！「256times」はドットインストールが運営する、アウトプットのためのサービスです。
256times
