• RSS
[CSS]aタグリンク下線の色や種類などを変更する方法

CSS でリンクテキストの下線の太さや色を変更するには、text-decoration:noneにした上で、border-bottom プロパティで線の太さや色、種類を設定してあげると簡単に実現できます。

また、border プロパティでリンクテキストを枠線で囲むようなデザインにすることも可能です。
続きを読む

[CSS]height:100vh で要素の高さを100%にする方法

以前にjQueryで 特定の要素の高さを100%にする方法 について紹介させていただきましたが、

対応ブラウザは限られるものの、CSS だけでも同じように要素の高さを100%にすることが可能です。
続きを読む

[CSS]CSS でチェックボックスやラジオボタンを大きく表示する方法

フォームのチェックボックスやラジオボタンを、CSSでサイズ変更する方法のご紹介です。
続きを読む

[CSS]Facebookの「Like Box」の背景色を変更する方法

Facebook のLike Box プラグインに使える背景色が「light」と「dark」の2種類しかないため、

今回はブログのデザイン(背景色)に合わせてLike Box の背景色を変更する方法を紹介させていただきます。

Like Box の設置方法については、別途 Facebook のLike Box をブログに設置する方法 の記事も参考にしてみてください。
続きを読む

[CSS]iframe 要素をレスポンシブ対応させる方法

以前にも iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」 の記事を紹介させていただきましたが、今回はfluidity を使わずに、ちょっとしたCSS のスタイル記述だけで簡単にiframe 要素をレシポンシブ対応させる方法をご紹介します。
続きを読む

[CSS]WEBページの印刷時に、リンクの後ろにURLが表示される問題の解決法

Twitter Bootstrap を使っているサイトでWEBページを印刷した際に、リンクテキストの後ろに「リンク先のURL」が表示されてしまうことがあります。

このURLを印刷時に非表示にする方法が、【CSS】印刷するとリンクの後ろにURLが勝手に表示される のブログ記事で紹介されていましたので、シェアさせていただきました。
続きを読む

[CSS]Javascript を使わずにCSS でTwitter フォローボタンをデザインする方法

Twitter のフォローボタンをCSS でデザインする方法のご紹介です。

以前に紹介させていただいたTwitter フォローボタンをテキストリンクにする 方法を使えば、HTML とCSS だけでTwitter フォローリンクを設置することができるようになります。
続きを読む

[CSS]CSS3 で ローディングアニメーションを作る方法

CSS でローディングアニメーションを作るには、過去にも紹介させていただいたCSS Load.net などを使う方法もありますが、

今回は 画像を使わないでCSS3で様々なローディング用アニメーションをつくってみよう の記事で紹介されていた方法をもとに、keyframes を使ったシンプルなCSS のローディングアニメーションの作成方法とカスタマイズ例をまとめてみました。
続きを読む

[CSS]pre タグ内の文章を改行する方法

CSS のwhite-space プロパティのpre-wrap を使って、pre タグ内のテキストやコードを幅に合わせて改行する方法のご紹介です。
続きを読む

[CSS]縦型、横型の吹き出し付きソーシャルボタンのCSS サンプル

過去に CSS で作る「吹き出し」のサンプル の記事で紹介させていただいたカスタマイズを元に、
Facebook やTwitter っぽい吹き出し付のソーシャルボタンを「縦型」「横型」で作ってみました。
続きを読む

[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方

overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。

そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール(慣性スクロール)を実現できるようになります。
続きを読む

[CSS]label要素の属性セレクタにCSS を適用する方法

<label for=”mail”>のような属性セレクタをCSS で制御する方法のご紹介です。
続きを読む

[CSS]CSS でtable タグのcellspacing cellspadding を指定する方法

table のセルの間隔とセル内の余白を、cellpadding、cellspacingは使わずにCSS で指定する方法のご紹介です。
続きを読む

[CSS]Windows のChrome でメイリオフォントが潰れて表示される場合の対処法

メイリオフォント を指定してしたテキストを、Windows のGoogle Chrome から見たら「文字が潰れて表示される…」なんて場合に、CSS のtext-shadow を使った回避策のご紹介です。

もっとスマートな方法が他にもあるのかもしれませんが、今回はテキストの周囲にうっすら同色の影を付け、「肉付け」させることで潰れて見るのを防ぐ方法になります。
続きを読む