2019-10-07に更新

Bootstrapでベースデザインを整える

今回は一旦Bootstrapでデザインを整えてみたいと思います。デザインを整えないまま開発を進めすぎてしまうと、いざデザインを組み込む時に今まで作ったページを一通り調整し直さなければなりません。そのためベースだけは最初に整えておいて、新規にページを作る際などは最初からデザインを組み込んでおく方が楽です。

npmの利用

BootstrapはCDNで提供されているURLから直接読み込んで利用することもできます。軽いですし個人的にはおすすめです。ただ、今回はnpmを利用して利用していきたいと思います。ビルドは重くなりますが、色のカスタマイズなどが必要になった時に簡単できるようになったりします。

また、JavaScriptを使う際などにもどのみちnpmを利用していきますので、JavaScriptもCSSも一括でビルドされます。

Node.jsをインストール

ということでPCにNode.jsが入っていない場合はNode.jsをインストールしておいてください。公式サイトのインストーラを使う形でも構いませんし、Windows意外、もしくはWindowsの場合はWSLが使えるようであればnvmを使うと簡単にバージョンを切り替えられるためおすすめです。

今回Node.js v10.16.3を利用していますので、合わせていただくと問題が出にくいと思います。(とはいえ最新のバージョン12とかでも恐らく動くのではないかと思いますが)

Yarnを利用

また、パッケージマネージャとしてYarnを利用して解説していきます。npmをそのまま使う形でも問題ないですが、合わせたい場合はそちらもインストールしておいてください。

Bootstrapのインストール

本来であればYarnなどを利用してインストールの設定を行っていきますが、Laravelにはlaravel/uiという外部パッケージがあり、そちらでJavaScriptとCSSを初期化すると自動的にBootstrapもインストールされます。以前記事を書きましたので、先に下記を参考にVue.jsを入れるパターンでインストールをしておきます。

Laravel 6 でVue.jsやReactを使う

デザインを整える

では前回作成したユーザー詳細ページを調整していきます。http://localhost:8000/users/ユーザー名というURLです。yarn hotでホットリローディングした状態で開発を進めていきます。

ビルドしたjs、cssファイルを読み込む

まずは共通レイアウトであるresources/views/layouts/app.blade.phpyarn hotコマンドでLaravel Mixによってビルドされたjsファイルとcssファイルを読み込んでおきます。

headタグ内にCSSの読み込みを追加します。

    <link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">

bodyタグの最後にJavaScriptファイルの読み込みを追加します。

    <script src="{{ mix('js/app.js') }}"></script>

これでページをリロードして確認してみましょう。正常に読み込めていれば少し背景色や体裁などが変わります。

Formを整えてみる

BootstrapにはFormのコンポーネントが用意されています。

Forms · Bootstrap

これで作成したフォームを整えてみます。また、箱系のサービスは大体中央寄せにしているのでそのあたりも調整してみます。

こんな感じになりました。

DevToolsのスマホ表示で見てみるとこんな感じです。

レイアウトの調整

全体レイアウトは具体的には下記のようにしました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{{ config('app.name') }}</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}" type="text/css">
  </head>
  <body>
    @if (session('success'))
      <div class="success">
        {{ session('success') }}
      </div>
    @endif
    <div class="container" style="max-width: 600px">
      @yield('content')
    </div>
    <script src="{{ mix('js/app.js') }}"></script>
  </body>
</html>
  • viewportが抜けていたので入れました。これを入れないとスマホ表示が正しく行われません。BootstrapのStarter templateを参考にしています。
  • コンテンツをclass="container"で囲みました。Bootstrapはだいたいとりあえずcontainerで囲みます。
  • 横幅が広すぎるとtextareaが不格好だったので最大サイズを600pxにしました。

質問ページの調整

質問ページは具体的には下記のようにしました。

<section class="text-center pt-4">
  <h1 style="font-size: 1.5rem">{{ $user->name }}</h1>
  <div class="mb-4">への質問</div>

  {!! Form::open(['url' => url('questions')]) !!}
  {!! Form::hidden('user', $user->unique_id) !!}
  <div class="form-group">
    {!! Form::textarea('body', null, [
      'class' => 'form-control',
      'placeholder' => '質問をする',
      'required' => true,
    ]) !!}
  </div>
  {!! Form::Submit('質問する', ['class' => 'btn btn-primary']) !!}
  {!! Form::close() !!}
</section>
  • 全体をtext-centerクラスで囲んでセンタリングしました。箱系のサービスは大体そういうレイアウトだったような気がしますので。(参考:Text · Bootstrap
  • mb-4を入れてマージンを調整しました。(参考:Spacing · Bootstrap
  • Formにクラスを指定して整えました。(参考:Form · Bootstrap
  • requiredが抜けていたので入れておきました。ブラウザ側で簡易な入力必須チェックを行ってくれます。

雑にやる

仕事でもなく一人でやるので、styleを直書きしたりととにかく雑で良いと思います。開発しづらくなってきたら共通化したり整えたりしましょう。

アラートの調整

Flashメッセージの表示用にAlertコンポーネントを使います。

レイアウトを下記のように調整します。(ついでにcontainerの中に入れておきました)

    @if (session('success'))
    <div class="alert alert-success" role="alert">
      {{ session('success') }}
    </div>
    @endif

Alerts · Bootstrap

ナビゲーションバーを入れる

ナビゲーションバーをヘッダ部分に入れてみます。

Navbar · Bootstrap

このあたりから適当に選んで入れてみました。containerの最初に入れています。

まとめ

とりあえず今回はこんなところでしょうか。とりあえずざっと最初の体裁が決まったので今後もこれに沿って進めていきます。あとはまた必要な物が出たら順次検討していきます。次回はツイートは何分に1回なら引かれないかを検証してみたいと思います。


view_list [連載] Laravelで質問箱みたいなサービスを作る
第2回 Laravel Socialiteを使ってTwitterアカウントでログイン機能
第3回 質問できるようにする
第4回 Bootstrapでベースデザインを整える
第5回 質問に回答する機能を作る
第6回 Twitterシェア用のOGPを作成する

だら@Crieit開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント