8/23

画面構成とかHTML/CSSで構築していく

少しずつできていきます。

さて、画面のデザインが終わったので実際に作っていきます。前に作ったのは単なる画像のはめ込みなのでこのままではブラウザに表示できません。というわけで今回はブラウザに表示できるようにHTMLとCSS、あとついでに色も決めていきましょうか。

まぁ、ここからHTML/CSSをガリゴリ書いていくわけですが1から全部作るととてもしんどいのでCSSフレームワークをちょっと使います。

CSSフレームワークは頭のいい人が作ってるいい感じのデザインを簡単に作ることができる仕組みのことです。CSSフレームワークを使うとHTMLもそれに沿って書く必要があるのでとても楽です。

同じフレームワークを使うと、ある程度似たような見た目になるというのがデメリットです。とはいっても自由度が高すぎると逆に何を書けばいいのかわかんないのでそういった枠組みがあるといいですよ。

正直なところ個人開発だと何かしら選んでおくと効率がいいですね。

サービスのブランドをしっかりしたい場合はCSSもきちんと作っていく必要がありますが、個人開発で使える時間が限られている場合は使ったほうが時短になります。

ということで私もCSSフレームワークを選びたいと思います。

大体CSSフレームワークは人気なものが決まってて、今ならTailwindとかBootstrapとかMaterializeとかかな。

今紹介したのは大規模なところでよく使われるものでなんでも入りで多機能で高性能だけどちょっと容量が大きいかなって思います。

今回作るのはそこまで汎用的なものはいらないので、もう少し機能少なくてもいいので軽めのやつを選びます。

軽めのものも結構ありますね。skeltonとかWater.cssとかPureとか。

ただそこまでいくとシンプルすぎて自分で書く部分が多くなるので面倒になるのですよね。

ちょうどいいのがないか探していたら良さげなものがありました。

BeerCSS

https://www.beercss.com/

マテリアルデザイン採用でMaterial Youみたいな仕組みも持っててなかなかにコンパクト。ライセンスはMIT。

いいですね。これを使いましょう。

ということで早速npmでダウンロードして、モジュールごとに分解してSassに突っ込んでいきます。

npm i beercss

npm i material-dynamic-colors

import "beercss";

import "material-dynamic-colors";

そして使いそうにないところをバッサリ切っていきます。

Badges, FABs, ImgCard, Switch, Chips, Dropdowns, Media, Progress, Table, Tabs, Toasts, Tooltipは使う予定はないので削除。

あとは装飾のうちバリエーションを多くしているものもあるのでそれらも消していきます。

バッサ、バッサ

あとは色テーマを変更するところも決めましょう。必要なのはモーダルとフォーム、色を変えるところですね。

色を変える仕組みはカラーテーマとダーク、ライトで実現。マテリアルデザインのカラーパレットはある程度決まってるのでそこから色を抜き出します。

ダイナミックカラー

https://material-foundation.github.io/material-theme-builder/#/dynamic

それをCSS変数にぶっ込んでいきます。下はPrimaryの設定。

--primary: #1b8ef3;

--on-primary: #FFFFFF;

--primary-container: #d0e4ff;

--on-primary-container: #001d36;

--secondary: #535f70;

--on-secondary: #ffffff;

--secondary-container: #d6e3f7;

--on-secondary-container: #101c2b;

--tertiary: #6b5778;

--on-tertiary: #FFFFFF;

--tertiary-container: #f3daff;

--on-tertiary-container: #251432;

--error: #ba1b1b;

--on-error: #FFFFFF;

--error-container: #ffdad4;

--on-error-container: #410001;

--background: #fdfcff;

--on-background: #1b1b1b;

--surface: #fdfcff;

--on-surface: #1b1b1b;

--outline: #73777f;

--surface-variant: #dfe2eb;

--on-surface-variant: #42474e;

--inverse-surface: #2f3033;

--inverse-on-surface: #f1f0f4;

これを2テーマ×17テーマで計34色の設定をします。

基本テンプレはこんな感じになります。

<body>

</div>

</div>

<a id="js-modal-settings"><i>settings</i></a>

</div>

</header>

{% block article %}{% endblock %}

</main>

<h5>カラーテーマ設定</h5>

<nav>

</label>

</label>

</nav>

</div>

</select>

<label class="active" for="id-color-select"><span>カラーテーマ</span></label>

<i>arrow_drop_down</i>

</div>

<nav>

<button type="button" class="js-color-theme-reset">カラーリセット</button>

</nav>

</div>

<h5 class="no-margin">footer</h5>

</div>

</footer>

</body>

こんな感じになりますね。

一部の色だけ載せましたがもう少し色々選べます。

自分の好きな色で使うのがいいよね。

ということで基本部分も作れたので次から中身を作っていきますよ。

やっぱりダークモードに対応してほしいなぁと思うけど、配色がめんどいんですよね。

わかる。