エンジニアステップ

初心者エンジニア(1年目~3年目くらい)のための技術ブログ

DAY4.『Progate HTML & CSS 中級編(7章まで)』 #30DAYSトライアル

DAY4.『Progate HTML & CSS 中級編(7章まで)』 #30DAYSトライアルです。

» 参考:【初心者からサイト制作で月5万円を稼ぐための30日間トライアル】まとめ

www.engineer-step.com

 

DAY4.『Progate HTML & CSS 中級編(7章まで)』

DAY4.『Progate HTML & CSS 中級編(最後まで)』では、引き続きレイアウトを学びました。

 

中級編の7章(最後)までやりました。

課題にかかった時間は、大体40分くらい(エンジニア未経験だと2時間位はかかるかも) 

DAY3の「中級編1章~3章」が、1番の難所だったかなあと思います。

 

 

「Progate HTML & CSS 中級編」全てを終えた感想

「Progate HTML & CSS 中級編」ではランディングページ(LP)を作りました。

 

学んだことはこの辺り。

  • 要素の位置の指定、重なり(position : absoluteの使い方)
  • 画面のヘッダーを固定する方法
  • ボタンを押した時のデザイン変更(セレクタ:activeの使い方)

 

個人的には、ボタンを押した時の動きを実装できたのが楽しかったです。

「ボタンを押した間だけ、場所をずらす」だけのシンプルな方法なのですが、それっぽくなりますもんね。

考えた人賢いです。

 

学習メモ(中級編の補足説明)

個人的な学習メモですが、中級編を終えた方には「ちょっと役立つ」と思うので、共有します。

やっていて私(アルパカ)が疑問に思ったところが中心です。

 

要素を横並びにしたときに、長さを%指定する時の注意点は?

要素を横並びにしたときに、長さを%指定する時の注意点は?

 

lessonクラスを
・左にfloatさせ、
・widthを25%
に指定してください

 

という問題をやったときに思いました。

4つの要素があって、それぞれ25%なら、合計100%です。

しかし、30%と指定して100%超えたらどうなるのかな?と思いました。

 

試してみた所「横並びに収まらず、4つ目の要素は下に行く」動きでした。

※そりゃそうか…

 

Widthの%指定をする時の注意点は?

Widthの%指定をする時の注意点あるかなー?と思って調べてみました。

 

要素の外側(padding)は含まれないっていうのがポイントのようですね。

 「width: 100%」と「width:auto」の違いは何かと気になりますよね。少し細かい話になりますが、違いは下図のようになります。

autoと100%の違い

 引用元:CSSのwidth(幅)とheight(高さ)の指定方法をマスターしよう

 

position:absoluteとは?

「absolute」は「絶対」という意味。

※外国人がよく「そのとおりだ!」って意味で「absolutely」と言うアレです

 

「position:absolute」と指定することで、親要素の左上の場所が基点となります。

 

親に絶対従わなきゃいけなくなる…的な覚え方ですね。

 

HTMLとCSSのクラス名でよく使うものまとめ(containerが頻出したので)

今回の中級編では、クラス名指定に「container」が頻出したので、HTMLとかCSSでよく使うクラス名なのかなー?と思って調べてみました。

結論から言うと、よく使うようですね。

 

よく使うクラス名一覧があったので、共有しておきます。

» 参考:CSSのクラス名を決めるときに使うリストをつくりました - Qiita

» 参考:HTMLとCSSクラスでよく使う命名について - Qiita

※エンジニア世界は無償のGIVEに満ちあふれていて、最高ですね。

 

border-bottomの指定方法について

border-bottomの指定方法について説明が無く「1px solid #eee」と指定されていたので調べてみました。

※初級編で扱っていた内容ですが、完全に忘れていたのでw

 

border-bottomプロパティは、下ボーダー(下線)のスタイル・太さ・色を指定する際に使用するものです。

  • 1px → 下線の長さが1px
  • solid → 下線が「1本線」 ※2本線とかもある
  • #eee → 色が淡いグレー

という指定方法でした。

 

z-indexのデフォルト値は?

z-index(ボックスの重なりの順序指定)のデフォルト値について調べてみました。

 

課題ではこんな風に指定されていました↓

<header>のz-indexを10に指定してください。

 

z-indexの基本情報は以下の通り

  • 値が大きいほど上になる画面の手前側(人間側)
  • 0が基準(デフォルト値)
  • 最小値:-2147483647
  • 最大値:2147483647

 

マイナスも指定できるようです(何も指定していないものよりも後ろになる)

あと、課題では、「10」という大きな数字が出てきましたが、これは実際の開発のときにはルールがあると思います。

※個人個人が100とか10000とか勝手に使っていたら困るので

 

z-indexは何故「z」なの?

z-indexは何故「z」なのか?

どこにも書いていないですが、「x y 平面」に対する奥行き「z」っぽいですね。

数学的です。

 

擬似クラス復習(セレクタ:active)

擬似クラスがまた出てきました。

 

課題の内容↓

セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができます。

 

「セレクタ:active」という指定方法は、ユーザーの操作で要素がアクティブになった際のスタイルのようです。

 

擬似クラスの復習はこちら↓

セレクタ{ プロパティ:バリュー }

というのが基本的なCSSの書き方です。

 

簡単にいうと、

  • セレクタ → 対象物(例:りんご)
  • プロパティ → 属性(例:色)
  • バリュー → 値(例:赤い)

みたいな感じ。

「りんごの色を赤くする」というデザインです。

 

で、擬似クラスっていうのは、セレクタの条件分けされた状態のことですね。

セレクタ:擬似クラス{ プロパティ:バリュー }

 

簡単にいうと、

  • セレクタ → 対象物(例:りんご)
  • 擬似クラス → 状態(例:腐った)
  • プロパティ → 属性(例:色)
  • バリュー → 値(例:茶色)

みたいな。

先程の「りんごの色を赤くする」とは別に、

「腐った状態のりんごは茶色にしてね」って感じ。

引用元:DAY3.『Progate HTML & CSS 中級編(3章まで)』 #30DAYSトライアル - エンジニアステップ

 

【番外編】ランディングページのH2タグとH3タグに入れるべきものは何?

HTML&CSS学習からそれてしまう、SEO関連の話。

 

ランディングページのH2タグとH3タグに入れるべきものは何なのだろう?

と気になりました。

 

課題の中で、

<h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
<h3>Let's learn to code, learn to be creative!</h3>

という指定がありました。

 

これって、SEO的に正しいのかな?…とちょっと疑問です。

そもそもランディングページでSEO対策をどこまでするのかも分かりません。

実際のサイト制作のときに、具体例で持って考えたほうが良いかもです。

 

以上「DAY4.『Progate HTML & CSS 中級編(7章まで)』 #30DAYSトライアル」というお話でした。

結構できることが増えてきましたね、楽しみつつ、がんばりましょう~

 【関連記事】

  1. DAY1.『Progate HTML & CSS 初級編(4章まで)』 #30DAYSトライアル 
  2. DAY2.『Progate HTML & CSS 初級編(7章まで)』 #30DAYSトライアル
  3. DAY3.『Progate HTML & CSS 中級編(3章まで)』 #30DAYSトライアル
  4. DAY4.『Progate HTML & CSS 中級編(7章まで)』 #30DAYSトライアル
  5. DAY5.『Progate HTML & CSS 上級編』 #30DAYSトライアル
  6. DAY6. 『Progate HTML & CSS 初級・中級道場コース』 #30DAYSトライアル
  7. DAY7. 『Progate HTML & CSS 上級道場コース』 #30DAYSトライアル

www.engineer-step.com