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


関連記事

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

js

WebページにGoogleMapを配置する

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

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

js

Reactを始める前に知っておきたいES2015/ES6の機能

1 はじめに2 ECMAScript – ES2015/ES6とは3 変数と定数とスコープ4 テンプレート文字列5 分割代入6 デフォルト引数7 残余引数(レストパラメータ)8 展開(スプ ...

フォロー

follow us in feedly

page_side_300rect

2017年12月
« 11月 1月 »
 12
3456789
10111213141516
17181920212223
24252627282930
31 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。