- 投稿日：2019-05-12T19:50:56+09:00
Bootstrapのnavbarで右寄せにしたいけど、mr-autoが効かないときの対処法
はじめに
今回はBootstrapのnavbarについてです。
Webページにナビゲーションバーを作りたいと思い、bootstrapのnavbarを導入してみました。
しかし公式の通りにやってもうまくいかなかったので、同じく悩んでいる方がいたら参考にしてください。
公式のやり方じゃ適用されなかった、、、
Bootstrapをつかったナビゲーションバーの作り方
Bootstrap公式によると、
左寄せと右寄せでulタグを分けて、左寄せの方のulタグのクラスにmr-autoを適用すればいいのだそう。<div class="collapse navbar-collapse" id="XXX"> <!-- 左寄せ --> <ul class="nav navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">XXX</a> </li> <li class="nav-item"> <a class="nav-link" href="#">XXX</a> </li> </ul> <!-- 右寄せ --> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">XXX</a> </li> <li class="nav-item"> <a class="nav-link" href="#">XXX</a> </li> </ul> </div>Laravelの勉強をララ帳でやっていて、ララ帳でもこのような紹介がされていました。
しかしながら私はこのままではすべて左寄せで表示されてしまいました。
しらべてみると、Bootstrapのバージョン等が問題でmr-autoが効かないというような記事もありました。
Bootstrap4をLaravelに導入をしてみるも左寄せのままでした。
解決策：
divタグで無理やり左寄せと右寄せに分ける<div class="collapse navbar-collapse" id="XXX"> <!-- 左寄せ --> <div class="navbar-left"> <!-- ここを追加（どっちでもいい） --> <ul class="nav navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">XXX</a> </li> <li class="nav-item"> <a class="nav-link" href="#">XXX</a> </li> </ul> </div> <!-- 右寄せ --> <div class="navbar-right"> <!-- ここを追加 --> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">XXX</a> </li> <li class="nav-item"> <a class="nav-link" href="#">XXX</a> </li> </ul> </div> </div>こんな感じにdivタグのクラスに
navbar-rightを追加して、うまく右寄せが適用されました。
- 投稿日：2019-05-12T15:07:44+09:00
Vue.js-Laravelを使用して、ファイル管理についておおざっぱに#8
なぜファイルを分けるのか
チュートリアルなんかでよく見かけることがありますが、htmlとcssとJavaScriptとphpなどのコードを一つのファイルに書いてある例があります。それは、チュートリアルとしては、一つのファイルでコードを書いたほうがページにまとめやすい・記事を見た人がみやすいなどの説明のためにそうしていることがほとんどです。
実践の場ではそのまま使ってはいけないほうが多いと思います。このページは記述量が少ないから、一つのファイルに書いてしまおうなどとしてしまうと、htmlとcssとJavaScriptとphpを同じファイルにあり、そのページのすべての部品の機能も同じファイルに記述された状態だと、この機能を足してほしいといったときに、どんどんファイルの記述量が肥大化していきます。問題としては、コードを管理しにくかったり、初めて見る人が理解するのに時間がかかってしまうなどがあります。
それをなるべく防ぐ方ためにファイルを分けます。ファイルを分けることを抽象化といいます。ファイルの分け方もいろいろあります。例えば、Vue.jsでは単一ファイルコンポーネントという考え方があり、それはページの部品ごとにファイルを分けて、ページを作るときに、部品を一つずつ引っ張ってくることで、再利用性が高く、管理もしやすく、はじめてコードを見た人も理解がしやすくなります。他には、cssとJavaScriptとHtmlは別ファイルで管理するやり方などもあります。
今回はVue.jsを使って、下の例で、単一ファイルコンポーネントを体験してみます。例をこなして体験してみる
Laravelプロジェクト配下で、コマンドnpm installをたたいて、Vue.jsを使うための準備を整えます。
- laravel Vue.js docker-compose環境構築
- laravelにVue.jsを入れる前の、5分間の事前学習環境が整えられたら、LaravelでVue.jsを使って、表示してみます。
(ファイル分けないで)(もともと用意されているwelcome.blade.phpを編集します)welcome.blade.php<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Vue.js</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"> <script src=" {{ asset('js/app.js') }} "></script> </head> <body> <div id="sampleDiv"> <sample-component></sample-component> </div> <script> Vue.component('sample-component', { template:'<h1>今日も最高！！</h1>' }); const vue = new Vue({ el: '#sampleDiv', }); </script> </body> </html>Vue.jsのコンポーネントを使用して、このページではsample-componentという部品を利用しています。Vue.jsコンポーネント
まず、bladeだけを分けてみます。
構造
resources -- js | -- lang | -- sass | -- views -- layouts -- app.blade.php | -- welocome.blade.phplayoutsフォルダを作成し、その下にapp.blade.phpを作成します
(さらにheader.blade.phpとして、headerを別に分ける方法もあり)app.blade.php<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Vue.js</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"> <script src=" {{ asset('js/app.js') }} "></script> </head> <body> @yield('content') </body> </html>もともとのwelocome.blade.phpからbodyの中身を@yield('content')に変えました。何がいいかというと、ページを複数作成するときに、app.blade.phpの中に記述していることは@extendsで再利用ができるという点で何回も記述しなくてすみます。
それでは、welcome.blade.phpを編集します。welcome.blade.php@extends('layouts.app') @section('content') <div id="sampleDiv"> <sample-component></sample-component> </div> <script> Vue.component('sample-component', { template:'<h1>今日も最高！！</h1>' }); const vue = new Vue({ el: '#sampleDiv', }); </script> @endsection@extendsで引き継ぐbladeを指定しています。先ほど@yieldで指定したところへ、@sectionから@endsectionまでの中身を挿入しています。画面を表示すると、先ほどと同じように「今日も最高！！」と表示されています。
それでは、単一ファイルコンポーネントを利用してみます。
先ほどの構造のjsディレクトリの詳細
js -- components -- ExampleComponent.vue | | -- app.js -- SampleComponent.vue | -- bootstrap.jsLaravelでVue.jsを使用する際にresources/js/app.jsをpublic/jsにコンパイル(出力)するため、npm run devをたたきますが、npm run devはwebpack.mix.jsの内容を見て、出力してくれます。webpackは複数のjsファイルが存在したとき、それの依存関係を解決し、一つのファイルにまとめてくれる便利なものです。今回でいえばnpm run devをたたけば、一つのファイルにまとめてくれます。
SampleComponent.vue作成
SampleComponent.vue<template> <p> {{message}} </p> </template> <script> export default { data: () => { return { message: '今日も最高！！' } } } </script>Vue.jsのコンポーネントの決まりとして、タグの中に書きます。子コンポーネントなので、dataは関数です。
bladeでVue.jsのデータ変数を使う際は、@{{}}を使うのですが、.vueファイルのため{{}}内に書けます。welocome.blade.php@extends('layouts.app') @section('content') <div id="app"> <sample-component></sample-component> </div> @endsectionid:appはもともと、app.jsに登録されているので、使用できます。idを変える場合はapp.jsに書くかwelocome.blade.phpでVueインスタンスを新たに作る必要があるため、今回記述量の少ないこちらを採用しました。
app.jsを編集します。app.js// Vue.component('example-component', require('./components/ExampleComponent.vue').default); Vue.component('sample-component', require('./components/SampleComponent.vue').default);exampleは使わないので、コメントアウトして、sample-componentを使うため、登録します。app.jsの下にid:appの記述があると思います。require default
npm run devこれでwelcome.blade.phpを表示すれば、表示されると思います。
- 投稿日：2019-05-12T15:07:44+09:00
Vue.js-Laravelを使用して、ファイル管理について簡単に書いてみた#8
なぜファイルを分けるのか
チュートリアルなんかでよく見かけることがありますが、htmlとcssとJavaScriptとphpなどのコードを一つのファイルに書いてある例があります。それは、チュートリアルとしては、一つのファイルでコードを書いたほうがページにまとめやすい・記事を見た人がみやすいなどの説明のためにそうしていることがほとんどです。
実践の場ではそのまま使ってはいけないほうが多いと思います。このページは記述量が少ないから、一つのファイルに書いてしまおうなどとしてしまうと、htmlとcssとJavaScriptとphpを同じファイルにあり、そのページのすべての部品の機能も同じファイルに記述された状態だと、この機能を足してほしいといったときに、どんどんファイルの記述量が肥大化していきます。問題としては、コードを管理しにくかったり、初めて見る人が理解するのに時間がかかってしまうなどがあります。
それをなるべく防ぐ方ためにファイルを分けます。ファイルを分けることを抽象化といいます。ファイルの分け方もいろいろあります。例えば、Vue.jsでは単一ファイルコンポーネントという考え方があり、それはページの部品ごとにファイルを分けて、ページを作るときに、部品を一つずつ引っ張ってくることで、再利用性が高く、管理もしやすく、はじめてコードを見た人も理解がしやすくなります。他には、cssとJavaScriptとHtmlは別ファイルで管理するやり方などもあります。
今回はVue.jsを使って、下の例で、単一ファイルコンポーネントを体験してみます。例をこなして体験してみる
Laravelプロジェクト配下で、コマンドnpm installをたたいて、Vue.jsを使うための準備を整えます。
- laravel Vue.js docker-compose環境構築
- laravelにVue.jsを入れる前の、5分間の事前学習環境が整えられたら、LaravelでVue.jsを使って、表示してみます。
(ファイル分けないで)(もともと用意されているwelcome.blade.phpを編集します)welcome.blade.php<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Vue.js</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"> <script src=" {{ asset('js/app.js') }} "></script> </head> <body> <div id="sampleDiv"> <sample-component></sample-component> </div> <script> Vue.component('sample-component', { template:'<h1>今日も最高！！</h1>' }); const vue = new Vue({ el: '#sampleDiv', }); </script> </body> </html>Vue.jsのコンポーネントを使用して、このページではsample-componentという部品を利用しています。Vue.jsコンポーネント
まず、bladeだけを分けてみます。
構造
resources -- js | -- lang | -- sass | -- views -- layouts -- app.blade.php | -- welocome.blade.phplayoutsフォルダを作成し、その下にapp.blade.phpを作成します
(さらにheader.blade.phpとして、headerを別に分ける方法もあり)app.blade.php<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Vue.js</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"> <script src=" {{ asset('js/app.js') }} "></script> </head> <body> @yield('content') </body> </html>もともとのwelocome.blade.phpからbodyの中身を@yield('content')に変えました。何がいいかというと、ページを複数作成するときに、app.blade.phpの中に記述していることは@extendsで再利用ができるという点で何回も記述しなくてすみます。
それでは、welcome.blade.phpを編集します。welcome.blade.php@extends('layouts.app') @section('content') <div id="sampleDiv"> <sample-component></sample-component> </div> <script> Vue.component('sample-component', { template:'<h1>今日も最高！！</h1>' }); const vue = new Vue({ el: '#sampleDiv', }); </script> @endsection@extendsで引き継ぐbladeを指定しています。先ほど@yieldで指定したところへ、@sectionから@endsectionまでの中身を挿入しています。画面を表示すると、先ほどと同じように「今日も最高！！」と表示されています。
それでは、単一ファイルコンポーネントを利用してみます。
先ほどの構造のjsディレクトリの詳細
js -- components -- ExampleComponent.vue | | -- app.js -- SampleComponent.vue | -- bootstrap.jsLaravelでVue.jsを使用する際にresources/js/app.jsをpublic/jsにコンパイル(出力)するため、npm run devをたたきますが、npm run devはwebpack.mix.jsの内容を見て、出力してくれます。webpackは複数のjsファイルが存在したとき、それの依存関係を解決し、一つのファイルにまとめてくれる便利なものです。今回でいえばnpm run devをたたけば、一つのファイルにまとめてくれます。
SampleComponent.vue作成
SampleComponent.vue<template> <p> {{message}} </p> </template> <script> export default { data: () => { return { message: '今日も最高！！' } } } </script>Vue.jsのコンポーネントの決まりとして、タグの中に書きます。子コンポーネントなので、dataは関数です。
bladeでVue.jsのデータ変数を使う際は、@{{}}を使うのですが、.vueファイルのため{{}}内に書けます。welocome.blade.php@extends('layouts.app') @section('content') <div id="app"> <sample-component></sample-component> </div> @endsectionid:appはもともと、app.jsに登録されているので、使用できます。idを変える場合はapp.jsに書くかwelocome.blade.phpでVueインスタンスを新たに作る必要があるため、今回記述量の少ないこちらを採用しました。
app.jsを編集します。app.js// Vue.component('example-component', require('./components/ExampleComponent.vue').default); Vue.component('sample-component', require('./components/SampleComponent.vue').default);exampleは使わないので、コメントアウトして、sample-componentを使うため、登録します。app.jsの下にid:appの記述があると思います。require default
npm run devこれでwelcome.blade.phpを表示すれば、表示されると思います。
- 投稿日：2019-05-12T15:07:44+09:00
Vue.js-Laravelを使用して、ファイル管理について簡単に書いてみた
なぜファイルを分けるのか
チュートリアルなんかでよく見かけることがありますが、htmlとcssとJavaScriptとphpなどのコードを一つのファイルに書いてある例があります。それは、チュートリアルとしては、一つのファイルでコードを書いたほうがページにまとめやすい・記事を見た人がみやすいなどの説明のためにそうしていることがほとんどです。
実践の場ではそのまま使ってはいけないほうが多いと思います。このページは記述量が少ないから、一つのファイルに書いてしまおうなどとしてしまうと、htmlとcssとJavaScriptとphpを同じファイルにあり、そのページのすべての部品の機能も同じファイルに記述された状態だと、この機能を足してほしいといったときに、どんどんファイルの記述量が肥大化していきます。問題としては、コードを管理しにくかったり、初めて見る人が理解するのに時間がかかってしまうなどがあります。
それをなるべく防ぐ方ためにファイルを分けます。ファイルを分けることを抽象化といいます。ファイルの分け方もいろいろあります。例えば、Vue.jsでは単一ファイルコンポーネントという考え方があり、それはページの部品ごとにファイルを分けて、ページを作るときに、部品を一つずつ引っ張ってくることで、再利用性が高く、管理もしやすく、はじめてコードを見た人も理解がしやすくなります。他には、cssとJavaScriptとHtmlは別ファイルで管理するやり方などもあります。
今回はVue.jsを使って、下の例で、単一ファイルコンポーネントを体験してみます。例をこなして体験してみる
Laravelプロジェクト配下で、コマンドnpm installをたたいて、Vue.jsを使うための準備を整えます。
- laravel Vue.js docker-compose環境構築
- laravelにVue.jsを入れる前の、5分間の事前学習環境が整えられたら、LaravelでVue.jsを使って、表示してみます。
(ファイル分けないで)(もともと用意されているwelcome.blade.phpを編集します)welcome.blade.php<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Vue.js</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"> <script src=" {{ asset('js/app.js') }} "></script> </head> <body> <div id="sampleDiv"> <sample-component></sample-component> </div> <script> Vue.component('sample-component', { template:'<h1>今日も最高！！</h1>' }); const vue = new Vue({ el: '#sampleDiv', }); </script> </body> </html>Vue.jsのコンポーネントを使用して、このページではsample-componentという部品を利用しています。Vue.jsコンポーネント
まず、bladeだけを分けてみます。
構造
resources -- js | -- lang | -- sass | -- views -- layouts -- app.blade.php | -- welocome.blade.phplayoutsフォルダを作成し、その下にapp.blade.phpを作成します
(さらにheader.blade.phpとして、headerを別に分ける方法もあり)app.blade.php<!doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="UTF-8"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>Vue.js</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css"> <script src=" {{ asset('js/app.js') }} "></script> </head> <body> @yield('content') </body> </html>もともとのwelocome.blade.phpからbodyの中身を@yield('content')に変えました。何がいいかというと、ページを複数作成するときに、app.blade.phpの中に記述していることは@extendsで再利用ができるという点で何回も記述しなくてすみます。
それでは、welcome.blade.phpを編集します。welcome.blade.php@extends('layouts.app') @section('content') <div id="sampleDiv"> <sample-component></sample-component> </div> <script> Vue.component('sample-component', { template:'<h1>今日も最高！！</h1>' }); const vue = new Vue({ el: '#sampleDiv', }); </script> @endsection@extendsで引き継ぐbladeを指定しています。先ほど@yieldで指定したところへ、@sectionから@endsectionまでの中身を挿入しています。画面を表示すると、先ほどと同じように「今日も最高！！」と表示されています。
それでは、単一ファイルコンポーネントを利用してみます。
先ほどの構造のjsディレクトリの詳細
js -- components -- ExampleComponent.vue | | -- app.js -- SampleComponent.vue | -- bootstrap.jsLaravelでVue.jsを使用する際にresources/js/app.jsをpublic/jsにコンパイル(出力)するため、npm run devをたたきますが、npm run devはwebpack.mix.jsの内容を見て、出力してくれます。webpackは複数のjsファイルが存在したとき、それの依存関係を解決し、一つのファイルにまとめてくれる便利なものです。今回でいえばnpm run devをたたけば、一つのファイルにまとめてくれます。
SampleComponent.vue作成
SampleComponent.vue<template> <p> {{message}} </p> </template> <script> export default { data: () => { return { message: '今日も最高！！' } } } </script>Vue.jsのコンポーネントの決まりとして、タグの中に書きます。子コンポーネントなので、dataは関数です。
bladeでVue.jsのデータ変数を使う際は、@{{}}を使うのですが、.vueファイルのため{{}}内に書けます。welocome.blade.php@extends('layouts.app') @section('content') <div id="app"> <sample-component></sample-component> </div> @endsectionid:appはもともと、app.jsに登録されているので、使用できます。idを変える場合はapp.jsに書くかwelocome.blade.phpでVueインスタンスを新たに作る必要があるため、今回記述量の少ないこちらを採用しました。
app.jsを編集します。app.js// Vue.component('example-component', require('./components/ExampleComponent.vue').default); Vue.component('sample-component', require('./components/SampleComponent.vue').default);exampleは使わないので、コメントアウトして、sample-componentを使うため、登録します。app.jsの下にid:appの記述があると思います。require default
npm run devこれでwelcome.blade.phpを表示すれば、表示されると思います。