CSSでスタイルを整える

Bootstrapで時短しつつスタイルを整える。

Bootstrapのインストール

Composerを使ってBootstrap の Sass と JavaScript をインストール

1
$ composer require twbs/bootstrap:4.5.0

公式Bootstrapダウンロード




これをDockerのコンテナで実行。

1
$ docker-compose exec app composer require twbs/bootstrap:4.5.0

ディレクトリ構成

1
2
3
4
5
6
7
8
bootstrap/
├── dist/
│   ├── css/
│   └── js/
├── docs/
│   └── examples/
├── js/
└── scss/

cssディレクトリ以下にある以下のファイルでフルのBootstrapが使える。

  • bootstrap.css
  • bootstrap.min.css

HTMLで読み込み

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

Bootstrapのカスタマイズ

Sassのインストール

Scssライブラリをインストール

scssphp/scssphp
https://github.com/scssphp/scssphp
インストールのコマンド

1
docker-compose exec app composer require scssphp/scssphp

vendorディレクトリ以下にscssphp/scssphpディレクトリができる

Bootstrapのカスタマイズ

ディレクトリ構成

1
2
3
4
5
stylesheets/
 ├── css/
 |    ├─ app.css
 └── scss/
      └─ app.scss

app.scssを編集し、app.cssにコンパイルしてhtmlファイルから読み込む



app.scss

1
@import 'vendor/twbs/bootstrap/scss/bootstrap'

Dockerのappコンテナ内でbashコマンドを使う

1
docker-compose exec app /bin/bash

scssphpコマンドを実行、コンパイルした結果をcssファイルに書き出す

1
vendor/scssphp/scssphp/bin/pscss < companies/stylesheets/scss/app.scss > companies/stylesheets/css/app.css

カスタマイズ法

  • 変数の変更
    @import の前で行う
  • 要素の変更
    @importの後で行う
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// @importの前で変数の定義
  // line-height
  $headings-line-height: 1.5;
  $line-height-base: 1.65;

  // Colors
  $gray-dark: #546E7A;

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

// @importのあとでスタイルの上書き
body {
  letter-spacing: .1em;
  text-align: justify;
}

classを付与してスタイルしていく

ページ全体を中央ぞろえしたい

全体をdivタグでくくってcontainerクラスを付ける

body以下をマウスで選択

ctrl + shift + p

wrapで検索、 __EmmetのWrap with Abbreviation__を選択 -> enter -> divを入力すると、選択範囲をくくったdivタグができる

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="container"> // ページ全体を中央ぞろえ
    <h1 class="h2 text-dark mt-4 mb-4">会社情報の登録</h1>　// 見出しの大きさ h2 / 字の色 text-dark / mt-4 マージントップ / mb-4 マージンボトム
    <form action="create.php" method="POST">
    <?php if (count($errors)) : ?>
        <ul class="text-danger"> // エラー文字を赤
            <?php foreach ($errors as $error) : ?>
            <li><?php echo $error; ?></li>
            <?php endforeach; ?>
        </ul>
    <?php endif; ?>
        <div class="form-group">　// form はグループごとにform-group
            <label for="name">会社名</label>
            <input class="form-control" type="text" name="name" id="name" value="<?php echo $company['name'] ?>"> // inputにform-control
        </div>
        <div class="form-group">
            <label for="establishment_date">設立年月日</label>
            <input class="form-control" type="date" name="establishment_date" id="establishment_date" value="<?php echo $company['establishment_date'] ?>">
        </div>
        <button type="submit" class="btn btn-primary">登録する</button> // ボタンにスタイルをあてる
    </form>
</div>

レイアウトを共通化

同じ部分は共通化しておく(以後の修正が楽・修正漏れがない)

共通部分のスタイルを記述したファイルを作る

個別のところに変数に格納したコンテンツを読み込む

ディレクトリ構成

1
2
3
4
5
companies/
├─views/
|    ├─layout.php
|    └─new.php
└─new.php
  • views/layout.php 共通部分のスタイルを記述したファイルを作る
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="../stylesheets/css/app.css">
      <title><?php echo $title; ?></title> // タイトルを変数から読み込む
    </head>
    <body>
        <div class="container">
            <?php include $content; ?> 　// ページの中身をviews以下のファイルから読み込む
        </div>
    </body>
    </html>
  • new.php アクセスされるファイル
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <?php

    $company = [
        'name' => '',
        'establishment_date' => '',
        'founder' => '',
    ];
    $errors = [];

    $title = '会社情報の登録';  // タイトルに変数を格納
    $content = __DIR__ . '/views/new.php';  // コンテンツ内容をviews以下のファイルから変数に格納
    include __DIR__ . '/views/layout.php'; // レイアウトのファイルを読み込み
    /views/new.php コンテンツファイル
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <h1 class="h2 text-dark mt-4 mb-4">会社情報の登録</h1>
    <form action="create.php" method="POST">
        <?php if (count($errors)) : ?>
            <ul class="text-danger">
                <?php foreach ($errors as $error) : ?>
                <li><?php echo $error; ?></li>
                <?php endforeach; ?>
            </ul>
        <?php endif; ?>
        <div class="form-group">
            <label for="name">会社名</label>
            <input class="form-control" type="text" name="name" id="name" value="<?php echo $company['name'] ?>">
        </div>
        <div class="form-group">
            <label for="establishment_date">設立年月日</label>
            <input class="form-control" type="date" name="establishment_date" id="establishment_date" value="<?php echo $company['establishment_date'] ?>">
        </div>
        <div class="form-group">
            <label for="founder">代表者</label>
            <input class="form-control" type="text" name="founder" id="founder" value="<?php echo $company['founder']?>">
        </div>
        <button type="submit" class="btn btn-primary">登録する</button>
    </form>

    一覧ページ

    データベースからデータを取得して表示する
  1. データベースからデータを取得 配列で取得
  2. HTMLでデータを表示 ループで一つずつ表示
  3. データがないときの処理

    データがないときなどイレギュラーパターンを想定しての処理をかけることがうろダクションコードへの第一歩

    MySQLで特定テーブルの全データを削除する

    TRUNCATE TABLE

  • 指定したテーブルの全データを削除する

    tbl_name: テーブル名

    TRUNCATE[TABLE]tbl_name

  • compnaiesテーブルの全データ削除

    1
    TRUNCATE TABLE companies;

    XSS対策

    有名なセキュリティの脆弱性XSS(クロスサイトスプリクティング)対策をする

    特殊文字をエスケープさせる

  • <

    &lt;

  • >

    &gt;

    PHPでXSS対策

    htmlspecialchars()を使ってHTML特殊記号をエスケープする

  • HTMLの特殊文字を文字参照に置き換える

    • $string: 変換する文字列
    • $flags: 処理の仕方を指定するフラグ
    • $encoding: 文字を変換するときに使用するエンコーディング
      1
      htmlspecialchars($string, $flags, $encoding)