Bootstrap のモーダル機能ベースの「Bootstrap Lightbox」は、画像をクリックしてオーバーレイで拡大表示させるシンプルなLightbox 系プラグインです。

Colorbox や Fancybox のようにあれもこれも出来るという訳ではなさそうですが、今後使う可能性もあるので簡単に設置方法をまとめました。
続きを読む

以前に [CSS]CSS3 のborder-radius で角丸を作る方法の記事でも border-radius の基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。
続きを読む

スマホサイトでリンクをタップすると、iPhone（iOS）ならリンク周りにグレーの影が、Android であればリンクの周りにオレンジの枠 が表示されると思います。

このグレーの影やオレンジの枠（ハイライト表示）をCSS の -webkit-tap-highlight-color で無効にしたり、ハイライトカラーを変更する方法をまとめました。
続きを読む

マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。

通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3 の擬似要素 selection を用いることで、このハイライトカラーを変更することができます。
続きを読む

CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-size を使うことができます。

background-image: で背景画像を指定して、background-size: で背景画像のサイズを調整してあげます。
続きを読む

レスポンシブWEBデザインへの対応で頻繁に使うCSS の Media Queries ですが、条件分岐のやり方をよく忘れるので整理しました。

「iPad」「iPhone」「iPhone 5」の端末別に加えて、「ブラウザ幅」での条件分岐もまとめています。
続きを読む

CSS3 の border-radius は要素を角丸にすることができる便利なプロパティで、
角丸の値を調整することで、画像や要素を正円（円形）で表示することもできます。

IE 7以下でも利用したい場合は（試していませんが）、PIE などを使えば実現可能かと思います。
続きを読む

テキストに影を落とすCSS3 のプロパティ text-shadow についてまとめました。

前回紹介させていただいた、ボックスに影を付ける box-shadow プロパティと使い方は似ています。
続きを読む

チェックボックにチェックを入れることで、指定した要素の文字の色や幅(width の値）を変えたり、表示非表示を切替えたりする方法のご紹介です。

サイトやブログにも馴染むように、チェックボックスのデザインをボタンっぽく変更する方法も合わせて紹介させていただきます。
続きを読む

よく忘れるのでメモ。

コンテンツの情報量が少ないページでは、フッター要素がページ中段くらいまで上がってきて見栄えが良くない場合もあるので、フッターは常にブラウザの下部に固定させる！ための方法です。
続きを読む

ボックスに影を付ける（ドロップシャドウ）ことができる CSS3 のプロパティが box-shadow です。

IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあるボタンをCSS だけで表現することもできますので、個人的には使用頻度の高いプロパティです。
続きを読む

[CSS]float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-block で要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。
続きを読む

CSS3 より border-radius のプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。

今回は border-radius を使って様々な角丸のサンプルを紹介したいと思います。
続きを読む

<a>タグをクリックして何も起きないようにする、ということをしようと思います。

一番簡単な方法は、CSS3の pointer-events を利用することですが、CSS3なのでIEでの動きは微妙。

スマフォサイトなら気にせずに使えるのかなという印象。
続きを読む