ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/10/03
NEW
【週刊ドットインストール】 DHHのお話、レッスン制作の進捗、その他のいろいろ
PREMIUM
【旧版】はじめてのCSS
ウェブページの見た目を整えるための言語であるCSSについて学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
はじめてのWeb制作
シンプルなプロフィールサイトを作りながらWeb制作の流れを体験していきます。
0%
動画レッスン一覧
(15)
質問と回答
(82)
#01 はじめてのCSSを書いてみよう
(02:53)
無料公開中
完成版の確認
styleタグ
セレクタ、プロパティ
CSSファイルの作成、読み込み
未完了
#02 デベロッパーツールを使ってみよう
(02:38)
無料公開中
デベロッパーツールの起動
Elmentsパネル
HTML/CSSの確認
Styles/Computedタブ
未完了
#03 色の表現方法を学んでいこう
(02:45)
無料公開中
色キーワード
rgb()
16進数による表現
コメントの書き方
未完了
#04 フォントを設定していこう
(01:30)
無料公開中
color
font-family
未完了
#05 CSSのボックスモデルを確認しよう
(01:42)
background-color
ボックスモデル
未完了
#06 marginで外側の余白を設定しよう
(01:58)
marginの設定
未完了
#07 divタグを使ってみよう
(02:36)
div
class
中央揃えのやり方
未完了
#08 Flexboxを使ってみよう
(02:51)
余白の設定
Flexbox
未完了
#09 アイコン画像のスタイリングをしよう
(02:35)
半角空白区切りのセレクタ
border-radius
border-width
border-style
border-color
未完了
#10 見出しのスタイルを整えよう
(01:54)
要素の検証
見出しのスタイリング
未完了
#11 リストのスタイリングをしていこう
(02:56)
リストのスタイリング
Flexbox
未完了
#12 align-itemsを使ってみよう
(01:48)
align-items
未完了
#13 セレクタの適用範囲を限定しよう
(02:47)
sectionのスタイリング
>区切りのセレクタ
未完了
#14 line-heightで行間を調整しよう
(02:18)
余白の調整
line-height
未完了
#15 プロフィールサイトを完成させよう
(01:20)
footerのスタイリング
プロフィールサイトの完成
未完了
#01 はじめてのCSSを書いてみよう
style タグの内容がうまく反映されません
2022年1月27日
デベロッパーツールの領域が狭くて確認しづらいです
2022年1月27日
色見本が出ないのはなぜですか?
2022年1月27日
linkタグはhead要素内にいれないといけないのですか?
2022年1月27日
スタイルは一行で書いてもいいですか?
2022年1月27日
セレクタのあとの半角スペースを入力するのが面倒です。なくてもいいですか?
2022年1月27日
タグ内の「半角スペース」の役割はなんでしょうか?
2022年1月27日
Windowsでコメントにするためのショートカットキーがわかりません
2022年1月27日
文字の色が変わらず、タグがそのまま表示されています
2022年1月27日
linkタグでtype属性やrel属性は必須ですか?
2022年1月27日
文字の色が変わらない
2022年1月27日
h1の文字色が変わりません
2022年1月27日
エディターの文字色が違うのですが...
2022年1月27日
#02 デベロッパーツールを使ってみよう
デベロッパーツールの表示が動画と違います
2022年1月27日
Computedタブが見当たりません
2022年1月27日
デベロッパーツールが出ません
2022年1月27日
エレメンツパネルの位置が左右逆になっています
2022年1月27日
#04 フォントを設定していこう
英字のみが変わる仕組みについて教えて下さい
2022年1月27日
,のあとのスペースについてルールがありますか?
2022年1月27日
#05 CSSのボックスモデルを確認しよう
親のCSSの内容は子に引き継がれるのですか?
2022年1月27日
デベロッパーツールの Computed 表示が見当たりません
2022年1月27日
コンテンツの幅と高さの数値が動画と違います
2022年1月27日
CSSでは<>は使わないのですか?
2022年1月27日
background-colorが反映されない
2022年1月27日
#06 marginで外側の余白を設定しよう
デベロッパーツールの数値が動画と異なります
2022年1月27日
余白の確認は必ずbodyをクリックすればいいのでしょうか?
2022年1月27日
なぜmarginを消すのですか?
2022年1月27日
marginが適用されるときと、されないときがある
2022年1月27日
デベロッパーツールを下に配置したい
2022年1月27日
headerの余白を消すのに、なぜbodyのスタイルを書くのですか?
2022年1月27日
外側のmarginが消えません
2022年1月27日
#07 divタグを使ってみよう
:を入力するたびに赤くなってしまいます
2022年1月27日
divタグを使用する理由は?
2022年1月27日
途中でわからなくなったのですが、やり直したほうがいいでしょうか?
2022年1月27日
ピンクの領域の色が変わらないのですが・・・
2022年1月27日
背景色が変わりません。中央揃えもできません。
2022年1月27日
背景色と中央揃えがうまくいきません
2022年1月27日
width、height、marginなどで単位を指定するのはどういうときですか?
2022年1月27日
marginが効きません
2022年1月27日
width: 400pxが反応しません
2022年1月27日
「margin: auto」だけではだめですか?
2022年1月27日
#08 Flexboxを使ってみよう
display:flexとfloatの違いについて教えて下さい
2022年1月27日
skyblueとtomatoの色が出ません
2022年1月27日
スカイブルー色が反映されません
2022年1月27日
display: flexで横並びにすると表示が崩れる
2022年1月27日
#09 アイコン画像のスタイリングをしよう
px と % の違いはなんですか?
2022年1月27日
セレクターに . をつける時とつけない時の違いがわかりません
2022年1月27日
アイコンが正円にならない
2022年1月27日
#11 リストのスタイリングをしていこう
margin と padding はどう使い分ければいいですか?
2022年1月27日
widthやfont-sizeなどはどうやって決めているのですか?
2022年1月27日
iconのサイズについて教えて下さい
2022年1月27日
flexとfloatの違いを教えて下さい
2022年1月27日
どうせ黒マルを取るならpタグでもいいですか?
2022年1月27日
liのmarginはどこにつくのですか?
2022年1月27日
「.info ul li」は「.info li」でもいいですか?
2022年1月27日
アイコンを横並びにするスタイルもliに指定するのではないのですか?
2022年1月27日
flexとinlineの違いがよくわかりません
2022年1月27日
リストの横の点がとれません。横並びになりません。
2022年1月27日
#12 align-itemsを使ってみよう
marginとpaddingの使い分けについて
2022年1月27日
container の縦幅はどのように決まるのですか?
2022年1月27日
.icon も上下中央揃えになるのはなぜですか?
2022年1月27日
paddingとmarginの違いがわかりません
2022年1月27日
#13 セレクタの適用範囲を限定しよう
header と section の間に隙間ができます
2022年1月27日
margin は一つのプロパティにまとめて指定してはいけないのですか?
2022年1月27日
中央揃えにするにはtext-alignですか?margin: autoですか?
2022年1月27日
<div>タグを使うときと使わないときの違いがわかりません
2022年1月27日
プロパティの名前のあとに空白をいれるべきですか?
2022年1月27日
セレクタでの「>」の使い方を教えて下さい
2022年1月27日
勇者の画像のみ中央揃えになりません
2022年1月27日
VS Codeで開いているソースコードを添付する方法がわかりません
2022年1月27日
指示通りに作ったのに結果が同じになりません
2022年1月27日
worksの部分が中央揃えになりません
2022年1月27日
#14 line-heightで行間を調整しよう
なぜ.works > section > p ではなく .works p とするのですか?
2022年1月27日
pの行の高さ、という概念がわかりません
2022年1月27日
.works > section がどうしてそうなるのかわかりません
2022年1月27日
「.works > section > h1」の考え方がわかりません
2022年1月27日
worksの直下にあるsectionは「勇者ゲーム」だけではないのですか?
2022年1月27日
CSSで不等号記号を用いる理由を教えて下さい
2022年1月27日
「>」は書いたほうがいいですか、書かないほうがいいですか?
2022年1月27日
#15 プロフィールサイトを完成させよう
作成したサイトのURLを変更できませんか?
2022年1月27日
「.footer p」と書かないのはなぜですか?
2022年1月27日
CSSの「.」がつくのはどういうときですか?
2022年1月27日
リリース情報(note)
『はじめてのHTML』と『はじめてのCSS』をリニューアルしました
詳細情報
最終更新日
2019年8月22日
バージョン情報
Google Chrome 65.0 / Visual Studio Code 1.36.1