ソーシャルゲームで頻繁に使用するゲージの部分をHTMLとCSSで作ってみる
ソーシャルゲーム(だけとは限りませんが)で頻繁に使用されるスタミナや行動力、経験値などの数字で表現する場所に一緒に用いられるゲージの部分。
このようなものをしばらく作っていない為、作り方を忘れそうなので作り方を思い出しながら再確認しつつ備忘録としてメモ。
続きを読む >
addClassとremoveClassを用いてページ遷移をしないタブメニューを作ろう
jQueryのaddClassとremoveClassを利用して、ページ遷移をしないタブメニューを作ります。
このタブメニューは、ページ遷移をしないので無駄な通信やページを作ることが無いのがの最大の利点です。表示領域が限られているスマホサイトでは特に有効なテクニックです。
続きを読む >
box-shadowで汎用的に使えるプロパティについてまとめてみた
box-shadowはCSS3で登場したプロパティで、文字とおりボックスの周りにシャドウを落とすことができます。FireworksやPhotoshop風に伝えるならばドロップシャドウですね。
box-shadowについてまとめられてるサイトはとても多いので、自分的に使っていたものや、今後取り入れておきたいシャドウエフェクトについてまとめてみました。
続きを読む >
jQueryプラグインを使わずにアコーディオンメニューを作ろう
主にスマホサイトで用いられているアコーディオンメニュー。ゲーム系サイトであればゲーム内メニューの表示に。会員系サイトであれば会員メニューの表示に。EC系サイトであればカテゴリーメニューの表示に…などなど。
表示領域が限られているスマホサイトならではの便利な機能だと思います。今回はプラグインなしのアコーディオンメニュー制作のメモ。
続きを読む >
端に矢印が付いたリンクを作ってみよう
右に矢印がついたリンク。スマホサイトでは当然のように使われています。
続きを読む >
右に矢印がついているのでリンクだということもわかりやすいうえ、aタグをblockにしてしまえばエリア全体を押せるようになるので、UI的にも使いやすいといったところでしょうか。