プログラマーTweet本当にものすごく簡単ですが、「materialize」を使用してメモ帳をつくってみました。Materializematerializeとは?マテリアルデザインのサイトを作るためのフレームワークで、CSSだけでなくJSのパターンも多くあるので、CSSフレームワークというよりフロントエンドのフレームワークというのが適切なのかもしれません。あのGoogleが提唱するマテリアルデザインを作るためのものですが、Googleと直接関係があるわけではないようです。Googleの公式っぽいのはこちらですね。Designこちらはなんか使いにくそうなので今回見送りました。簡単な文字のスタイルをなにも変更できないメモ帳。数は特に制限なく、新規作成、削除だけができるという一時保存メモみたいな。一時保存用なので、特別保存は考えていなかったのですが、一応残るようlocalstorageに即保存されるように設定してます。使用ツール・vue.js・Materializeフレームワーク2つとも触り程度の活用しかしてません...ただ、いかにもマテリアルデザインっぽいようなフローティングメニューを無理やり使用しました。Materialize作ったものは以下になります。DEMOMaterializeフレームワーク部分について今回はソースをダウンロードして使いました。Materialize設置準備まずは、CSSとアイコンのためにWebフォントを読み込む。src="js/materialize.js"></script>フローティングボタン全体のレイアウトもフレームワークを使用していますが、ボタン部分のところだけ載せます。'bottom'});});htmlにつけるclassによって、色や大きさを変えることができます。js部分の設定で、ホバーかクリックで動作するか、メニューを上下左右どちらに表示するか設定することができます。使用してみた感想さすがフレームワークだけあって、マテリアルデザインっぽいものが簡単にできるという印象です。js部分も豊富にあり、自分で作る必要はほぼないんじゃないかと思うほどです。こだわったレイアウトを使用すると、どうやってやるか迷う時はあるかと思います。そんな時は自分でCSSいじったほうが早いなと思ってしまいますね...CSSはもちろんJS部分でもオリジナリティをつけようとすると、上記のように自分で設定するほうが...となるので、やはりクライアントワークというより、自分でなにか作るときにこのフレームワークに則って作成するのが良いかもしれません。デザインや動きにこだわりがなければ非常に素早くサイトが作れると思います。ProfileY.Aアベと申します。ディレクター兼デザイナー兼コーダーです。未熟者ですが、日々頑張っています。