【学習67日】chat-spaceのサイト画面の制作⑥【応用29日】
◾︎進捗
見た目は全く変わっていないけれども
一区切りついた🙌
昨日まではHTML・CSSで
アプリとは全く別で作っていたけれど
HTMLをHamlに
CSSをSCSSに
変換してアプリに搭載できた！！
紆余曲折ありながらも無事実装！
明日はアイコン挿入・微調整をして
プルリクエストを送ります。
◾︎エラー① 頭のインデント
Indenting at the beginning of the document is illegal.頭のインデントがおかしいですよ
→書き始めに無駄なインデントがあったことが問題。
超左上詰に変更するとエラー解消！
書き始めは、左上詰を徹底する。
■参考記事：https://teratail.com/questions/138805
■ショートカットキーメモ
tab 右方向へのインデント
shift ＋ tab 左方向へのインデント
◾︎エラー② csp_meta_tag
= csp_meta_tag ってドユコト？ いらなくない？
今回は一旦削除することでエラー自体は解消。
csp_meta_tag は、Rails5.2で導入されたメソッドで、
Content Security Policy(CSP)に関するタグを埋め込むために使用する。
コンテンツセキュリティポリシー (CSP) は、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃などのような、特定の種類の攻撃を検知し、影響を軽減するために追加できるセキュリティレイヤー。
■参考記事：https://developer.mozilla.org/ja/docs/Web/HTTP/CSP
◾︎エラー③ 変数が定義されていません
変数がうまく行っていないよう
・変数の名前をケアレスミス？
・変数の名前の定義方法が違う？
・変数名で大文字使ったらだめ？
散々試してもエラー…定義されてるじゃないか？！
と半狂乱気味になったところ、なんと原因はimportの順番にあったことがわかる
app/assets/stylesheets/application.scss
これを
こう
変数のvariableを早めにimportすることで解消！
◾︎エラー④ 高さが0
どうしても親要素の高さが０になる
なぜだ？？！！リセットCSSを入れているから必要ないと思っていたのに…
html{
height:100%;
}
body{
height:100%;
}
SCSSの頭に無理やり上記を入れると高さが復活！よくよく見るとリセットには、height100％の記述がなかった。
〜〜〜
今回は復習のため・理解度を確認するために
HTML・CSSで作成した後に、アプリに実装した。
HTML・CSSで作成した際には、
以下をCSSの頭に記載していたため
高さを保っていた。
body{
height:100%;
margin:0;
padding:0;
}
しかし、今回アプリに記載していたリセットCSS（YUI 3）
のbodyについての記載には、 heighの記載がなかったことが原因
Yahoo! (YUI 3) Reset CSS より一部抜粋
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
margin:0;
padding:0;
}
