こんばんは。たねやつです。
この連載を始めたときからずっと自作キーボード(↓)でうっているのですがやっぱり打ちやすい！
今まで使っていた静電容量無接点方式のNiz Plum84もめちゃくちゃいいキーボードなのですが、黒軸の反発が強い(50g)感じがかなり手にしっくりきます。
お互いに優劣はつけがたいですが、やはり自分で作ったという愛着感からtada68のほうが好きですね。キーマップも超自由に変えられますし。
前の記事
目標
- CSSの基本的な書き方を理解する
CSSをいじる
CSSファイルはプロジェクトを作成した時点でindex.cssというものがwww/css/内に作成されています。かつある程度ソースがかきこまれた状態です。
全体の文字サイズの変更
body内の値にfont-size:14px;というものがあるのでこの値を変更すると基本的に全体の文字のサイズが大きくなります。
仮想端末上でアプリの画面を確認していると、小さい文字でも大きく見えてしまうので実際のスマホ上で見たときに、文字が以上に小さく見えてしまうことがあります。
かつ、アプリでの画面をある程度作成してしまってから全体のフォントサイズを変更してしまうと、思わぬ箇所でレイアウトが崩れてしまうことがあります。(文字列が最後まで表示されない、途中で折り返されてしまうなど)
ですので可能な限り現段階でスマホにAPKファイルを展開して確認すべきなのですが、手間なので。。。という場合は16px以上を指定してあげておけばとりあえず文字が小さすぎると思うことはないと思います( ;∀;)
一覧に小文字を表示できるようにする
現在の状態だと、一覧画面で表示している半角英数字の部分はすべて大文字になっていると思います。前回のソースをそのまま残しているのであれば、(forEachで追加) の部分が (FOREACHで追加)という風になっていると思います。
なんでデフォルトで大文字に変換するようになっているのかは不明。。もしかするとマテリアルデザインのガイドラインに記述があるのかもしれません。
このままではTODOアプリとしては不便(入力値と表示値が異なる)ので大文字は大文字、小文字は小文字のままに表示できるように変更しましょう。
先ほどと同じくbody内のtext-transform:uppercase;の部分をコメントアウトしてあげると大文字化が解除されます。
CSSのコメントは/* ... */で挟んであげることでできます。ちなみにVSCodeのショートカットキーで、[Ctrl + /]で現在行のコメントアウト・解除が一発でできるようになっていて便利です。空行で実行すると/* ... */の部分だけ生成されるのでコメントを入力するのがかなり楽になります。
/* text-transform:uppercase; */
余談ですが、text-transform:lowercaseとした場合、逆にすべての半角英数字が小文字になります。
もし後々の処理でほかの大多数の部分では小文字も大文字で表示したいが、一覧では小文字のままにしておきたい、というような状況が発生した場合は、bodyではtext-transform:uppercaseを残しておき、ons-list-itemに対してのみtext-transformを解除してあげるような処理を追加してください。
解除するためには以下のように記述します。
ons-list-item { text-transform: none; }
noneを指定することで、親要素から引き継いだ設定を無効化させることができます。
画面中央揃えでボタンを表示
一番最初に作成したbutton.htmlの画面を覚えているでしょうか？
あの時はCSSなんか何も設定していなかったのでボタンが右上に寄った状態で表示されていたので見栄えはよろしくなかったです。
今回は画面の中央に寄るようにして、ボタンの大きさも変えてみたいと思います。
まずはbutton.htmlの画面を表示させるために、index.htmlの
<ons-navigator id="navi" page="button.html"></ons-navigator>
のpage属性に指定しているIDをbutton.htmlに変更しましょう。
そのあとで、button.htmlを以下のように修正します。
<ons-page id="button.html"> <div class="center"> <ons-button id="button" class="button--normal">touch!</ons-button> </div> </ons-page>
centerというクラスを指定したdivでボタンを囲みます。名前からわかるかもしれませんが、centerクラスには子要素を画面中央に揃えるようなCSSを指定します。
ボタンの大きさもある程度揃えたいので、button--normalというクラスを指定しておきます。CSSの命名方法はいろいろな考え方があるようなのですが、基本的には要素--状態というような書き方で進めていきます。
以下のページのオリジナルルールに近いような感じですね。大規模でかっちりした開発でないなら、このくらいのほうが覚えやすい & 書きやすいですね。
次にCSSに追記します。index.cssを開いて、末尾に以下を追加してください。
.center { text-align: center; } .button--normal { width: 33vw; }
クラスに対して設定するので、セレクタ({}の前)の先頭にピリオドをつけるのを忘れないようにしてください。
ボタンの幅にはvwという単位を指定しています。%と似ているのですがvwはどんな状態でも画面幅に対しての割合を参照できます。なので、33vwと指定するとどんな親要素の中でも画面幅の1/3の大きさのボタンを表示しようとします。
%の場合は、親要素に引きずられてしまうので親要素が画面幅の50%の大きさだった場合、その50%の中の33%(≒17%)の幅になっていしまいます。
高さの場合はvhを使用しますが、この方法で指定した場合スマホ上の仮想キーボードなどで画面の表示高さが狭くなった時にそれに応じて高さを変更しようとするためスマホではあまり活躍の場がないかもしれません。
この内容でスマホで表示してみると以下のようになるはずです。
中央に揃っていますね！上はページのトップにくっついていますがこれもmargin-topあたりを設定することで離すことができます。
今回はここまでです！お疲れさまでした ^^) _旦~~
忘れずにindex.htmlで変更したpage属性の値をlist.htmlに戻しておいてください。多分次の記事でも変更することになりますが、、、
次の記事
ローカルデータベースを使う
