Tips – フォームのデザイン

概要

  • テキストフィールドや送信ボタンなどを含むフォームのデザインについて
  • input要素などのコンテンツから組み上げる方法と、flex-boxを使った方法の2つ。
  • フォーム全体のページ内の位置設定についても含めた

共通事項

元になるHTML

3つのinput要素と1つのbutton要素を含むform要素。form_blockというクラスのdiv要素でラップする。

Railsのhtml.erbの場合は以下の様になる。

 

リセットCSS

CSSでは以下で関係要素のスタイルをリセットする。

Railsの場合は別にreset.cssを準備する(Eric Meyer’s “Reset CSS” 2.0)。

body要素

body要素は背景色だけを設定する。

方法1~要素スタイルの積み上げ

CSS

CSSの内容

CSSの全体は以下のとおり。以下、手順を分解して整理する。

div要素によるラップ

  • div要素で表題(h1)とform要素全体をラップする
  • 幅は400pxに設定
  • 高さ指定をしない(auto)なので、子要素に応じて全体の高さが変わる

表題

  • フォームの表題をh1要素で書いている

form要素

  • form要素のパディングと背景色を設定
  • 幅は親要素のdivにフィットし、高さは子要素群に合わせて変わる

input要素

  • インラインレベル要素のinputをブロックレベル要素に変更
  • box-sizingborder-boxに指定
    • これを指定しないとinput要素がはみ出てしまう
  • 幅(width)は親要素に合わせる
  • 高さは32px固定
  • マージン(下)を設定して間隔をあける

button要素

  • インラインレベル要素のbbuttonをブロックレベル要素に変更
  • 幅は親要素formの50%
  • margin-left: autoで右寄せ
    • 中央に置く場合はmargin-right: autoも加える

フォームの位置調整

  • もう一度全体をラップしているdiv要素に戻り、bodyに対する位置を指定する
    • フォームの左上隅が上端から20%、左端から40%

SCSS

RailsなどでSCSSを使う場合の例。

 

方法2~flex-box

CSS

CSSの内容

flex-boxを使ったCSSの全体は以下のとおり。フォーム全体の位置設定は方法1と同じ。

div要素によるラップ

  • 幅は400px
  • 高さはautoとし、子要素のformの髙さに合わせる

form要素

方法1と違うのは以下の点。

  • display: flexで子要素へのflex適用を指定
  • flex-direction: columnで子要素を縦並びに
  • justify-content: space-aroundで子要素を均等に配置
  • 高さを200pxに固定

input要素

要素の間隔は自動的に決まるので、方法1で設定していたmragin-bottomを削除している。

button要素

  • button要素もマージンを削除している
  • 右寄せにするため、align-self: flex-endを設定
    • 中央に置く場合はcenterを指定

SCSS

RailsなどでSCSSを使う場合の例。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です