Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8660

【Laravel】デフォルトの管理画面に左メニューをサクッと設置

$
0
0

最近Laravelはじめました。

Laravelにはデフォでユーザ管理機能が存在しますが、そのログイン後の画面はコンテンツエリアのみのレイアウトとなってます。これをよくある固定左メニュー+コンテンツエリアのレイアウトにしてみます。

(完成形)
スクリーンショット_2020-02-07_17_26_06.png

0. 管理機能の有効化

ver5系ではphp artisan make:authコマンドでユーザ管理機能がセットアップできたのですが、6系の場合は以下のリンク等を参考にセットアップしてください。

Laravel 6系でmake:authを使う方法
Laravel6 備忘録 −ユーザー認証(Auth)−

うまくセットアップできれば、/resources/views下に以下のファイルが生成されているはずです。
home.blade.php
今回は認証後の最初のビューであるこれを元に話をすすめます。

1. home.blade.phpから左メニューの元ネタをコピー

<div class="col-md-12">から閉じの</div>までをコピーします。

/resources/views/home.blade.php
<divclass="container"><divclass="row justify-content-center"><divclass="col-md-12"><divclass="card">

        // 略

2. menu.blade.phpを新規作成

1でコピッたソースを貼り付けて、col-md-12col-md-2に変更してお好みに応じてカスタマイズします。

/resources/views/menu.blade.php
<divclass="col-md-2"><divclass="card"><divclass="card-header"><iclass="fas fa-th-list"></i></i> MENU</div><divclass="card-body"><divclass="panel panel-default"><ulclass="nav nav-pills nav-stacked"style="display:block;"><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li><li><iclass="fas fa-user-alt"></i><ahref="#">XXXXXXXX</a></li></ul></div></div></div></div>

3. home.blade.phpを修正

col-md-12col-md-10に変更して、その直前の行に@include('menu')を。

menu.blade.php
<divclass="container"><divclass="row justify-content-center"><!-- left menu -->
        @include('menu')

        <divclass="col-md-10"><divclass="card">

        // 略

ちなみに今回はこんなCSSをあててみました。

.col-md-2.card-body{padding:0;}.col-md-2ul{padding:0;position:relative;}.col-md-2ulli{line-height:1.8;padding:0.5em0.5em0.5em0.7em;list-style-type:none!important;background:-webkit-linear-gradient(top,#whitesmoke0%,whitesmoke100%);background:linear-gradient(tobottom,whitesmoke0%,#dadada100%);text-shadow:1px1px1pxwhitesmoke;color:black;}

以上、LaravelというようりBootstrapのグリッドシステムを利用した小ネタでした。今回は2:10でメニューとコンテンツエリアを分割しましたが、12(グリッドの個数は最大12)の範囲内で3分割なども可能です。


Viewing all articles
Browse latest Browse all 8660

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>