今日の学習内容
昨日はテキストをクリックするとリンク先に移動するリンクを作りましたが、今日は画像をクリックしてリンク先に移動できるようにしたいと思います( ´ ▽ ` )ﾉ
下準備として、画像ファイルをapp/asset/imagesフォルダに保存しておきます。↓
お好きな画像でOKです。
画像ファイルをドラッグすることで、アップロードできます。
では、実際に画像をクリックしてリンク先に移動できるようにする練習をしていきましょう(・ω・)ノ
lesson_controllerにからのアクションを作成します。
今回はpractice10を作成しました。↓
次に、作成したアクションに対応するテンプレートファイル(.erbで終わるファイル)をapp/view/lessonの中に作成してください。
昨日と同じように、リンクを作成するために、link_toメソッドを使用していきます。
今日は、画像を扱うので、image_tagメソッドを使用します。
内容は以下の画像を参考にしてください(￣▽￣)↓
rails s -b $IP -p $PORTコマンドをターミナルに打ち込み、実行してください。
出てきたリンクをクリックして開くと、トップページが表示されるので、URL欄に/lesson/practice10と入力し、リロードします。
practice10アクションがルーティングに従って選択され、内容が実行されます。
レンダリングに使用されるのは、同じ名前をつけたpractice10.html.erbが自動的に選択されるわけですね。
以下、実行画面です。↓
画像をクリックすると、設定していたリンク先に移動します↓
今回は、グーグル検索のページをリンク先に設定しておきました( ´ ▽ ` )ﾉ
practice10.html.erbに書いてあったalign属性は、画像の位置を指定するものです。
上の画像では、leftにしていましたが、こちらをtopに変えてみましょう！↓
画像が表示される位置が変更されたことが確認できるかと思います(￣▽￣)
また、HTMLの基本として、画像の表示をオフにしている方やテキストブラウザを利用されている方のために画像の代わりになるテキストを用意しておく必要があります。
それに使うものがalt属性です。
上記の画像では、searchと表示されるように設定してあります(・ω・)ノ
省略した場合はファイル名から自動的にセットされるようです。
実際に、画像を読み込まないように設定してリロードしてみました。↓
Chromeを使われている方は、Chromeの詳細設定のプライバシー→コンテンツ設定より、画像を表示しないように設定できるので、実際に試してみてはいかがでしょうか(￣▽￣)
あとがき
今日は、昨日に引き続き、リンクの作成について学習を進めていきました。
Webページを見ていると、よく画像をクリックしてリンク先に移動しますが、こんなに簡単に作れるものだったのですね( ´ ▽ ` )ﾉ
ここまで読み進めていただき、ありがとうございましたm(__)m