Progate-HTML & CSS中級編を学んでみた感想と忘備録

公開日:2020年4月13日
     
 プログラミング,フリーランス,30daysトライアル,デイトラ,アイキャッチ画像  
   


こんにちは。

ごりぱちです。

2020年3月に世界一周から帰国したはいいものの、コロナウイルスの影響で、

「自主的に自宅待機+仕事・住居探しに時間がかかる」ということで時間を持て余したので、

ProgateでHTML & CSSを学んでみました!

この記事では、プログラミング初心者の僕が、Progateを通じて学んだことを忘備録としてまとめています。

"これからプログラミングを学ぼうと考えている方"、"Progateを通じてどんな変化があるのか気になる方"は、

是非とも記事を読んでみてください。

では、レッツゴー!!!

*ちなみに僕の作業環境はMac Book Airです。

⬇︎Progate HTML& CSSの初級編について知りたい方はこちらから。

⬇︎Progate HTMl & CSSの上級編について知りたい方はこちらから。

-スポンサーリンク-

Progate HTML & CSS中級編で学ぶこと

"Progate HTML & CSS 中級編"では、簡単なサイトを作れるような知見を得ることができます。

▶︎ProgteのHPはこちら!

▶︎Progate HTML & CSS 中級編で学ぶこと一覧

"Progate HTML & CSS 中級編"からは、Progateの"有料会員"にならないと利用ができません!

Progateの有料会員は、月々980円(税抜き)です。

ランチ1回分の値段で、めちゃんこ豊富なコンテンツにアクセスできるので、有料会員となることをオススメします!

⬇︎Progateの使いやすさについてはこちらから。

-スポンサーリンク-

Progate HTML & CSS中級編の忘備録

▶︎Progate HTML & CSS 中級編で学ぶこと一覧

ここでは、僕が実際に中級編の中で理解に詰まったところ、それを解決するために参考にした情報をセットにして紹介していきます。

サルワカさんのサイトが分かりやすくて、本当に助かりました。。。

class名の付け方

Progateを使っていると、やたらと<div class="container"></div>が使われていて、

「クラスの名前って適当でいいんじゃないの?」と思って、実際に適当に名前をつけていた僕ですが、

よくよく調べると、業界内でよく使われるクラス名があるらしいので、今の内から身に付けることにしました。

▶︎HTMLとCSSクラスでよく使う命名について

要素の中央寄りの設定

要素を中央に配置する際、文章・画像・要素によって、それぞれ適切な中央寄りのための設定が違うので、大変混乱しました。

marginだけでなく、inline-blockを用いた方法もあるので、下記の記事を目を皿のようにして読みました。

▶︎CSSで中央寄せする9つの方法(縦・横にセンタリング)

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タグ>はリンクを作成するときに使用します。文字リンク・画像リンクなど、種類によって記載方法が少し変わります。

▶︎HTMLのリンク<aタグ>の書き方を初心者向けに解説

Progateの中級編では、ボックス要素全体をリンクのクリック範囲として指定します。

少しややこしかったので、下記の記事を読んでみてください。

▶︎【HTML】aタグで作ったリンクのクリック範囲を親要素のサイズに広げる方法【CSS】

要素のposition

Progate中級編で、最も理解しづらかったのが、要素のpositionです。

positionとは、指定した要素の位置を決めるものです。

position:absolute;やposition:relative;を用いることで、「どこを基準にして、要素の位置を決めるのか?」ということを指定することができます。

より詳しく知りたい方は、下記の記事を読んでみてください。

▶︎CSSのpositionを総まとめ!absoluteやfixedの使い方は?

z-index

z-indexとは、要素の重なる順番を指定するものです。

z-indexの数字が大きい要素ほど、上層に表示されます。

基本的には、要素が重なり合っている際に使用するものです。

▶︎z-indexの使い方:CSSで重なり順を指定する

-スポンサーリンク-

Progate HTMl & CSS中級編のまとめ

めっちゃ疲れました。。。

"Progate HTML & CSS 初級編"と比較すると、理解しづらいことが増えたので、

同じ内容を2-3周して、理解度を深めるようにしました。

ただ、"Progate HTML & CSS 中級編"では、簡易的なwebページを1枚作ることができるので、

サイト制作において必要なことが少しづつ分かってくるので、少しづつ楽しさも増してきます。

では、今回はここまで!

これからも、Progateで学んだこと、気になったところをまとめていきます。

プログラミング学習に興味を持っている人、Progateをやってみようと考えている方へ、少しでも参考になると嬉しいです。

⬇︎Progate HTML& CSSの初級編について知りたい方はこちらから。

⬇︎Progate HTMl & CSSの上級編について知りたい方はこちらから。

最後まで読んでいただき本当にありがとうございました。

また次回お会いしましょう!

-スポンサーリンク-
-スポンサーリンク-

プログラミング,フリーランス,30daysトライアル,デイトラ,アイキャッチ画像Progate-HTML & CSS初級編を学んでみた感想と忘備録前のページ

Progate-HTML & CSS上級編を学んでみた感想と忘備録次のページプログラミング,フリーランス,30daysトライアル,デイトラ,アイキャッチ画像

Amazonのお得なセールはコチラ!

夫婦で世界一周 -旅の記録-

youtube,世界一周,夫婦,海外旅行,旅

コロナにも対応!-オススメ海外旅行保険-

海外旅行保険,safety wing

旅の英語はこれでOK!無料で会員登録!

夫婦で世界一周-出国前の準備編-

世界一周,夫婦,アイキャッチ,準備,費用,お金

夫婦で世界一周-帰国後の手続き編-

世界一周,手続き,帰国

カテゴリー

アーカイブ

PAGE TOP
人生を変える本気の180日間!プログラマーへの第一歩。
プログラマー育成スクールの無料面談はコチラ
人生を変える本気の180日間!プログラマーへの第一歩。
プログラマー育成スクールの無料面談はコチラ