ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/02/02
NEW
週刊ドットインストール(2023/02/02号)を更新しました!
PREMIUM
実践!ポートフォリオサイトを模写しよう
シンプルなポートフォリオサイトを組み上げながら模写コーディングの練習をしていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
詳解HTML 基本タグ編
(全27回)
PREMIUM
PREMIUM
0%
詳解CSS 基本スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
詳解CSS 応用スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
詳解CSS セレクター編
(全21回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(18)
質問と回答
(1)
未完了
#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)
振り返り
模写コーディングの注意点
オリジナルサイト制作のすすめ
#18 次のステップを確認しよう
おすすめのフリー素材のサイトや、任意のサイズのダミー画像を生成してくれるサービスは何ですか?
2023年1月25日
次におすすめのレッスン
実践!アプリ紹介ページを作ろう
(全24回)
PREMIUM
PREMIUM
0%
ギャラリー
このレッスンについて
最終更新日
2023年1月23日
バージョン情報
Chrome 109 / Visual Studio Code 1.74.3
関連キーワード
(5)
基礎講座
(360)
初心者向け
(359)
HTML
(110)
CSS
(111)
Web制作
(17)
このレッスンを共有する