CSSの学習方法【はじめに読んで下さい】
総学習時間:920分(15時間20分)
~ 概要 ~ 【CSSとは何か】
記事 | 説明 | 学習時間 |
CSSの基本的な使い方 | CSSとは、CSSの書式、CSSを書く場所、CSSの適用順序 | 30分 |
CSSの各種セレクタについて | 全称セレクタ、HTML要素を指定するセレクタ、idを指定するセレクタ、classを指定するセレクタ、直属の子要素のみに適用するセレクタ、属性セレクタ、疑似クラス、疑似要素、セレクタの優先度 | 60分 |
~ 基本 ~ 【基本的なルール、覚えた方が良い最低限のプロパティ】
記事 | 説明 | 学習時間 |
CSSでの単位の指定方法 | 絶対単位(px)による指定、相対単位(%、em)による指定 | 10分 |
CSSでの色の指定方法 | キーワードによる色指定、16進数による色指定、rgbによる色指定、rgbaによる色・透明度指定、hsl、hslaによる色・透明度指定、opacityによる透明度指定 | 30分 |
CSSのボックスモデルについて | ボックスモデルの概念、height/width、box-sizing、max-height/max-width 及び min-height/min-width、border、border-top/border-bottom/border-left/border-right、border-radius、margin/padding | 60分 |
margin(余白)を利用したボックスの左右中央揃えについて | margin左右ににautoを指定する左右中央揃え | 10分 |
表示方法と並び方を指定するdisplayと中央縦揃えについて | display:block、inline、line-block、noneプロパティと中央縦揃え、Flexメニュー(フレキシブルボックスレイアウト) | 120分 |
表示位置と重なりを指定するpositionについて | position:static、relative、absolute、fixedプロパティ | 60分 |
重なりの順序を指定するz-indexについて | z-indexプロパティ | 10分 |
要素を左右に配置するfloatについて | float:left、right、both、noneプロパティ | 30分 |
CSSによるレスポンシブデザイン | メディアクエリ(メディアタイプ、メディア特性)、ビューポート(width)とデバイスワイズ(device-width)の違い、グリッドデザイン、フルードデザイン・フルードイメージ | 120分 |
~ CSS特有の問題回避 ~ 【バグではないのかと言いたくなるCSS特有の問題の回避方法】
記事 | 説明 | 学習時間 |
display:inline又はinline-block時に発生する謎の余白を消す方法 | 親要素にfont-size:0;を指定する。 | 10分 |
~ 応用 ~ 【知っていれば覚えてなくても大丈夫】
記事 | 説明 | 学習時間 |
CSSのリセットについて | CSSのリセットの概要、全称セレクタによる一括リセット、使う属性ごとリセット、reset.css、normalize.cssの利用 | 30分 |
ベンダープレフィックスについて | -webkit-、-moz-、-ms-、-o- | 10分 |
CSSの文字設定 | 文字コード、フォント | 10分 |
CSSでの文字の装飾・配置 | color、font-size、font-weight、font-style、font-variant、font-family、font、text-align、text-decoration、text-decoration-style、text-decoration-color、text-indent、text-shadow、line-height、vertical-alignプロパティ | 60分 |
背景を指定するbackgroundプロパティについて | background-color、background-image、background-repeat、background-position、background-size、background-attachment、backgroundプロパティ | 60分 |
~ 参考 ~ 【頭の片隅に】
記事 | 説明 | 学習時間 |
ボックスの装飾 | box-shadowプロパティ、background-image:linear-gradient、radial-gradient | 60分 |
ボックスの変形transform | transform、transform-style、perspective | 90分 |
CSSでのアニメーション | transition、animation、@keyframes | 90分 |
ボックスのはみ出し方を指定するoverflowについて | overflowプロパティ | 10分 |
CSSだけで三角形・円を作る方法 | 三角形の作成、円の作成 | 30分 |
CSSでページのフェードイン | animationを利用したフェードイン | 10分 |
CSSでフォーカス枠を消す方法 | outline:0; | - |