デイトラ1期 DAY3『Progate HTML & CSS 中級編(3章まで)』【30DAYSトライアル1st】

デイトラ30DAYSトライアルの感想・体験

こんにちは、タキ(@engineeraru)です。

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

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

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

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

 

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

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

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トライアル」というお話でした。

明日もがんばりましょ~