【超絶入門】html/css記述法 パート2
この記事はパート2です
前回の記事はこちら↓
それでは実際にhtmlとcssを書いていきましょう！😂😁
まずはhtmlからです。
ちなみにhtmlとは骨組みのことです。そしてcssでそれを華やかにします。
ということで行きましょう！今回は以下のパートでお伝えします！！！！😁😁😎😃😘
第一章 レイアウトの構造を理解しよう
第二章 実際に書こう！
まずは第一章から！
第一章 レイアウトの構造を理解しよう
コードを書く前に作成物の構造を理解すれば超簡単にホームページは作れます。実際に今回の作成物をみてどういう構造で作られているのか見てみましょう！
これができればhtmlは楽勝です。😍😍
上の写真が完成物ですがこれは以下のようなレイアウト構造になっています😆
まず大枠（div)があってその中に、見出し（h1）、文章（p）、 写真（img)、ボタン(button)が配置されています
この div, h1, p, img, これはhtmlを記述するときに使う【タグ】というものでこれを使ってhtmlは書いていきます！
😍😍😘😍😎第一章 レイアウトの構造を理解しよう 完了！！次の章へ行こう😍😎😍😘😘😍😍
第二章 実際に書こう！
この章は次のパートでお送りします
1.divタグを書こう！😀
2.h1タグを書こう！😁
3.pタグを書こう！😂
4.imgタグを書こう！🤣
5.buttonタグを書こう！😍
では始めましょう！
1.divタグを書こう！😀
vscodeを開いてbodyタグの中に書いていきます
まず大枠がありますね。これはdivというタグで表現しましょう
<div></div>
以下の写真のように書きましょう
これで大枠の部分は完成しました。
divタグとは【なんでも使える万能タグ】と覚えておきましょう！
2.h1タグを書こう！😁
見出しに使うタグはh1です！
ここでレイアウトをお思い出してください。😋見出し(h1)は、大枠(div)の中にありましたね。
ですからh1タグもdivタグの中に書きます。以下のように書いてください
<div>
<h1>見出し</h1>
</div>
これで完成物のレイアウトと同じように表現できています。
一旦ここで実際にどのようにページに反映されているのか見てみましょう！😋
見る方法は以下の写真のように画面右下のGo Liveを押してください！
すると画面が切り替わり現在の状況が表示されます
見出しとだけ表示されていますが文字が大きいと思いませんか？
そうです。それがh1タグの効果ですh1タグを使えばそのタグとタグの間に書いた文字が自動的に大きくなります。このようにタグにはそれぞれに役割があるのです。
それでは試しに、見出し という文字の色を変えてみましょう。それにはcssを使います。
・vscode左側からstyle.scssを選択してください
・style.scssの画面で
h1 {
color: blue;
}
と書いてください。これがcssの書き方です。
ここではhtmlタグのh1を選択してその文字の色を青色にするという記述をしています。
・書けたら画面左下のWatch Sasassを押してください！※絶対 押さなければcssが反映されません！
そしてもう一度作品を見てください。色が変わっていますね
それではscssの記述を全部消して次のパートに行きましょう！！
3.pタグを書こう！😂
以下のようにpタグを追加してください
<div>
<h1>見出し</h1>
<p>
ここに文章が入りますがお好きな文章を入れてください。これはあくまでもテストですの で、お好みで大丈夫ですよ
</p>
</div>
pタグもh1タグと同様に大枠（div)の中にあります。のでdivタグの中に書きます。divタグの中に入っているのでh1タグやpタグ、この後書いていくimgタグやbuttonタグはdivタグと親子関係があるといえます。またh1タグの中に入っている要素同士は並列関係といいます。
それでは今回はここまで次回はパート4の4.imgタグを書こう！🤣から始めます！
また次回！！！！！
Discussion