解決する、は楽しい。
今日はなかなか手強かった。なんでこのエラーがでるん？！って試行錯誤してたら数時間経っててびっくり。
そしたら不要ファイルを消した時に一緒に消したファイルやコードがあってそれをもとに戻したらなおりました。解決するってすっきりしますね。その分もう二度と間違えたくないと学びになるから今日も成長した。
そんな今日の目次は
1.簡単日記
勉強している時にわからないことがあったらすぐ誰かに聞ける環境。これはとても大きいと感じた。今回はウェブの質問スペースで二人で解決していく感じでした。
今日は反省。ここ数年何かがあっても誰のせいにしたことはほぼほぼないと自負できるんだけど、今日は「いやいやあなたが不要ファイル消してって言ったんやん」って思ってしまった…自分が何を消したのかもちゃんと自覚してから消したり行動するようにしよう。いわれるがままに行動するとか恥ずかしいことをしてしまった。反省。
2.今日の学び
◆#CSS box-sizingについて
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
要素サイズ(width, height)の算出方法を変更。
content …paddingとborderの幅を要素の幅と高さに含めない。(default)
border-box…paddingとborderの幅を要素の幅と高さに含める。
box-sizing:border-box;
これで簡単に幅、高さを設定できる。#プログラミング初心者
◇参考
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
『CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定』 https://t.co/RCmvGSXSDL #phiary @phi_jpさんから
◆#CSS borderの色
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
ボーダーの色を付ける時は
border: solid 1px red;
のように太さも指定してあげないと色がつかない。
いくら
border-color:red;
と色をつけようとしてもないものに色を付けようとしても色は付かない。基本中の基本やけど手間取った…orz…#プログラミング初心者
◇参考
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
スタイルシートリファレンスhttps://t.co/lFpfYfkUZ7#プログラミング初心者
◆#CSS vertical align
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
行の中で文字の縦方向の位置を指定する。これが適用できるのはインライン要素とテーブル要素。ブロック要素には適用不可能。
vertical-align:top
とすることで行の上揃えでテキストを配置させることができる。デフォルトは
vertical-align:baseline;#プログラミング初心者
◇参考
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
vertical-alignhttps://t.co/4ikofEBqHh#プログラミング初心者
◆#HTML #CSS font awesomeのアイコンサイズ変更
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
アイコンがついているクラスに
font-size: 20px;
で調整。font awesomeはfontだからfont-sizeでサイズを調整できる。そのままでした。画像と思ってwidthとかheightをいじってたけどこれではできない、ということを学んだ。#プログラミング初心者
◇参考
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
フォントアイコンの使い方 (FontAwesome) https://t.co/TYaoWdOqkt#プログラミング初心者
◆#CSS での要素を重ねる方法
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
親要素…position:relative;
子要素…position:absolute;
top:hoge;
left:fuga;
top, leftは親要素から見たときの絶対位置を指定。この際親要素に縦横の幅をしていしてやると子要素はその中でしか動かなくできる。カリキュラムの基礎編の復習！#プログラミング初心者
◇参考
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
CSS「position:relative」と「position:absolute」で画像や文字を重ねる方法 https://t.co/Bq9aNJ3mpV @uszero800さんから#プログラミング初心者
-原因-
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
不要ファイル、コードを削除した際
①app/assets/javascriptsフォルダ
②app/views/layouts/application.html.haml内の
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
をまるごと削除してしまった為、methodが上手く変換されなかった。#プログラミング初心者
調べた結果
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
結論から言うと、GET以外のメソッドをつなげてくれるjquery_ujsを読み込んでいないためずっとGETでルーティングしてました。
削除してしまったjavascripts/application.js内、jquery_ujsが重要。初心者の自分からしたら全然わからんかった…。#プログラミング初心者
フレームワークって、それを扱う言語だけで構成されているわけではないんですね。
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
例えばRailsだったら全てRubyで動いているものだと思ってたけど、今回みたいにjavascript（jquery）だったりも構成言語の一つだった。メモメモ_φ(･_･#プログラミング初心者 #Rails #Ruby #Javascript #jQuery
#今日の積み上げ
— ShowGoGoGo＠プログラミング勉強中 (@shshsshsh8) 2019年7月25日
★フロントビューLGTMもらったので中身へ。
★主催ライブの演者2バンド紹介@twitter
今日は主にCSSのことをつぶやいた。バックエンドについては不要ファイルと思って削除したのが実は必要なファイルだった。それで何時間もとられたが、もう二度と間違えない！#プログラミング初心者
そう。それでフレームワークがいろんな言語を使われているということに驚きました。きっと当たり前のことなんだろうけど初学者の僕にとっては驚き。これは本当に理解するにはこれらの言語も理解できるようになりたい。そしたらものをつくるときにもつまづきにくくなるだろう。
3.明日やりたいこと
主な機能の実装は終わらせて、テストに入りたいな…。頑張ろ！
明日、余裕作って簡単なアプリ作ってrailsとjavascriptの復習したいな。
4.終わりに
今日は少し荒れてしまって反省。こんなことで荒ぶっていたら先が思い知らされるね。
しかし！その分成長できたのだ！悩んで当たり前！まだ勉強し始めてから数ヶ月しか経ってないから仕方ない！誰だって悩む時ぐらいあるさ！
と言い聞かせて今日は寝ます！笑
今日も一日お疲れさまでした！明日金曜日頑張れば週末ですよみなさん！
ということで明日も充実させていきましょ＾＾
ありがとうございました＼(^o^)／
