前回までの様子はこちら。
最新ソースはこちら。
https://github.com/takishita2nd/hotel-mng
まあ、ここまで見ていただいた方々は、ほぼ100％思っていることがあると思います。
見づらい。
せめて、罫線ぐらい引けよ。
ということで、やります。
Laravelでは、public/css/app.cssを読み込んで、スタイルを設定しています。
じゃあ、ここにスタイルを書き足せばいいのか？と思うかもしれませんが、Laravelでは、もっと便利な方法があるんです。
sass/scssというんですけどね。
こちらにスタイルを書き込み、node.jsのプログラムを実行して、app.cssを作成することができるんです。
sass/scssは普通にCSSを書くよりも、少ないコードでスタイルをかけるので便利でした。
まずは、node.jsの準備。
$ sudo apt install nodejs $ sudo apt install npm $ npm install $ npm run dev
もし、npm installに失敗した場合は、imagemin-pngquantのバージョンが一致していないので、package.jsonのdevDependenciesに以下を書き足します。
"imagemin-pngquant": "5.0.1"
npm installが完了すれば、準備完了。
npm run devを実行すると、sass/scssのコンパイルが実行されます。
スタイルは何度も書き換えることが多いので、コンパイルが面倒くさい人は、
$ npm run watch
を入力すると、sass/scssを保存するたびに、それを検出してコンパイルしてくれます。
では、sass/scssを作成します。
resource/assets/sassの下に、_Management.scssを作成し、app.scssに以下を追加します。
@import "Management";
そして、_Management.scssに記述を追加。
table.management {
width: 100%;
tbody tr{
th {
border: solid;
border-width: thin;
}
.name{
width: 15%;
}
.address{
width: 20%;
}
.phone{
width: 15%;
}
.num{
width: 10%;
}
.date{
width: 10%;
}
.command{
width: 5%;
}
td {
border: solid;
border-width: thin;
}
.name{
width: 15%;
}
.address{
width: 20%;
}
.phone{
width: 15%;
}
.num{
width: 10%;
}
.date{
width: 10%;
}
.command{
width: 5%;
}
}
}
bladeにスタイルを適用します。
<table class="management">
<tr>
<th class="name">名前</th>
<th class="address">住所</th>
<th class="phone">電話番号</th>
<th class="num">人数</th>
<th class="date">宿泊日</th>
<th class="num">宿泊日数</th>
<th class="command">編集</th>
<th class="command">削除</th>
</tr>
@foreach ($registerLists as $list)
<tr>
<td class="name">{{ $list->name }}</td>
<td class="address">{{ $list->address }}</td>
<td class="phone">{{ $list->phone }}</td>
<td class="num">{{ $list->num }}</td>
<td class="date">{{ $list->start_day }}</td>
<td class="num">{{ $list->days }}</td>
<td class="command">{{ Html::link('/management/'.$list->id.'/edit', '編集') }}</td>
<td class="command">{{ Html::link('/management/'.$list->id.'/conform', '削除') }}</td>
</tr>
@endforeach
</table>
これで見た目がだいぶ良くなりました。
バナークリックで応援よろしくお願いします。
