CSS3の「border-radius」の四隅の値と「width」と「height」の値の比率を調整して、「半円」を表示する方法をコード付きで紹介します。
続きを読む

テキストに蛍光ペンで線を引いたような背景色を適用させる方法のご紹介です。
CSSでテキストにグラーションの背景を指定してあげることで、マーカーを引いたようなの見せ方ができるようになります。
続きを読む

CSSでFont AwesomeのWEBアイコンフォントを細く表示する方法のご紹介です。

Font Awesomeアイコンそのものは細くすることはできないですが、CSSのfont-smoothingとtext-strokeプロパティを使うことで、見た目を細くするなどの調整を行うことができます。
続きを読む

Google MapsをブログやWEBサイトに埋め込む（iframeで読み込ませる）際に、マウススクロールにより地図が拡大縮小してしまわないようにする方法のご紹介です。
続きを読む

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

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

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

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

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

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

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

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

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

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

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

Arial Black、Times、Verdana…など、WEBサイト制作時に指定するフォントはごく限られたモノになるかと思いますが、Google 提供のサービスの1つである Google Web Fonts を利用すると表現の幅が広がります。

Google Web Fonts は多数のフォントの中から使いたいフォントの太さ、スタイルなどを指定するだけで<link> タグや CSSのコードが生成されますので、それをサイトに貼付けるだけで使えます。
続きを読む

IE7、IE8 のブラウザでもCSS3 の background-size:contain と background-size:cover を使用するためのjQuery プラグインが jquery.backgroundSize です。

そこまでしてIE 対応が必要か…の話は置いておいて、今回は jquery.backgroundSize の基本的な使い方をサンプルに加えて、プラグイン使用に関する注意点も合わせてご紹介します。
続きを読む

WEB上で簡単に「リボン風帯」のデザインを作って、HTML とCSS のコードを生成できるサービス 3D Ribbon Generator のご紹介です。

生成されるコードの量はかなり多いですが、リボン帯をCSS だけで一から作ろうと思うと結構大変なので、帯の色やサイズをかなり細かく指定できる3D Ribbon Generator は便利です。
続きを読む