復習 マークアップ
今日はチーム開発に向けて、コーディングのテスト（カリキュラム）を行い、HTML・CSSの復習をしました。
学習してから少し期間が空いていた為、思い出しながら・検索しながら進めました。
今日行った内容
チャットアプリを想定し、トップページのコーディングを行ました。
アプリ部分はgitcloneをしましたが、１点予期せぬエラーが生じました。
エラ〜メッセージ：
Could not find a JavaScript runtime
調べてみたところ、作業前にmacOSのバージョンを上げたことが原因だったようです。
下記２パターンの対策があることが分かり、今回は短時間で対応できそうな上の方を選択しました。
・gem 'therubyracer' をGem fileに追記し bundle installを実行する。
・Node.jsをhttps://nodejs.org/en/からインストールする。
コーディング自体は問題なく進めることができましたが、思い出しながらだったので少し時間はかかりました汗
かなりCSSのリファレンスを行ったり来たりしました。
また、余った時間でオブジェクト指向言語についての概要を学びました。
・手続型言語との違い
・オブジェクト指向にすることで、仕様変更があった場合に、表面的なviewなどの修正に右往左往することなく、対応が取りやすい。
まだ触り部分だけなので理解も浅いですが、ここは重要なベースになると思うので、後に書籍などでより体系的に学びます。
忘れていたポイント
・リセットCSS
改めて理解し直しましたが、サンプルCSSにたくさん種類があり、それぞれ特徴が異なるのは知らなかったです。
・BEM命名規則
Block（元のブロック要素）、Element（子要素）、Modifier（修飾する形容詞）でクラスを命名。命名がシンプルに。
・SASS
ネストして記述できる
パーシャル記法ができる
- @import "reset"; /* _reset.scssを読み込む */
- @import "header"; /* _header.scssを読み込む */
・CSS
box-sizing: border-box;
（paddingとborderを幅と高さに含める。%での幅・余白指定がラクになる。）
text-align: left; or right
display: inline-block;
