Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【PHP】PHPファイルにbootstrapを導入する

install

composer を用いてインストール
https://getbootstrap.jp/docs/4.5/getting-started/download/

アプリのルートディレクトリに移動

composer require twbs/bootstrap:4.5.0

vendor/twbs/bootstrap が作成される。

bootstrap.cssとbootstrap.min.cssの違い。

bootstrap.min.cssは、圧縮されているため容量がコンパクト。ただし、それゆえ中身が見にくいので、
開発環境ではbootstrap.cssを用いた方が良い。

bootstrap.cssを読み込む

#読み込みファイルのheadに記載

<link rel ="stylesheet" href="vendor/twbs/bootstrap/dist/css/bootstrap.css">

Sassを用いる場合

Bootstrapをカスタマイズする際に、cssに手を加えていく。その際にSassを用いることにより、複雑な処理やソースの見通しをよくしたりすることができる。

Sassを読み込む際は、cssにコンパイルしてからhtmlで読み込む。

機能

ネスト:

style.css
nav ul{
  color:red;
}
nav li {
  color:blue;
}
style.scss
nav{
  nl {
    color:red;
  }
  li {
    color:blue;
  }

変数:

style.css
body{
  color:red;
  }
style.scss
$primary-color:red;

body{
  color:$primary-color;
  }

親クラスの指定:

style.css
a{
  color:red;
 }
a:hover{
  color:blue;
}
style.scss
a{
  color:red;
  &:hover{
    color:blue;
  }
}  

カスタマイズ手順

1 Sassをインストール

Sassは公式でcomposerに対応していない。今回は github上に公開されているscssphpというライブラリを用いる。

https://scssphp.github.io/scssphp/

composer.json
//composer.jsonのrequireに追記する。

{
    "require": {
        "scssphp/scssphp": "^1.3"
    }
}
composer update

vende r/scssphp/scssphpが生成される。

2 Scss読み込む

Sassを使用するファイルでScssを読み込む。

sytle.scss
@import "vendor/twbs/bootstrap/scss/bootstrap";

読み込んだファイルをcssにコンパイルする。

ターミナル.
vendor/scssphp/scssphp/bin/pscss < sylesheets/scss/style.scss > stylesheet/css/style.css

# vendor/scssphp/scssphp/bin/pscss で sylesheets/scss/style.scssをコンパイルし、
その結果をstylesheet/css/style.cssに書き込んでいる。

# 変更がある度にコンパイルする。

3 作成したcssファイルをhtmlから読み込む

<head>
...
  <link rel ="stylesheet" href="stylesheet/css/style.css">
</head>


2〜3のイメージ

cssを使用する場合

【html】 →  → → → → → → → 読み込み → → → → → → → →   【bootstrap.css】

scssを使用する場合

【html】 → 読み込み → 【css】  ← コンパイル ← 【scss】 → 読み込み → 【bootstrap.css】
                           ↑  
                        ここをカスタマイズ

4 変数を定義する。

sytle.scss
$main-color: red;

@import 'vender/twbs/bootstrap/scss/bootstrap';

body{
  letter-spacing: 0.5em;
}

#変数は@import より上に書くことでデフォルト値が設定される。
bodyなどの定義されているものは、下に書く。下方にあるものほど、最終的に適用されるため。

修正後、コンパイルを実行。

変更をブラウザで確認するにはスーパーリロードを行う。
ブラウザのキャッシュを無視し、強制的にWebサーバーからファイルをダウンロードする方法。

mac:
cmd + shift + R

windows:
shift + F5
sho_U
2020年8月からエンジニアとして働き始めます!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away