ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
【旧版】詳解CSS 基礎文法編
ウェブページの見た目を整えるための言語である、CSSの基礎的な文法について学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
CSS入門 基本スタイリング編
CSSの基本的なスタイリング手法について学んでいきます。
0%
動画レッスン一覧
(33)
質問と回答
(200)
#01 CSSを学んでいこう
(01:40)
無料公開中
CSSの概要
学習の流れ
使用ブラウザ、エディタの確認
未完了
#02 学習の準備を整えよう
(02:35)
無料公開中
画像素材の確認
プロジェクトフォルダの設定
index.htmlの作成
未完了
#03 はじめてのCSS
(02:35)
無料公開中
styleタグ
linkタグ
cssファイルの作成
style属性
未完了
#04 CSSの文法に慣れよう
(02:21)
無料公開中
CSSの書き方
用語の確認
コメント
未完了
#05 スタイルの継承を理解しよう
(02:01)
無料公開中
スタイルの継承
Cascading Style Sheets
未完了
#06 CSSの仕様を調べてみよう
(02:05)
MDN
継承の有無
inherit
未完了
#07 デベロッパーツールを使ってみよう
(02:35)
デベロッパーツールの操作方法
パネルの見方
未完了
#08 テキストにスタイルを設定しよう
(02:37)
color
font-size
font-weight
text-align
text-decoration
未完了
#09 font-familyでフォントを指定しよう
(02:26)
フォント決定の仕組み
font-family
総称フォントファミリー
未完了
#10 line-heightで行の高さを調整しよう
(02:31)
line-height
em
単位なしの指定
未完了
#11 単位無しでline-heightを指定しよう
(02:09)
単位ありの指定
単位なしの指定
未完了
#12 vertical-alignで位置を調整しよう
(02:42)
vertical-align
baselineの位置について
未完了
#13 RGBAを使った色の表現方法を覚えよう
(02:35)
キーワードによる色の指定
rgba()
rgb()
16進数による指定
未完了
#14 HSLAを使った色の表現方法を覚えよう
(02:23)
hsla()
hsl()
opacity
未完了
#15 リストをスタイリングしてみよう
(02:58)
list-style-type
list-style-position
list-style-image
画像ファイルの指定
未完了
#16 一括指定プロパティを使ってみよう
(02:47)
一括指定プロパティ
MDNによる仕様確認
初期値について
未完了
#17 クラスセレクターの基本をおさえよう
(01:28)
クラスセレクター
未完了
#18 ボックスモデルを理解しよう
(02:42)
ボックスモデル
width
height
border
padding
margin
デベロッパーツールでの確認
未完了
#19 width、heightを設定してみよう
(02:42)
width
px, %による指定
height
overflow
未完了
#20 borderで境界線をつけてみよう
(02:57)
border-width、border-style、border-color
border
border-top、border-bottom
border-radius
未完了
#21 paddingで内側の余白をつけよう
(01:47)
padding-top
padding-left
padding
未完了
#22 marginで外側の余白をつけよう
(01:48)
margin-bottom
margin
margin-left
margin-right
auto
未完了
#23 marginの相殺を理解しよう
(01:41)
marginの相殺
未完了
#24 displayプロパティについて理解しよう
(01:59)
block
inline
inline-block
挙動の違い
未完了
#25 displayプロパティを操作してみよう
(02:33)
displayプロパティの使用例
none
未完了
#26 positionで要素の位置を変えよう
(02:39)
position
static
relative
fixed
未完了
#27 要素を絶対配置してみよう
(02:49)
要素の絶対配置
動作確認
未完了
#28 z-indexで重なり順を操作しよう
(02:18)
z-index
未完了
#29 box-sizingを使ってみよう
(02:00)
box-sizing
box-sizingの使用例
未完了
#30 calcで単位が違う計算をしてみよう
(02:50)
calc
未完了
#31 要素に影をつけてみよう
(02:20)
box-shadow
text-shadow
未完了
#32 背景のスタイリングをしていこう
(03:00)
background-color
background-image
background-size
background-position
background
一括指定時の注意点
未完了
#33 floatを使ってみよう
(02:26)
float
clear
未完了
#01 CSSを学んでいこう
リセット CSS は使うべきですか?
2022年2月16日
CSS で覚えることが多すぎて、混乱してしまいます。
2022年1月27日
#02 学習の準備を整えよう
Open Folder が表示されません
2022年6月22日
リターンとはなんですか?
2022年6月1日
titelタグは必要ですか?
2022年5月24日
MYCSS フォルダの中に img フォルダを入れてしまいました
2022年3月24日
Windows で Zip ファイルの解凍ができません
2022年3月24日
Windows での操作方法がよくわかりません
2022年1月27日
titel タブのなかに書いた「 CSS の練習」がブラウザの画面上に表示されてしまう
2022年1月27日
index.html ファイルが img フォルダの中に作成されてしまいます
2022年1月27日
色見本がでてきません
2022年1月27日
reset CSSは使わなくていいのですか?
2022年1月27日
#03 はじめてのCSS
VS Code ではなく、デスクトップ上でフォルダやファイルを作成してもいいですか?
2022年5月24日
CSS ファイルは複数作成してもいいのでしょうか?
2022年6月3日
stylesheet とはなんですか?
2022年3月24日
style="color: green;" のセミコロンは必要ですか?
2022年3月24日
VS Code の右上にあるコードが表示されているものはなんですか?
2022年3月7日
CSS が読み込まれません
2022年1月27日
styles.css のファイル名は決まっているのですか?
2022年1月27日
styles.css の書かれた内容がなぜ、index.html に反映されるのでしょうか?
2022年1月27日
CSS の書き方に漠然と不安を感じています
2022年1月27日
link タグの属性の意味を教えてください
2022年1月27日
ショートカットキーによるコメントアウトができません
2022年1月27日
Ctrl + クリックでファイルが作れません
2022年1月27日
style は p タグ等に直接使ってもよいのですか?
2022年1月27日
CSSのファイル名は動画と違うものにしていいですか?
2022年1月27日
複数のCSSを読み込むことはできますか?
2022年1月27日
#04 CSSの文法に慣れよう
CSS ファイルは HTML のファイルの数の分だけ作るのでしょうか?
2022年6月1日
プロパティを書く順番について教えて下さい
2022年6月1日
設定した色が反映されません
2022年1月27日
#05 スタイルの継承を理解しよう
body でフォントサイズを指定したとき、 h1 や p でのフォントサイズが異なるのはなぜですか?
2022年1月27日
h1 のスタイルが body のスタイルで上書きされないのはなぜですか?
2022年1月27日
#06 CSSの仕様を調べてみよう
inherit を使うのとそのまま solid で出力するのでは何が違うのでしょうか?
2022年1月27日
font-sizeの継承について教えて下さい
2022年1月27日
継承について教えて下さい
2022年1月27日
#07 デベロッパーツールを使ってみよう
デベロッパーツールは何のためにあるのでしょうか?
2022年1月27日
デベロッパーツールで CSS スタイルを確認できません
2022年1月27日
デベロッパーツールで表示される == $0 とはなんですか?
2022年1月27日
h1とpのmarginがかぶっているようですが...?
2022年1月27日
デベロッパーツールが右側に出てきます
2022年1月27日
#08 テキストにスタイルを設定しよう
ソースコード比較機能を使い、違いを修正しても中央揃えができません
2022年3月24日
.vscode というフォルダーが勝手に作られたのですが、これは何ですか?
2022年3月2日
フォントサイズの単位はなににすれば良いのでしょうか?
2022年2月10日
文章の一部に打ち消し線をつけるにはどうすればよいですか?
2022年1月27日
h2 に対して text-align: center; を指定してもテキストが中央寄せにならないのはなぜですか?
2022年1月27日
text-align:center と margin: 0 auto の違いはなんですか?
2022年1月27日
h1 に margin: 0 auto としても中央揃えできません
2022年1月27日
#09 font-familyでフォントを指定しよう
フォント名は大文字と小文字で区別されますか?
2022年10月28日
HTML と CSS に書く charset "utf-8" の違いは何ですか?
2022年10月28日
指定したフォントが無かった場合はどの様な表示になりますか?
2022年9月24日
@charset "utf-8" とは何ですか?
2022年8月23日
font-family は通常、複数指定するものですか?
2022年1月27日
'Arial Black' はなぜ ' ' で囲われているのですか?
2022年1月27日
英字と日本語が交じった文章の場合、表示されるフォントはどうなりますか?
2022年1月27日
#10 line-heightで行の高さを調整しよう
行ボックスの高さや幅、文字の寄り方はデフォルトで設定されているのですか?
2022年9月24日
line-height を設定し padding 、border 、margin も設定した場合 line-height との関係はどうなりますか?
2022年1月27日
line-height を 47px 、font-size を 16px としたらどうなりますか?
2022年1月27日
line-heightを設定しないと何pxになるのですか?
2022年1月27日
#11 単位無しでline-heightを指定しよう
main タグに font-size を指定した場合、 section タグへの指定は不要ですか?
2022年9月24日
line-height がうまく設定できません
2022年1月27日
main タグや section タグの中の文章は p タグでマークアップしたほうがよいですか?
2022年1月27日
#12 vertical-alignで位置を調整しよう
段落ごとに異なったスタイルをつけるにはどうしたら良いですか?
2022年6月22日
img フォルダーへ画像を保存するにはどうしたらよろしいでしょうか?
2022年1月27日
japan.png が表示されません
2022年1月27日
font-size を指定しない場合、line-height の動作はどうなりますか?
2022年1月27日
background-color と background の違いを教えてください
2022年1月27日
japan.png が表示されません
2022年1月27日
img/japan.png が反映されないのはなぜですか?
2022年1月27日
フォルダ構成の変更がうまくいきません
2022年1月27日
height と line-height の違いはなんですか?
2022年1月27日
複数の img タグがある場合、特定のものだけにスタイルをつけるにはどうすればよいですか?
2022年1月27日
line-height に単位なしの数値を指定するとどのような高さになるのですか?
2022年1月27日
「フォルダの構造を見直す」とは具体的にはどのようにすればいいのでしょうか?
2022年1月27日
line-height: 5pxとすると文字が重なってしまいます
2022年1月27日
#13 RGBAを使った色の表現方法を覚えよう
opacity と alpha の違いがわかりません
2022年1月27日
色の番号が覚えられません
2022年1月27日
rgba() もしくは 16 進数での記述方法がありますが、どうやって使い分けますか?
2022年1月27日
赤、”緑”、青ではなく、三原色は赤、”黄”、青ではないのでしょうか?
2022年1月27日
alphaを16進数で表現するときにffとなるのはなぜですか?
2022年1月27日
#14 HSLAを使った色の表現方法を覚えよう
複数の p 要素に個別の色を指定するにはどうすればよいのですか?
2022年2月16日
opacity に関して、背景色のみ薄くし、文字はそのままの色で残しておくような方法はありますでしょうか?
2022年1月27日
#15 リストをスタイリングしてみよう
list-style-type と list-style-image を両方指定した場合に画像が表示されるのはなぜですか?
2022年5月24日
誤って画像を削除してしまった場合はどうすればいいですか?
2022年2月28日
HTML では src="" とするのに、CSS で url() とするのはなぜですか?
2022年1月27日
「記号がリストの外側」とはどういう意味ですか?
2022年1月27日
list-style-type の type をつけなくても同じように表示されますが、違いは何ですか?
2022年1月27日
url でつけた写真のサイズの変え方はありますか?
2022年1月27日
「ひとつ上のフォルダ」とはどういう意味ですか?
2022年1月27日
二つ上のフォルダーの場合は.../でいいでしょうか?
2022年1月27日
url で .. をつける理由がわかりません
2022年1月27日
どのようなときにファイル名を ' や " で囲いますか?
2022年1月27日
一つ上のフォルダーの意味がわかりません
2022年1月27日
#16 一括指定プロパティを使ってみよう
「一括指定プロパティで値を省略した場合」とはなんですか?
2022年3月24日
コメントアウトのショートカットキーを教えてください
2022年2月28日
ol タグでも初期値の disc で上書きされると「・」になるのですか?
2022年2月10日
コメントにした後、コメントを解除する方法がわかりません。
2022年1月27日
MDNの日本語表記がおかしいです
2022年1月27日
imgの画像サイズは変更できますか?
2022年1月27日
list-style-typeがdiskで上書きされているとはどういうことですか?
2022年1月27日
一括指定プロパティでcircleは指定しなくていいのでは?
2022年1月27日
#17 クラスセレクターの基本をおさえよう
class の名付けはハイフンやアンダーバー、数字などは使用しても良いのでしょうか?
2022年1月27日
p1, p2といった使い方をしてもいいですか?
2022年1月27日
class属性に付ける識別子の名前はどうつけたらいいですか?
2022年1月27日
#18 ボックスモデルを理解しよう
class 属性と id 属性の名前はなんでもいいのでしょうか?
2022年1月27日
h1 に padding を指定すると行の高さが変わってしまいます
2022年1月27日
divを使用する意図がわかりません
2022年1月27日
marginとpaddingはどう使い分けるのですか?
2022年1月27日
#19 width、heightを設定してみよう
overflow: hidden; をコメントアウトしたのはなぜですか?
2022年5月18日
なぜコメントを使うのですか?
2022年4月4日
img に対しての max-width と width の違いが分かりません
2022年5月24日
スクロールできません
2022年1月27日
ソースコードを比較したときのスペースは気にするべきですか?
2022年1月27日
レッスンと同じように表示されません
2022年1月27日
親要素とはどこを指しますか?
2022年1月27日
overflowがうまく動かない
2022年1月27日
webkit-とはどういう意味ですか?
2022年1月27日
#20 borderで境界線をつけてみよう
img を囲った div に border-radius を指定しても、画像が角丸になりません
2022年5月18日
img タグで指定した写真も border-radius で角を丸めることはできますか?
2022年2月10日
文字が円からはみ出てしまう場合、どうすれば円の中央に移動できますか?
2022年1月27日
一括プロパティでまとめる際の順序について教えて下さい
2022年1月27日
ボーダーラインなしでも角を丸くすることはできますか?
2022年1月27日
tableのスタイリングはどうやってやるのですか?
2022年1月27日
#21 paddingで内側の余白をつけよう
padding は width や height には含まれない、の意味がわかりません
2022年9月29日
padding を指定しているのに、なぜ Box2 は上側に配置されたままなのでしょうか?
2022年5月24日
inline 要素に padding を指定すると親要素からはみ出てしまうのはなぜですか?
2022年4月4日
border に付ける値の順番は決まっているのですか?
2022年1月27日
#22 marginで外側の余白をつけよう
margin: 0 auto; のとき上下の margin は効かないのでしょうか?
2022年9月3日
MDN Reference を無効にする方法を教えてください
2022年2月18日
margin: 20 20 20; と指定しても反映されないのは何故でしょうか?
2022年1月27日
box2 を box1 の中央に配置する方法はありますか?
2022年1月27日
border を設定していない場合、 margin と padding の見た目に違いは生じますか?
2022年1月27日
text-align:center と margin: 0 auto の違いはなんですか?
2022年1月27日
box2 に margin-top: 20px; を指定すると box1 ごと下がるのはなぜですか?
2022年1月27日
margin-right: auto で中央揃えになるのはなぜですか?
2022年1月27日
box1 に margin: 20px; とすると上下左右のマージンが均等ではないのはなぜですか?
2022年1月27日
カーソル行をコピペするには?
2022年1月27日
marginを0にしても余白が見えるのはなぜですか?
2022年1月27日
#23 marginの相殺を理解しよう
margin の相殺は水平方向には起こらないのですか?
2022年1月27日
#24 displayプロパティについて理解しよう
なぜ margin: auto; で上部の余白が消えるのですか?
2022年1月27日
section などのブロック要素の中央寄せは「margin-left: auto;」ではないのですか?
2022年1月27日
Boxのサイズに関して教えて下さい
2022年1月27日
imgはインライン要素なのにどうしてwidthを設定できるのですか?
2022年1月27日
#25 displayプロパティを操作してみよう
無効な width と height に波線が引かれません
2022年1月27日
display: none; はどのような場面で使うのでしょうか?
2022年1月27日
display: inline-block; で指定した文字を上下中央揃えにする方法を教えてください
2022年1月27日
フォントに関して教えて下さい
2022年1月27日
オレンジの箱とトマト色の箱のあいだに空白がありません
2022年1月27日
#26 positionで要素の位置を変えよう
コメントアウトのショートカットキーを教えてください
2022年1月27日
要素の重なりの順序はどこで決まりますか?
2022年1月27日
staticは書く必要ありますか?
2022年1月27日
#27 要素を絶対配置してみよう
なぜウィンドウの左上が起点になるのですか?
2022年9月29日
position を指定しない場合、要素が配置される位置に余白が生じるのはなぜですか?
2022年7月9日
親要素に relative 、子要素に absolute の場合と、子要素に relative のみを設定すると結果が同じになります
2022年5月24日
親要素が relative の場合、子要素に absolute を指定したらどうなりますか?
2022年3月24日
div タグの構造を教えてください
2022年2月18日
position: static などの初期値も書いたほうがいいのですか?
2022年2月18日
position: fixed; の起点を右下に変えたいときはどうすればいいですか?
2022年1月27日
子要素で top を指定しなかったときの挙動について教えて下さい
2022年1月27日
子要素だけに position:relative; を指定して配置することもありますか?
2022年1月27日
.rect の position を fixed にすると位置が変わってしまいます
2022年1月27日
なぜ top: -5px; で上に移動するのですか?また px とはどのような単位ですか?
2022年1月27日
<div> タグの中に <div> タグを入れて親子関係を作ってもいいのですか?
2022年1月27日
ショートカットキーでコメントアウトすると、意図しない部分までコメントになってしまいます
2022年1月27日
絶対配置の絶対とは...?
2022年1月27日
絶対配置で中央揃えにするにはどうしたらいいですか?
2022年1月27日
#28 z-indexで重なり順を操作しよう
box 以外の要素がある場合に、z-index がうまくいきません
2022年2月21日
全てを絶対配置にするのはなぜですか?
2022年1月27日
z-index はどのような場面で使われるのですか?
2022年1月27日
absoluteを指定してtopやleftもない場合どうなりますか?
2022年1月27日
box2とbox3が移動してbox1の下に入るのはなぜですか?
2022年1月27日
#29 box-sizingを使ってみよう
最初から全ての要素に box-sizing: border-box; を設定していても問題ありませんか?
2022年7月9日
inline-block で並べた際に、border をつけた Box が上にずれてしまいます
2022年1月27日
ブラウザとエディタを素早く切り替える方法はありますか?
2022年1月27日
paddingを使うとどうなりますか?
2022年9月1日
なぜその順番で書いたのですか?
2022年1月27日
CSSには書く順番があるのですか?どこに書いてもいいのですか?
2022年1月27日
#30 calcで単位が違う計算をしてみよう
なぜ margi-left: auto; で box3 が右側に配置されるのかわかりません
2022年2月10日
calc() を使って書き換えた場合、width: 100px; を消しても問題ありませんか?
2022年1月27日
margin-left: 0 auto; では右側に行かない理由が知りたいです
2022年1月27日
width の計算で用いた 100% の基準はなんですか?
2022年1月27日
margin: auto; ではだめですか?
2022年1月27日
calcはどういうときに使うのですか?
2022年1月27日
#31 要素に影をつけてみよう
「 4 番目の値については text-shadow には付けられないので、 Box 1 と Box 2 で試しましょう」となる理由を教えて下さい
2022年8月23日
box-shadow を設定する際の margin-bottom は padding-bottom にしてもよいのですか?
2022年1月27日
box-shadow プロパティの 3 、4 番目の値がよくわかりません
2022年1月27日
box-shadowのx方向、y方向とは何ですか?
2022年1月27日
text-shadowに4番目の引数がないのはなぜですか?
2022年1月27日
#32 背景のスタイリングをしていこう
background: ...; のように一括で指定するコードを探すには、何と検索すればいいですか?
2022年2月10日
ファイル構成を初期状態にするにはどうしたらいいですか?
2022年1月27日
背景色と背景画像を同時に指定したときは画像が優先されるのですか?
2022年1月27日
ウィンドウサイズを変更したときに画像が切れないようにするにはどうすればいいですか?
2022年1月27日
background に画像を設定する場合、背景色も指定したほうが良いのでしょうか?
2022年1月27日
ドットインストールの画像が複数出てきます
2022年1月27日
画像はHTMLとCSSのどちらで指定すべきですか?
2022年1月27日
#33 floatを使ってみよう
h1 と h2 の文字の大きさが異なるのはなぜですか?
2022年1月27日
img の width と height はなぜ CSS ではなく HTML に記載するのですか?
2022年1月27日
flexbox と float の使い分けがわかりません
2022年1月27日
セレクタに「 . 」をつける時とつけない時の違いは何ですか?
2022年1月27日
clear: both; と clear: right; の違いが分かりません
2022年1月27日
floatで要素を中央寄せにすることはできますか?
2022年1月27日
リリース情報(note)
VS Codeに対応した『詳解CSS 基礎文法編』をリリースしました
詳細情報
最終更新日
2019年11月28日
バージョン情報
Chrome 78.0 / Visual Studio Code 1.38.0