カテゴリー
コンピューター

Material Design Lite でパッとウェブページを作ったときに学んだことメモ

パッと作りたいもの

  • ヘッダーとそこにメニュー
  • フッター
  • レスポンシブ
  • パスを指定するページを作りたい。
  • リストデータをテーブル表示するページを作りたい。
  • コードを書くというよりも、パーツをペーストすることでウェブページを組み立てたい
  • インターネットとの通信はしない。

パッと作るのに使えそうなフレームワーク

ウェブサイト用のフレームワークということですけれども、マテリアルデザインは Andoroid で使われているデザインです。ということは、スマートフォンなどモバイルとの親和性は高いですから、モバイルで使われているパーツは充実していることと思います。

モバイルファーストである一方で、PC で多くあるような操作、たとえばファイルを参照するボタン、ファイルパスを入力するテキストボックス、そういったものは独自に作る必要があるかしら？

パッと作るための環境（エディタ）

迅速に作るためには、見やすくて操作がし易い環境が欠かせません。

Atom を使用いたしました。インストールが簡単で、機能を拡張するプラグインを入れるのも簡単♪

emmet で少ないタイプで多くの HTML を書くことを狙います。といっても素人レベルですけれども＞＜。コーディングの際には次の紹介ページを参考にいたしました。ありがとう存じます！

また、メニューを日本語化します。しない方が勉強になりますけれども、パッと作る方を優先ですわ！

勉強したこと

MDL のチュートリアルから学んだこと

チュートリアルページ → GETTING STARTED

CDN を使用せず、自サーバに MDL ファイルを置くやり方を目指したところ、次のようになりました。

箇条書きにも書きましたけれども、icon の読み込み方法はあまり良くないと存じます。一応、このやり方で add のアイコンは表示できたのですけれどもね。

<link rel="stylesheet" href="./material.min.css">
<script src="./material.min.js"></script>
<link rel="stylesheet" href="./icon">
  • 通常の HTML に、MDL の CSS、JS、iconを読み込む。
  • CSS、JS はダウンロードして自サーバに置くこともできる。
  • icon は素直にダウンロードできず、一工夫必要。URL のファイルを辿っていき、必要なファイルを生成したりダウンローしたりする。
  • ↑の icon の方法はよくないと思われる。導入方法のページがあった
    → Material icons guide – Google design
  • メインカラーとアクセントカラーをページ作成前に選択できる。
    ツール → Custom CSS theme builder
  • カラーはツールを使って選べ、それらのカラーを内包した material.min.css をダウンロードすることができる。または CDN リンクを取得できる。ダウンロードした material. min.css を上書きするだけでヘッダーやボタンの色を変えられる。ちなみに、CSS ファイル名は変更しておいた方が後々カスタマイズするときに親切と思う。
  • HTML タグの class で各コンポーネント(MDL でのボタン、テーブルやバッジなどの総称)の効果を指定できる。
  • meta タグの viewport を書くのを忘れずに！ 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

実際のページ作りしながら学んだこと

レイアウト（全体的なデザイン）の参考 → LAYOUT

  • メニュー、フッターを作るときに参考になった。
  • メニューは Navigation layouts から、Fixed header を選んだ。
  • フッターは FOOTER から、Mini footer を選んだ。ミニという割には太い。。。つまり高さがあるように感じる。
  • コンテンツ部分は調整しないと左詰めとなってしまい、見辛い。TEMPLATES の Preview のソースを見ると mdl-grid とあり、グリッドを使っていることがわかった。
  • GRID
  • グリッドで左右に余白を付ける。STAND-ALONE ARTICLE のソースを見ると、右の余白を指定していないので要らないかも。

テーブルの参考 → TABLES

  • 数字が主でない列は class に mdl-data-table__cell–non-numeric を指定する必要あり

mdl-js-XXX がよくわからなかった

  • class に指定するものにたとえば mdl-js-data-table なら Assigns basic MDL behavior to table という効果を、mdl-js-layout なら Assigns basic MDL behavior to layout という効果を付けられるとあるがイメージできない。
  • 試しに付けたり外したりしたが、違いがわからなかった。
  • 「js」と名前に付いているため、JavaScript が関係していそう。アニメーションがリッチになるのだろうか。

ファイルのアップロード部分の HTML はどうするか

Mac を使ってグーグルのサービスを調べてみました。

Google ドライブの場合、リンクをクリックすると Mac のファイルの選択ウインドウが表示されました。

Google ドライブの場合、リンクをクリックすると Mac のファイルの選択ウインドウが表示された。

Inbox by Gmail のメール新規作成の場合、クリップアイコンをクリックすると Mac のファイルの選択ウインドウが表示されました。

nbox by Gmail のメール新規作成の場合、クリップアイコンをクリックすると Mac のファイルの選択ウインドウが表示された。

ファイルパスはどちらも設けられておりません。それというのもファイルを指定すると即座にアップロードが始まるからですわね。

ローカルのファイルを指定して、送信ボタンを押してからアップロードが始めるようにする場合はどのようなデザインがいいのかしら。結局まだ答えは出せませんでしたの＞＜。

おわりに

公式ページはステップ・バイ・ステップで少しずつコードを書いて複雑にしていくように解説されているので、言語は英語ですけれども、とても取り組みやすいと感じました。

公式ページだけで結構深いところまで習熟できるのではないかしら。

以上です。

コメントを残す