使用する画像素材

この動画中で画像をダウンロードします。 ↓の画像素材のページを開いた状態で、まだダウンロードせずに動画を見て進めていきましょう。

動画内では「Slackに送った」と言っていますが、↑のリンクを開けば大丈夫です。

動画

https://youtu.be/mWAkVObGpMM

動画内で使っている便利な書き方

• div.top と打って、Tabキーを押すとクラス名がついたタグに変換される ↓ <div class="top"></div>
• /* */を一発で作成するコメントアウトのやり方
  • Macの場合
    • shiftキー と optionキー を押しながら、キーボードのAを押す
  • Windowsの場合
    • shiftキー と altキー を押しながら、キーボードのAを押す

ポイント

• paddingは要素の内側の余白、marginは要素の外側の余白を設定する
• paddingやmarginは、省略して書くことができる

参考

• marginとpaddingについてもう少し知りたい場合

  CSSのmarginとは？paddingとは？余白の指定方法まとめ

• marginやpaddingの省略した書き方についてもう少し知りたい場合

  CSSのプロパティのショートハンド11個まとめ！イラストを使ったチートシートで解説

5. ヘッダー作成（後編）

7. コンテンツ作成前半