ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/08/28
NEW
【週刊ドットインストール】 Figma入門を制作中、256timesの新クラスを企画中
PREMIUM
実践!ECサイトを模写しよう
複数ページからなるECサイトを組み上げながら、模写コーディングの練習をしていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
HTML入門 基本タグ編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 基本スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 応用スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 セレクター編
(全21回)
PREMIUM
PREMIUM
0%
CSS入門 フレックスボックス編
(全22回)
PREMIUM
PREMIUM
0%
実践!ポートフォリオサイトを模写しよう
(全18回)
PREMIUM
PREMIUM
0%
実践!アプリのランディングページを模写しよう
(全25回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(16)
ミニクイズ
18
質問と回答
(20)
#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)
トップページへのリンク
リンクのスタイリング
これまでのまとめ
未完了
#01 ECサイトを模写していこう
1
#02 macOSで作業用フォルダを設定しよう
ミニクイズなし
#03 Windowsで作業用フォルダを設定しよう
ミニクイズなし
#04 headerのマークアップを進めよう
2
#05 コンテンツに最大幅を設定しよう
2
#06 商品一覧のマークアップを進めよう
1
#07 要素のスタイルをリセットしよう
1
#08 リストのスタイリングを進めよう
2
#09 リストの要素を3列に並べよう
1
#10 footerを設置していこう
1
#11 ページ全体の余白を調整していこう
2
#12 下層ページへのリンクを作ろう
1
#13 下層ページのマークアップを進めよう
1
#14 フレックスボックスを使ってみよう
1
#15 下層ページを完成させよう
1
#16 トップページへのリンクを作ろう
1
#01 ECサイトを模写していこう
模写するサイトの難易度を把握するためには、どんな要素を確認したら良いのですか?
2023年8月18日
#04 headerのマークアップを進めよう
imgに指定するwidthとheightは両方指定すべきですか?
2024年3月4日
余白をリセットするためにリセット CSS を使ってもよいでしょうか?
2023年6月8日
img 要素への vertical-align: bottom; はこれからも毎回行う作業ですか?
2023年4月12日
#05 コンテンツに最大幅を設定しよう
container に margin: 0 auto; をしてもロゴが中央揃えにならないのはなぜですか?
2024年8月20日
headerに直接class="container"を付けるのは良いですか?
2023年6月22日
#08 リストのスタイリングを進めよう
なぜ list-style: none; を親要素の ul につけるのか教えてください
2023年4月30日
#09 リストの要素を3列に並べよう
画像幅を親要素の li に合わせると、重なりやはみ出しが直るのはなぜですか?
2024年9月24日
img の幅を html で width=400 としましたが、 width=200 としてもいいですか?
2023年10月2日
検証機能で見た際、img が a に収まっていないのはなぜですか?
2023年6月22日
#11 ページ全体の余白を調整していこう
margin 8px 0 0 とせずに、margin-top: 8px; とした理由はなんですか?
2023年9月2日
padding を container ではなく、header や h1 につけてもよいのですか?
2023年4月12日
#14 フレックスボックスを使ってみよう
<div>と<section>はどのように使い分ければ良いですか?
2023年6月22日
#15 下層ページを完成させよう
cursor のプロパティと疑似要素の hover はセットでなくてもよいのでしょうか?
2025年1月20日
コードの間違いがないのに実行結果に空白が出てくるのはなぜですか?
2024年8月20日
padding ではなく、width や height を使ってボタンのサイズを調整すると問題が起こりますか?
2023年4月10日
#16 トップページへのリンクを作ろう
ソースコードと自分の書いたコードでは半角空白の場所が違うのですが問題はないでしょうか?
2023年8月10日
下層ページを作る際に、各ページはその都度新しいファイルを作成するのですか?
2023年6月14日
ドットを付けるタグと付けないタグの違いについて教えてください
2023年4月30日
color: inherit; の挙動について教えてください
2023年4月4日
次におすすめのレッスン
GitHub PagesでWebサイトを公開しよう
(全8回)
PREMIUM
PREMIUM
0%
リリース情報(note)
『実践!ECサイトを模写しよう』のレッスンをリリースしました
詳細情報
最終更新日
2023年3月14日
バージョン情報
Chrome 109 / Visual Studio Code 1.74.3