ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/03/16
NEW
週刊ドットインストール(2023/03/16号)を更新しました!
PREMIUM
CSS入門 基本スタイリング編
CSSの基本的なスタイリング手法について学んでいきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
HTML入門 基本タグ編
(全27回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(27)
質問と回答
(10)
未完了
#01 CSSの文法を確認しよう
(02:30)
無料公開中
HTMLとCSSの違い
レッスンの構成
CSSの文法
必要となる準備
未完了
#02 作業用フォルダを設定しよう
(02:25)
無料公開中
作業用フォルダの設定
index.htmlの作成
ブラウザでの確認
未完了
#03 styleタグ内にCSSを記述しよう
(02:51)
無料公開中
styleタグの設置
スタイルの優先度
コメントの書き方
未完了
#04 CSSを別ファイルに記述しよう
(02:32)
無料公開中
linkタグの設置
style.cssの作成
文字コードの設定
ブラウザでの確認
未完了
#05 ボックスモデルを理解しよう
(02:24)
無料公開中
content box
border box
padding box
margin box
width / height
未完了
#06 width、heightでサイズを指定しよう
(02:38)
スタイルのリセット
width, heightの設定
16pxをベースにしたデザイン
未完了
#07 max-width、min-widthを使ってみよう
(02:12)
%による幅指定
max-width
min-width
未完了
#08 境界線をつけてみよう
(02:35)
border-width
border-style
border-color
方向の指定
未完了
#09 一括指定プロパティを使おう
(02:38)
border
border-top / border-bottom
一括指定プロパティに関する注意点
プロパティの初期値
未完了
#10 paddingで内側の余白を設定しよう
(02:56)
padding
一括指定プロパティの挙動
未完了
#11 marginで外側の余白を設定しよう
(02:42)
margin
autoキーワード
未完了
#12 marginの相殺を理解しよう
(02:46)
marginの相殺
動作確認
未完了
#13 box-sizingを使ってみよう
(02:18)
box-sizing: border-box;
動作確認
未完了
#14 overflowでコンテンツを制御しよう
(02:01)
overflow: hidden;
overflow: scroll;
未完了
#15 border-radiusで角を丸めよう
(02:52)
border-radius
方向の指定
境界線への影響
正円の作りかた
未完了
#16 box-shadowで影をつけよう
(02:35)
box-shadow
全体にうっすらと影を付ける方法
未完了
#17 テキストのスタイリングをしよう
(02:41)
font-size
font-weight
text-align
未完了
#18 line-heightで行間を制御しよう
(02:39)
行ボックス
line-height
単位なしによるline-heightの指定
未完了
#19 継承の仕組みを理解しよう
(02:32)
スタイルの継承
inherit
未完了
#20 font-familyでフォントを指定しよう
(02:41)
font-family
フォント指定に関する注意点
総称フォントファミリー
未完了
#21 sectionのスタイリングをしよう
(02:54)
sectionの設置
border
width
margin
border-radius
未完了
#22 paddingとmarginの違いを確認しよう
(03:00)
text-align
marginのリセット
marginによる設定
paddingによる設定
未完了
#23 カードのスタイリングを仕上げよう
(01:55)
border-bottom
font-size
未完了
#24 CSSの仕様を調べてみよう
(02:21)
MDN
プロパティの調べ方
未完了
#25 Chromeの開発者ツールを使おう
(02:36)
開発者ツールの起動
日本語化の方法
画面の見方
アイコンの使い方
未完了
#26 要素のスタイルを確認しよう
(02:42)
スタイルの確認
ユーザーエージェントスタイルシート
未完了
#27 次のステップを確認しよう
(01:58)
これまでのまとめ
次のステップ
256timesの紹介
#03 styleタグ内にCSSを記述しよう
なぜ body ではなく head に style 要素を入れるのですか?
2022年10月28日
#08 境界線をつけてみよう
border-top-style: dashed; にすると、border の下にピンク色の背景があるのはなぜですか?
2022年12月5日
CSS 上から下に読み込まれるのでしょうか?
2022年11月9日
#10 paddingで内側の余白を設定しよう
ブラウザーの幅を限界よりも小さくする方法はありますか?
2022年12月26日
#11 marginで外側の余白を設定しよう
margin: 0 0 0 auto と margin-left: auto の違いはなんですか?
2022年12月5日
#16 box-shadowで影をつけよう
box-shadow の位置の指定の順番は margin とは違うのですか?
2022年12月26日
#17 テキストのスタイリングをしよう
text-align: center; は margin: 0 auto; ではだめですか?
2023年2月5日
#18 line-heightで行間を制御しよう
content box にさらに 行ボックスが存在しているという認識であっていますか?
2022年11月9日
#21 sectionのスタイリングをしよう
カードの角が重なって見えます
2022年12月26日
#27 次のステップを確認しよう
タイトルに背景色を付ける方法を教えてください
2022年11月20日
次におすすめのレッスン
CSS入門 応用スタイリング編
(全27回)
PREMIUM
PREMIUM
0%
CSS入門 セレクター編
(全21回)
PREMIUM
PREMIUM
0%
CSS入門 フレックスボックス編
(全22回)
PREMIUM
PREMIUM
0%
CSS入門 メディアクエリー編
(全14回)
PREMIUM
PREMIUM
0%
実践!ポートフォリオサイトを模写しよう
(全18回)
PREMIUM
PREMIUM
0%
ギャラリー
このレッスンについて
最終更新日
2022年10月4日
バージョン情報
Chrome 105 / Visual Studio Code 1.71.0
関連キーワード
(5)
基礎講座
(363)
初心者向け
(362)
HTML
(113)
CSS
(114)
Web制作
(19)
このレッスンを共有する