プログラミング ワタリビト

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章から１9章　－メインの構成とレイアウト－

 

・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日目

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

RECOMMENDこちらの記事も人気です。