30daysトライアルの要点まとめ Day3

30daysトライアル3日目

 

解決します

・3日目の内容が知りたい

・ポイントだけを簡潔に知りたい

 

こんにちは、ワタリビト(wataribito)です。

30daysトライアルも本日で3日目となりましたが、引き続き進めていきます。

Day1とDay2の記事はこちら?

30daysトライアル day1-da2

30Daysトライアルの要点のまとめ Day1からDay2まで

09/10/2019

Day4の記事はこちら?

30daysトライアル Day4

30daysトライアル要点まとめ Day4

09/12/2019

 

 

Day3の課題内容

 

3日目の課題内容はDAY3.『Progate HTML & CSS 中級編(3章まで)』です。

きのうまでとは学習量がかなり増えます。

とはいえ、難しい部分はまだないので、時間を確保しつつ進めましょう。

 

具体的な内容は以下の通り。

Day3の学習内容

・CSSで全体のレイアウトを調整

・問い合わせフォーム実装

・Webページ制作の下準備から骨組みの作成まで

 

今日までの学習でWebページっぽいものができます。

たった3日でここまで作れるのはなかなか凄いことですね。

Progateもいよいよ有料会員の登録が必要ですが、月980円でWeb制作手順が学べて、30日で案件が取れるかもしれないなら安い出費ですよね?

(Progateはこちらから)

 

 

Day3の要点まとめ ーWebページ制作の下準備ー

 

Day3で習う学習ポイントをまとめました。

本日は学習量が多いので、簡潔にまとめています。

8章から12章までは、いわばWebページ制作のための下準備です。

 

8章 背景色と高さと幅の調整

 

・背景色は、background-colorのプロパティをつかう

・高さはheight、幅はwidthで単位はpx(height:20px;など)

高さと幅、背景色の調整

高さと幅、背景色の調整

9章 タグに名前を付ける

 

・特定の部分の色や大きさを調整するために名前を付ける。

・決まりはないけど、後で分からなくならないような名前を付ける。

・HTMLとCSSの両方に名前を付けるが、つけ方が違うので注意。

HTMLで名前を付けるにはclass=""をつかう

HTMLで名前を付けるには、class=””をつかう

CSSはHTMLでつけた名前の先頭に.をつける

CSSはHTMLでつけた名前の先頭に.をつける

 

10章~11章 HTML全体の構造について

 

Webページはある程度きまった定形文が使われている

・定形文自体はコピペで大丈夫

・定形文はHTMLに書く

・CSSのリンクは場合によって違うので注意

・文字コードとCSS読み込み設定は忘れずに書くこと

Webページをつくるときの定形文

これがWebページをつくるときの最低限の定形文

 

12章 全体のレイアウトについて

 

・Webページはボックスモデルという概念で構成されている(詳しくはここを参照)

・各パーツごとに分割してタグに名前をつけ、組み立てる。

・Webページの中身はbodyタグの中に書く。

・パーツごとに区切るには<div>タグをつかい、名前をつける。

・CSSで調整を加える。

それぞれのパーツごとに名前をつけて区切っている

それぞれのパーツごとに名前をつけて区切る

 

<div>をつかって3つの区切りをつくった
<div>をつかって3つの区切りをつくった

 

 

区切りをつけたHTMLに対してCSSで調整を加えた

区切りをつけたHTMLに対してCSSで調整を加えた

 




 

Day3の要点まとめ -ヘッダーをつくるー

 

ここから先ほどつくった下準備を利用してページに必要な部分を実装していきます。

 

13章から15章 ヘッダー作成とレイアウトについて

 

・ヘッダーはリスト<ul><li>をつかう。

・リストを横並びにするには、floatをつかう。

・余白の調整はpaddingかmarginをつかう(詳しくは21章を参照)

・余白を調整しないと見た目がひどくなる(下記の画像を参照)

ヘッダー部分をリスト化

ヘッダー部分をリスト化

 

リスト化したヘッダーに横並び、余白、文字サイズを指定

リスト化したヘッダーに横並び、余白、文字サイズを指定

 

余白を調整しないとこなる?

余白を調整しないとこうなる?

 

16章から17章 フッターの構造とレイアウト

 

・上記のヘッダーのレイアウトとほとんど同じ。

・リストの横並びを指定するには、liの部分も指定しないと変更されない。

・右に横並びするときは、float:right;

あゆ要素の特定の部分だけ変更するやり方

ある要素の特定の部分だけ変更するやり方

 

Day3の要点まとめ ーメインの部分をつくるー

 

ヘッダーとフッターが完成したので、次は肝となるページの中身の部分をつくります。

ここでは3つの区切りをつけながら構成していきます。

 

18章から19章 -メインの構成とレイアウト-

 

・13章から17章までとやり方はほぼ同じ。

・テキストの一部分だけCSSを設定するには、<span>タグをつかう。

・ブロック要素とインライン要素の違いを理解する。

・コンテンツの枠組みもリスト+float:left;でつくる。

ブロックとインラインの違い

ブロックとインラインの違い

 

完成させる中身

完成させる中身

 

枠組みが完成(画像URLを入れる前)

HTMLの枠組みが完成(画像URLを入れる前)

 




 

余白と輪郭線をつける

 

ここまでくると、Webページっぽいものがだいぶできてきましたね。

今度は中身の部分を整えて見やすくしていきます。

 

20章から21章 -ボーダーとpadding、margin-

 

・テキストに下線を引いたり囲みをつけるには、boarderをつかう。

・任意の場所で線を表示するには、HTMLで名前(クラス)をつけてCSSで調整。

・paddingとmarginの違いを理解する(下記の画像を参照)

・paddingやmarginは省略形で記述できる。

paddingとmarginの違い

paddingとmarginの違い

 

paddingとmarginの省略の仕方

paddingとmarginの省略の仕方

 

問い合わせフォームをつくる

 

簡単なやり方で問い合わせフォームをつくります。

⁂アドレスを設定していないので、実際には機能しません。

 

22章から23章 -問い合わせフォームをつくろう-

 

・1行だけの入力を受け取る<input>(終了タグがいらない!)

・複数行の入力を受け取る<textarea>

・<input>で簡易的な送信ボタンもつくれる。

・CSSでタグをコンマで区切れば同じCSSが適用される(画像を参照)

<input>と<textarea>

inputとtextareaを1つのCSSで同時に指定できる

 

このような問い合わせフォームがつくれる

このような問い合わせフォームがつくれる

 

Day3の要点まとめ ー中級編に突入ー

 

前回で初級編が終わり、ここから中級編に突入です。

中級編では、いままでつくってきたWebページっぽいもののを改良し、見た目を豪華にしたり、便利な機能をもたせます。

初級編で書いたコードは引き継がれないので、また1から作り上げていきましょう。

 

1章から3章 -レイアウトの設計とトップ部分の作成-

 

・初級編より細かく区切りをつけていく

・背景画像を設定するには、background-imageをつかう。

・小さな画像でもCSSで領域いっぱいまで拡大できる(background-size:cover;と入力する)

・画像やクラス全体を中央寄せするには、width指定とmarginの左右にautoをくっつける(下記の画像を参照)

今回つくるトップ部分の構造

今回つくるトップ部分の構造

 

中央寄せに必要な記述と図解

中央寄せに必要な記述と図解

 

 

30daysトライアル3日目

少しでもおもしろいと思ったらシェアお願いします?