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

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

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

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

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

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

[CSS]<hr> の境界線の色と太さをCSSで変更する方法

<hr> の境界線の色と太さを変更する為には、CSS のbackground-colorheight プロパティを使います。
続きを読む

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

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

[CSS]簡単にCSS の三角形を生成できるジェネレータ「CSS三角形作成ツール」

WEB上で三角形の形状やサイズ、色などを指定しながら、CSS の三角形が簡単に生成できるジェネレータ「CSS三角形作成ツール」のご紹介です。

以前にも CSS で円形、三角形、台形、星形 などを表現する方法のまとめ の記事を紹介させていただきましたものの…、コーディングの時間がない時などには、このような作成ツールは本当に役に立ちます。
続きを読む

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

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

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

[CSS]iframe やtable のレスポンシブ対応に最適なCSS「Fluidity」

Google Maps やYoutube などを埋め込み表示したiframe 要素をレスポンシブ対応(表示サイズをブラウザに合わせてくれる)するのに便利なCSS「Fluidity」のご紹介です。
続きを読む

[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 で変更する方法

Twitter のツイートをブログに埋め込んで表示させる場合に、幅を100% に変更したり、デフォルトの引用デザインではなく自分のブログに合ったオリジナルデザインへと変更する方法のご紹介です。
続きを読む

[CSS]フォームにフォーカスした時の背景色を変更する方法

テキストフォームやテキストエリアなどの要素がマウスでクリックされた(:focus)際に、CSSで指定した背景色に変更する方法のご紹介です。
続きを読む

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

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

[JS]jQuery とCSS で画像をトリミングしてセンタリング表示する方法

jQuery とCSS で画像をトリミングしてセンタリング表示する方法のご紹介です。
続きを読む