課外活動9
今日は企業のウェブサイトでよく見かける大きな背景画像の真ん中に文字があるものを作ります．
今日の記事は2部構成となっていて，はじめに自分で実装した場合のコード，その後Nuxt+vuetify を利用したものを紹介します．
自力実装
中央に文字を表示する
画面の中央に文字を配置するコードは，以前にも出てきました． 課外活動５ - undefined
このコードの応用です．
まず，基本となるHTMLファイルを作成します．
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>中央に文字がある何か</title> </head> <body> <div class="content">おいしいお米を食べたい</div> </body> </html>
表示すると，シンプルなテキストが表示されています．
次に，画面中央に文字を出します．styleタグを作り headのとじタグの前に入れてください．
body { margin: 0; padding: 0; } .content { font-size: 4rem; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; }
以前にもこのようなCSSを書いたと思います．これらのCSSについて解説します．
デフォルトのCSS，リセットCSS
まずはじめの body に対しての調整についてです．
body { margin: 0; padding: 0; }
これらは，bodyタグの margin と padding を 0 にするというものです．なぜこのようなものが必要なのでしょうか？
ブラウザには，デフォルトでCSSの設定が組み込まれています．
この記事の最初にあるHTMLをブラウザで確認してみてください．
body { display: block; margin: 8px; }
というCSSが適用されています．このCSSを生かしたままレイアウトの調整をおこなっても良いのですが，トラブルの原因となる場合が多々あります．なので，リセットCSSというものがよく用いられます．
リセットCSSはその名の通り，CSSの初期設定をリセットするものです．今回はお試しでレイアウトをしているのみなので，body タグに対して margin: 0; padding: 0; を適用するという簡単なものにしています．
次に contentクラスに対しての操作です．
.content { /*文字の設定*/ font-size: 4rem; color: white; /*配置の設定*/ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; }
font-size
font-sizeは文字の大きさを指定するためのものです． 指定方法は，px指定や%指定，キーワード指定など様々な方法があります．
font-size - CSS: カスケーディングスタイルシート | MDN
4rem は，ルートHTMLのフォントサイズを1remとしたときの4倍という意味です．
なぜ私は，web以外でも一般的に使われている px ではなく，rem という単位をつかったのでしょうか？
それは，pxで指定した場合ユーザの解像度に関わらずpxで指定した値になるためです．
解像度が高いディスプレイで見たユーザには小さく見え，解像度が低いディスプレイで見たユーザは大きく見えてしまいます．
そのため，pxによる指定をする場合注意が必要です．
color
color は文字の色を変更するためのものです．こちらも指定方法が色々あります．
赤色にするものであっても，以下のような複数の書き方があります．
color: red; color: #f00; color: #ff0000; color: rgb(255,0,0); color: rgb(100%, 0%, 0%); color: hsl(0, 100%, 50%);
私は，同じプロジェクト内で統一されていればどの指定方法でも良いと思います．
color - CSS: カスケーディングスタイルシート | MDN
display
/*配置の設定*/ display: flex; flex-direction: column; justify-content: center; align-items: center;
配置を調整するためのものです． 近年，スマートフォンやタブレットの普及してきました．言い換えると，閲覧者の画面サイズがまちまちになってきたということです．
flaxを用いると様々な画面サイズに簡単に対応することができます．
このあたりは私も理解できていません．いつも雰囲気で書いています．ごめんなさい．
flex - CSS: カスケーディングスタイルシート | MDN
width, height
width: 100vw; height: 100vh;
これらは，その要素の幅と高さを決めるものです．何も指定していなければ，文字を囲う枠の幅になります．
全画面に対して中央に持ってくることを考えた場合，要素の大きさも全画面にしなければなりません．
vw は，ウィンドウの幅を100としたときどれほどかという指定方法です．すなわち，100vwとはウィンドウ幅いっぱいということです．
同様に vh はウィンドウの高さを100としたときの割合による指定方法です．
これらの指定をすることによって画面いっぱいにコンテンツの領域ができます．
背景画像の指定
背景画像の指定は様々な手法がありますが，私が思う簡単な方法を紹介します．
まず画像がなければ表示できないので，写真を入手します． 私はこの画像を使います．
https://free-images.com/display/rice_usd_koshihikari_rice.html
imgフォルダを作りその中にダウンロードした画像を入れます．
その後，CSSを追記します．
/*背景画像の設定*/ background-image: url("img/rice_usd_koshihikari_rice.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat;
background-inage に画像のURLを指定することによって背景画像を設定されます．
その他の指定しているものであまり重要なものは無いので説明は省略します．"そう書く" 程度に以下のURLを確認しておいてください．
background-size - CSS: カスケーディングスタイルシート | MDN
background-repeat - CSS: カスケーディングスタイルシート | MDN
background-position - CSS: カスケーディングスタイルシート | MDN
これらをまとめたHTMLファイルはこのようになります．
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>中央に文字がある何か</title> <style> body { margin: 0; padding: 0; } .content { /*文字の設定*/ font-size: 4rem; color: white; /*配置の設定*/ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; /*背景画像の設定*/ background-image: url("img/rice_usd_koshihikari_rice.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } </style> </head> <body> <div class="content">おいしいお米を食べたい</div> </body> </html>
Vuetify
Vue.js Material Component Framework — Vuetify.js
Vuetify は，Vue(Nuxt) 向けのUIフレームワークです．
事前準備
昨日はプロジェクトを作成したのみです． テンプレートからプロジェクトを作成した場合，このテンプレートの設定が残っています．
今回は不要なのでその設定を削除します．
layouts/default.vue を変更
<template>
<v-app>
<v-content>
<nuxt />
</v-content>
</v-app>
</template>
pages/index.vue を変更
<template>
<section>
おいしいお米を食べたい
</section>
</template>
pages/inspire.vueを削除
package.json があるディレクトリに移動して，以下のコマンドを打ちます．
npm run dev
開発用サーバが立ち上がり，http://localhost:3000 にアクセスすると文字のみが表示された画面がでてきます．
Vuetify でそれっぽい画面を作る
画像の配置
まず，プロジェクト内に画像を配置しないといけません．Nuxt.js では，static フォルダ内に画像を入れます．
static フォルダ内に rice_usd_koshihikari_rice.jpg という画像を入れます．
parallax
Vuetify は，v-parallax というコンポーネントが準備されています．
Parallax Component — Vuetify.js
これを利用すると，手軽にかっこいい画面が作ることができます．
pages/index.vue を変更します．
<template>
<section >
<v-parallax src="/rice_usd_koshihikari_rice.jpg">
<v-layout column align-center justify-center class="white--text">
<h1 class="mb-2 display-3 text-xs-center">おいしいお米を食べたい</h1>
</v-layout>
</v-parallax>
</section>
</template>
画像背景に文字が入ったものができました．
よく見ていただくとわかるんですが，高さが 100vh となっていません．
ドキュメント( https://vuetifyjs.com/ja/components/parallax#parallax ) には，height という属性をつけることができると書かれています．
なので，
<v-parallax src="/rice_usd_koshihikari_rice.jpg" height="100vh">
としてみます．
すると，レイアウトが崩れてしまいました．ソースコードを見ると，100vhpx となっていることがわかります．
すなわち，v-parallax の height 指定はpxによって指定する必要があります．
フレームワークを使うとこのような場合の調整に苦労します． 今回は諦めます．デフォルトの500pxのまま運用します．
まとめ
いろんな画面サイズに対応するとき flex が便利
フレームワークを使うと簡単に実装できるが，微調整をするとなるとつらい
