このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 macOSで作業用フォルダを設定しよう (02:44) 無料公開中
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#02 Windowsで作業用フォルダを設定しよう (02:40) 無料公開中
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#03 要素の配置について理解しよう (02:32) 無料公開中
- ブロックボックス
- インラインボックス
- サポートされるプロパティの違い
-
#04 インラインボックスを配置してみよう (02:28) 無料公開中
- 余白のリセット
- a要素の設置
- 配置の確認
-
#05 インラインボックスの挙動を確認しよう (02:07) 無料公開中
- width / height
- border
- padding
- margin
- marginのautoキーワード
-
#06 displayプロパティを使ってみよう (02:42)
- display: block;
- display: inline;
- display: inline-block;
-
#07 置換要素の挙動を確認しよう (02:57)
- imgの設置
- 挙動の確認
- ボックスの配置に関するまとめ
-
#08 クラスセレクターを使ってみよう (02:50)
- class属性
- クラスセレクター
-
#09 positionプロパティの挙動を理解しよう (02:47)
- position: static;
- position: relative;
- position: absolute;
- position: fixed;
-
#10 相対位置指定を使ってみよう (02:20)
- position: relative;
- top, left
- 要素の追加
-
#11 絶対位置指定、固定位置指定を使おう (02:57)
- position: absolute;
- position: relative;との組み合わせ
- position: fixed;
-
#12 z-indexで要素の重なり順を制御しよう (02:55)
- 要素の絶対位置指定
- z-index
-
#13 object-fit､opacityプロパティを使おう (02:50)
- 画像の配置
- width, height
- border-radius
- object-fit
- opacity
-
#14 vertical-alignプロパティを使ってみよう (02:41)
- 画像の配置
- baseline
- vertical-align
- 画像下の隙間の消し方
-
#15 floatでテキストを回り込ませよう (02:55)
- float
- clear
- display: flow-root;
-
#16 背景画像を設定しよう (02:46)
- header、h1の配置
- 文字の中央揃え
- background-image
-
#17 背景関連のプロパティを設定しよう (02:46)
- background-size
- background-position
- background
- 一括指定プロパティによる指定
-
#18 リンクのスタイリングをしてみよう (02:31)
- a要素の配置
- display: inline-block;
- ボタンのスタイリング
-
#19 ボタンのスタイリングをしてみよう (02:26)
- button要素のスタイル
- all: unset;
- ボタンのスタイリング
-
#20 テーブルのスタイリングをしてみよう (02:49)
- 境界線の設定
- border-collapse: collapse;
- テーブルのスタイリング
-
#21 リストのスタイリングをしてみよう (02:34)
- 余白のリセット
- list-style: none;
- リストのスタイリング
-
#22 calc()を使って単位の異なる計算をしよう (02:43)
- max-width
- margin
- calc()
-
#23 em､remを使ってみよう (02:59)
- em
- rem
-
#24 色の指定方法を理解しよう (02:55)
- キーワード
- RGB
- HSL
- HWB
- 不透明度の指定
-
#25 カラーピッカーを使ってみよう (02:42)
- rgb()
- 開発者ツールの起動
- カラーピッカーの使い方
-
#26 CSS変数で値を管理してみよう (02:39)
- h1のスタイリング
- CSS変数の設定
- CSS変数の使い方
-
#27 次のステップを確認しよう (01:45)
- これまでのまとめ
- 次のステップ
- 256timesの紹介
2024年8月20日
2023年4月12日
2023年11月28日
2023年6月22日
2022年11月20日
2023年6月14日
2023年3月2日
2023年4月18日
2022年10月28日
2023年4月10日
2023年3月21日
2023年12月22日
2022年12月10日
2022年11月24日
2022年11月24日
2023年4月12日
2022年11月20日
2023年4月18日
2023年4月4日
2022年11月20日
2022年10月28日
2023年9月12日
2023年6月14日
2023年1月13日
2023年4月4日
2022年12月10日
2022年10月28日
2023年6月22日
2022年11月9日
2023年1月13日
2022年12月5日
2024年2月23日
2023年10月26日
2023年4月4日
2023年6月14日
2022年11月9日
2023年2月5日
2022年11月20日
次におすすめのレッスン
はじめての256times 256times
オンラインで仲間と一緒に実践的に学んでみませんか。ドットインストールの参加型プログラミング勉強会「256times」の無料体験クラスです。
256times
