ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/10
NEW
『Go言語入門 制御構造編』をリリースしました
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
PREMIUM
【旧版】実践!ECサイトをマークアップしよう
HTML/CSSでECサイトをマークアップするための実践的な方法について学びます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
実践!ECサイトを模写しよう
複数ページからなるECサイトを組み上げながら、模写コーディングの練習をしていきます。
0%
動画レッスン一覧
(27)
質問と回答
(72)
#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)
枠線の削除
背景色の削除
未完了
#01 ECサイトをマークアップしよう
VS Code で作業用フォルダを分けて利用したいのですが、どうすればよいですか?
2022年9月29日
#02 ファビコンを設定しよう
コードを最初から書き直したのに、ファビコンがすでに設定されています
2022年7月9日
#03 Emmetを活用していこう
href 属性の、index.html、#、空文字の意味をそれぞれ教えて下さい
2022年12月5日
なぜ画像を h1 で囲うのですか?
2022年1月27日
a タグ(インライン要素)の中に h タグ(ブロック要素)を入れることは良いんでしょうか?
2022年1月27日
画像を h1 タグで囲うのはなぜですか?
2022年1月27日
Emmet に頼りすぎてプログラミング力が衰えないか心配です
2022年1月27日
#04 CSSを読み込んでいこう
レッスンとは違う書き方で、 HTML を記述してもいいですか?
2022年1月27日
imgのサイズ設定はHTMLで行ったほうが良いですか?
2022年1月27日
背景色や文字色などはどうやって決めているのですか?
2022年1月27日
自作サイトの画像はどのくらいのサイズにするべきですか?
2022年1月27日
#05 余白をリセットしていこう
h1 のデフォルト margin について教えてください
2023年4月18日
#08 ヘッダーのスタイルを整えよう
background-color と padding を .container ではなく header に書くのはなぜですか?
2022年10月28日
list-style: none; は li に指定しても問題ありませんか?
2022年3月24日
list-style: none; を使って「・」を消すケースがほとんどなのですか?
2022年2月18日
justify-content: space-between; と margin-left: auto; の違いは何ですか?
2022年2月18日
どのセレクタにどのプロパティを設定すればよいかわからなくなります
2022年1月27日
ul の padding: 0; はなぜ必要なのですか?
2022年1月27日
#09 Bootstrap Iconsを使っていこう
Bootstrap Icons の良い点と注意すべき点を教えてください
2022年11月20日
Bootstrap の著作権についておしえてください
2022年7月9日
フリーでアイコンを使えるサイトが閉鎖された場合はどうするのですか?
2022年1月27日
#10 メニューのスタイルを整えよう
header a {} ではなく、 header li a {} と指定する理由はなぜですか?
2023年2月22日
header li a i { } と書くのは、header 内に他の i が必要になった時のことを考えてなのでしょうか?
2022年1月27日
縦並びにするためにフレックスボックスを使うのですか?
2022年1月27日
header ul や header li a のように、頭に header を指定するのはなぜですか?
2022年1月27日
アイコンサイズの変更についてですが、font-size ではなく width と height での指定は可能でしょうか?
2022年1月27日
#11 リンクのスタイルを整えよう
a:hover の中身に transition: .3s; を書いても問題ないですか?
2023年4月30日
header li + li とはどういう意味ですか?
2022年6月9日
i 要素に指定したいのに、header li a に text-align を指定するのはなぜですか?
2022年2月28日
header li a の text-align を align-items としても問題ないですか?
2022年1月27日
inherit について「設定されている色をそのまま継承」とはどのような意味ですか?
2022年1月27日
#12 ヒーローセクションを作り込もう
なぜドットインストールのヒーロエリアは div ではなく section で囲われているのですか?
2022年8月23日
object-positon で画像の位置調整をするのは適切ですか?
2022年1月27日
HTML に % を記述したところ問題なく表示できました
2022年1月27日
#13 商品紹介のセクションを作ろう
header は日本語だけで書いていますが、なぜ header の高さが変化するのですか?
2022年8月22日
font-family は必ず設定しなければいけませんか?
2022年6月1日
ページ内での h1 タグは一度しか使わないほうが良いという認識なのですが...
2022年1月27日
#14 リストの項目を作り込んでいこう
商品リストには li タグではなく div タグを使っても良いのですか?
2022年1月27日
#15 項目の幅を設定しよう
.products .container ul li a h2 { ... } ではなく、 .products li h2 { ... } とするのはなぜですか?
2022年11月9日
outline と border の違いについて教えてください
2022年7月9日
#16 余白を調整していこう
なぜ .products a ではなく、 .products li a なのですか?
2022年1月27日
なぜdisplay:blockを設定するとaタグ全体にopacityが反映されるのですか?
2022年1月27日
a タグは display:inline なので、子要素の h2 , p を inline に合わせても良いのではないでしょうか?
2022年1月27日
display: inline; の要素の中に diaplay: block; の要素を入れるとこの要素の上でスタイルが分かれてしまう、とはどういうことでしょうか?
2022年1月27日
#17 商品を増やしてみよう
HTML で画像のサイズを指定するときと、しないときの違いについて教えてください
2023年3月2日
gap: 16px; とすると右側の余白が消えるのはなぜですか?
2022年6月10日
gap が li ではなく、 ul についているのはなぜでしょうか?
2022年2月28日
複数の画像を使用するとき、事前に画像のサイズ調整をするのでしょうか?
2022年2月10日
li の間に 16px の余白ができないのはなぜですか?
2022年1月27日
width: calc(50% - 8px);としても問題ないでしょうか?
2022年1月27日
余白を入れたい時の width と gap の違いはなんでしょうか?
2022年1月27日
gap はグリッドレイアウトで使えるものと思っていたのですが...
2022年1月27日
gap: 16px ではなく justify-content: space-between としてもよいですか?
2022年1月27日
#18 「もっと見る」リンクを作ろう
.products .more に display: block; を設定するのはなぜですか?
2022年6月1日
button タグと a タグはどのように使い分けるのですか?
2022年3月24日
中央揃えをする場合、display: block; と flexbox で a タグの扱いはどうなりますか?
2022年3月24日
「もっと見る」ボタンの高さの指定は height ではだめなのでしょうか?
2022年1月27日
#20 フッターのレイアウトを整えよう
footer .container {...} ではなく、footer {...} とすると期待した結果になりません
2022年7月9日
#21 フッターを完成させよう
footer のアイコンのサイズの指定に footer ul i とするのはなぜですか?
2023年2月5日
li + li としたときの margin-left はどの部分に余白を作るのですか?
2022年6月5日
margin-left は gap で代用できますか?
2022年3月24日
レッスンとは違う書き方で CSS を記述しても問題ありませんか?
2022年1月27日
#22 メディアクエリの設定をしよう
ブレイクポイントの幅と、実際に変化するブラウザの幅がずれます
2022年1月27日
#23 商品紹介を3列にしよう
100% - 31px とすると 3 列にならないのはなぜですか?
2023年2月5日
#24 .containerを固定幅にしよう
.container の固定幅は #06 で行うと良いのではないでしょうか?
2023年2月22日
calc(100% - 32px) がよくわかりません
2022年1月27日
なぜ .container に max-width を指定するのですか?
2022年1月27日
#25 検索フォームをマークアップしよう
form の action 属性が空になっている理由を教えてください
2022年12月5日
display: block; とすると form が再表示されるのが理解できません
2022年7月9日
#26 フォームのスタイルを整えよう
all: unset; の位置によって動作が変わるのはなぜですか?
2022年1月27日
header input {} の指定で header を省くとスタイルが消えますが、header と input はセットで指定しなければならないのですか?
2022年1月27日
「アクセシビリティ」とはなんですか?
2022年1月27日
リリース情報(note)
今週は『実践!ECサイトをマークアップしよう』のレッスンを追加しました。
詳細情報
最終更新日
2021年10月14日
バージョン情報
Chrome 94 / Visual Studio Code 1.6.1 / macOS Big Sur