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

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

html5になり、input typeにもいろいろな属性が追加されました。自分の場合は主にスマホサイト制作時に、type属性の場合分けを行っていたわけですが、ここで意外な落とし穴が発覚。
なんとtype=”number”にしてしまうと、先頭の「0」が認識されませんでした。
続きを読む ＞

ネットサーフィン中に気になった色とかデザイナーさんならしょっちゅうですよね。サイト全体のベースカラーであるとか、アクセントカラーやアソートカラーになる部分的なカラーであるとか。
そんな時にChromeのColorZillaがとても便利だったのでメモしておきます。
続きを読む ＞

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

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

フォームの入力エリアをクリックすると、入力エリアの背景色が変更されたり、枠線の色が変更されたりと、フォームにひと工夫付け加えているサイトを目にする事があるかと思います。
これは:focusという擬似クラスをつけることにより、入力エリアにフォーカスが当たる際の背景色とボーダーの変更を可能にしています。
続きを読む ＞

PCサイトを制作する上で、必須として確認しなければならないのが対応ブラウザについて。ここで一番頭を悩まされるのはIEのバージョン対応。
案件によってはIE8やIE7、場合によってはIE6を拾い上げる事も当然でてきます。このとき役立つツールが、IE10のブラウザーモードです。
続きを読む ＞

スマホサイトはPCサイトと異なりマウスカーソルがありませんので、PCではよく使われているhoverやロールオーバーの効果がスマホサイトでは使用できません。
ですが、タップしたときにあたかもhoverしているような効果をつけることはスマホサイトでも可能です。ただし、CSSだけでは対応しきれないため、jQueryを用います。
続きを読む ＞

指定したクラス名を付けたり消したりできるjQueryの.toggleClass。正確には.toggleClassで指定したクラス名が無ければ追加、あれば削除するという動きを持っています。
イメージ的にはONとOFFを切り替える電気のスイッチのような感じですかね。
続きを読む ＞

cssのopacityとbackground:rgba()は、ともに透過させるためのプロパティ。透過させるという用途は共通でも、使い方は異なっていると思います。
透過には常にopacityを使っていたとき、囲っていた範囲全体に透過及んでしまい、どのように対処しようかと悩んだことがあったので、そのときのメモです。
続きを読む ＞