1
2
3
4
5
6
7
8
9
10
11

const StyledTabs = withStyles({
    indicator: {
        display: "flex",
        justifyContent: "center",
        backgroundColor: "transparent",
        "& > span": {
            maxWidth: 0,
            width: "100%",
        },
    },
})((props) => <Tabs {...props} TabIndicatorProps={{ children: <span /> }} />);

こんな感じ
上記はindicatorのmaxWidthを0にして消してます

あとは通常<tabs></tabs>なところを<StyledTabs></StyledTabs>に変える
これでおｋ

基本的にはリファレンスとかに書いてあります
以下参考ページ

Tabs React component - Material-UI
Tabs API - Material-UI

こんにちは。

先日、「引きこもれ！クリエイターの森」という企画のHPデザインを担当しました。
そこでこだわった点をちょっと話したいと思います。

https://forest.open-w.net/

スピードと最適化

今回は、スピードと最適化に重点を置いて制作しました。
スピードというのは

• 開発スピード
• 表示スピード

以上の2つです。

開発スピード

今回のサイトは、デザインの骨組み作成2時間、デザイン5時間、最適化2時間の計9時間で作りました。

今回の企画が、そもそもかなり短い期間で準備をしなければならなかったので、そのために早めた感じですね。

開発スピードを上げるために

• 極力Bootstrapを使って記述を最小限にする
• 無駄な要素を配置しない
• Githubを活用する

などを行いました。

最近はGithubの扱いに慣れてきたこともあって、なかなか良い開発ができたと思っています。

CSSに関しては、Bootstrapを用いることで最小限にして、少ない記述でサイトを組み立てました。

表示スピード

今回は、表示スピードを早めるために

• アイコンをSVG化
• 画像をWebP化
• 自作CSSをベタ書き

という手段を取りました。

これにより、Google insightsで100点を取ることができました

辛かったこと

めっちゃ急ぎで作ったので超辛かった
てかもっとこだわりたかった

あとサイトに動きがまったくないので、軽量化しつつどうサイトに動きを付けていくかは今後の課題としたいと思ってます（APNGやWebMなども試してみたいな～）

良かったこと

めっちゃ急いで開発する知見を得た

あとはやっぱりWebPは速い
あと画質良い

まとめ

今回のサイトは個人的にはやりたいことができて満足でした。
今回のサイト、お金もらってないので良かったら寄付してください。

https://www.patreon.com/minato86

Braveブラウザを使えば、継続的に支援することもできますよ。