【HTML・CSS】ヘッダーを作る

現在、創作物語のアニメ風サイトを作っています。
ひとまずページのヘッダー（グローバルナビ）ができました。

こんな感じです

ここまでで苦労した点と分かった事を自分用メモを兼ねて残しておきます。
最後にソースコードも載せておきました。

メイン

• テキスト部分だけでなく、ボタン全体をクリックできるようにする

display:block

• リンクの下線を非表示にする

text-decoration: none

• 周りの余白をなくす

margin: 0
padding: 0

ドロップダウンリスト関連

• 表示・非表示

visibility: hiddenは表示領域を確保して隠す
display: noneは表示領域も無くす

• 子要素を縦並びにする

display: grid
（なかなか子要素のみが縦並びにならず虱潰しに試しました。
もっといい方法もあるかもしれません…）

HTMLはこちら

CSSはこちら

今回とてもお世話になったサイトです。
theorthodoxworks.com

Unityちゃん探索ゲーム

2017.7.13追記 紹介動画のツイートを埋め込みました。
ツイッターって埋め込みリンクを作成したり、ウィジェットを作ったりと色々できるんですね。

ツイートしてブログに貼ると間接的に動画が載せられるというライフハックを得たのでやってみる。
オリジナルゲーム「ユニティちゃん・イン・ワンダーランド」の紹介です（音は出ません） pic.twitter.com/Sq69jUWnF7

— ねこ(創作のすがた) (@neko_area) 2017年7月12日

ちょっと前に作った、Unityちゃんが舞台を探索して脱出するゲームを紹介します。
ゲームの大枠のみをざっくりまとめました。

タイトル画面です。
Enterキーで画面遷移します。

演劇部員の大鳥こはく(Unityちゃん)が忘れ物を探しに、一人で舞台を散策します。
途中、落ちている台本の内容が手がかりになります。

うさぎを追いかけてステージへ。

ビンやキノコに衝突するとUnityちゃんのサイズが変わって、今まで行けなかった場所に行けるようになっています。

このとき、最初のシーンの机の下に元はなかったパーティクルが出現しており、小さくなったUnityちゃんが机の下に潜るとゲームクリアになります。
今回できたのはここまでですが、とりあえずゲームとしてはざっくり完成しています。

改善したい点

• ストーリーを場面ごとに分けて、台本を読む度に内容が変わるようにしたい

• カメラ切り替えを、見えないCollisionにぶつかることで実装しているので、ぶつかった瞬間にプレイヤーが方向転換するとカメラが追従しなくなる

他にも、最初はパースを意図的に狂わせて絵本みたいな表現にしたかったのですが、シェーダーなどもいじらないといけなくなるので今回は諦めました。
また、場面が移り変わる毎に景色や雰囲気が変わって不思議な世界に迷い込んだ感じになったらよかったなと思います。

これからも何か作れば記録していきたいです。

2017.7.15追記
当初はアイテム欄を実装する予定だったのですが、世界観を壊すのと、
キーボードでプレイヤーを動かしてマウスでアイテムを選ぶのは操作性が悪そうなことから見送りました…

ざっくり作成したUnityちゃんのアリスカラーテクスチャを配布します。
私は髪色も変えてしまいましたが、よく見るとうまく作れていないので入れていません(._.)
アリスなので髪は元の色でもいいかなぁと思います。
www.dropbox.com

この作品はユニティちゃんライセンス条項の元に提供されています