jQueryとdata-herfを使って、サイズが可変するtdをリンク要素にする
サイズが可変するtdを、セルごとリンク要素にするお話。セル内にaタグを使ってリンクを作るとセルの高さが変わったときに、セルに吸着してくれない。
それならいっそのこと、aタグは使用しないでtdのセルごとリンクにさせてしまおうといったおかしな発想から。
続きを読む >
スマートフォンのホーム画面に表示させるショートカットアイコンのサイズと設置方法
既知ですが、スマートフォンはブラウザのブックマークだけでなく、ホーム画面にサイトへのショートカットアイコンを設定できます。
このショートカットアイコンは、PCのファビコンと一緒に作ってしまうのが流れ的にも忘れることが少なくなるので、よいのかなと思います。
続きを読む >
HTML5からの追加要素placeholderを利用して入力フォームに入力補助を設定しよう
HTML5から新しく追加された属性のひとつであるplaceholder。
placeholderはinputやtextareaで表示される入力フォームの空白部分に、あらかじめ文字を入力しておくことで、ユーザの入力補助として使用されます。
続きを読む >
ページの高速化改善に役立つツール – ChromeのPage Speed Insightsを使おう
ページの表示速度が遅い。そこまで遅くないけど若干気になる。という方は少なくないと思います。回線の問題であればそこは仕方ありませんが、サイト単位の話であれば多少改善できるかもしれません。
サイトの表示速度を分析して改善のアドバイスしてくれるツール、ChromeのPage Speed Insightsを紹介します。
続きを読む >
addClassとremoveClassを用いてページ遷移をしないタブメニューを作ろう
jQueryのaddClassとremoveClassを利用して、ページ遷移をしないタブメニューを作ります。
このタブメニューは、ページ遷移をしないので無駄な通信やページを作ることが無いのがの最大の利点です。表示領域が限られているスマホサイトでは特に有効なテクニックです。
続きを読む >
input type=”number”の落とし穴 – “number”を使うと先頭の0が認識されない
html5になり、input typeにもいろいろな属性が追加されました。自分の場合は主にスマホサイト制作時に、type属性の場合分けを行っていたわけですが、ここで意外な落とし穴が発覚。
なんとtype=”number”にしてしまうと、先頭の「0」が認識されませんでした。
続きを読む >
ChromeのColorZillaを使ってWEBページのカラー情報をすばやく取得
ネットサーフィン中に気になった色とかデザイナーさんならしょっちゅうですよね。サイト全体のベースカラーであるとか、アクセントカラーやアソートカラーになる部分的なカラーであるとか。
そんな時にChromeのColorZillaがとても便利だったのでメモしておきます。
続きを読む >
box-shadowで汎用的に使えるプロパティについてまとめてみた
box-shadowはCSS3で登場したプロパティで、文字とおりボックスの周りにシャドウを落とすことができます。FireworksやPhotoshop風に伝えるならばドロップシャドウですね。
box-shadowについてまとめられてるサイトはとても多いので、自分的に使っていたものや、今後取り入れておきたいシャドウエフェクトについてまとめてみました。
続きを読む >
jQueryプラグインを使わずにアコーディオンメニューを作ろう
主にスマホサイトで用いられているアコーディオンメニュー。ゲーム系サイトであればゲーム内メニューの表示に。会員系サイトであれば会員メニューの表示に。EC系サイトであればカテゴリーメニューの表示に…などなど。
表示領域が限られているスマホサイトならではの便利な機能だと思います。今回はプラグインなしのアコーディオンメニュー制作のメモ。
続きを読む >
input:focusを使って入力フォームにフォーカスをあてよう
フォームの入力エリアをクリックすると、入力エリアの背景色が変更されたり、枠線の色が変更されたりと、フォームにひと工夫付け加えているサイトを目にする事があるかと思います。
これは:focusという擬似クラスをつけることにより、入力エリアにフォーカスが当たる際の背景色とボーダーの変更を可能にしています。
続きを読む >