前のパートに戻る 完了して次のパートへ  

  3-3 Bootstrapの利用

このパートでは3-1パートで導入したlaravel/uiに含まれるBootstrapを利用していきます。

本パートの目標物


本パートではCSSフレームワークであるBootstrapを利用して手軽に綺麗なボタンを作成することでBootstrapの使い方を学んでいきます。

  • Bootstrapで用意されているボタンコンポーネントの導入

目標物を作成するまでの流れ


  1. app.blade.phpにBootstrapが適用されていることを確認
  2. Bootstrapの使い方を学ぶ

では実際に進めていきましょう。

1. app.blade.phpにBootstrapが適用されていることを確認


詳細は次章で学びますが、bladeテンプレートはレイアウトの継承(使い回し)ができます。本教材ではresources/views/layout/app.blade.phpをテンプレートのベースファイルとして扱います。

以下のファイルを開いてください。

resources
└── views
    └── layouts
        └── app.blade.php

実は3-2で実行したコマンドによって生成されたファイル以下の2つです。

public/css/app.css
public/js/app.js

実はこれらのファイルの正体はBootstrapです。そのため、app.blade.phpの中で既に読み込まれているため、Bootstrapの導入は完了しています。

resources/views/layouts/app.blade.phpの中身を確認すると、導入済みになっているはずです。

2. Bootstrapの使い方を学ぶ


では実際にBootstrapを使いながら学んでいきましょう。

まずはresources/views/home.blade.phpに以下のコードを追加してください。

resources
└── views
    └── home.blade.php

すると素のボタンタグが出てきましたね。ではこのボタンにBootstrapを使ってかっこよくスタイリングしていきましょう。

resources/views/home.blade.phpにのコードを編集してください。

resources
└── views
    └── home.blade.php

ボタンタグにクラスを付けただけでCSSが当たった綺麗なボタンになりましたね。

Bootstrapはhtmlタグにクラスを付けることによって簡単にスタイルを整えられるCSSフレームワークです。

app.cssの中身を見てみると以下のような記述がされています。

既にこのCSS(Bootstrap)が読み込まれているので、クラスを付けるだけでスタイルが適用されるという仕組みです。

先ほど作ったボタンはBootstrapの適用テストなので、以下のように削除しておいてください。

resources/views/home.blade.phpにのコードを編集してください。

resources
└── views
    └── home.blade.php

最後に

Bootstrapは様々なWebアプリケーションで広く使われるCSSフレームワークのスタンダードです。

Bootstrapの経験は様々なプロジェクトで役に立つので、補足の公式ドキュメントなどで理解を深めてください。

お疲れ様でした。

議論

7 質問

このコースの評価は?