こんにちは!ナガタロックです!
このブログでは2020年6月より
RaiseTech 〜WordPress副業コース〜
を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。
今回で7回目!
講義も中盤戦ですが
自分としてはまだまだ追いついていない感じなので
ここからギアを上げないと!
今回は「CSSによるフロントエンドの実装」です
HTML&CSSの講義も今回で一区切りって感じです!
ブラウザ毎(Google Chrome、FireFox、Safari等々)で
CSSの解釈が異なる場合がある。
Firefoxではうまく表示出来ても、Chromeでは正しく表示されない場合がある
そのブラウザ間の差異が出ないようにするための処理が
リセットCSS。
基本的に最初にやっておく作業!
Reset CSS…老舗のリセットCSS。すべての要素がリセットされるので、使用する場合すべて再定義が必要なので注意!
Normalize CSS…デフォルトの状態でも一定の見た目が担保される。
ress…Normalize CSSより使いやすくカスタムされている。一般的によく使われるリセットCSS。
a modern css rest…ressに近いが、現代的なリセットCSS。<h5><h6>はリセットされないので注意!
*セレクタ…*{ } ですべての要素に対して指定する
タグセレクタ…<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を活用するんですね!
Manaさん本にはあまり載ってなかった!
使う習慣がついていなかったので、
今後は意識しようと思います\(^o^)/
・基本的にCSSは下に書いた物が優先して反映される。
が、以下の場合は例外で
・厳密な指定の方が優先して作用される。
・id > class > タグ の順で優先度が決まる。
という優先順位のルールを把握しておくこと!
詳細度のルールの参考サイト
クイズ形式で学習出来ます!
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受講のお申し込みを(●´ω`●)