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

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

30daysトライアル　Day4

 

 

解決します

・デイトラ4日目の内容が知りたい

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

 

こんにちは、ワタリビト（wataribito）です。

30daysトライアルも本日で4日目となりましたね。

ここから難しく、複雑になっていきますが、今はまだProgateの指示どうりに進めていけば問題なし。

最も難しくなるのは、これから訪れる「道場編」です?

 

詳細は道場編に突入したときにお話ししますが、今は難関を突破するためにひたすら基礎の勉強ですね！

 

Day3の記事はこちら?

30daysトライアル3日目

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

09/11/2019

Day1とDay2の記事はこちら?

30daysトライアル　day1-da2

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

09/10/2019

 

 




 

読みたい場所へジャンプ

Day4の課題内容

 

4日目の課題内容は、DAY4.『Progate HTML & CSS 中級編（最後まで）』です。

（公式サイトの表示とは違っていますね?）

本日も学習量が増えますが、時間を確保しつつ進めましょう。

 

⁂有料ゾーンでの学習なので、progateの画像はあまり使えなくなります?⁂

 

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

Day4の学習内容

・ちょっとリッチなWebページの完成

・多彩なCSSを駆使して動きがあるWebページをつくる

 

中級編を終えると、ちょっとリッチなWebページがつくれてしまいます。

この中級編ではたくさんお世話になるCSSがたくさん登場するので、何度も復習したりメモを取って確実に身につけましょう?

（Progateはこちらから）

 

Day4の要点まとめ　ートップ部分をつくろう（Day3の続き）ー

 

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

この部分はDay3からの続きなので、中級編の最初から通しでやっても良さそうですね。

 

4章　透明度と文字の間隔を調整する

 

・透明度は、opacityで調整できる（値は0.0～1.0）

（透明度は画像にも適用できる）

・文字の間隔は、letter-spacingで調整する（値はpx）

透明度と文字の間隔を指定する

透明度と文字の間隔を指定する

 

5章から6章　ボタンをつくる・レイアウトを整える

 

・画像などの角を丸めるには、border-radius

・カーソルが乗った時に色や透明度を変える＝hover

・margin:0 autoとtextalign:centerの違いを理解する

 

7章　アイコンを使おう

 

・アイコンはFont Awesameから利用する。

・head内にFont AwesameのCSS読み込みの記述を書く。

・HTMLの記述は<span class=”fa ○○”>この形にする。

 

Day4の要点まとめ　－ヘッダーのレイアウトをつくろうー

 

ここからはヘッダーのレイアウトを整えていきます。

ヘッダーはボックスモデルの概念が顕著に表れている部分です。

ボックスモデルを理解できているかで制作のしやすさに大きな差が出ますよ。

（ボックスモデルについてはこちらをどうぞ）

 

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

 

・ほぼ全てのWebページはレイアウトはボックスデザインをもとに構築されている

・文字や画像の透明度を設定するには、opacityをつかう。

・文字や画像の色を設定するのは、rgbaをつかう。

・透過する場合はopacityよりrgbaのほうが細かく設定できる。

補足

opacityは要素全体に影響してしまうが、rgbaは特定の色のみに影響する

 

9章から10章　要素を変化させるCSSたち

 

・transition＝アニメーションをつけられる。hoverと組み合わせてつかう。

・line-height＝行間の高さをしていする。

 




 

Day4要点のまとめ　－レッスン部分のレイアウト－

 

ページの中身の部分をつくっていきます。

これまでに習った横並びや画像を挿入するほかに、新しく登場するCSSがたくさんあるので、自分なりにまとめておくと理解が深まりますね?

 

11章から13章　レッスン一覧のレイアウト

 

・フォントを太文字にする＝font-weight:bold;（通常はfont-weight:normal;）

・親要素の大きさに早退した大きさを指定するには%をつかう（例　width:50%;）

・display:absolut;＝画面左上を基準にする。

・display:relative;＝その要素自身の左上を基準にする。

・上記の2つを組み合わせると、好きな場所に要素同士を重ねられる。

 

Day4要点のまとめ　－メッセージ部分をつくる－

 

これらの章では、アニメーションで変化するボタンをつくることが肝です。

アニメーションはいくつかのCSSを組み合わせてつくりますが、Prpgateでは1つ1つ確認しながら作れるので安心ですね。

これらもWeb制作でよくつかうテクニックなので、しっかり覚えましょう?

 

14章から16章　立体的なボタンをつくろう

 

・四角などの簡単な図形は、box-shadowで好きな角度と色の影をつけられる。

・実はCSSでカーソルの表示も変えられる（I、?、↖など）

・セレクタ:activeを設定すると、その要素が有効にの間、CSSが発動される（アニメーションなど）

・position:absoluet;、position:relative;、box-shadow:none;を組み合わせると、疑似的なアニメーションがついたボタンがつくれる

 




 

Day4要点のまとめ　－フッターをつくろう－

 

ヘッダーのつくりかたと一緒なので割愛。

 

Day4要点のまとめ　－ヘッダーを固定＆奥行きの設定－

 

ここでは画面をスクロールしてもヘッダーが画面上部に残ったままにする設定と、要素同士の干渉を防ぐ方法を勉強します。

このブログのヘッダーもスクロール時に固定されるように設定しています。

 

ヘッダーが残ると、読者に他のページも読んでもらいやすいですね?

 

17章　ヘッダーを固定しよう

 

・position:fixed;をつかうと、スクロールしても要素がその場で固定される。

・要素同士の干渉を防ぐには、Z-indexで奥行きの順番を決めてあげる。

（z-indexはレイヤー構造を構築できる）

 

 

30daysトライアル　Day4

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

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