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


関連記事

Vue.js入門その8〜vue-draggableを使ってドラッグ機能の実装〜

1 はじめに2 準備3 一列の並び替え3.1 移動する前、移動した後3.1.1 move3.1.2 end4 2列間の移動4.1 片方を空配列にすると。。。5 さいごに はじめに 久しぶりにVue.j ...

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

Vue.js入門その7〜セレクトボックスを動的に変更してみる〜

1 はじめに1.1 サンプル2 とりあえず作ってみる2.1 ソースコード2.2 セレクトボックスにv-modelでバインド2.3 <option>はv-forでリストレンダリング2.4 メ ...

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

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

AppLink

page_side_300rect

アプリ情報

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

フォロー

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

Web版MyCoach

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