ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/06/19
NEW
【週刊ドットインストール】 GSAP入門が完結、その他の動きいろいろ
PREMIUM
実践!ポートフォリオサイトを模写しよう
シンプルなポートフォリオサイトを組み上げながら模写コーディングの練習をしていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
HTML入門 基本タグ編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 基本スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 応用スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 セレクター編
(全21回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(18)
ミニクイズ
22
質問と回答
(21)
#01 模写コーディングをしてみよう
(02:05)
無料公開中
模写コーディング
模写コーディングでのルール
お手本サイトの紹介
未完了
#02 macOSで作業用フォルダを設定しよう
(02:34)
無料公開中
素材ファイルのダウンロード
作業用フォルダの設定
ブラウザでの確認
未完了
#03 Windowsで作業用フォルダを設定しよう
(02:47)
無料公開中
素材ファイルのダウンロード
作業用フォルダの設定
ブラウザでの確認
未完了
#04 headerのマークアップを進めよう
(02:45)
無料公開中
構成の確認
要素の配置
width/height
未完了
#05 便利なカラーコードを確認しよう
(02:45)
background
#000〜#fff
背景色の設定
未完了
#06 要素のスタイルをリセットしよう
(02:13)
marginのリセット
border-radius
文字のスタイリング
未完了
#07 要素を中央揃えにしていこう
(03:00)
要素の中央揃え
margin: 0 auto;とtext-align: center;の違い
スタイルの継承
未完了
#08 余白の考え方を確認しよう
(02:33)
余白の設定
余白の考え方
未完了
#09 mainのマークアップを進めよう
(02:54)
構成の確認
要素の配置
画像サイズの設定
未完了
#10 セレクターの選び方を確認しよう
(02:54)
セレクターの設定
セレクターの選び方
未完了
#11 見出しのスタイリングを進めよう
(02:43)
h2, h3のスタイリング
文字サイズの選び方
未完了
#12 中央揃えの考え方を確認しよう
(02:29)
margin: 0 auto;とtext-align: center;の違い
見出しの中央揃え
sectionの中央揃え
未完了
#13 main内の余白を設定しよう
(02:34)
余白の設定
marginの一括指定
未完了
#14 section内の余白を設定しよう
(03:00)
余白の設定
セレクターの考え方
line-height
未完了
#15 footerのマークアップを進めよう
(02:49)
構成の確認
要素の配置
未完了
#16 footer内のレイアウトを整えよう
(02:11)
border-top
text-align
未完了
#17 footerのスタイルを完成させよう
(03:00)
font-size
color
:hover
opacity
余白の設定
未完了
#18 次のステップを確認しよう
(02:24)
振り返り
模写コーディングの注意点
オリジナルサイト制作のすすめ
未完了
#01 模写コーディングをしてみよう
1
#02 macOSで作業用フォルダを設定しよう
ミニクイズなし
#03 Windowsで作業用フォルダを設定しよう
ミニクイズなし
#04 headerのマークアップを進めよう
1
#05 便利なカラーコードを確認しよう
2
#06 要素のスタイルをリセットしよう
2
#07 要素を中央揃えにしていこう
1
#08 余白の考え方を確認しよう
1
#09 mainのマークアップを進めよう
ミニクイズなし
#10 セレクターの選び方を確認しよう
2
#11 見出しのスタイリングを進めよう
1
#12 中央揃えの考え方を確認しよう
2
#13 main内の余白を設定しよう
2
#14 section内の余白を設定しよう
1
#15 footerのマークアップを進めよう
2
#16 footer内のレイアウトを整えよう
1
#17 footerのスタイルを完成させよう
2
#18 次のステップを確認しよう
1
#01 模写コーディングをしてみよう
HTML・CSSの作成や適用のタイミングについて
2024年4月2日
#03 Windowsで作業用フォルダを設定しよう
ファビコンの設定で当該の指示文を無効化もしくは削除しても、そのまま表示されるのはなぜですか?
2023年9月12日
#06 要素のスタイルをリセットしよう
ブロックボックスやインラインボックスについて詳しく知りたいです
2024年9月11日
#07 要素を中央揃えにしていこう
margin、text-align による中央揃えは display: inline-block; でも無効ですか?
2024年9月24日
img をブロックボックスにしましたが text-align: center; が機能しないのはなぜですか?
2023年6月14日
header に text-align: center; を付けたとき、h1 , p にも継承されるのはなぜですか?
2023年4月12日
#08 余白の考え方を確認しよう
margin: 16px 0 0; と margin-top: 16px; で挙動が異なるのはなぜですか?
2023年4月12日
margin:16px 0 0; を margin-top:16px; に変えても下にスペースができるのはなぜですか?
2023年4月30日
#09 mainのマークアップを進めよう
imgはwidthを指定するだけでも問題ないでしょうか?
2024年2月23日
画像の高さと幅は HTML と CSS のどちらで指定すると良いですか?
2023年6月22日
#12 中央揃えの考え方を確認しよう
中央揃えを body に対して設定していますが、問題ないでしょうか?
2023年9月2日
main タグに直接 text-align: center; をつけてもいいですか?
2023年7月2日
なぜブロックボックスは margin; 0 auto、インラインボックスは text-align: center のように使い分けが必要なのですか?
2023年4月4日
p 要素内に英字を入れると折り返してくれないのはなぜですか?
2023年2月22日
#14 section内の余白を設定しよう
section p の margin を指定せずに h3 のみに指定してもよいでしょうか?
2024年8月20日
margin: 16px 0 0; と margin-top: 16px の違いについて教えてください
2023年4月30日
#15 footerのマークアップを進めよう
address タグを入れるとなぜ次の要素が下にくるのでしょうか?
2023年6月22日
#16 footer内のレイアウトを整えよう
h2 に text-align: center が機能するのはなぜですか?
2024年9月24日
#17 footerのスタイルを完成させよう
padding に auto を設定しているのに、なぜ高さに違いが出るのでしょうか?
2023年12月22日
footer img:hover でも同様でしょうか?
2023年12月22日
#18 次のステップを確認しよう
おすすめのフリー素材のサイトや、任意のサイズのダミー画像を生成してくれるサービスは何ですか?
2023年1月25日
次におすすめのレッスン
実践!アプリのランディングページを模写しよう
(全25回)
PREMIUM
PREMIUM
0%
リリース情報(note)
『実践!ポートフォリオサイトを模写しよう』のレッスンをリリースしました
詳細情報
最終更新日
2023年1月23日
バージョン情報
Chrome 109 / Visual Studio Code 1.74.3