ページ移行Again

昨日は、Sassでつまずいてしまったけど、シミュレーターも判明したので、とても満足!

速度はゆっくりだけど。

さて、今日こそは画面移行を完成させる!

 

さて、画像制御のSASSを作る盤面が来たよ。

昨日の成果を見せてやる!

small mid largeの画像サイズCSSを用意したい。

やるぞっ!

 

Twitter Bootstrap使っているんだから smallとかにしないで

xs sm md lg xl 使えばいいじゃんね。。

今回は、横幅で合わせよう。

// サイズ = xs, sm, md, lg
$size: xs, sm, md, lg;
$value:50,100,150,300;

@for $i from 1 through 4 {
.img-#{nth($size, $i)}
{ width:#{nth($value, $i)}px;}
}

ひとまず、こんなもんか。

自由に後からサイズ変更できるように、掛け算で計算するのは辞めておいた。

 

あれー、Something went wrongと表示されてしまった。

SASSの方の設定で、セミコロンが抜けていたためのエラーでした。

うーむ。初歩的。

よし、これで画像制御もできるようになったので、次に進もう。

 

何行も同じの各の面倒くさくなってきたので、配列を使う。

Ruby 配列で検索。

配列はうまく行ったけど、for文が今度はうまくいかないなぁ。

 

コメント文章が邪魔だった事に気がついた!!

コメントをわざわざ途中にいれて、Tabを削除したのが問題だった。

そして、forの後にもう一つTabを押して入れ子にするというのをしていなかった。

解決!!

 

@移行の文字列を追加したいなぁ。

連想配列でしないと対応できなさそう。

- books = { 'こころ' => ,'こころ' => 300,'坊っちゃん' => 380,'明暗' => 700,}
- books.each do |key, val|
#{key} | #{val}円

これで、金額は表示されるが、Keyが表示されない。

意味がわからん。。。

 

うーん、配列の仕方がそもそも間違っている気もしてきた。

名前は名前、画像は画像という事で配列を作り直した。

あっさりと出来たよ。

ここまで来るのに全然あっさりじゃないけど。

ひとまず、ここで一旦セーブ。

 

危ない!北朝鮮のミサイルニュース記事が目に入ったので、見てしまった。そのままネットサーフィンをしてしまうところだった。

今は集中!

 

はやくViewを完成してしまい、デザインに移りたい。

ようやっとトップページのHTMLを移行した。

for文使えると楽だなぁ。

420行あったソースコードが、133行に!

 

slimの使い方が少しずつわかってきた。

重要なのは、TAB!

 

うぉぉ。面倒くさくなってきた。

一段落したというのもあるけど、なんか集中力切れた。

完全に切れちまったぜ。

5分だけ休憩。

よし、再開。

 

検索結果のページを追加完了した。

うん。移行はまだ終わってないね。Very遅いね。

 

github.com

 

フォームはここを見るのが一番だという事に気がついた。

めでたしめでたし。