こんにちは！ナガタロックです！

このブログでは2020年6月より

RaiseTech 〜WordPress副業コース〜

を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。

今回で7回目！

講義も中盤戦ですが

自分としてはまだまだ追いついていない感じなので

ここからギアを上げないと！

今回は「CSSによるフロントエンドの実装」です

HTML&CSSの講義も今回で一区切りって感じです！

リセットCSS

リセットCSSとは・・・

ブラウザ毎（Google Chrome、FireFox、Safari等々）で

CSSの解釈が異なる場合がある。

Firefoxではうまく表示出来ても、Chromeでは正しく表示されない場合がある

そのブラウザ間の差異が出ないようにするための処理が

リセットCSS。

基本的に最初にやっておく作業！

主なリセットCSS

Reset CSS…老舗のリセットCSS。すべての要素がリセットされるので、使用する場合すべて再定義が必要なので注意！

Normalize CSS…デフォルトの状態でも一定の見た目が担保される。

ress…Normalize CSSより使いやすくカスタムされている。一般的によく使われるリセットCSS。

a modern css rest…ressに近いが、現代的なリセットCSS。<h5><h6>はリセットされないので注意！

セレクタ

セレクタとは＝CSSで装飾する部分のこと

*セレクタ…*{　}　ですべての要素に対して指定する

タグセレクタ…<h1><p>等のタグを　h1　p 等で指定する

IDセレクタ…ID=”〇〇”　で定義して　#○○　で指定する

classセレクタ…class=”〇〇”　で定義して　.〇〇　で指定する

セレクタの指定の種類

子孫セレクタ…　(A B )　でA要素の中のBまで指定する

子セレクタ…　(A > B )　で子要素のBのみ指定する。

隣接セレクタ…　( A + B )　でAの後のBのみ指定する。

複数セレクタ…　( A,B )　でAもBも指定する。

その他にもたくさんの種類のセレクタの指定方法がある。

サルワカさんのサイト

が参考になるとのこと！

ナガタロック）セレクタの指定の仕方は知らないと使えないので、

ポピュラーなものだけでもしっかり使い慣れておこう！

疑似要素と疑似クラス

疑似要素とは＝要素の一部に対してスタイルを適用すること

主な疑似要素

::before　要素の直前

::after　要素の直後

::first-letter　要素の一文字目

::first-line　要素の一行目

::selection　要素を選択した文章

例）h1::before{ } 　※セレクタの後に記入する

疑似クラス＝指定要素が特定の状態に対しスタイルを適用

主な疑似クラス

:link　リンクが貼ってある状態の時

:visited　リンク先が訪問済みの時

:hover　マウスオーバーした時

:active　クリックした時

:nth-child　子要素

:first-child　最初の子要素を指定

:last-child　最後の子要素を指定

例）a:link{ } 　※セレクタの後に記入する。

下に行けば行くほど上書きされるので、書き順に注意。

セレクタの指定の仕方は

CSSセレクタのチートシート

が参考になります！

ナガタロック）セレクタだけではなくて、

疑似要素や疑似クラスもうまく使って、

CSSを活用するんですね！

Manaさん本にはあまり載ってなかった！

使う習慣がついていなかったので、

今後は意識しようと思います＼(^o^)／

CSSの詳細度

詳細度とは＝CSS適用の優先順位のこと

・基本的にCSSは下に書いた物が優先して反映される。

が、以下の場合は例外で

・厳密な指定の方が優先して作用される。

・id > class > タグ　の順で優先度が決まる。

という優先順位のルールを把握しておくこと！

詳細度のルールの参考サイト

Qiita

クイズ形式で学習出来ます！

単位と演算について

CSSの単位

px　…サイズ固定

em　…親要素からの相対サイズ　2em＝親の2倍

%　…親要素からの相対サイズ（emとほぼ同じ）

rem　…ルートからの相対サイズ　直接の親要素の影響を受けないので計算が楽

※ルートとは、根っこの意で階層が1番上の親要素のこと

Viewport　…ビューポート（表示領域）からの相対サイズ。

※スマフォ画面やPC画面からの相対サイズなので、現代的

演算

CSSでは計算式も利用出来る。

width: (100*3)+px　で300pxと表示出来るが、単位が異なる場合は使用出来ない

width:calc(30% + 30px)　calcを使う事で異なる単位の計算が出来る！

今日の感想

CSSの基本的な使い方はManaさんの本で一通りやってきたので

理解出来る部分が多かった！

まだまだ狭い視野で学習しているので、

「疑似要素」や「擬似クラス」など

まだまだ習慣的に利用出来ていないテクニックも

たくさんあった(・。・;

ある程度学習してきたからこそ

そのテクニックの便利さも理解出来たので

このタイミングでこの講義内容を聞けたのは

すごく有意義でした！

また各人の質問内容も、

講義や課題についてだけではなくて

「案件」に関する内容も増えてきて、

段々プログラミングでお金を稼ぐということに対して

リアルさが増していっている印象。

自分としてはまだまだ案件獲得に現実味がないので、

よりリアリティを持てるように

学習を続けていく所存です！！

またRaiseTech代表エナミさんのツイート

副業でやる、っていうのを「簡単」って思われちゃうと、発注する側としては辛い。

副業だろうとなんだろうと仕事は仕事なわけで。逆にそういうことされるなら、ちゃんと仕事でやってる会社とかに発注する。

個人が副業で稼ぐっていうのは圧倒的なスキルがあること前提だと思うよ。

— エナミコウジ@教育好きなエンジニア講師 (@koujienami) July 27, 2020

が、今の自分の心にすごく響いた！

RaiseTech　WordPress副業コースの課題は

この思いが前提で組まれているので、

しっかりやりきります！！

そしてRaiseTechが気になるという方は

是非公式サイトより無料体験会or受講のお申し込みを(●´ω｀●)