Bootstrapを使ってみよう

テクノロジー・ガジェット
2022.06.29

人気のフロントエンドライブラリBootstrapを導入してみよう

インストール

公式サイトにアクセスしてドキュメントのDownloadのページを参考に今回はComposerを使ってインストールしてみます。ターミナルから次のコマンドを入力してエンターを押します。

docker-compose exec app composer require twbs/bootstrap:5.0.2

使い方

Introductionのページの冒頭にCSSの下の部分に以下のコードがあります。

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

スタイルシート <link> をコピーして、他のスタイルシートの前にある <head> に貼り付けて、CSS を読み込みます。とあるので実際に使うときは、以下のようにコーディングします。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="../../../vendor/twbs/bootstrap/dist/css/bootstrap.css">
  <title>会社情報の登録</title>
</head>

hrefの最初の../ で階層の調整をしてbootstrap.cssが実際にある位置を記述します。

Sassを使おう

Sassとは「Syntactically Awesome StyleSheet」のことでCSSを効率的に書くことができます。

公式サイトを参照してLearn Sassに基本的な使い方が書かれています。

CSSを変数で扱えたり、ネスト構造がシンプルに書けるので、積極的に使っていきましょう。

Bootstrapをカスタマイズしよう

Sassをインストール

Sassの公式ドキュメントではcomposerによるインストール方法が載っていないので、githubでphp scssで検索します。今回はスター数の多いscssphp/scssphpを使用してみます。

Readmeを参照して、以下のコードでインストールします。

docker-compose exec app composer require scssphp/scssphp

BootstrapをSassでカスタマイズ

公式ドキュメントのThemingを参照してカスタマイズします。

  • stylesheets/css/
  • stylesheets/scss/app.scss

上記フォルダを作成。app.scssの中身は

@import '/var/www/html/vendor/twbs/bootstrap/scss/bootstrap';

カスタマイズしたSassをCSSにコンパイル

ターミナルで以下のコマンドでコンパイル

docker-compose exec app /bin/bash
vendor/scssphp/scssphp/bin/pscss < tmp/companies/stylesheets/scss/app.scss > tmp/companies/stylesheets/css/app.css

コンパイルしたCSSをHTMLで読み込む

html形式のphpファイルのheadタグ内を入れ替える

<link rel="stylesheet" href="stylesheets/css/app.css">

コメント