CSS 画像の下に隙間が出来るのはなぜ？
画像を配置する際に、なぜだか"画像の下に隙間"が出来てしまうことありませんか？どういうことかと言うと、デモサンプルを確認してみてください。DEMO上の「デフォルトの配置」の画像下に背景色が見えてしまっ...
CSS
CSS 
CSS 蛍光ペン風やアンダーラインなどのテキスト装飾をCSSで実現する
ブログ記事などでよく見かける、強調表現のひとつ「蛍光ペン」や「アンダーライン」。ランディングページでもよく見かける手法ですが、背景に画像を使ってリピートさせたりすることで表現するやり方もありますが、今...
CSS ボタンや画像の内側にシャドウを入れる方法
ボタンやイメージとして配置する画像にシャドウを入れる際は、box-shadowを指定すれば再現できますが、画像の内側にシャドウを入れて凹んだ感じにしたい場合、box-shadowプロパティの「inse...
CSS コンテンツを画面の中央（上下左右）に配置する方法
以前にも一度、画面中央配置の記事を書かせていただきました。「特定の要素を画面の中央（上下左右）に配置する方法」こちらは「display:table-cell」を扱った中央配置の方法でしたが、今回はCS...
CSS 日本語Webフォントを利用する際に気をつけたいライセンスのこと
Webフォントを利用する際に、その使い方と合わせて「フォントに対するライセンス」をきちんと理解しておく必要があります。Webフォントだから勝手に何も気にせずに使っていいというわけではないので、細かいこ...
CSS 文字をテロップのように流すマーキーをCSSで実装する！
近年、見かけることも少なくなった「marquee（マーキー）」ですが、元々はIEの独自機能でもあったため、HTMLでは非推奨とされ消えていきました。そんな「marquee」のテロップ的動きをコンテンツ...
CSS CSSのみで要素がス～っと出たり消えたりする方法
ある要素に対して、カーソルがマウスオーバーした際のエフェクトのひとつ、“ フェードイン ”と“ フェードアウト ”をCSSのみを使って表現する方法をご紹介します。今回はス～っと出たり消えたりする柔らか...
CSS ロールオーバーで画像を半透明にするシンプルな方法
ボタンや画像などで「ロールオーバーした時に画像を半透明にしたい！」そんなときの簡単な方法をご紹介します。かなり単純なことなので、扱いやすいかと思います。(adsbygoogle = window.ad...
CSS CSSで丸いボタンを装飾してみる
CSSの「border-radiusプロパティ」を使用して、色々な丸いボタンを作ってみたいと思います。まずはデモサンプルを確認してみてください。デモサンプル(adsbygoogle = window....
CSS 半透明ボタンにしたいとき、背景の柄が透けてしまうのを防ぐ方法
ボタン要素をimg画像で配置した時に、マウスオーバー効果として半透明にする指定をすると、背景が黒っぽい場合に柄が透けてしまって少しカッコ悪くなってしまうのを防ぐ方法になります。簡単に言ってしまえば、画...
CSS マウスオーバーでラインアニメーションを実現する
ナビゲーションなどでマウスオーバー時に、装飾の下線を横に伸ばすアニメーションをかつてはFlashなので実現していましたが、これと同じような動きをCSSのみで実現することが可能になりました。a要素に対す...
CSS text-shadowプロパティによる装飾サンプル
テキストに対しての装飾を考えるとき、わざわざPhotoShopなどで画像を作らなくても、CSS3の「text-shadowプロパティ」の指定で、ドロップシャドウや光彩などの、基本的なエフェクト効果を実...
CSS 【初心者向け】CSSってどこに記述すればいいの？
※CSS初心者向けの内容ですので、それなりの方はすっ飛ばしてください！最近CSSをはじめた方に、「CSSの記述場所って決まってるの？」というような質問をされたので、CSSの記述場所の基本を確認しておき...
CSS 擬似要素「:link,:visited,:hover,:active」の順番が曖昧なら覚えてしまえ！
いくつになっても覚えられないことって意外とあるものです。しかも基本的なことほど、何度も何度も確認してしまうことってありませんか？恥ずかしながら私はあります。。。「a:link」等の擬似要素の記述する順...