演習課題「背景画像を設定する」
右側のコードエリアのhtmlは、Bootstrapで「hello paiza」という見出しを表示します。
このページの背景に、下記の画像ファイルを表示してください。
ページの背景に画像を表示するには、bodyのスタイルで、background-image属性に画像ファイルを指定します。
> https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/bg.png
コードの実行をして、エラーが出なければ、演習課題クリアです!
#04:大きな写真を表示しよう
ここでは、ポートフォリオページで一番目立つページのトップを作りたいと思います。そして、Bootstrapでこのようなレイアウトを実現するジャンボトロンを使ってみましょう。
.jumbotron {
background-image: url("https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/bg.png");
color: white;
}
このレッスンで使用する画像ファイルのurlです。
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/bg.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/neko.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work1.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work2.png
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/work3.png
- Bootstrapで横幅いっぱいに画像を表示しよう!ジャンボトロン(jumbotron)の設置方法
http://tonari-it.com/bootstrap-jumbotron/
- ジャンボトロンに背景画像~Bootstrap3移行ガイド
http://cccabinet.jpn.org/bootstrap3/jumbotron3.html
- ジャンボトロン(トップ見出し)の書式:Bootstrapコードまとめ | HTSブログ
http://www.hts-web.biz/bootstrap-jumbotron/
このチャプターの最終コード
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/chap04/final.html
このレッスンの最終コード
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/complete.html
ダウンロード方法:
- Windows: 右クリック - 名前を付けてリンク先を保存
- Mac: CTRL + クリック - リンクに名前を付けて保存