【学習68日】chat-spaceのサイト画面の制作⑦【応用30日】

■進捗

・左上の歯車アイコン・挿入完了 

   アイコンが親要素に重ならない…！

   というトラブルもあったものの

    position: absolute;でなんとか解決

・右下のアイコンの挿入と

　ラベルタグでリンクを作れるようにはなったけれど

　場所がずれる 

■反省

・プルリクエストまで送る予定だったのにできず。

　アイコンを挿入する・アイコンにリンクを貼るなどの

　新しいことを勉強して時間がかかるのはもちろん、

　アイコンをおく場所の親要素の設置で時間がかかる。

　→一番はじめ、HTMLの大枠を作成する段階でうまくできなかった

■次回HTMLの大枠を作るときに活かす反省点

　　→完成サイトの挙動に合わせて塊を作る

　　（今回におけるサイドバーとメインチャット画面）

　　→極力要素の高さ横幅を設定しなくてもいいように、

　　　position: absolute;を乱発しなくていいように　

　　　親-子-孫の関係性を考える

　　→最初の大枠でいかに緻密に作るかが勝負

　　　「この部分の子になるはずだから後で追加すればいいか」

　　　という考え方だと後で絶対に後悔する

　　　「あっちを立ててばこっちが立たず」になる　　　

◾︎エラー①  並列では宣言できません？

Illegal nesting: content can't be both given on the same line as %div and nested within it.

ドユコト？調べてみると、

「タグの中身は「タグのすぐ後ろ」か「より深いインデント」のどちらかに書く必要があり、併用はできません。」ということらしい。

「タグの中身（今回の場合seoという文字列）」 を

「タグのすぐ後ろ（同じ行）」に書くか

「より深いインデント（次の行で深いインデントで書くか）」が原因だった様子。

タグの中身①seoという文字列

タグの中身②ulタグの子要素

 この2つを揃えて書く必要がある、ということだったらしい！！

これを

こう！

◾︎エラー②  エンドポイントありませんよ？

/Users/natsumi/projects/chat-space/app/views/messages/index.html.haml:25: syntax error, unexpected keyword_ensure, expecting end-of-input ...:Util.html_safe(_erbout);ensure;@haml_buffer = @haml_buffer.... ... ^~~~~~

25行目にエンドポイントがありません？？

でもhamlではendタグとか必要ないよね？？

何故？と思い調べると、

link_toメソッドの doが抜けていた…！

構文で抜け漏れがある場合は

「最終行に足りませんよ」というエラーが出るんですね…

 ◾︎エラー③ アイコンが親要素に重ならない！

アイコンは中央揃えにしたいのに！！

親要素は中央揃えになってるのに！！

何故？！

調べてみると

アイコンにposition: absolute;を設定

すれば良いらしい。

アイコンのiタグにfaというscssが適用されている…？ 

 faというscssを作ってしまえ！！

で・き・た！！