日別アーカイブ: 2021年11月19日

Rails-tutorial自分用まとめ(第5章レイアウト 主に演習)

その4から続きます

第5章レイアウトを作成する

5.1.1 ナビゲーション

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

<!--[if lt IE 9]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
  </script>
<![endif]-->
[if lt IE 9] は、Railsの一部ではありません。これは実は、条件付きコメントと呼ばれるもので、今回のような状況のためにInternet Explorerで特別にサポートされています。
リンクを生成するために、Railsヘルパーのlink_toを使います (アンカータグaが最終的に生成されます)。
yieldメソッドはWebサイトのレイアウトにページごとの内容を挿入します。
Railsのロゴ画像をダウンロードする
curl -o app/assets/images/rails.png -OL railstutorial.jp/rails.png

演習

1:Webページと言ったらネコ画像、というぐらいにはWebにはネコ画像が溢れていますよね。コマンドを使って、ネコ画像をダウンロードしてきましょう

curl -OL cdn.learnenough.com/kitten.jpg

2:mvコマンドを使って、ダウンロードしたkitten.jpgファイルを適切なアセットディレクトリに移動してください

mv kitten.jpg ~/environment/sample_app/app/assets/images/

3:image_tagを使って、kitten.jpg画像を表示してみてください

<%= image_tag("kitten.jpg")%>

5.1.2 BootstrapとカスタムCSS

続きを読む