CSSスニペット
CSSスニペット CSSでやっておきたいカーニング
CSSスニペット [CSS]Font Awesome 5でWEBフォントを背景で指定する方法
CSS ボタンにFont Awesome 5の矢印を指定 ポイントは、font-family: "Font Awesome 5 Free"と、font-weight: 900を記述すること。 この記述がないとアイコンが表示されません。
CSSスニペット [CSS]box-shadowで上下左右の四方向とした方向に影を落とす方法
上下左右の四方向にシャドウ 下方向にだけシャドウ
CSSスニペット [CSS]disabledのフォームのデザインを変更する方法
CSS 文字色#999、背景色#dddに変更 HTML デモ input:disabled {color: #999;background-color: #ddd
CSSスニペット [CSS]半円を表示する方法（半円上、半円下、半円左、半円右）
CSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。 正円 まず、border-radiusにより正円を作ります。これが半円を作っていく上...
CSSスニペット [CSS]aタグリンク下線の色や種類などを変更する方法
CSSでリンクテキストの下線の太さや色を変更するには、text-decoration:noneにした上でborder-bottomプロパティで線の太さや色、種類を設定してあげると簡単に実現できます。 また、borderプロパティでリンクテキ...
CSSスニペット [CSS]height:100vhで要素の高さを100%にする方法
以前にjQueryで特定の要素の高さを100%にする方法について紹介させていただきましたが、対応ブラウザは限られるものの、CSSだけでも同じように要素の高さを100%にすることが可能です。 高さの単位「vh」 CSS で要素の高さを指定する...
CSSスニペット [CSS]CSSでチェックボックスやラジオボタンを大きく表示する方法
フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。 チェックボックスを拡大表示するサンプル まずはチェックボックスのCSSの記述例です。 チェックボックスのwidthやheightの値と合わせて、CSS3の...
CSSスニペット [CSS]Facebookの「Like Box」の背景色を変更する方法
FacebookのLike Boxプラグインに使える背景色が「light」と「dark」の2種類しかないため、 今回はブログのデザイン（背景色）に合わせてLike Boxの背景色を変更する方法を紹介させていただきます。 ※Like Boxの...
CSSスニペット [CSS]iframe要素をレスポンシブ対応させる方法
以前にも iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」 の記事を紹介させていただきましたが、今回はfluidityを使わずにちょっとしたCSSのスタイル記述だけで簡単にiframe要素をレシポンシブ対応さ...
CSSスニペット [CSS]WEBページの印刷時にリンクの後ろにURLが表示される問題の解決法
Twitter Bootstrapを使っているサイトでWEBページを印刷した際に、リンクテキストの後ろに「リンク先のURL」が表示されてしまうことがあります。 このURLを印刷時に非表示にする方法が、【CSS】印刷するとリンクの後ろにURL...
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]iOSで滑らかなスクロールを実現する-webkit-overflow-scrollingの使い方
overflowで要素内をスクロールさせると、iPhoneやiPadなどのiOSで見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0より実装されたSafari CSSの-webkit-overflow-scrolling...
CSSスニペット [CSS]label要素の属性セレクタにCSSを適用する方法
<label for="mail">のような属性セレクタをCSSで制御する方法のご紹介です。 属性セレクタにCSSスタイルを適用 以下のようなCSS の記述になります。 またはこのような記述です。
CSSスニペット [CSS]CSSでtableタグのcellspacing、cellspaddingを指定する方法
tableのセルの間隔とセル内の余白を、cellpadding、cellspacingは使わずにCSSで指定する方法のご紹介です。 tableタグにcellpadding、cellspacing などを記述 table タグにcellpad...
CSSスニペット [CSS]Windows のChrome でメイリオフォントが潰れて表示される場合の対処法
メイリオフォント を指定してしたテキストを、Windows のGoogle Chrome から見たら「文字が潰れて表示される…」なんて場合に、CSSのtext-shadowを使った回避策のご紹介です。 もっとスマートな方法が他にもあるのかも...
WordPress [WordPress]PDFやWord、Excelなどのリンクに自動でアイコンを表示させる方法
企業サイトを構築していると、ニュース内のテキストリンクに「PDF アイコン」を表示させるカスタマイズが必要になることが多いですので、 今回はWordPressでの投稿を例に、PDFファイルへのリンクテキストに自動でアイコンを表示させる方法に...
CSSスニペット [CSS]CSS3のtransformで文字を斜めに傾けて表示する方法
CSS3のtransformプロパティを使って要素を斜めに傾けて表示させることが可能です。 テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。 写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。...
CSSスニペット [CSS]CSSで作る「吹き出し」のサンプル（上下左右の4方向）
吹き出しやバルーンとも言いますが、CSSだけで実現できるのでまとめました。 上下左右の4方向に対応した吹き出しの作り方とサンプルをまとめました。 「下向き」吹き出しの作り方 まずは「下向き」からです。 吹き出し作成時のポイント 吹き出しの大...
CSSスニペット [スマホ]iOSやAndroidでリンクタップ時のハイライト表示を変更する方法
スマホサイトでリンクをタップすると、iPhone（iOS）ならリンク周りにグレーの影が、Androidであればリンクの周りにオレンジの枠が表示されると思います。 このグレーの影やオレンジの枠（ハイライト表示）をCSSの-webkit-tap...
CSSスニペット [CSS]マウスでドラッグした際の文字を選択範囲の色（ハイライトカラー）を変更する方法
マウスカーソルでテキストをグイーッとなぞると、選択範囲がハイライト表示されます。 通常、この選択範囲のハイライトカラーは青色で、たまにピンクや赤色などになっているサイトやを見かけますが、CSS3の擬似要素selectionを用いることでこの...
CSSスニペット [CSS]要素を横並びに配置できるdisplay:table-cellの基本的な使い方と注意点
要素を横並びで配置するには、CSSのfloatやdisplay:inline-blockを用いるか、あるいは <table> タグを用いるか…の方法がありますが、 今回紹介させていただくdisplay:table-cellでも同じことができ...