FrontEnd

ウチのMaterialize事情

投稿日:2017年12月25日 更新日:

はじめに

うちのチームでは現在、CSSフレームワークをBootstrapからMaterializeに移行しております。
Materializeは現在1.0のアルファ版であり、1.0リリースまでもう少しです。
Materialize

今回は使っているうちに気づいたこと、ルールとしてまとめたことを記載したいと思います。
なお、RubyのGemで入れて使用しています。

ボタン

Buttons

ボタンは下記のように、指定しますが色を変えようと思うと少しクラス名が長くなりますね。
Materializeに慣れていないと、クラスをつけるだけで時間がかかりそうです。

そのため、チーム内でボタン名のルールを決め、そちらを使うようにしました。
(例えば、新規作成画面へのボタンであれば、btn btn-newなど。)

そしてCSSの方でextendしてボタンを作成します。

こうすれば、あとで新規作成画面へのリンクボタンを変えたい、となっても一括で変えられます。

ただ、ここで問題が発生しました。
extendwaves-effectのようなエフェクト用のクラスまで含めてしまうと、JavaScriptの方でセレクタが見つからない状態になります。

悩んだのですが、ページロード時に、JQueryでクラスを当てるようにしました。

フォーム

Forms

ラベルについて

ドキュメント通りにラベルを置くと、クリック時にラベルが動きます。
この仕様ですが、テキストボックスの値を動的に変えていたりすると、実際の入力値と被ってしまい、非常に動作が不安でした。

ラベルを動かす時には、activeというクラスをつけていることが分かったので、常にactiveをつけておくようにしました。
こうすることで、動いた後の状態で固定できます。

セレクトボックスについて

セレクトボックスですが、サンプルを見るとカッコ良い感じです。
ただ、なかなかサンプル通りになりませんでした。

どうも挙動を見ていると、selectタグ自体は非表示にし、JSで別のDOMとして表示させているようです。
こちらの調査がなかなか進まなかったため、暫定ですが、Materializeが用意しているbrowser-defaultというクラスを使用することにしました。
これは従来のセレクトボックスに近い感じのセレクトボックスにしてくれます。

ラジオボタンについて

Radio Buttons

ラジオボタンは、inputタグのidlabelタグのforが一致していなければ動かないようです。
Radio buttons not working…clicking on them does not do anything

特にRailsのヘルパーなんかでラジオボタンを生成する場合、上記2つの値があっているか確認の必要があります。

アラート

Bootstrapにお世話になっていると、アラートが当たり前になります。
(うちのチームもそうです。)
ただ、マテリアルデザインにアラートは存在しません。
トーストがそれにあたるのでしょう。

とはいえ、トーストに合わせてデザインし直すのは時間的に難しかったので、アラートクラスを作成し、Bootstrapと同じように使ってもらうようにしました。

フォント

MaterializeのデフォルトフォントはRobotoというものですが、日本語があまりよくないです。
そのため、Googleが用意しているWebフォントをimportしています。
Google が提供する日本語 Web フォント

さいごに

私たちもまだまだ使いこなせているわけではありませんが、現状のルールをまとめてみました。
Bootstrapに比べて、JS(JQuery)に依存する部分が多いところが大変です。
またTurbolinksやAjaxのような非同期処理が絡む場合は注意が必要そうです。

page_footer_300rect




page_footer_300rect




-FrontEnd

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

Vue.js入門その5〜マークダウンのリアルタイムプレビューをつくる〜

1 はじめに1.1 環境構築2 marked.jsの設定2.1 CDNのロード2.2 動作確認3 マークダウンを変換して表示3.1 雛形の作成3.1.1 HTML3.1.2 JS3.2 HTMLに変換 ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

WebページにGoogleMapを配置する

1 はじめに2 準備2.1 API Keyを取得する3 簡単な実装3.1 サンプルコード4 タップした位置にマーカを動かす4.1 サンプルコード5 場所を検索する5.1 サンプルコード6 画面例7 さ ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

page_side_300rect

Web版MyCoach

私たちはより広い方にコーチングを知ってもらいたいと考えています。
下記のサイトにて、コーチの方々を紹介しておりますので、よろしければご覧ください。

アプリ情報

私たちは、目標を達成したい方を応援する、TODOアプリもリリースしております。
下記のアイコンから無料でダウンロードできます。

リンク

follow us in feedly
2017年12月
« 11月 1月 »
 12
3456789
10111213141516
17181920212223
24252627282930
31