こんにちは。デザイナーの清水です。

開発も徐々に進んできて、探索中の画面ができてきました。近いうちにスクリーンショットや動画をお見せすることもできるかもしれません。

Webサイトのcssのお話

さて、今回は新しくなったWebサイトのcssのお話ができればと思っています。

cssってなあに

cssというのは何かというと、Webサイトの見た目や簡単な動きについての指示書のようなものです。
これがあることによって、画面のレイアウトや文字の大きさ、フォント、色、枠の形などが作られ、最終的にChromeなどのブラウザで表示できます。

このウェブサイトがどうやってできたか

前回日誌を担当してくれた御園さんがデザインを作成して、それを私がcssに落とし込んでブラウザ上で表現する、という形でこのサイトはできています。トップページも、この開発日誌ページもです。

デザインの苦労話については御園さんの記事を是非ご覧ください！

やはり難しかったのはトップページですね。

---

四角い枠や丸っこい枠を並べて中に文字や画像を入れる、というシンプルなものであれば、特に変わったことをしなくても簡単に書くことができます。反対に、トップページのように斜めのものが入ってきたり、画像が上にかぶさるように表示されたり、変則的なレイアウトになると難しくなってきます。
「そういう形の素材を用意する」という対処もできるんですが、今回は短い時間で作れるようなサイトを目指しました。時間はなるべくゲームそのものの開発に使いたいですからね。なので、素材はシンプルで、cssでできる範囲のことはなるべくcssで作るようにしました。そうしたほうが用意する画像のサイズも抑えられて、閲覧者の皆さんのパケットも消費しなくて済みます。

そして、そういった変則的なレイアウトを、スマホとPCの両方に対応させるとなると、更に大変になってきます。
横に並べていたものは縦に並べる……という単純な対応だけだと表現しきれないような部分も多くなってくるので、細かい調整が必要になってきます。

ちなみに、今回JavaScriptなどは使っていないんですよ。今ってcssだけでハンバーガーメニュー作れちゃうんですねぇ。

cssのタイヘンなところ

cssのタイヘンなところ、それはとにかく「書いてみたら思ってたんと違う見た目になっちゃった」がよく起こることですね。
巷でよく見かける、枠からどんどんはみ出ていく……みたいなことは実際はあんまり起こらなかったんですが、でも「なぜか中央揃えになってくれない」とか、「なぜか左右の余白が想定よりずっと大きくなっちゃった」とか、「確かに書いたはずなのに狙ったところにスタイルが適用されてない」とかはよく起こりました。

他には、書いているうちにどんどん煩雑になっていって、どこに何を書いたのか分からなくなっていきやすいのも難しいところですね。
うまいこと要素の再利用などを駆使しながら重複した記述を減らしていくと、ある程度整理はできるんですが……。一応、整理しやすいデザインパターンがあったり、scssなどの拡張を利用するといった対応はできるようです。今回は素のcssをゴリゴリ書いていったので、ただただ頑張って整理を心がけました。

cssできるといいよという話

css、できるといいですよ。
こうした仕事上の必要が生まれたときに対応できるので、重宝されるタイミングも多いかと思います。 また、私は趣味で自分のイラストを掲載する用のサイトを作っているんですが、そういうときサイトの見た目にこだわれます。

今回はcssのお話でした。 それではまた次回お会いしましょう。