ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/12
NEW
【週刊ドットインストール】 CSSバージョンのお話、レッスン制作の進捗、代表のひとりごと
PREMIUM
【旧版】詳解CSS 基礎文法編
ウェブページの見た目を整えるための言語である、CSSの基礎的な文法について学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
CSS入門 基本スタイリング編
CSSの基本的なスタイリング手法について学んでいきます。
0%
動画レッスン一覧
(37)
#01 CSSを学んでいこう
(02:47)
無料公開中
CSSの概要
使用ブラウザ、エディタの確認
画像素材の確認
ひな形ファイルの作成
未完了
#02 CSSの文法に慣れよう
(01:31)
無料公開中
CSSの書き方
用語の確認
コメント
未完了
#03 はじめてのCSS
(02:57)
無料公開中
styleタグ
style属性
cssファイルの作成
未完了
#04 スタイルの継承を理解しよう
(02:25)
無料公開中
スタイルの継承
Cascading Style Sheets
未完了
#05 CSSの仕様を調べてみよう
(02:15)
無料公開中
MDN
継承の有無
inherit
未完了
#06 デベロッパーツールを使ってみよう
(02:48)
デベロッパーツールの操作方法
パネルの見方
未完了
#07 テキストにスタイルを設定しよう
(02:57)
color
font-size
font-weight
text-align
text-decoration
未完了
#08 font-familyでフォントを指定しよう
(02:59)
フォント決定の仕組み
総称フォント
font-family
未完了
#09 line-heightで行の高さを調整しよう
(02:45)
line-height
em
単位なしの指定
未完了
#10 vertical-alignで位置を調整しよう
(02:59)
vertical-align
baselineの位置について
未完了
#11 色の表現方法を覚えよう
(02:56)
キーワードによる色の指定
rgb()
16進数による指定
hsl()
rgba()、hsla()
opacity
未完了
#12 リストをスタイリングしてみよう
(02:46)
list-style-type
list-style-position
list-style-image
画像ファイルの指定
未完了
#13 一括指定プロパティを使ってみよう
(02:51)
一括指定プロパティ
MDNによる仕様確認
初期値について
未完了
#14 セレクターの基本をおさえよう
(02:59)
要素セレクター
idセレクター
classセレクター
全称セレクター
未完了
#15 ボックスモデルを理解しよう
(02:55)
ボックスモデル
width
height
border
padding
margin
デベロッパーツールでの確認
未完了
#16 width、heightを設定してみよう
(02:18)
width
px, %による指定
height
overflow
未完了
#17 borderで境界線をつけてみよう
(02:11)
border-width、border-style、border-color
border
border-top、border-bottom
border-radius
未完了
#18 paddingで内側の余白をつけよう
(01:43)
padding
paddingの一括指定
未完了
#19 marginで外側の余白をつけよう
(01:38)
margin
auto
未完了
#20 marginの相殺を理解しよう
(01:48)
marginの相殺
未完了
#21 displayプロパティを操作してみよう
(02:49)
ボックスモデルの種類
block
inline
inline-block
none
未完了
#22 positionで要素の位置を変えよう
(02:33)
position
static
relative
fixed
未完了
#23 要素を絶対配置してみよう
(02:41)
要素の絶対配置
動作確認
未完了
#24 z-indexで重なり順を操作しよう
(02:31)
z-index
未完了
#25 box-sizingを使ってみよう
(01:52)
box-sizing
box-sizingの使用例
未完了
#26 要素に影をつけてみよう
(02:01)
box-shadow
text-shadow
未完了
#27 背景のスタイリングをしていこう
(02:54)
background-color
background-image
background-size
background-position
background
一括指定時の注意点
未完了
#28 セレクターを組み合わせてみよう
(02:58)
セレクター > セレクター
セレクター セレクター
セレクター, セレクター
未完了
#29 隣接結合子を使ってみよう
(02:09)
隣接結合子
未完了
#30 属性セレクターを使ってみよう
(02:42)
属性セレクター
完全一致
前方一致
後方一致
部分一致
未完了
#31 疑似要素で整形してみよう
(02:56)
::before
::after
data属性との併用
未完了
#32 疑似クラスを使ってみよう
(02:53)
疑似クラスと疑似要素の違い
:hover
cursor
未完了
#33 nth-childで順番を指定してみよう
(02:36)
:nth-child()
:first-child
:last-child
:not
未完了
#34 nth-of-typeを使ってみよう
(02:38)
:nth-child()と:nth-of-type()の違い
:nth-of-type()
:first-of-type
:last-of-type
未完了
#35 詳細度を計算してみよう
(02:43)
詳細度とは
詳細度の計算方法
未完了
#36 優先されるスタイルを確認しよう
(02:08)
詳細度の挙動確認
style属性
!important
未完了
#37 floatを使ってみよう
(02:58)
float
clear
未完了
リリース情報(note)
『HTML/CSS基礎文法入門』を追加しました
詳細情報
最終更新日
2018年11月27日
バージョン情報
HTML5 / CSS / CSS3