新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 ウェブサイトを制作していこう (02:59) 無料公開中
- 完成版の確認
- 作業用フォルダの説明
- index.htmlの作成
- styles.cssの作成
-
#02 ヘッダーのマークアップをしていこう (02:53) 無料公開中
- headerのマークアップ
- スタイルの設定
-
#03 ボタンのスタイルを整えよう (02:46) 無料公開中
- marginの調整
- ボタンの作成
-
#04 要素の位置を調整していこう (02:40) 無料公開中
- 全体の中央揃え
- headerのスタイリング
-
#05 画像を絶対配置してみよう (02:28)
- ヘッダー画像の配置
- Font Awesomeの読み込み
-
#06 共通のスタイルを切り出しておこう (02:00)
- 共通スタイルの切り出し
-
#07 疑似要素でサブタイトルを作ろう (02:35)
- タイトルの設定
- data属性
- after疑似要素
-
#08 スタイルを再利用できるようにしよう (01:14)
- .section-titleの作成
-
#09 特徴紹介セクションを作ろう (02:21)
- 特徴紹介セクションのマークアップ
-
#10 要素を左右に振り分けていこう (02:20)
- :nth-of-type()
- 要素の振り分け
-
#11 特徴紹介セクションを完成させよう (02:58)
- 余白の設定
- :not(:last-child)
- floatの解除
-
#12 利用者の声を紹介してみよう (02:57)
- 利用者の声セクションのマークアップ
-
#13 Flexboxを使って要素を配置しよう (02:27)
- Flexbox
- 画像の絶対配置
-
#14 利用者の声セクションを完成させよう (02:02)
- 画像位置の調整
- 余白の調整
-
#15 最後のセクションを作っていこう (02:24)
- call-to-actionセクションのマークアップ
- call-to-actionセクションのスタイリング
-
#16 ウェブサイトを完成させよう (01:42)
- footerの作成
- スタイルシートの整理
2019年8月13日
