【Rails基礎講座 7】Railsのかんたんなレイア... >
画像を表示させる

画像を表示させる

吉田先生

border-radiusは、角の丸みを指定するCSSのプロパティです。例えば、border-radius: 10px;と書けば、角は10pxぶん丸くなります。

画像を表示させる

では作成したフォームから画像を表示させてみましょう。

1.画像を投稿する

送信ボタンを押すと記事詳細画面へ遷移していますが、画像が表示されていません。

また記事一覧画面へ戻っても該当記事に画像の表示はありません。

 

これは記事詳細のshow.html.erbファイルとindex.html.erbファイルにはimageの項目がない為です。

新しくフォームを追加した場合は、表示されるviewファイルにもコードの追加を忘れないようにしましょう。

では画像が表示できるようにコードを追加しましょう。

2.articles/index.html.erbの編集

<% @articles.each do |article| %>~<% end %>に以下のコードを追加します。

<td><%= image_tag article.image %></td>

【一覧に大きい画像 不自然】

一覧画面で表示するには元のサイズでは画像が大きくページのレイアウトが崩れてしまいます。

そこで、画像サイズをハッシュで調節しましょう。

 

<td><%= image_tag article.image, width: 100 %></td>

articles/show.html.erbの編集

個別の記事詳細画面でも画像が表示されるように以下のコードを追加しましょう。

<td><%= image_tag @article.image %></td>

articlesコントローラでshowアクションは

def show

@article = Article.find(params[:id])

end

def article_params

params.require(:article).permit(:title, :text, :image )

end

と定義されています。

送られてきたパラメータからidを見つけ出して、該当の記事のタイトル、本文、画像のデータが@articleというインスタンス変数に代入されています。

@article.imageで該当記事の画像を見つけ出し、image_tagというヘルパーメソッドで画像が表示されるようになります。

これで完成!

レイアウトを変更する

1.application.html.erbの編集

実は全ページのレイアウトはapplication.html.erbによって管理されています。

application.html.erbファイルを開いてください。

このファイルが全てのページのテンプレートになっています。

部分にはshow.html.erbやnew.html.erbなどのviewファイルが表示されるようになっています。

確認の為、application.html.erbの

<body>~<body>を以下のように変更してください。

 

<body>

   <div id="wrapper">

     <div id="header">

       <%= link_to 'home', root_path %>

       <%= link_to '記事一覧',articles_path %>

       <div id="content">

         <%= yield %>

       </div>

     </div>

   </div>

 </body>

 

ブラウザを更新してください。

application.html.erbのにヘッダー要素を追加したことで全てのページにヘッダーが表示されるようにレイアウトが変更されているのがわかります。

2.CSSを使う

新たにstyle.scssを作成する

ページのレイアウトや画像の大きさなど表示に関連する細かな設定はstylesheetと呼ばれるファイルで管理します。

stylesheetフォルダ内にstylesheet.scssファイルを作成し保存します。

※scssとはcssを便利に書けるようにする仕組みのことです。

 

ファイルを作成し、名前をつけて保存したら以下のコードを追記してください。

body {

background: gray;

}

#wrapper {

width:960px;

margin: 0 auto;

padding: 20px;

background: white;

overflow: hidden;

}

まとめ

ここまでのチャプターでWorkspaceの作成~CSSの調整までを勉強しました。

次のチャプターからはこれまで学んだことを活かして実際に新しいアプリを開発していきます。

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る