まずはじめに
未来電子テクノロジーでインターンをしている＠reies1204です。
まだProgeteを触り始めて1週間と経っていない超初心者ですが、その中で学んだことを少しでもまとめてみようと思います。
ただし、プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。
現状
Progateの学習も中級編が終わり、道場編に入りましたが、早速つまづいています。
最初は何から書けばいいのかわからないといった状態です。
でも逆に何から書けばいいのかを考えたときに、自分はレイアウトについて理解が甘かったなと思いました。
そこで今回は自分のレイアウトの知識を整理してみようと思います。
あくまで今回は初級編でのレイアウトに関してのみまとめます。
レイアウトの作り方
まずは<html>要素の中に<head>要素と<body>要素を入れます。
<head>要素の中には文字コード、ページタイトル、CSSの読み込みを書きます。
<body>要素はヘッダー（header)、メイン（main)、フッター（footer）を<div>要素で
それぞれ分割します。
ヘッダーの枠組み
ヘッダー部分は「header-logo」と「header-list」の二つの<div>要素で構成します。
メインの枠組み
メイン部分は「copy-container」、「contents」、「contact-form」の三つの<div>要素で構成します。
フッターの枠組み
フッター部分は「footer-logo」と「footer-list」の二つの<div>要素で構成します。
以上実際に書いてみると
<html>
<head>
1,文字コード
2,ページタイトル
3,CSSの読み込み
</head>
<body>
<div class="header">
<div class="header-logo">あいうえお</div>
<div class="header-list"> </div>
</div>
<div class="main">
<div class="copy-container"> </div>
<div class="contents"> </div>
<div class="contact-form"> </div>
</div>
<div class="footer">
<div class="footer-logo">かきくけこ</div>
<div class="footer-list"> </div>
</div>
</body>
</html>
大まかにこんな感じになります。
まとめ
自力でやってみるということに対して、思った以上になにもできない部分に割と萎えますが、一方で楽しさも感じているので頑張って続けていこうと思います。
Quiitaの書き方もまだまだ下手なので要勉強ですね。