読者です 読者をやめる 読者になる 読者になる

Doraneko&Donuts

おすすめの本と映画と音楽をお茶を飲みながらまったりと語るブログ

マテリアルデザインを導入してみた!でもフラットデザインとどこが違うの?

ライフハック Mac・iPadAir2

f:id:Doraneko1986:20160905222535p:plain

 

こんちわ、おいさんだよ(*´ω`*) 

連日のブログリニューアルとPC環境の変化の性で色々ストレス溜まっていますw

 

さて、今回はこのDoraneko&Donutsのブログリニューアルを記念して、このブログのMaterialデザインについて語っていこうと思うよ(*´ω`*)

スポンサーリンク

新しいブログテーマ「Material」を導入してみよう!

f:id:Doraneko1986:20160905183820p:plain 

以前も紹介したが、わしはこのDoraneko&Donuts(ドラドナ) のブログテーマに、はてなブログで公開されている「Material」を利用させて頂いた。

Material - テーマ ストア

それにしてもマテリアルデザインって一体どういうものなのだろう?

フラットデザインと何が違うのかな? 

matome.naver.jp

そこでいろいろ調べてみるとこんなページに行き当たった。

ざっくり言ってしまうとフラットでシンプルなやつです。見た目がフラットだったらフラットデザインですね。わかりやすい。

もともとは完全にフラットでしたが、途中から多少の影やグラデーションがあってもフラットデザインに分類されるようになった、という部分がマテリアルデザインと混同される原因になっています。

ただ影を許容してしまうと混乱するので、影があった時点でフラットデザインから「フラットデザインっぽいデザイン」になると思っちゃっていいです。淡いグラデーションは割とOKです

ふむふむ、要するにマテリアルデザインって、フラットデザインをもう少し立体化したものなのか(´・ω・`)

 

……つまり、ちょっと下にシャドウがついただけ?それだけ? 

 

う~ん、最近巷で流行っているからどんな敷居の高いものかと思ったら、その程度のものか……これならわしでも容易に導入できそうだなw

ということでいろいろはてなのテーマストアを調べてみたらちょうどフラットデザインのテーマがあるじゃないか!

 

しかもデザインとしてもシンプルで完成度も高いし、多くの人が導入している人気テーマのようだ。

マテリアルのほんのりシャドウがかかった感じも近未来的でおしゃれなのでわし個人としては気に入っている。

 

やっぱりみんなGoogleの影響でこうしたマテリアルデザインを今後も導入していくのかな?(*^^*)

 

dev.classmethod.jp

というわけで、ワシ以外にもマテリアルを導入したいけど、どんなものかわからないという人のためにわかりやすそうなマテリアルデザイン入門の記事をピックアップしました。

 

自分でCSSをいじってマテリアルデザインを構築したいという方は御覧ください。

 

マテリアル導入もタブレット表示で不具合も 

f:id:Doraneko1986:20160914181710p:plain

しかしここで問題が。

前も書いたけど、わしはこのブログを書いたら自分のiPadで確認するようにしている。

しかし、ヘッダー画像を自分で作っているからかタブレットで見ると、このようにヘッダーとグローバルナビゲーションの間に隙間ができてしまう。

 

いろいろ調べ、尚且つCSSをいじってみたものの、縮めようとしても関係ないPC画面の方も一緒になって縮まってしまう。

タブレットの方だけ縮めたいのに……

どうにかしてタブレットの画面サイズに縮小した時に隙間ができないようにすることはできないものか?

 

自分自身ではどうやってもこの隙間を埋めることができない。

さて、どうしたものか?^^;

というわけで、誰か詳しい人教えて下さいw

 

その他にもマテリアルデザインについての記事をいろいろピックアップしてみたので気になる方は下記のリンクからどうぞ(*´ω`*) 

 

www.materialup.com

www.materialui.co

flat-icon-design.com