CSS [IE]IE8でCSS3のMedia Queriesが効かない場合の対処法
IE8以下でもレスポンシブWEBデザインに対応させることができるcss3-mediaqueries.jsは便利なJavascript なのですが、「IE でMedia Queriesが効かない…」という問題によく悩まされます。 原因不明のモ...
CSS
CSS 
CSS CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」
loading 画像が簡単に作れるサービス の記事でも紹介させていただいた Ajaxload を使えば loading 画像を作成できますが、今回紹介させていただく CSS Load.net を利用すれば「CSS のみ」によるローディングア...
CSSスニペット [WordPress]PDFやWord、Excelなどのリンクに自動でアイコンを表示させる方法
企業サイトを構築していると、ニュース内のテキストリンクに「PDF アイコン」を表示させるカスタマイズが必要になることが多いですので、 今回はWordPressでの投稿を例に、PDFファイルへのリンクテキストに自動でアイコンを表示させる方法に...
CSSスニペット [CSS]CSS3のtransformで文字を斜めに傾けて表示する方法
CSS3のtransformプロパティを使って要素を斜めに傾けて表示させることが可能です。 テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。 写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。...
HTML 2カラム、3カラムサイトの可変レイアウトのHTMLとCSSまとめ
2カラム、3カラムのサイトやブログを作る上で、ブラウザの伸縮に応じてコンテンツ部の幅を「可変」にする方法のまとめです。 左右メニューの幅は固定にして、コンテンツ部の幅だけがブラウザを縮めれば狭くなり、伸ばせば広くなる、という作りです。 2カ...
CSS [CSS]CSS3のグラデーション用ジェネレーターUltimate CSS Gradient Generatorが超便利
イラレやフォトショでデザインしたグラデーションのボタンなどを、CSS3のグラデーションに落とし込む時などに使えるサービスがUltimate CSS Gradient Generatorです。 カラーピッカーとグラデーションバー付きで分かりや...
CSSスニペット [CSS]CSSで作る「吹き出し」のサンプル（上下左右の4方向）
吹き出しやバルーンとも言いますが、CSSだけで実現できるのでまとめました。 上下左右の4方向に対応した吹き出しの作り方とサンプルをまとめました。 「下向き」吹き出しの作り方 まずは「下向き」からです。 吹き出し作成時のポイント 吹き出しの大...
Bootstrap [Bootstrap]タブメニューをCookieに保存して記憶させる方法
Bootstrapを使ったシンプルなタブメニューの実装方法のご紹介です。 今回はタブメニューの基本的な設置方法と合わせて、jQuery Cookieを利用して現在閲覧しているタブの情報をCookieに保存する方法も合わせて紹介させていただき...
CSSプロパティ [CSS]CSSのclipで長方形の画像を正方形で切り抜き（マスク）する方法
CSSの要素の切り抜き領域を指定するプロパティclipを使えば、画像を切り抜き表示させることができます。 デザインに合わせて長方形の画像を正方形にマスクする必要がある場合などに使えます。 clip: の値 clip:プロパティの値は以下の2...
HTML [CSS]floatで並べた2つの要素の高さを揃える方法
2カラムのサイトを構築する上で、高さの異なる要素（サイドメニューとコンテンツ部）をfloatで隣合わせた時に「高さを揃える」方法のご紹介です。 floatで要素を並べた場合 左サイドメニューを置いた2カラム型のサイトで、このようなレイアウト...
Bootstrap [Bootstrap]LightboxプラグインBootstrap Lightboxの使い方
Bootstrapのモーダル機能ベースのBootstrap Lightboxは、画像をクリックしてオーバーレイで拡大表示させるシンプルなLightbox系プラグインです。 ColorboxやFancyboxのようにあれもこれも出来るという訳...
CSSプロパティ [CSS]imgタグの画像をborder-radiusで角丸にして表示する方法
以前にCSS3 のborder-radius で角丸を作る方法の記事でもborder-radiusの基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。 画像を角丸で表示させる <img>...
CSSスニペット [スマホ]iOSやAndroidでリンクタップ時のハイライト表示を変更する方法
スマホサイトでリンクをタップすると、iPhone（iOS）ならリンク周りにグレーの影が、Androidであればリンクの周りにオレンジの枠が表示されると思います。 このグレーの影やオレンジの枠（ハイライト表示）をCSSの-webkit-tap...
CSSスニペット [CSS]マウスでドラッグした際の文字を選択範囲の色（ハイライトカラー）を変更する方法
マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。 通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3の擬似要素selectionを用いることでこの...
CSSプロパティ [CSS]背景画像のサイズを変更できるプロパティ「background-size」
CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-sizeを使うことができます。 background-im...
CSS [CSS]iPad、iPhone5向けレスポンシブWEBデザインに必要なMedia Queriesのまとめ
レスポンシブWEBデザインへの対応で頻繁に使うCSSのMedia Queriesですが、条件分岐のやり方をよく忘れるので整理しました。 「iPad」「iPhone」「iPhone 5」の端末別に加えて、「ブラウザ幅」での条件分岐もまとめてい...
CSSプロパティ [CSS]CSS3のborder-radiusで要素や画像で円形に表示する方法
CSS3のborder-radiusは要素を角丸にすることができる便利なプロパティで、角丸の値を調整することで、画像や要素を正円（円形）で表示することもできます。 IE7以下でも利用したい場合は（試していませんが）、PIEなどを使えば実現可...
CSSプロパティ [CSS]テキストに影を落とすCSS3プロパティtext-shadow
テキストに影を落とすCSS3のプロパティtext-shadowについてまとめました。 前回紹介させていただいたボックスに影を付けるbox-shadowプロパティと使い方は似ています。 text-shadow の記述方法 以下、text-sh...
CSS擬似要素・擬似クラス [CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法
チェックボックにチェックを入れることで、指定した要素の文字の色や幅(widthの値）を変えたり、表示非表示を切替えたりする方法のご紹介です。 サイトやブログにも馴染むように、チェックボックスのデザインをボタンっぽく変更する方法も合わせて紹介...
CSS [CSS]CSSでフッター要素をブラウザ下部に固定する方法
コンテンツの情報量が少ないページでは、フッター要素がページ中段くらいまで上がってきて見栄えが良くない場合もあるので、フッターは常にブラウザの下部に固定させる方法をまとめました。 CSS でフッター要素をブラウザの下部に固定 まずはHTMLで...
CSSプロパティ [CSS]ボックスに影を付ける（ドロップシャドウ）CSS のプロパティ「box-shadow」
ボックスに影を付ける（ドロップシャドウ）ことができるCSS3のプロパティがbox-shadowです。 IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあ...
CSSプロパティ [CSS]CSSのdisplay:inline-blockで並べた要素間の隙間を埋める方法
float を利用せずに display:inline-block で要素を横並びにする方法の記事でも紹介していますが、display:inline-blockで要素を横並びにした場合に発生する「要素間の隙間を埋める」方法の紹介です。 PX...
CSSプロパティ [CSS]CSS3のborder-radiusで角丸を作る方法
CSS3よりborder-radiusのプロパティを使う事で簡単に角丸のオブジェクトが表現できるようになりました。 今回はborder-radiusを使って様々な角丸のサンプルを紹介したいと思います。 border-radius の記述方法...
CSSプロパティ [CSS]pointer-eventsで<a>タグのリンクを無効化する方法
<a>タグをクリックして何も起きないようにするということをしようと思います。 一番簡単な方法は、CSS3のpointer-eventsを利用することですが、CSS3なのでIEでの動きは微妙です…。 スマフォサイトなら気にせずに使えるのかなと...
CSSプロパティ [CSS]スマホサイトで端末を横にしても文字サイズを拡大させない方法
iPhoneなど向けにスマホサイトを作っていると「端末を横にすると、文字が拡大表示されちゃう！」と困った経験があるかもしれませんが、 CSSの-webkit-text-size-adjust:100%