「Nuxtでプログを構築しよう!!」の8回目。今回は、クールな画面に変身させてみよう。
Nuxt には色々な UI フレームワークが用意されていますが覚えるのが面倒なので、おじさんでも数行の CSS でクールな画面に挑戦したいと思います。はたしてクールな画面になるなるのかなぁ。
基本デザイン
コンセプトはシンブル。どうしよう、まずフラット画面がペース、次にマテリアルアイコンが似合うように考えて、ベースは白系で、ポイント色はピンク+オレンジ系と反対色のブルー系として、あとは文字は黒よりちょっとグレー系が入ったものかな。あとはクールな画像を取り寄せてごまかす。
記事の画面を変更してみよう
テスト記事だと文字数が短いためイメージつかめないので、まずは書き溜めていた記事を登録して標準で表示させてみました。これみていると NCSA Mosaic のころを思い出すのは私だけだろうか。
記事を表示する Card コンポーネントのスタイルに追加していきたいと思います。Card コンポネートには、記事イメージの card-img と記事本体の card-content とその中に card-title、そして card-footer の構成になっています。それぞれのクラスにスタイルを設定していきます。
<template>
<section :class="[digest === true ? 'card-digest' : 'card']">
<img class="card-img" :src="article.img" />
<div class="card-content">
<p class="card-title">{{ article.title }}</p>
<div>
<nuxt-content :document="article" />
</div>
<p class="card-footer">
{{ formatDate(article.createdAt) }}
</p>
</div>
</section>
</template>記事イメージの体裁と記事は padding を使って上下左右の空白を調整して、タイトルはセンタリング、footer は記事の日付を右寄せにしたいと思います。文字サイズや位置は px ではなく rem にしました。これは html の標準の文字サイズを基準として相対的なサイズとなるように設計しました。スマートフォン、タブレット、PC などメディアクエリを使って画面サイズに応じた文字サイズを調整しやすくできるかなと思っています。
Tip remとemの違いは、remは、htmlの文字サイズを基準にするのに対して、emは、親要素の値を引き継ぎます。(例)remの場合 htmlのフォントサイズ=10px,Body=1.2rem=12px,div=1.4rem=14px、(例)emの場合 htmlのフォントサイズ=10px,Body=1.2rem=12px,div=1.4rem=16.8pxとなります。
<style>
.card-img {
height: auto;
width: 100%;
height: 280px;
object-fit: cover;
}
.card-content {
padding: 0.5rem 2.5rem;
}
.card-content p {
padding-top: 1rem;
}
.card-content img {
width: 90%;
height: auto;
object-fit: cover;
}
.card-footer {
padding-right: 1rem;
padding-bottom: 0.8rem;
font-size: 0.8rem;
text-align: right;
color: #333;
}
.card-content a {
border-bottom: 0px solid #ef8b80;
box-shadow: inset 0 -4px 0 #ef8b80;
}
.card-content strong {
border-bottom: 0px solid #0f4ed694;
box-shadow: inset 0 -4px 0 #0f4ed694;
}
</style>リンクや強調文字についてもスタイルを設定していきたいと思います。リンクは赤、強調するところは青のボーダーにしてみました。またリンクはヘッダーなどにもあるので標準の設定は削除してマウスオーバーすると赤くなるようにしました。こちらは default.vue のスタイルに追加しました。
a {
text-decoration: none;
color: dimgray;
}
a:hover {
color: brown;
}
クールとは言えませんが、最低限の体裁を整えることができました。Card コンポールントが 34 行、default.vue が 7 行の計 41 行のスタイル追加となりました。
記事一覧の画面を変更してみる
プログのトップページに記事一覧を表示したいと思います。今の記事一覧のコンポーネント Articles は、タイルとリンクの一覧になっていますので、ここを Card コンポーネンに変更してカードイメージの一覧に変更してみます。
<NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">
{{ article.title }}
</NuxtLink>
<NuxtLink :to="{ name: 'blog-slug', params: { slug: article.slug } }">
<div class="cards">
<Card :digest="true" :article="article" />
</div>
</NuxtLink>
今の記事の一覧は、縦になんでいますので、これをタイル式に変更していきたいと思います。スタイルシートの article-list クラスにcolumn-count:3を設定して横 3 列にしたいと思います。また画面サイズに応じてカラム数を変更するようにもしてみます。
| 記事 1 | | 記事 1 | 記事 4 | 記事 7 | | 記事 2 | => | 記事 2 | 記事 5 | 記事 8 | | 記事 3 | | 記事 3 | 記事 6 | 記事 9 | | 記事 4 | | 記事 5 | | 記事 6 | | 記事 7 | | 記事 8 | | 記事 9 |
@media (max-width: 1390px) {
.article-list {
column-count: 2;
}
}
@media (max-width: 1000px) {
.article-list {
column-count: 1;
}
}
.article-list {
margin: 0 auto;
padding: 1rem 2rem;
column-count: 3;
column-gap: 1rem;
}Card コンポーネントも digest 用のスタイルシートを追加してカードににせた装飾をしたいと思います。
.card-digest {
border-radius: 5px;
box-shadow: 0 2px 5px #ccc;
}
</style>
こちらは、Arctiles のスタイル修正が 16 行で Card コンポーネントは 4 行の計 20 行の追加となりました。これで一通りのスタイルの修正が完了しました。 次回は、ヘッダーメニューを整えていきたいと思います。