画面を見やすくする

今回は、アカウント作成画面のレイアウトが 今まで左いっぱいに寄ってたので、 若干見やすくするために入力のフィールド全体にクラスをつけて 少し、右に持ってくる予定。

 

とりあえず、前回のところで背景色が真っ白だったので、 微妙なグレーにしてナビゲーションボタンやらリンクのあたりの背景との 境目をはっきりさせておく。

.navbar-devise { background: #FFF; border-color: #FFF; z-index: 10; } .navbar-devise .navbar-nav > li > a { color: black; font-size: 13px; } .navbar-devise .navbar-brand { color: black; } body { color: #222; background-color: #F8F8F8; }

※前回より若干コードを変えてみる。

最後のbodyで指定してるbackground-colorの値で背景色を違う色にしておく

スクリーンショット 2017-08-02 11.26.39.png

一応はわかりやすくなったか。

そしたら、今度は入力フィールドにクラスをつける。 ↑なんか、さも「わかってまっせ」的な雰囲気を醸してるけど 今に至るまで本人は全然わかってなかった。

Sign upのタグから一番下のrender何ちゃらまでをクラス付けすればいいんかな。

とりあえず、クラス名称は「container」にしといてdivタグを作成。スクリーンショット 2017-08-02 11.35.39.png

そんでもって、下のコードをクラスの中に入るように丸コピ。スクリーンショット 2017-08-02 11.37.10.png

(画面に収まりきらないので、一部コードは省略)

んで、ブラウザ確認。

スクリーンショット 2017-08-02 11.38.31.png

よし、右に寄ってきた。

ただ、まだ見た目のバランスが悪いので、ここでセンタリングしていく。 前に画像をセンタリングした時と同じようにしたらいいのかな?

 

この二行をSign upの上につけてrenderの下に

を×2

スクリーンショット 2017-08-02 11.48.02.png

んでまたブラウザ確認。

スクリーンショット 2017-08-02 11.49.00.png

おー。いい感じでセンターに寄ってきた。

 

ついでに英語の内容も日本語に変える。

・・っと思ったけどこのままじゃどこを変えていいかわからないので もうちょっとコードをいじる必要がありそう。

 

とりあえず今回はここまで

ではー。

この記事をシェアする