Railsチュートリアル復習中：サイトのデザインを整えていく

今でやっと真ん中くらいまできたかな？今日はUIの部分のところです。

ビットコインについても調べたい今日この頃ですが、とりあえずRailsチュートリアル復習日記を続けます。

HTML5

 RailsはデフォルトでHTML5を使います (と書いてHTML5であることを宣言します)。ただHTML5は比較的新しく、一部のブラウザ (特に旧式のInternet Explorer) ではHTML5のサポートが不完全である場合があります。そのため、次のようなJavaScriptのコード (通称: HTML5 shim (or shiv))3を使ってこの問題を回避します。

他のコードはとりあえず置いておいて、まずはこれ

<!--[if lt IE 9]>

  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">

  </script>

<![endif]-->

<!--[if It IE 9]>は Microsoft Internet Explorer (IE) のバージョンが9より小さい場合 (if lt IE 9) にのみ、囲まれている行を実行します。

 Firefox、Chrome、Safariなどの他のブラウザに影響を与えずに、IEのバージョンが9未満の場合にのみHTML5 を読み込める

mayonez.jp

改めてHTML5を勉強するときの参考に。

埋め込みRuby

simpledancer.hatenablog.com

link_toヘルパー

リンクの生成のためにRailsヘルパー link toを使います。

link_toの第1引数はリンクテキスト、第2引数はURL。 

<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Help", '#' %></li>
<li><%= link_to "Log in", '#' %></li>

※今はリンク先はとりあえず# に置いている。

Bootstrapのcssを追加するとこれらのコードが

Railsが埋め込みRubyを評価しレイアウトを描画すると次にように置きかわる（上のコードはul class~のところ省略してる)

 <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Log in</a></li>
  </ul>

 imagetagヘルパー

この画像をダウンロード！

それをassetsのimageフォルダに入れる。

コマンドで取得する場合は

$ curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png   で!

image_tagヘルパーを使うとRailsが該当する画像を探し出して（アセットパイプライン)くれる。

simpledancer.hatenablog.com

自分の理解用なのでちょっと省略しすぎかもしれません。。

とりあえずここまででざっくりとしたサイトのデザインが現れました。↓

時間がきてしまったので、続く！

simpledancer.hatenablog.com