• RSS
[CSS]Google Maps iframeでマウススクロールによる拡大縮小を無効にする方法

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

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

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

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

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

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

[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]Windows のChrome でメイリオフォントが潰れて表示される場合の対処法

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

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

[CSS]無料で使えるWEBフォント「Google Web Fonts」の使い方

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

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

[JS]IE7、8でも background-size:contain が利用できるjQueryプラグイン「jquery.backgroundSize」

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

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

[CSS]リボン風帯のHTML と CSS をWEB上で生成できる「3D Ribbon Generator」

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

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

[CSS]border-radius などのコードをWEB上で簡単に生成できる「CSS3 Generator」

CSS3の border-radius や box-shadow などのプロパティの値をブラウザ上で設定し、コードを生成できるジェネレータ「CSS3 Generator」を使ってみました。

エディタで書いていると、特に transform とかはイメージが掴み辛いので面倒でしたが、CSS3 Generator のサイト上で実際の動きや変形具合を見ながら値を設定できるので非常に便利です。
続きを読む

CSS によるローディングアニメーションを簡単に生成できる「CSS Load.net」

loading 画像が簡単に作れるサービス の記事でも紹介させていただいた Ajaxload を使えば loading 画像を作成できますが、今回紹介させていただく CSS Load.net を利用すれば「CSS のみ」によるローディングアニメーションを簡単に作ることができます。

ローディングの大きさや色、スピードを設定すれば CSS ファイルに記述するコードが出力されますので便利です。
続きを読む

[CSS]CSS3 の transform で文字を斜めに傾けて表示する方法

CSS3 の transform プロパティを使って要素を斜めに傾けて表示させることが可能です。

テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。
写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。
続きを読む