PLUSTRiCK | ひとつでも多くサイト制作でラクをするためのメモ

今や特に珍しくも無いレスポンシブデザイン。PC・タブレット・スマホ、いろいろなデバイスでネットができるので、各デバイスで最適化させたサイトを見せたいというのは当然なところでもありますね。
ちょっと前に1ソースでレスポンシブ対応をする業務があったので、復習をかねてのメモ。
続きを読む ＞

floatを使わずに要素を横に並べる方法として用いられる事の多いinline-block。自分も結構な頻度で使用しています。ですが、普通に使うとなぜか数ピクセルの隙間が発生してしまいます。
この隙間の対処として、htmlのみで対処する方法とcssのみで対処する方法をまとめてみました。
続きを読む ＞

基本的にデフォルトで使用されるチェックボックスの表示。見慣れているせいなのか違和感はないのですが、デフォルト状態では小さいため分かりにくかったり、サイトのデザインによっては、デフォルト状態ではサイトの世界観に合わない表示になることがどうしてもあります。
続きを読む ＞

文字の大きさや色は変えずに強調したい部分を作るときに使う方法の一つとして、蛍光ペンでマーカー線を引いたような効果をつける方法があります。
cssで作る。背景画像を用いる。…など、方法はいくつかありますので、それぞれサンプルを作ってまとめてみました。
続きを読む ＞

ソーシャルゲーム(だけとは限りませんが)で頻繁に使用されるスタミナや行動力、経験値などの数字で表現する場所に一緒に用いられるゲージの部分。
このようなものをしばらく作っていない為、作り方を忘れそうなので作り方を思い出しながら再確認しつつ備忘録としてメモ。
続きを読む ＞

サイズが可変するtdを、セルごとリンク要素にするお話。セル内にaタグを使ってリンクを作るとセルの高さが変わったときに、セルに吸着してくれない。
それならいっそのこと、aタグは使用しないでtdのセルごとリンクにさせてしまおうといったおかしな発想から。
続きを読む ＞

既知ですが、スマートフォンはブラウザのブックマークだけでなく、ホーム画面にサイトへのショートカットアイコンを設定できます。
このショートカットアイコンは、PCのファビコンと一緒に作ってしまうのが流れ的にも忘れることが少なくなるので、よいのかなと思います。
続きを読む ＞

jQueryのaddClassとremoveClassを利用して、ページ遷移をしないタブメニューを作ります。
このタブメニューは、ページ遷移をしないので無駄な通信やページを作ることが無いのがの最大の利点です。表示領域が限られているスマホサイトでは特に有効なテクニックです。
続きを読む ＞

box-shadowはCSS3で登場したプロパティで、文字とおりボックスの周りにシャドウを落とすことができます。FireworksやPhotoshop風に伝えるならばドロップシャドウですね。
box-shadowについてまとめられてるサイトはとても多いので、自分的に使っていたものや、今後取り入れておきたいシャドウエフェクトについてまとめてみました。
続きを読む ＞

主にスマホサイトで用いられているアコーディオンメニュー。ゲーム系サイトであればゲーム内メニューの表示に。会員系サイトであれば会員メニューの表示に。EC系サイトであればカテゴリーメニューの表示に…などなど。
表示領域が限られているスマホサイトならではの便利な機能だと思います。今回はプラグインなしのアコーディオンメニュー制作のメモ。
続きを読む ＞