【30DAYSトライアル1st】デイトラDAY3 & DAY4の忘備録-ProgateのHTML & CSS中級編

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


こんにちは。

ごりぱちです。(@3Bgoripachi)

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

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

旅の最中から気になっていた「30DAYSトライアル(デイトラ)」に挑戦しています。

▶︎30DAYSトライアルの概要はこちらから!

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

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

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

では、レッツゴー!!!

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

 

⬇︎30DAYSトライアルのDAY1 & DAY2について知りたい方はこちらから。

 

⬇︎30DAYSトライアルのDAY5について知りたい方はこちらから。

デイトラDAY3 & DAY4で学ぶこと

僕が初めに実施しているのは、30DAYSトライアル1st【コーディング基礎学習〜環境設定編】です。

デイトラDAY3 & DAY4では、"Progate HTML & CSS 中級編"を学びます。

▶︎ProgteのHPはこちら!

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

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

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

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

*もし、DAY1 & DAY2で、「ちょっとやりたくないな。。。」と思ったら、無理して続けることはありません。

 

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

デイトラDAY3 & DAY4の忘備録

デイトラDAY3 & DAY4では、"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で重なり順を指定する

デイトラDAY3 & DAY4のまとめ

デイトラDAY3 & DAY4は、割と疲れました。。。

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

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

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

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

 

では、今回はここまで!

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

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

 

⬇︎30DAYSトライアルのDAY1 & DAY2について知りたい方はこちらから。

 

⬇︎30DAYSトライアルのDAY5について知りたい方はこちらから。

 

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

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

世界一周を考えている方必見!

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

世界一周YouTube始めました!

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

カテゴリー

アーカイブ

PAGE TOP