-
- 1. 目標
- 2. 画像を追加する
- 3. 画像を表示させる
- 4. TO DOアプリ解説①
- 5. TODOアプリ解説②
画像を表示させる
画像を表示させる
吉田先生
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 [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。
