ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2026/11/12
NEW
【週刊ドットインストール】 256timesのクラスを運営中、Figmaのロードマップページを公開!
712
レッスン
1391
質問と回答
0
文字起こし
0
ソースコード
390
件のレッスンと
322
件のレッスン動画が見つかりました。
#04 headerのマークアップを進めよう
実践!ポートフォリオサイトを模写しよう
全体の構成を確認したのち、headerのマークアップを進めていきます。
#05 便利なカラーコードを確認しよう
実践!ポートフォリオサイトを模写しよう
Web制作で便利な、黒から白のグラデーションを表すカラーコードを紹介していきます。
#06 要素のスタイルをリセットしよう
実践!ポートフォリオサイトを模写しよう
スタイリングがしやすいように、ブラウザがデフォルトでつけているスタイルをリセットしていきます。
#07 要素を中央揃えにしていこう
実践!ポートフォリオサイトを模写しよう
要素を中央揃えする際によく使われる、margin: 0 auto;とtext-align: center;の違いについて見ていきます。
#08 余白の考え方を確認しよう
実践!ポートフォリオサイトを模写しよう
ある領域内で要素が縦に並んでいる際に使える、余白の考え方について紹介していきます。
#09 mainのマークアップを進めよう
実践!ポートフォリオサイトを模写しよう
main内の構成を確認した後に、必要な要素を配置していきます。
#10 セレクターの選び方を確認しよう
実践!ポートフォリオサイトを模写しよう
どのセレクターを使ったら良いか迷った場合の考え方を紹介していきます。
#11 見出しのスタイリングを進めよう
実践!ポートフォリオサイトを模写しよう
main内で使われているh2、h3タグのスタイリングを進めていきます。
#12 中央揃えの考え方を確認しよう
実践!ポートフォリオサイトを模写しよう
margin: 0 auto;とtext-align: center;の違いを理解しつつ、要素を中央揃えにしていきます。
#13 main内の余白を設定しよう
実践!ポートフォリオサイトを模写しよう
以前に紹介した余白の考え方を使ってmain内のレイアウトを整えていきます。
前へ
44
45
46
47
48
49
50
51
52
53
54
次へ