O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

2 24 cssでのフォームカスタマイズ

1.726 visualizações

Publicada em

2/24 HTML5ビギナーズで登壇した際に使用した資料です。

Publicada em: Tecnologia
  • Seja o primeiro a comentar

2 24 cssでのフォームカスタマイズ

  1. 1. CSSでのフォームカスタマイズ 2015.2.24
  2. 2. 自己紹介 ■コスゲタツヤ (@keinkosuge) 30歳になる直前でデジハリに入学。 その後、何故か中のスタッフになり、2年弱程 STUDIO渋谷&新宿の運営業務をメインに行う。 その後、Keinousの屋号で2014/10から制作専念。
  3. 3. 自己紹介 ■コスゲタツヤ (@keinkosuge) ・Keinousとして個人で活動 ・新宿にある某会社に常駐 ・デジタルハリウッドSTUDIO渋谷&新宿TR ・unitopi(http://unitopi.com/ )さんでライター ・勉強会に最近ちょこちょこ登壇させて頂いてます。 ・好きなものは沖縄。
  4. 4. NEW !!!!!! 2/26(木)in デジハリ御茶ノ水校4Fカフェテラス 技術的な話じゃなくて、仕事術とか 生き方的な話をするトークイベントに出ます。 https://atnd.org/events/62303
  5. 5. もう1つ NEW !!!!! 「セルフキッチン」in 東中野 3/2から日中の時間帯を使った、 コワーキングスペースが始まります。 https://www.facebook.com/selfkitchen.coworking
  6. 6. 本日のテーマ:CSSフォームカスタマイズ おしゃれ且つ使いやすいフォームデザイン 増えているなぁと思っております。 先日、フォームカスタマイズの内容で どはまりした経験をしたのと、今日が CSS DAYなのでこのテーマで話すことにしました。
  7. 7. ■form関係のタグはたくさん ・input [ type = ”text” ] ・input [ type = ”radio” ] ・input [ type = ”checkbox” ] ・input [ type = “submit” ] ・select ・option ・button ・textarea
  8. 8. ■form関係タグの見た目はブラウザで違う Chrome Safari Firefox IE
  9. 9. ■appearanceプロパティ 超簡単にいうと、要素のUIを指定できる。 フォームデザインのカスタマイズをするときは 大体、appearance:none を指定するが、 それ以外にもいろいろ指定できる。 ※もれなく、ベンダープレフィックスつき -webkit-appearance:none   などなど
  10. 10. ■appearanceプロパティ select { appearance:none; -webkit-appearance:none; background:#fff; /*いろいろここで指定できる*/ }
  11. 11. これからの時代はCSSだけで 自由にフォームデザインできる?
  12. 12. ■ブラウザ対応( caniuse.com より)
  13. 13. IEまるで対応していない・・・
  14. 14. ■デモを作ってみた http://jsdo.it/castero/i70R (だいたいのform系タグを並べてカスタマイズ)
  15. 15. ■input type=”text”,submit デフォルト状態でブラウザ間にそんなに差異はない。 iOSだとデフォルトで角丸になる。 appearance=”none” で解決。 一応background-colorは指定。
  16. 16. ■textarea IEだと、文章が0の状態でも 右側に上下矢印が表示される。 【対策】 scrollbar-arrow-color プロパティで テキストフィールドと同じ色を指定。 (9以下もOK)
  17. 17. ■selectbox(矢印消し) 【Firefox35〜(2015/1/13リリース)】 -moz-appearanceの指定のみでOK 【〜Firefox29】 -moz-appearance:none text-indent: 0.01px text-overflow: ' ' (Firefox30〜34はハックでも消せない。。。らしい)
  18. 18. ■selectbox(矢印消し) 【IE10,IE11】 select::-ms-expand { display:none } IE9までやるなら 親div(親要素)のwidth短くして overflow:hiddenする等。
  19. 19. ■checkbox , radio 【Firefox】 -moz-appearance:noneしても左と上に内影が出来る。 【IE10,IE11】 appearanceが効かないのでデフォルトから変わらない
  20. 20. ■checkbox , radio 【Chrome,Safari,スマホ】 appearance:noneするとすべて消える 0ベースから装飾 appearanceとかだけではUIの統一は無理
  21. 21. ■checkbox , radio 【どうしても統一したい場合の対策】 checkboxやradioそのものはdisplay:noneして label要素とbeforeやafterの疑似要素をうまいこと駆使する。
  22. 22. ■:checked (CSS3) chromeとSafariはチェックされてるのかどうか 何にも指定していないと全くわからない。 対策はcheckboxとradioのところで述べた通り。
  23. 23. ■input type=”number”(矢印) 【Chrome,Safari,スマホ】 input[type=number]::-webkit-inner-spin-button input[type=number]::-webkit-outer-spin-button 上記セレクタにappearance:noneを指定
  24. 24. ■input type=”number”(矢印) でもFirefoxやIEは消えない。。。(IEは対応してないVerも) 【対策】 対応していない場合ブラウザはそのinput要素をinput=”text”として認識 するので、今はまだ使わないのが無難。
  25. 25. ■input type=”range” 【Safari Chrome】 input[type=range]::-webkit-slider-thumb{ appearance:none; } 【IE10〜】 https://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx
  26. 26. ■input type=”range” でもFirefoxやスマホだと完全にうまくいかず。 なのでまだ使わないのが無難。
  27. 27. ■:focus ChromeやSafariは要素にフォーカスした際に デフォルトの場合はぼかし気味の青色がborderにつく。 【対策】 input:focus { outline:none; } を指定
  28. 28. CSSのみでフォーム カスタマイズするのは 結構大変
  29. 29. ■以上をふまえた上での使い分け① ◎IE8以下が入る場合 きっとJSやjQueryのプラグインを使うのが無難。 ◎スマホ案件およびスマホ中心 appearance:noneしてそこからカスタマイズで結構いけそう
  30. 30. ■以上をふまえた上での使い分け② ◎IE9とかIE10以上でいいけどなるべく全ブラウザ対応させたい :beforeとか:afterの力も借りる。 でもコード長くなって大変そう。
  31. 31. ■以上をふまえた上での使い分け③ ◎ブラウザ未対応がまだ多い要素は無理して使わない 未対応要素はinput type=”text” として置き換わるので だったらはじめからinput type=”text”を使用する。 JSとの併用は常に頭に・・・!
  32. 32. ■無難なやつ ・input ・textarea ・select ・radio && checkbox (label駆使して)
  33. 33. ■そもそも見た目だけじゃなくて・・・ ユーザビリティ的なことも考慮した上で 対応する必要がある。 (フォーム→使いにくいとか話にならない) ・簡単な動きをつける ・入力しやすい&触りやすい(スマホ) 様々な観点から考慮する必要がある。
  34. 34. 今日のサンプル http://jsdo.it/castero/i70R/
  35. 35. ありがとうございました。

×