💻

GatsbyJSで作っているブログにMaterial-UIを導入した

2020-03-31

モチベーション

  • Flutterを触るようになってMaterial Designなコンポーネントを扱う機会が増えたので、Material Designなコンポーネントに触れる機会を増やしたかった
  • Material-UIの0系の頃に触って以来だったので、触ってみたかった
  • Semantic UIの開発が止まってしまっており、本家からフォークされたFomantic-UIの開発も進んでいるが、将来的に統合されるかも不透明という背景もあり、乗り換え先を探していた

やったこと

  • Material-UIのインストール
  • ヘッダーをMaterial-UI製にしてみた

    • AppBarを使う
    • シャドウが濃かったので、調整した
    • スマホで見た時に記事の読むスペースをなるべく広げられるように、よくある、下にスクロールしたら上にヘッダーが隠れて、隠れている最中に上にスクロールしたらヘッダーが出てくる挙動にした

      • noteとかもこういう挙動

おわりに

  • まだSemantic UI製のコンポーネントがあるので、徐々に入れ替えていきたい

キクナントカ

ソフトウェアエンジニアをしています。Flutter、Rails、GatsbyJSを主に触っています。趣味でボードゲームを制作したり、個人開発したりしています。詳しくはこちら