こんにちは。
ごりぱちです。
2020年3月に世界一周から帰国したはいいものの、コロナウイルスの影響で、
「自主的に自宅待機＋仕事・住居探しに時間がかかる」ということで時間を持て余したので、
ProgateでHTML & CSSを学んでみました！
この記事では、プログラミング初心者の僕が、Progateを通じて学んだことを忘備録としてまとめています。
"これからプログラミングを学ぼうと考えている方"、"Progateを通じてどんな変化があるのか気になる方"は、
是非とも記事を読んでみてください。
では、レッツゴー！！！
＊ちなみに僕の作業環境はMac Book Airです。
⬇︎Progate HTML& CSSの初級編について知りたい方はこちらから。
⬇︎Progate HTMl & CSSの上級編について知りたい方はこちらから。
Progate HTML & CSS中級編で学ぶこと
"Progate HTML & CSS 中級編"では、簡単なサイトを作れるような知見を得ることができます。
▶︎Progate HTML & CSS 中級編で学ぶこと一覧
"Progate HTML & CSS 中級編"からは、Progateの"有料会員"にならないと利用ができません！
Progateの有料会員は、月々980円(税抜き)です。
ランチ1回分の値段で、めちゃんこ豊富なコンテンツにアクセスできるので、有料会員となることをオススメします！
⬇︎Progateの使いやすさについてはこちらから。
Progate HTML & CSS中級編の忘備録
▶︎Progate HTML & CSS 中級編で学ぶこと一覧
ここでは、僕が実際に中級編の中で理解に詰まったところ、それを解決するために参考にした情報をセットにして紹介していきます。
＊サルワカさんのサイトが分かりやすくて、本当に助かりました。。。
class名の付け方
Progateを使っていると、やたらと<div class="container"></div>が使われていて、
「クラスの名前って適当でいいんじゃないの？」と思って、実際に適当に名前をつけていた僕ですが、
よくよく調べると、業界内でよく使われるクラス名があるらしいので、今の内から身に付けることにしました。
要素の中央寄りの設定
要素を中央に配置する際、文章・画像・要素によって、それぞれ適切な中央寄りのための設定が違うので、大変混乱しました。
marginだけでなく、inline-blockを用いた方法もあるので、下記の記事を目を皿のようにして読みました。
display要素の使い方
displayとは、要素の表示形式を決めるものです。
要素を重ねる際に必要になるdisplay要素の使い方ですが、まあ混乱します。
僕は「inline-blockは万能だから、基本使うもの」と勝手に覚えましたが、
もちろん状況によって使い方を変えるべきなので、display要素に関してはよく復習しましょう。
▶︎【CSS】displayの使い方を総まとめ！inlineやblockの違いは？
Font Awesome
Font Awesomeとは、Webアイコンフォントを使用することができるサービスです。
▶︎アイコンデザインをWebフォントで表現出来る「アイコンフォント」の基本知識を解説
Font Awesomeは、なにやら気付いたらProgate内で使われていたので、初めはスルーしていたのですが、
調べれば調べるほど、使い道が幅広かったので、使い方を調べてみました。
▶︎【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう
opacityとrgba
画像を透明にするopacity、文字を透明にするrgbaという使い分けを覚える必要があります。
▶︎【CSS】opacityで画像や文字などを透過させる方法
aタブのリンクを親要素込みで
<aタグ>はリンクを作成するときに使用します。文字リンク・画像リンクなど、種類によって記載方法が少し変わります。
Progateの中級編では、ボックス要素全体をリンクのクリック範囲として指定します。
少しややこしかったので、下記の記事を読んでみてください。
▶︎【HTML】aタグで作ったリンクのクリック範囲を親要素のサイズに広げる方法【CSS】
要素のposition
Progate中級編で、最も理解しづらかったのが、要素のpositionです。
positionとは、指定した要素の位置を決めるものです。
position:absolute;やposition:relative;を用いることで、「どこを基準にして、要素の位置を決めるのか？」ということを指定することができます。
より詳しく知りたい方は、下記の記事を読んでみてください。
▶︎CSSのpositionを総まとめ！absoluteやfixedの使い方は？
z-index
z-indexとは、要素の重なる順番を指定するものです。
z-indexの数字が大きい要素ほど、上層に表示されます。
基本的には、要素が重なり合っている際に使用するものです。
Progate HTMl & CSS中級編のまとめ
めっちゃ疲れました。。。
"Progate HTML & CSS 初級編"と比較すると、理解しづらいことが増えたので、
同じ内容を2-3周して、理解度を深めるようにしました。
ただ、"Progate HTML & CSS 中級編"では、簡易的なwebページを1枚作ることができるので、
サイト制作において必要なことが少しづつ分かってくるので、少しづつ楽しさも増してきます。
では、今回はここまで！
これからも、Progateで学んだこと、気になったところをまとめていきます。
プログラミング学習に興味を持っている人、Progateをやってみようと考えている方へ、少しでも参考になると嬉しいです。
⬇︎Progate HTML& CSSの初級編について知りたい方はこちらから。
⬇︎Progate HTMl & CSSの上級編について知りたい方はこちらから。
最後まで読んでいただき本当にありがとうございました。
また次回お会いしましょう！
[email-subscribers-form id="1"]
