ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/12/07
NEW
【週刊ドットインストール】 レッスン制作の進捗、代表のひとりごと
PREMIUM
【旧版】実践!アプリ紹介ページを作ろう
スマートフォン画面にも対応したアプリ紹介ページを制作しながら、HTML/CSSの実践的なテクニックを学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
実践!アプリのランディングページを模写しよう
架空アプリのランディングページを組み上げながら、模写コーディングの練習をしていきます。
0%
動画レッスン一覧
(16)
質問と回答
(138)
未完了
#01 アプリ紹介ページを制作しよう
(02:37)
無料公開中
完成版の確認
作業用フォルダの説明
index.htmlの作成
未完了
#02 ヘッダーをマークアップしていこう
(02:22)
無料公開中
headerのマークアップ
styles.cssの作成
未完了
#03 余白をリセットしよう
(02:28)
無料公開中
デベロッパーツールでの確認
余白のリセット
フォントの設定
未完了
#04 ヘッダーのスタイルを整えよう
(02:09)
無料公開中
headerのスタイリング
vertical-align
未完了
#05 ボタンのスタイルを整えよう
(02:45)
ボタンのスタイリング
:hover
未完了
#06 特徴紹介セクションを作ろう
(02:16)
特徴紹介セクションのマークアップ
未完了
#07 特徴紹介セクションを完成させよう
(02:43)
特徴紹介セクションのスタイリング
未完了
#08 メンバー紹介セクションを作ろう
(02:46)
メンバー紹介セクションのマークアップ
未完了
#09 メンバー紹介セクションを完成させよう
(02:38)
デベロッパーツールでの確認
メンバー紹介セクションのスタイリング
未完了
#10 ダウンロードを促すセクションを作ろう
(02:57)
call-to-actionセクションのマークアップ
call-to-actionセクションのスタイリング
未完了
#11 フッターを作っていこう
(01:48)
footer
favicon
未完了
#12 ビューポートの設定をしよう
(01:36)
デベロッパーツールでの確認
ビューポートの設定
未完了
#13 メディアクエリを設定しよう
(02:54)
メディアクエリー
flexbox
動作確認
未完了
#14 PC向けのレイアウトを作ろう
(02:39)
幅の固定
中央配置
未完了
#15 画像を左右に振り分けよう
(02:34)
calc()
justify-content
flex-direction
:nth-child
未完了
#16 ページを完成させていこう
(01:58)
余白の調整
ページの完成
#01 アプリ紹介ページを制作しよう
素材ファイルの解凍に特別なソフトは必要ですか?
2022年1月27日
8 ページのサイトを作成する場合、8 つの HTML ファイルと CSS ファイルが必要なのですか?
2022年1月27日
全部覚えてからWebページを作るほうがいいですか?
2022年3月3日
index.htmlの位置を直したい場合は?
2022年1月27日
デモサイトや仕様情報はありますでしょうか?
2022年1月27日
ディベロッパーツールの位置を変えたい
2022年1月27日
#02 ヘッダーをマークアップしていこう
写真が表示されません...
2022年1月27日
VS Codeのタブにマル印がついてChromeで反映されない
2022年1月27日
#03 余白をリセットしよう
ブラウザで表示されるフォントが動画と異なります
2022年1月27日
body に設定した font-size が h1 に適用されません
2022年1月27日
リセット CSS を使わないのはなぜですか?
2022年1月27日
なぜ body 全体に対して font-size を設定したのですか?
2022年1月27日
全て確認したのにCSSコードが反映されません
2022年1月27日
font-sizeは継承されないのですか?
2022年1月27日
一括ですべての要素の余白をリセットする方法はありますか?
2022年1月27日
「header h1 , header p」は「header h1, p」でもいいですか?
2022年1月27日
#04 ヘッダーのスタイルを整えよう
header にて text-align:center; を指定しましたが、color, img 共に中央揃えになりません
2022年1月27日
header ではなく header h1 に padding-top を設定しても大丈夫ですか?
2022年1月27日
text-align:center の動作がよくわかりません
2022年1月27日
text-align:center;とmargin:0 autoの使い分けがよく分かりません。
2022年1月27日
btnの文字色は白になるのでは...?
2022年1月27日
画像がベースラインを基準に配置される、とはどういう意味ですか?
2022年1月27日
paddingとmarginの使いわけがわかりません
2022年1月27日
imgのサイズ変更にheightが不要なのはなぜですか?
2022年1月27日
imgはインライン要素なのにどうしてwidthを設定できるのですか?
2022年1月27日
background-colorとbackgroundの違いは何ですか?
2022年1月27日
なぜダウンロードリンクが画面下端に移動するのですか?
2022年1月27日
#05 ボタンのスタイルを整えよう
font の一括指定プロパティが効かないのはなぜですか?
2022年1月27日
text-align はブロック要素にも適用されるのですか?
2022年1月27日
display:block; にしているのに text-align: center; で中央揃えになぜならないのですか?
2022年1月27日
display: block で btn が画像の上に配置されるのはなぜですか?
2022年1月27日
margin や font-size の数値は何を基準に決めればよいのですか?
2022年1月27日
ボタンのline-heightはpaddingではダメなのでしょうか?
2022年1月27日
cursorプロパティで指定していないのに、ボタン上でカーソルが指の形になっています
2022年1月27日
「.btn」ではなくて「header a」でもいいのでしょうか?
2022年1月27日
CSSの順番はHTMLの順番ではないのですか?
2022年1月27日
aはインライン要素なのでinline-blockにすべきではないですか?
2022年1月27日
a要素だけ中央揃えにならないのはなぜですか?
2022年1月27日
line-height とheightはどう使い分けるのですか?
2022年1月27日
.btnをdisplay:inline-blockにした場合、どうやって中央揃えにすればいいですか?
2022年1月27日
#06 特徴紹介セクションを作ろう
featuer1/2/3.png にそれぞれ width を指定したい場合はどうなりますか?
2022年1月27日
section を main としてもよいですか?
2022年1月27日
同じ<h1>要素なのにサイズが違うのは何故ですか?
2022年1月27日
「.features img」は「section img」ではだめですか?
2022年1月27日
paddingとmarginはどう使い分けるといいですか?
2022年1月27日
widthの100%は何を基準にしているのですか?
2022年1月27日
#07 特徴紹介セクションを完成させよう
margin と padding の使い分けを教えてください
2022年1月27日
line-height の 1.8 とはなんの単位ですか?
2022年1月27日
セレクタ(不等号と半角スペース)の使い分けがわかりません
2022年1月27日
width の px での指定と % での指定の使い分けがわかりません
2022年1月27日
説明文と画像の幅が揃うのはなぜですか?
2022年1月27日
line-height: 1.8pxとすると文字が重なってしまいます
2022年1月27日
「.features section」に「margin: 0 32px;」を使うのはダメですか?
2022年1月27日
「.features .container」は「.container」だけでいいのでは?
2022年1月27日
スペースを空けるのにpaddingを使うべきですか?marginも使えますか?
2022年1月27日
CSSで設定する値はどのように選んでいるのですか?
2022年1月27日
paddingのautoが効きません
2022年1月27日
#08 メンバー紹介セクションを作ろう
箇条書きリストより説明リストのほうが良いように思えるのですが、使い分け方を教えていただけませんか?
2022年1月27日
セレクターをまとめて書いても大丈夫ですか?
2022年1月27日
liに入れられるタグについて教えて下さい
2022年1月27日
.membersの背景色だけが反映されません
2022年1月27日
なぜul、liで囲うのですか?
2022年1月27日
#09 メンバー紹介セクションを完成させよう
ul に list-style-type:none とするとその中にある ol には適用されないのはなぜですか?
2022年1月27日
ブラウザのデフォルトのフォントサイズはなんですか?
2022年1月27日
なぜ .members > h2 と書いても動作しないのですか?
2022年1月27日
text-align: center は .members に書いても良いのですか?
2022年1月27日
imgにwidthを指定しただけで画像の高さが変わるのはなぜですか?
2022年1月27日
ulのスタイルはデフォルトでついているのですか?
2022年1月27日
list-style-type の指定は li に書いてもいいですか?
2022年1月27日
中央揃えの仕組みがわかりません
2022年1月27日
メンバー紹介はdivで書いてもいいですか?
2022年1月27日
#10 ダウンロードを促すセクションを作ろう
ダウンロードボタンを押すとページ上部に移動するのはなぜですか?
2022年1月27日
セレクターの前に . をつけるときとつけないときの違いはなんですか?
2022年1月27日
margin ではなく padding を使うのはなぜですか?
2022年1月27日
members と call-to-action の間の「 margin の相殺」とはなんですか?
2022年1月27日
どのようなクラス名を付ければいいのか迷います
2022年1月27日
「ダウンロード」の文字が白にならないのはなぜでしょうか?
2022年1月27日
paddingを入れるとh1のmarginが消えるのはなぜですか?
2022年1月27日
>をつけたり、つけなかったりするのはなぜですか?
2022年1月27日
「padding: 64px 0」の「0」は必要ですか?
2022年1月27日
#11 フッターを作っていこう
footer の文章に <p> は必要ないのですか?
2022年1月27日
サイズを広げる場合のプロパティの使い分けがわかりません
2022年1月27日
faviconを消しても表示されています
2022年1月27日
autoはpaddingでは使えないのですか?
2022年1月27日
faviconが表示されません
2022年1月27日
Reset CSSを使えばいいのではないでしょうか?
2022年1月27日
色はどうやって調べているのですか?
2022年1月27日
#12 ビューポートの設定をしよう
ビューポート設定の書き方はほかにもありますか?
2022年1月27日
ページの最後までスクロールできません
2022年1月27日
ビューポート設定は必須ですか?
2022年1月27日
画像の表示が変わりません
2022年1月27日
<meta>文に空白は入れてはいけないのでしょうか?
2022年1月27日
広めに表示領域をとっているとは、どういう意味でしょうか?
2022年1月27日
ショートカットキーを使ってもデベロッパーツールが出ません
2022年1月27日
スマホ表示がうまくいきません
2022年1月27日
#13 メディアクエリを設定しよう
header の右側にスペースができ、.info と .pic が中央に揃いません
2022年1月27日
中央揃えについて header に flex を指定しても同じ意味でしょうか?
2022年1月27日
header .pic {width: 40%}; は必要ですか?
2022年1月27日
align-self ではなく margin: auto を使っても良いですか?
2022年1月27日
header にクラス名をつけてはいけないのですか?
2022年1月27日
メディアクエリの幅は暗記した方がよいのでしょうか?
2022年1月27日
align-self で header .pic の配置を変更できません
2022年1月27日
メディアクエリの設定が900pxなのに800pxにしているのはなぜですか?
2022年1月27日
widthを%にしているのはなぜですか?
2022年1月27日
クラス名を使い回しているのは何故でしょうか?
2022年1月27日
align-selfと、align-contentやalign-itemsとの違いが良くわかりません
2022年1月27日
行を移動させるショートカットキーを教えて下さい
2022年1月27日
フレックスボックスがうまく機能しません
2022年1月27日
画面を広げてもフレックスボックスが横並びにならない
2022年1月27日
#14 PC向けのレイアウトを作ろう
widthの800pxといった数値はある程度決まっているものですか?
2022年1月27日
#15 画像を左右に振り分けよう
info を width: calc(50% - 32px) としないと余白が入らないのはなぜですか?
2022年1月27日
コードの誤字脱字を見つける方法を教えてください
2022年1月27日
画像を左右に振り分ける別の方法を教えて下さい
2022年1月27日
なぜ .features .info にだけ calc を指定するのですか?
2022年1月27日
justify-content の余白の大きさを確認する方法はありますか?
2022年1月27日
display: flexを設定する位置について教えて下さい
2022年1月27日
flex-direction: row-reverseが理解できません
2022年1月27日
calc以外の書き方は他にどんなものがありますか?
2022年1月27日
画像と文章の間隔の空け方がなぜそうなるのかわかりません
2022年1月27日
nth-childで不等号記号は必須ではないのですか?
2022年1月27日
nth-child(even)が思ったとおりになりません
2022年1月27日
なぜわざわざsectionを作ったのでしょうか?
2022年1月27日
「.features section」を「.container section」にしても良いですか?
2022年1月27日
#16 ページを完成させていこう
メディアクエリを min-width: 900px と設定しているのに横幅 885px のときに変化してしまいます
2022年1月27日
メディアクエリで設定した値とは異なる px 数でスタイルが変化します
2022年1月27日
.members ul を ul にすると中央揃えになりません
2022年1月27日
電話番号をタップして発信できるようにするにはどうすればよいですか?
2022年1月27日
.members li の幅の数値はどのように決めているのですか?
2022年1月27日
スマホ版の HTML と PC 版の HTML を個別に用意し、スマホから閲覧された場合、PC 版HTMLをすべて隠す...のようなやり方でも大丈夫ですか?
2022年1月27日
widthの値を指定しないとjustify-content: space-between;が適用されないのはなぜでしょうか?
2022年1月27日
CSSでスタイリングする順番に決まりごとはありますか?
2022年1月27日
どのように色や画像の設定を決めているのですか?
2022年1月27日
CSSでドットが付くときと付かないときがあるのはなぜですか?
2022年1月27日
文字が縦に配置されてしまいます
2022年1月27日
sectionとdivは同じではないのですか?
2022年1月27日
「.members ul」は「ul」だけでもいいのでは?
2022年1月27日
VS Codeの文字がときどき赤くなります
2022年1月27日
文字が縦に配置されてしまう
2022年1月27日
リリース情報(note)
『実践!アプリ紹介ページを作ろう』をリリースしました
関連キーワード
基礎講座
(386)
初心者向け
(379)
HTML
(116)
CSS
(118)
ウェブサイト構築
(155)
詳細情報
最終更新日
2019年9月12日
バージョン情報
Chrome 76.0 / Visual Studio Code 1.38.0