Sinatra アプリを CSS で装飾

2897 ワード
新人プログラマ応援 Heroku Windows10 Ruby Sinatra Ruby テキストリンク

はじめに

前回の記事 - Qiitaで更に味を占めたので、CSSでチョットだけ色を付けてみました

完成画面


heroku アプリ

前回の反省点

err.or
app.rb:2:in `require': cannot load such file -- sinatra/reloader (LoadError)

単に、sinatra-contribがgroup :developmentになっているだけでした。

CSS

ずらずらと並んでいるのはカッコ悪いので、社名のみを表示し、路線名はクリックして表示させることにしました。

style.css
.btm {
    transition: 0.2s;
    height: 0;
    overflow: hidden;
    padding: 0 10px;
}
.container input:checked + .btm {
    height: auto;
    padding: 0 10px 10px 10px;
    background-color: lightsalmon;
}

heightが0になっているので隠れているんだと思います結果オーライ

まとめ

  • 初アプリ修正
  • CSS に詳しくなった

参照したサイト
【CSS】CSSだけでブロック要素の表示非表示
【初学者向け】Ruby 遅延鉄道路線名の入手方法 - Qiita