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

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

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

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

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

  • 右に矢印がついたリンク。スマホサイトでは当然のように使われています。
    右に矢印がついているのでリンクだということもわかりやすいうえ、aタグをblockにしてしまえばエリア全体を押せるようになるので、UI的にも使いやすいといったところでしょうか。

    続きを読む >
1 2

PAGE TOP