CSSスニペット [CSS]半円を表示する方法（半円上、半円下、半円左、半円右）
CSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。 正円 まず、border-radiusにより正円を作ります。これが半円を作っていく上...
CSS3
CSSスニペット 
CSSプロパティ [CSS]テキストにマーカーのような背景を適用する方法とサンプル
テキストに蛍光ペンで線を引いたような背景色を適用させる方法のご紹介です。 CSSでテキストにグラーションの背景を指定してあげることで、マーカーを引いたようなの見せ方ができるようになります。 マーカーを引いたような背景 具体的なコードはこんな...
CSS [CSS]Font Awesomeのアイコンを細く見せたい場合の対処法
CSSでFont AwesomeのWEBアイコンフォントを細く表示する方法のご紹介です。 Font Awesomeアイコンそのものは細くすることはできないですが、CSSのfont-smoothingとtext-strokeプロパティを使うこ...
CSS [CSS]Google Maps iframeでマウススクロールによる拡大縮小を無効にする方法
Google MapsをブログやWEBサイトに埋め込む（iframeで読み込ませる）際に、マウススクロールにより地図が拡大縮小してしまわないようにする方法のご紹介です。 Google Maps でスクロールによる拡大縮小を無効化 Googl...
CSSスニペット [CSS]CSSでチェックボックスやラジオボタンを大きく表示する方法
フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。 チェックボックスを拡大表示するサンプル まずはチェックボックスのCSSの記述例です。 チェックボックスのwidthやheightの値と合わせて、CSS3の...
CSS [CSS]簡単に三角形を生成できるジェネレーター「CSS三角形作成ツール」
WEB上で三角形の形状やサイズ、色などを指定しながら、CSSの三角形が簡単に生成できるジェネレータCSS三角形作成ツールのご紹介です。 以前にもCSSで円形、三角形、台形、星形 などを表現する方法のまとめの記事を紹介させていただきましたもの...
CSSスニペット [CSS]Javascriptを使わずにCSSでTwitterフォローボタンをデザインする方法
TwitterのフォローボタンをCSSでデザインする方法のご紹介です。 以前に紹介させていただいたTwitter フォローボタンをテキストリンクにする方法を使えば、HTMLとCSS だけでTwitter フォローリンクを設置することができる...
CSSスニペット [CSS]CSS3でローディングアニメーションを作る方法
CSSでローディングアニメーションを作るには、過去にも紹介させていただいたCSS Load.netなどを使う方法もありますが、 今回は画像を使わないでCSS3で様々なローディング用アニメーションをつくってみようの記事で紹介されていた方法をも...
CSSスニペット [CSS]preタグ内の文章を改行する方法
CSSのwhite-spaceプロパティのpre-wrapを使って、pre タグ内のテキストやコードを幅に合わせて改行する方法のご紹介です。 pre タグ内のテキストを改行 preタグ内のテキストを自動改行させるには、CSSで以下のように指...
CSSスニペット [CSS]縦型、横型の吹き出し付きソーシャルボタンのCSS サンプル
過去にCSSで作る「吹き出し」のサンプルの記事で紹介させていただいたカスタマイズを元に、 FacebookやTwitterっぽい吹き出し付のソーシャルボタンを「縦型」「横型」で作ってみました。 吹き出し付の縦型ボタン（vertical） 縦...
CSSスニペット [CSS]Windows のChrome でメイリオフォントが潰れて表示される場合の対処法
メイリオフォント を指定してしたテキストを、Windows のGoogle Chrome から見たら「文字が潰れて表示される…」なんて場合に、CSSのtext-shadowを使った回避策のご紹介です。 もっとスマートな方法が他にもあるのかも...
CSS [CSS]無料で使えるWEBフォント「Google Web Fonts」の使い方
Arial Black、Times、Verdana…など、WEBサイト制作時に指定するフォントはごく限られたモノになるかと思いますが、Google提供のサービスの1つであるGoogle Web Fontsを利用すると表現の幅が広がります。 ...
CSSプロパティ [jQuery]IE7、8でもbackground-size:containが利用できるプラグインjquery.backgroundSize
IE7、IE8のブラウザでもCSS3のbackground-size:containとbackground-size:coverを使用するためのjQuery プラグインがjquery.backgroundSizeです。 そこまでしてIE対応...
CSSプロパティ [CSS]リボン風帯のHTMLとCSSをWEB上で生成できる3D Ribbon Generator
WEB上で簡単に「リボン風帯」のデザインを作って、HTMLとCSSのコードを生成できるサービス3D Ribbon Generatorのご紹介です。 生成されるコードの量はかなり多いですが、リボン帯をCSS だけで一から作ろうと思うと結構大変...
CSSプロパティ [CSS]border-radiusなどのコードをWEB上で簡単に生成できるCSS3 Generator
CSS3のborder-radiusやbox-shadowなどのプロパティの値をブラウザ上で設定し、コードを生成できるジェネレータCSS3 Generatorを使ってみました。 エディタで書いていると、特に transform とかはイメー...
CSS CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」
loading 画像が簡単に作れるサービス の記事でも紹介させていただいた Ajaxload を使えば loading 画像を作成できますが、今回紹介させていただく CSS Load.net を利用すれば「CSS のみ」によるローディングア...
CSSスニペット [CSS]CSS3のtransformで文字を斜めに傾けて表示する方法
CSS3のtransformプロパティを使って要素を斜めに傾けて表示させることが可能です。 テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。 写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。...
CSSプロパティ [CSS]imgタグの画像をborder-radiusで角丸にして表示する方法
以前にCSS3 のborder-radius で角丸を作る方法の記事でもborder-radiusの基本的な使い方を紹介させていただきましたが、今回は「画像の四隅を角丸」にして表示させる方法のご紹介です。 画像を角丸で表示させる <img>...
CSSスニペット [スマホ]iOSやAndroidでリンクタップ時のハイライト表示を変更する方法
スマホサイトでリンクをタップすると、iPhone（iOS）ならリンク周りにグレーの影が、Androidであればリンクの周りにオレンジの枠が表示されると思います。 このグレーの影やオレンジの枠（ハイライト表示）をCSSの-webkit-tap...
jQueryプラグイン・ライブラリ [JS]IEでもCSS3のMedia Queriesを対応させるスクリプトcss3-mediaqueries.js
なんて素敵なスクリプト!さすがGoogle先生!!! 最近はレスポンシブWEBデザインのサイトも増えてきましたので、ブラウザの幅やデバイスによってサイトの見せ方を変える必要もあるんです。 例えば、一見普通のPCサイトと思いきや、ブラウザの幅...
CSSスニペット [CSS]マウスでドラッグした際の文字を選択範囲の色（ハイライトカラー）を変更する方法
マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。 通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3の擬似要素selectionを用いることでこの...
CSSプロパティ [CSS]背景画像のサイズを変更できるプロパティ「background-size」
CSS で背景画像を使う際、今までは画像ファイルを適切な大きさにリサイズする必要がありましたが、CSS3 からは背景画像の幅・高さを拡大・縮小できるプロパティ background-sizeを使うことができます。 background-im...
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]ボックスに影を付ける（ドロップシャドウ）CSS のプロパティ「box-shadow」
ボックスに影を付ける（ドロップシャドウ）ことができるCSS3のプロパティがbox-shadowです。 IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあ...