search

yusukesasaki-com / Monaka

Other
7 stars 0 forks source link

最中を磨く #34

Open keitakawamoto opened 8 years ago

keitakawamoto commented 8 years ago

:tea:

@yusukesasaki-com といろいろお話しした結果、 http://web-dev.xyz/oss-sample/Monaka-1.2.3/mailform.php の見た目的品質・カスタマイズしやすさ向上のためのアドバイスをさせていただく。

keitakawamoto commented 8 years ago

Todo

ここにチェックボックスのリスト追加していく。 @yusukesasaki-com がやらないと判断したものは このように 取り消し線で消す。

keitakawamoto commented 8 years ago

ここ以降で検討

keitakawamoto commented 8 years ago

フォーカス

image

フォーカスしたらブラウザのデフォルトスタイルがで起用されるので、色を変えやすそうなオリジナルのスタイルを指定しておくのはどうでしょう。

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

これでデフォルトスタイルを削除できます。

参考： http://codepen.io/keitakawamoto/pen/RRQPqV

Reply

お〜、知りませんでした！

keitakawamoto commented 8 years ago

フォーム

image

現在、背景とフォームの色のコントラストが低すぎるので

image

同系色でborderをつけて、シャドウを軽くかけると、「入力できる部分だ」ということを伝えやすくなりそうです。（高さも少し広げました）

.mailform dd input[type="text"], .mailform dd select, dd textarea {
    width: 315px;
    max-width: 100%;
    font-family: inherit;
    padding: 7px 12px;
    font-size: 14px;
    background: #f4f4ff;
    border-radius: 4px;
    border: 1px solid #ddddea;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
}

Reply

最高っす！

keitakawamoto commented 8 years ago

送信ボタン

image

ロールオーバーしてもカーソルが変化しないので、

cursor: pointer;

でポインターに変化させると、レスポンスが生まれるのでさらにわかりやすくなりそうです。 ボタンの色自体変化してもいいかも。

Reply

最高っす！

keitakawamoto commented 8 years ago

修正に戻ったら、送信ボタンのスタイルが無効になる

っぽいです。

image

Reply

自分の環境では起きなかったですね…(win/macともに) なぜだ…？