演習課題「アイコンを表示させる」
右側のコードエリアのhtmlは、Bootstrapで「hello paiza」という見出しを表示します。
この見出しのコロンの前に、ハートマークのアイコンを表示してください。
ハートマークを表示するには、タグのclassに「glyphicon」と「glyphicon-heart」を追加します。
コードの実行をして、エラーが出なければ、演習課題クリアです!
※paizaに会員登録すると無料で動画学習コンテンツをご利用いただけます
会員登録する
#03:アピールポイントを載せよう
ここでは、ポートフォリオページにアピールポイントを紹介するコーナーを追加します。そして、Bootstrapで3つのアピールポイントをレイアウトしてみましょう。
Bootstrapを使うと、スタイルの設定だけで利用できるグリフアイコンを利用できるようになります。
<span class="glyphicon glyphicon-heart"></span>
Components · Bootstrap
http://getbootstrap.com/components/
Components - Bootstrap 3 徹底解説!
http://c.hrgrweb.com/bootstrap3/components.html#glset
このチャプターの最終コード
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/chap03/final.html
このレッスンの最終コード
https://paiza-webapp.s3.amazonaws.com/files/learning/portfolio/complete.html
ダウンロード方法:
- Windows: 右クリック - 名前を付けてリンク先を保存
- Mac: CTRL + クリック - リンクに名前を付けて保存
ログインすると採点できます
コードの実行