【RaiseTech】超初心者が1から学ぶプログラミング記〜その4〜

公開日:2020/7/8 最終更新日:2021/2/20

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

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

RaiseTech 〜WordPress副業コース〜

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

このブログでは

・学習の記録

RaiseTechの学習内容

RaiseTechを受けて感じた事

をまとめています

今回は第4回目の講義「HTMLとCSSを使ったコーディング基礎知識」についてでした。

HTMLとCSSならボチボチ自習してるからそれなりについていけるかな?

と意気込んでの今回の講義!

HTMLとは

Hyper Text Markup Languageの略でWebサイトを構成するための文書構造

文書構造とは

見出し= h1

目次= ul>liタグ や ol>liタグ

章= section

章の見出し= h2

他の作品からの引用= blockquote

などで構成されている。

HTMLタグは、「メタデータ」や「フローコンテンツ」など様々な種類があります。

HTMLタグは親子の関係性をしっかり覚えないと正しく表示されない。

※子のタグの中に親のタグは入れれない!!

親子の関係性をチェックするのは

HTML5入れ子チートシート

のサイトが超便利!

WordPressで重要な事

案件を受けて納品をする際に、開発者(つまり私)の想定しないタグを利用された場合に意図しない崩れが発生しないか確認しておく必要があります。

その際はテーマユニットテストでテストをしておく事!

ナガタロック)簡単に言うとHTMLは文書を表示するプログラミングって事ですね!先生!

CSSとは

Cascading Style Sheetsの略

HTMLで表示する文章のスタイル(装飾)をする為のもの。
セレクタで指定して、装飾していく

タグセレクタ
headerとか{
}

IDセレクタ
#○○{
}

クラスセレクタ
.○○{
}
※セレクタの種類によって、書き方が異なる

ナガタロック)CSS自習していて、セレクタを指定するときに

#使う時と.使う時と何もつかない時

何が違うん?

と思っていた事が解決しましたヽ(´▽`)/

CSSで理解すべき項目

「中央寄せ」=いくつかやり方があるので、用途に合わせて使う事。

「float」=通常縦に並ぶ要素を横並びにする。WordPressの「左揃え」や「右揃え」はこのfloatで実装されるので、理解しておく事。概念を立体で考えると理解しやすい!

「position」 =HTMLのレイアウトルールから外れ、位置が指定できるようになる。

ナガタロック)自習していて、レイアウトが「ぐぬぬ・・・」ってなっていたのは、ここの理解が足りていないからなんですね・・・

「レスポンシブル」 =PCでもタブレットでもスマフォでも見やすいように設定しておく。

ナガタロック)前回も出てきたけど、今の時代必須ですね!

「flex」 =専用のプロパティが多いので理解して配置してく事が必要。

コンテナという親要素にアイテムという子要素達が組み込まれているイメージ。

ナガタロック)この辺りの位置関係のようなものはしっかり頭でイメージする必要性を感じてます!

Sassとは

Syntactically Awesome Stylesheetsの略!

簡単に言うと、効率よくCSSのコードを書く方法。

sass記法とscss記法というのがあって、

sassの方がよりシンプルだけど、

RaiseTechではscssを用いて学習する。

CSSをより拡張するやりかたでCSSと比べて

3〜5割

の時短になる!!!

ナガタロック)えぇ〜〜!!これは衝撃・・・!!空いた口から鳩が顔出す。。。

一生懸命CSSに取り組んでましたが、このやりかたをしっかり身につけねばねば!

scssの方が現場で使われおり、徹底的現場主義のRaiseTechらしいチョイス。

ちなみにscss単体では機能しないので、コンパイルする必要があるそうです。

※コンパイルとは簡単に言うと、CSSへの翻訳。

コンパイルするといっても、ツールで自動的に出来るのでscssを使わない手はない!

変数-共通の色・数値を定義しておける

$red:#ff0000;

みたいに定義付けしておけるので便利。

ナガタロック)この辺りの便利具合はまだイマイチピンと来ないのが現状(?_?)

しっかりボリュームのあるWebサイトを作っていくと実感が出来るのでしょう!

と今は思ってます。

mixin -引数を使って関数のように定義できる

高校時代に流行ったSNSのようなこのタグで関数を定義づけ出来る。

ナガタロック)この定義付けっていうのがまとまりのあるサイトデザインを作るのに必要なこと。レスポンシブの定義もまとめてかけれるので便利!

extend – 定義したスタイルを継承する

定義づけしたクラスを呼び出す事が出来るとともに、変更したい箇所を書き加えれば

上書きも出来る!

ナガタロック)こういう積み重ねが3〜5割の時短につながるという。

ただ、@mixinや@extendは使いすぎると管理が大変になるので、よく考えて使う必要があるとのこと。

定義用のファイルを別で作っておいて@importで呼び出して使うのがオススメ。

CSS設計とは

良いCSSを書くために

  • 予測しやすい
  • 再利用しやすい
  • ほしゅしやすい
  • 拡張しやすい

という点を意識して、命名規則や構成を考えること。

ナガタロック)いいCSSとは、開発する自分にも、チームメイトにもわかりやすいように作成していくのが大事。結果的にお客様の満足のいくWebサイトが出来たとしても、中身がグチャグチャしていたらいいCSSとは言えない(キリッ

定義ファイルをしっかり作り込むのが結果的に効率よくプログラミングが出来るテクだということがわかった。

現時点ではまずその定義づけをしっかり理解して出来るようになる事が大事!

FLOCSSとは

CSS設計手法の一つでRaiseTechではこの手法を用いて学習する。

3つレイヤーとその子レイヤー3つで構築しましょうという考え方。

ナガタロック)この考え方を持ってサイト構築するほうがまとまるということかな?

エディタの選定と設定

メモ帳はダメ!

最初の講義で言っていたようにRaiseTechでは

「VSCODE」推奨です。

何故かというと

Sassのコンパイルプラグインがある

ライブリロード※コードを書きながらサイトが自動更新されるので確認しやすい

PHPやWordPressのスニペット

diffによるファイル比較が出来る

コーディングを早くするためのショートカット

などなどメリットがたくさんある!

ナガタロック)知らなくて使える便利プラグインがたくさんある!

また講師YATさんが普段駆使しているショートカットも知れた!

今日の感想

今回はWebサイトの基本HTMLとCSSについての講義。

現在自習で取り組んでいる部分なので、しっかり集中して聞きました。

ここまで4回RaiseTechの講義を受けて思うのが、

基本的に親切丁寧・初心者に寄り添うカリキュラムではないということ

これは決して悪い意味ではなく、

最初の講義でも言っていた通り、

最短で現場で通用する人材を育成する

というのが前提の構成。

正直授業を聞いている時は

「わからん用語の説明にわからん用語が出てくるぅ〜><」

状態でいつも聞いています。

そして講義の復習としてこのブログを書きながら、

見直す→わからない言葉出てくる、一時停止ポチッ→調べる

→自分の解釈が間違ってないか調べる→ブログ書く→最初に戻る

の流れをすることで、ようやくこの講義の味が少しだけわかる

ような感覚で今このブログを書いています。

だからこの記事書くのにめっちゃ時間かかります(;・∀・)

今回は次の課題も提示されたし、新たな自学の取り組みにもヒントがあったし

よりモチベーションを持ってやっていこうと思いました。

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

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


ABOUT US

この記事を書いた人

ナガタロック

このサイト作成者の写真

アパレルメーカーに勤める30代男
2020年より「RaiseTech」にてプログラミング学習を開始
講義内容の学習記録
副業に関する情報を発信しています

  • カテゴリー