新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 ポートフォリオサイトを作ってみよう (02:24) 無料公開中
- 完成版の確認
- プロジェクトフォルダの設定
- index.htmlの作成
- フォルダ構成の確認
-
#02 faviconを設定してみよう (02:09) 無料公開中
- !
- faviconの設定
-
#03 画像を表示してみよう (02:37) 無料公開中
- header
- 画像の表示
-
#04 ヘッダーに背景色をつけよう (02:52) 無料公開中
- style.cssの作成
- 背景色の設定
- bodyのスタイリング
- imgのスタイリング
-
#05 名前と自己紹介を配置しよう (02:41)
- コンテンツの追加
- .container
-
#06 フレックスボックスを使おう (01:44)
- フレックスボックスの設定
- h1のスタイリング
-
#07 リストを配置してみよう (01:30)
- リストの配置
- ulのスタイリング
-
#08 リストのスタイルを整えよう (02:30)
- 画像の配置
- リストのスタイリング
-
#09 ヘッダーのスタイルを整えよう (02:44)
- 上下中央揃えの設定
- 余白の調整
- 画像の丸め
- outlineの削除
- VS Codeのコード折りたたみ機能
-
#10 見出しのスタイルを整えよう (02:21)
- mainタグ
- 見出しのスタイリング
-
#11 作品紹介のセクションを作ろう (01:17)
- sectionタグ
- 作品紹介
-
#12 作品の画像を配置しよう (01:45)
- imgタグ
- 動作確認
-
#13 見出しと段落のスタイルを整えよう (02:26)
- h2のスタイリング
- pのスタイリング
- outlineの削除
-
#14 paddingとmarginの違いを理解しよう (02:30)
- paddingの設定
- marginの設定
- 背景色、境界線の設定
-
#15 余白を設定していこう (01:52)
- section間の余白
- section内の余白
-
#16 フッターを作り込んでいこう (01:52)
- フッターの設置
- smallタグ
- footerのスタイリング
-
#17 いろいろな書き方を試してみよう (02:38)
- 太字の設定
- .containerの設定
