ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/12
NEW
【週刊ドットインストール】 CSSバージョンのお話、レッスン制作の進捗、代表のひとりごと
PREMIUM
【旧版】実践!アプリ紹介ページを作ろう
架空のアプリを紹介するページを制作しながら、HTML/CSSの実践的なテクニックを学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
実践!アプリのランディングページを模写しよう
架空アプリのランディングページを組み上げながら、模写コーディングの練習をしていきます。
0%
動画レッスン一覧
(24)
質問と回答
(74)
#01 アプリ紹介ページを作っていこう
(02:32)
無料公開中
完成版の確認
素材の確認
プロジェクトフォルダの設定
未完了
#02 ファビコンを設定しよう
(02:48)
無料公開中
index.htmlの作成
titleタグの設定
ファビコンの設定
ソースコード比較機能の紹介
未完了
#03 ロゴ画像を配置しよう
(02:48)
無料公開中
Emmetの活用
ロゴ画像の配置
未完了
#04 CSSを読み込んでいこう
(02:40)
無料公開中
画像サイズの設定
linkタグ
style.cssの作成
未完了
#05 余白をリセットしていこう
(02:10)
無料公開中
bodyのmarginリセット
h1のmarginリセット
ダウンロードリンクの配置
未完了
#06 ボタンのスタイルを整えていこう
(02:38)
aのスタイリング
.btnのスタイリング
未完了
#07 containerクラスを設定しよう
(02:55)
.containerのスタイリング
headerのpadding設定
未完了
#08 ヒーローエリアを作っていこう
(02:42)
ヒーローエリアのマークアップ
画像サイズの設定
font-familyの設定
未完了
#09 見出しや段落のスタイルを整えよう
(02:28)
h1のスタイリング
pのスタイリング
ヒーローエリアの背景色設定
未完了
#10 背景画像を設定していこう
(02:48)
background-image
background-repeat
background-position
未完了
#11 余白を調整していこう
(02:41)
余白の調整
vertical-align: bottom
中央揃えの設定
未完了
#12 特徴セクションを作っていこう
(02:49)
特徴セクションの配置
画像、見出し、段落のマークアップ
未完了
#13 画像の大きさを調整しよう
(02:24)
画像の調整
h2のスタイリング
未完了
#14 特徴セクションを完成させよう
(02:51)
余白の調整
sectionの複製、調整
未完了
#15 ユーザーの声セクションを作ろう
(02:46)
ユーザーの声セクションの配置
footerタグの利用
画像の調整
未完了
#16 ユーザーの声のスタイルを整えよう
(02:00)
.voicesのスタイリング
.voices h1のスタイリング
.voices sectionのスタイリング
未完了
#17 ユーザーの声セクションを完成させよう
(02:06)
footerのスタイリング
sectionの複製、調整
未完了
#18 ダウンロードを促すセクションを作ろう
(02:59)
.call-to-actionのマークアップ
.call-to-actionのスタイリング
未完了
#19 フッターを作っていこう
(02:26)
footerのスタイリング
smallのスタイリング
未完了
#20 メディアクエリを設定しよう
(02:49)
メディアクエリの設定
ヒーローエリアのレイアウト調整
未完了
#21 ブラウザ幅に応じて画像を調整しよう
(02:50)
画像幅の調整
.containerの調整
未完了
#22 特徴セクションを横並びにしよう
(02:34)
フレックスボックスの設定
flex-direction: row-reverse
未完了
#23 ユーザーの声を横並びにしよう
(01:48)
フレックスボックスの設定
余白のリセット
未完了
#24 アプリ紹介ページを完成させよう
(02:13)
レイアウトの調整
flex-direction: column
未完了
#01 アプリ紹介ページを作っていこう
macOS ではリアルタイムで可変されますが、 Windows ではリアルタイムで可変されません
2022年9月29日
レッスンのようなファイル構成になりません
2022年5月24日
素材をダウンロードしようとすると「関連するアプリをダウンロードしてください」と表示されます
2022年1月27日
#02 ファビコンを設定しよう
ファビコンの link タグの type 属性は省略しても良いですか?
2022年8月22日
<meta http-equiv="X-UA-Compatible" content="IE=edge"> は何を意味しているのですか?
2022年6月10日
#03 ロゴ画像を配置しよう
Tab キーで次の入力項目に移動できないのですが何が原因ですか?
2022年8月22日
タグや要素名にホバーすると表示される文章の消し方を教えてください
2022年7月9日
<a href=""> はなぜ必要なのですか?
2022年4月4日
a > h1 と h1 > a はどのように異なりますか?
2022年1月27日
img を h1 で囲う理由はなんですか?
2022年1月27日
レッスンで使用している画像データは Photoshop といったソフトでデザイン、制作しているのでしょうか?
2022年1月27日
#04 CSSを読み込んでいこう
header に outline をつけると上と左右の枠線が表示されません
2022年1月27日
なぜ HTML で img のサイズを指定するのですか?
2022年1月27日
#05 余白をリセットしていこう
ダウンロードボタンが button ではないのはなぜですか?
2022年9月3日
余白をリセットする際に全称セレクタを使わないのはなぜですか?
2022年8月23日
a href="#" の意味を教えてください
2022年6月3日
ロゴ画像に vertical-align: bottom を指定しないのはなぜですか?
2022年2月4日
#06 ボタンのスタイルを整えていこう
btn に height は設定せず width だけ設定して padding で調整するのはなぜですか?
2022年11月20日
text-decoration: none; を .btn クラスではなく a に書くのはなぜですか?
2022年7月9日
.btn の display が inline ではなく block なのはなぜですか?
2022年4月4日
flex で h1 と btn を横並びにし、横幅が画面サイズを超えた場合どうなりますか?
2022年5月24日
color: inherit; は何を継承しているのでしょうか?
2022年1月27日
#07 containerクラスを設定しよう
header を container で囲ってはいけませんか?
2022年6月10日
header .container ではなく header に padding をつけるのはなぜですか?
2022年4月4日
align-items : center; によって <a> 内のテキストも上下中央揃えさせるのはなぜですか?
2022年1月27日
background-color が outline の外側にも適用されたのはなぜですか?
2022年1月27日
「ダウンロード」の位置が少し上にずれているように見えるのですが...
2022年1月27日
#08 ヒーローエリアを作っていこう
img はインライン要素であるのに、なぜ width が設定できるのですか?
2022年8月22日
#09 見出しや段落のスタイルを整えよう
なぜ一括指定プロパティを使わないのですか?
2022年9月3日
line-height: 1.6; の単位は何ですか?
2022年1月27日
#10 背景画像を設定していこう
なぜ CSS のファイルは別のフォルダに入れるのですか?
2022年11月9日
background-position: center bottom; の center は省力しても問題ありませんか?
2022年5月24日
X 方向に敷き詰められるという表現が理解できません
2022年5月24日
#11 余白を調整していこう
なぜ header 内の img は vertical-align: bottom; で 下寄せにならないのですか?
2022年7月9日
hero の p に padding-top を使ってもいいですか?
2022年7月9日
CSS においてなぜ .btn ではなく .hero .btn と指定するのですか?
2022年3月24日
section の中の img が中央揃えになるのはなぜですか?
2022年2月4日
p、h1 が中央揃えになるのは理解ができるのですが、a 要素がそうならないのはなぜですか?
2022年1月27日
#12 特徴セクションを作っていこう
section と div の使い分けを教えてください
2022年11月9日
クラス名の features を省略して、fs1 などとしてもよいですか?
2022年8月23日
section を作ったのはなぜですか?
2022年6月9日
features タグが理解できません
2022年1月27日
h1 タグを 1 ページに複数回使ってもいいのですか?
2022年1月27日
#13 画像の大きさを調整しよう
paddingを指定した画像が小さくなるのはなぜですか?
2022年7月23日
img のサイズ指定は HTML と CSS どちらですれば良いですか?
2022年5月24日
動画でしている img をカットしてペーストするショートカットを教えてください
2022年2月16日
img を div で囲わないとうまく margin がつかないのはなぜですか?
2022年1月27日
.features .container .pic ではなく、.features .pic としているのはなぜですか?
2022年1月27日
#15 ユーザーの声セクションを作ろう
footer にユーザーの感想文を含めないのはなぜですか?
2022年8月22日
ユーザーの声のところで、 div を使ってはいけませんか?
2022年7月9日
なぜ footer タグを使ったのですか?
2022年6月22日
HTML において、 width と height に px を付けないのはなぜですか?
2022年5月24日
動画の通り、seciton や footer を使わなければいけませんか?
2022年1月27日
#16 ユーザーの声のスタイルを整えよう
.voices h1 ではなく section に margin-top を指定しても問題ないですか?
2022年11月9日
footer はページ下部で使うのではないのですか?
2022年7月9日
#17 ユーザーの声セクションを完成させよう
gap ではなく、 margin-left を使っても問題ありませんか?
2022年4月4日
calc と gap の使い分けについて教えてください
2022年2月18日
#19 フッターを作っていこう
.copyright small ではなく、.copyright に font-size や color を書いてもいいですか?
2022年7月9日
footer タグ内に記述する small タグは省略してもいいですか?
2022年6月10日
著作権表示に p タグを使用するのはダメですか?
2022年5月24日
#20 メディアクエリを設定しよう
メディアクエリがうまく反映されません
2022年6月9日
モバイルサイトとデスクトップサイト、どちらから書いていくのが一般的ですか?
2022年2月16日
#21 ブラウザ幅に応じて画像を調整しよう
height: auto; はどういう場合に設定するのですか?
2022年11月20日
div.container の最大幅を 800px にしていますが、何かルールがあるのでしょうか?
2022年4月4日
.desc だけが中央寄せされ、img は中央寄せにならないのはなぜですか?
2022年3月24日
#22 特徴セクションを横並びにしよう
すごい特徴の中のコンテンツは 600 px 以上でなぜ横並びになるのですか?
2022年1月27日
なぜ .container .section { } ではなくて .features .section { } とするのですか?
2022年1月27日
#23 ユーザーの声を横並びにしよう
p 要素の中で英語を連続して入れると横に突き抜けてしまいます
2023年4月12日
.voices section + section は 2 番目の section 以降全ての section に適用されるのですか?
2022年12月5日
.voices section + section ではなく .voices .container section ではだめですか?
2022年8月23日
@media の条件は、一般的なスタイルより優先されないのですか?
2022年8月23日
セレクタを .voices setion とすると余白が消えないのはなぜですか?
2022年1月27日
#24 アプリ紹介ページを完成させよう
.voices section の計算式の 100% とはなんですか?
2022年5月19日
calc を用いずに width: 33%; としても良いですか?
2022年2月16日
リリース情報(note)
今週は『実践!アプリ紹介ページを作ろう』をリリースしました
詳細情報
最終更新日
2021年11月18日
バージョン情報
Chrome 96.0 / Visual Studiio Code 1.62.2 / macOS Big Sur