deviseの標準画面をカスタマイズする ～標準画面をカスタマイズする その２～

今回は前回作ったこれ


をこう


しようという話です。
＃チョットきれいになります。

なんかはじめにやりたかったことは以下のあたりです。

• 見出し（ログインという文字）のフォントをメイリオ（最近気に入ってます）にしよう
• 見出しは中央寄せがいいなぁ
• 見出しとフォームの間に仕切り線が欲しいなあ
• ログインのフォームはは中央寄せがいいなあ
• ボタンはカッコいいのがいいなぁ

で、結果的に↑のようになりましたので、その流れを見ていきます。

まず見出しものについてですが、これはまあそんなに難しくはなく以下のカンジだろうと思ってました。

1. とりあえず見出し部分はdivで囲もう
2. divの中身をtext-align:center;とかすればいいだろう
3. h2のフォントでも指定すればいいだろう
4. 見出しの下にhrでもつければいいだろう

というわけでソース（html.erb）を以下のように修正。
＃といってもdivで囲ってその下にhrつけただけ。

ログイン

これに対して以下のCSS（railsなのでscss記法です）を当てると見出し部分ができます。

  // 画面全体の背景色
  background-color: #f5f5dc;

  // タイトル部分のスタイル指定
  .page-title {
    text-align: center;
    h2 {
      font-family: 'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
    }
  }

次にログインフォームの部分。
これも以下のカンジで１つ１つ解決しました。

1. 角丸・白抜きにするためにフォーム全体をdivで囲ってwidthを指定しよう（widthを指定しないと角丸が画面全体になってしまう）
2. 角丸はborder（仕切り線）とborder-radiusでやればいいや
3. ラベルとテキストボックスとボタンはpadding-leftでいい感じの位置になるようにしよう
4. bootstrapにはかっこいいボタンのクラスが用意されていたからそれを当てよう

というのは虚偽報告で、実際はchromeのdeveloper tool^*1使いながらガチャガチャCSS当てて行ってなんとか今の形にしました。
＃レイアウティングやCSS当てが得意な人ならいきなり最終型にいけるんだろうが、ワタクシにはそのような力はありません。

というわけでソースを以下のように修正。

<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
      
      


<%= f.label 'メールアドレス' %>
      <%= f.email_field :email, :autofocus => true %>

      


<%= f.label 'パスワード' %>
      <%= f.password_field :password %>

      
        
      

      
      


<%= f.submit "ログイン", {class: 'btn btn-primary'} %>
<% end %>

    
    
  

ボタンをかっこ良くするにはsubmitボタンのclassに 'btn btn-primary' を指定することで実現しています。
＃bootstrapにはボタンをかっこ良くするためのCSSクラス定義が既に準備されている。

これに対して以下のCSSを当てるとログインフォーム部分ができます。

  // ページコンテンツ（ここではログインフォームのみ）のスタイル指定
  .page-contents {
    // ログインフォームのスタイル指定
    #div-login-form {
      // サイズ系指定
      width:280px;
      margin:10px auto;
      padding-top: 10px;

      // フォーム全体の背景色（白抜き部分）
      background-color: window;

      // －－－－－－フォームを囲っている角丸の部分ここから－－－－－－
      // 角丸の線スタイル（太/色/線種）指定
      border: 5px solid #002a80;

      // 角丸表現（クロスブラウザ対応のため一応3パターン指定）
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      // －－－－－－フォームを囲っている角丸の部分ここまで－－－－－－

      // フォーム内のコミットボタン以外は左端から30pxとする
      div {
        padding-left: 30px;
      }

      // フォーム内のコミットボタンだけは左端から100pxとする
      // ＃class指定がform種別指定より優先度が高いので有効になる
      .div-commit-button {
        padding-left: 100px;
      }
    }

そこそこきれいな画面ができたので今回のdeviseの標準画面をきれいにするシリーズは一旦以上とします。
＃そこそこ綺麗な画面ができたので次回は別の話をしようかと。

1：現在のドキュメントの構造を確認したりCSSの適用状態を確認したりJavaScriptのデバッグを確認したりできる、とんでもなくすばらしいツール。