エンジニアステップ

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

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

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

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

www.engineer-step.com

 

DAY3.『Progate HTML & CSS 中級編(3章まで)』

 

DAY3.『Progate HTML & CSS 中級編(3章まで)』では、HTML&CSSでレイアウト関連のことを学びました。 

 

課題自体は、大体40分くらいで完了しました。

しかし、わからない所(仕組み)が色々あったので、後から1時間ほど追加で勉強です。

 

【余談】Progate中級編からは有料です

ちなみに、Progate中級編からは有料です。

f:id:alpacajp:20190109203641p:plain

progate中級

Progate中級編からはお金がかかるようですね。

1000円払うのに躊躇する人もいるかも知れませんが、

  • 良質教材で効率的に学べる
  • 今の「ヤル気」を無駄にしない

というメリットを考えると、充分投資する価値があると思います。

 

「Progate HTML & CSS 中級編」の感想

Progate初級編に比べると、Progate中級編は、けっこう難易度が高いです。

初級編で覚えた知識が必要になりますが、忘れている人も多いはず。

 

例えば、URLリンクを貼る時は、<a href="...">でして、

画像を貼る時は、<img src="..">です。

このhrefとかsrcとか、紛らわしいですよね(ググりましょう)。

 

あとは、インラインとブロック要素。

これは、多分、初学者が1番挫折しそうなところですね。

 

下記のサルワカさんの記事が分かりやすいです。

» 参考:【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

» 参考:divとspanの違いは?使い分け方を初心者向けに解説

 

HTML学習メモ

HTML学習メモ!

 

headerタグ、footerタグは標準っぽい

HTML5から登場したheaderタグとfooterタグ。

これは現場ではよく使われている&各種ブラウザは対応済みっぽいですね。

 

ちなみに混乱しそうなのが、

  • <header>はタグ
  • <dvi class="header">は divがタグで、headerはクラス

です。

 

CSSでデザインを決める時、

  • <header>はドットが不要
  • <dvi class="header">はドットが必要

 

となります。

ここの概念は間違える人多そうです(私も間違えました)

 

<h1>タグを2回使うことあるのか?

SEO的な話になりますが、課題の中で「<h1>タグを2回使う」ことがありました。

これって実際の現場でもあるんでしょうか?

 

結論から言うと、基本は1回だけにしておくのがベターっぽいです。

※Google的には、複数回使っても良いという話はあります

More than one H1 on a page: good or bad? - YouTube

 

opacityは「不透明度」って意味

opacityは「不透明度」って意味です。

値が1だと「完全に不透明」=「透明にならない」ということ。

 

ちなみに、透明の英語は「transparent」です、こっちは聞き覚えあるかも。

 

CSSにおける4種類の色の表現方法

CSSにおける4種類の色の表現方法について

  1. #から始める 例:#000000)
  2. 色の名前を書く 例:white)
  3. rgb表記する 例: rgb(255,255,255)
  4. rgba表記する 例: rgba(255,255,255,0.5)

 

rbgaだけが透過度を指定できます。

最後の「a」は、alphaの「a」です。

画像関係の透過度情報を表すときに使う単語らしいです。

 

セレクタ:hoverは「擬似クラス」

セレクタ:hoverの書き方が初登場でした。

これは「擬似クラス」というものらしいです。

 

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

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

 

簡単にいうと、

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

みたいな感じ。

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

 

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

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

 

簡単にいうと、

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

みたいな。

先程の「りんごの色を赤くする」が基本的な状態。

で、擬似クラスを使うと、「腐った状態のりんごは茶色にしてね」という細かい指定ができるようになります。

 

擬似クラスに「hover」を使った時は、

「セレクタ(例:URLリンク)に、マウスが乗った状態(hover)になったら、~~してね」というのと同じです。

 

以上「DAY3.『Progate HTML & CSS 中級編(3章まで)』 #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

 

一昨日から、フリーランスになりたい人向けのブログも始めたので、暇があったら見てください~

» 参考:フリラン! | 複数収益で生きていくフリーランス向けブログ