じろう

2019年11月02日に参加

学習履歴詳細

[卒業制作]logs#indexのデザインを当てる。カードの中にカードを入れ込む。Bootstrapのテーマカラーを増やしてみる。折りたたみでハマる。div*{}というslimの書き方を覚える

やったこと

indexページのデザインに取り掛かる
ラフ画から、パーツ毎に切り出して四角で囲ってみる
containerに入れてみる
どんなパーツか必要か洗い出したら、まず3列でY,W,Tを分けてみる
Yのカードを置いてみる
Yのカードのデザインを進める
3つ並べた時、Logの日付の表示やまとまりをどうするかを考え、LogのカードでYWTのカードを囲むのを試す
意外とうまくいったので採用
やったことの詳細をクリックで開閉したい→折りたたみを使ってみることにする
普通の折りたたみは実装出来たが、一つを閉じると全てのカードが閉じてしまう→トリガーにしているid名を、それぞれのY,Wで別にもたせる必要がある
idやクラス名を動的に指定する方法を調べ、やってみるも今度はBootstrapのオプションが動かない
仕方なく、slimで書くのを諦めてその部分だけまずhtmlで書いてみる
動くことを確認したら少しずつslimで直していく
クリックして現れるコンテンツのIDと、ボタン化したヘッダーのIDに同じものを設定していたせいで、開いたものを閉じた時、要素がなくなってしまう望まない挙動に→単なるスペルミス。だけど2時間ぐらいハマった
Bootstrapに新しいテーマカラーを導入する
Index最上部にやったこと わかったこと 次やることのボタンを表示させたかったけど、ボタンの色が変えられずに詰まった

わかったこと

slimのちょっと複雑な書き方。ちゃんと公式リファレンスにもあった。
div*{id: "#{@instance_variable_1}", class: "#{@instance_variable_2} container-fluid"} role="button" aria-expanded="false"
のように、divの後*で囲う。オプションはカッコの外で書ける。
カードの中にカードが入れられる!
Bootstrapのテーマカラーは簡単に増やせる(楽しい)
slimのインデント要整理
slimがわからなくなったら、一旦HTMLで書いて一行ずつslimに直していくと問題箇所が分かるかも?
公式リファレンスをよく読む
CSSの優先度?について調べないとカスタムして増やしたテーマカラーのボタンの文字の色は変えられないかも
8時間やった割には進みが悪い。もっとテキパキ書きたい
色で悩まずにとりあえずこの色で行く

次やること

Index、7割ぐらいでいいから完成させる
カラーはとりあえずこれで進んでいく
時間を無駄にしない
リファレンスを読みこむ
一行ずつhtmlからslimに直す
div*を活用していく

Rails
Bootstrap

2020年05月14日(木)

8.0時間