タグ : CSS

ツールチップ「balloon.css」の吹き出しの色をカスタマイズする方法

文字やボタンにマウスオーバーするとニョキっとでてくるツールチップ(吹き出し)を作成することのできるballoon.css。とっても便利なCSSライブラリです。

しかしballoon.cssのツールチップの色はデフォルトで真っ黒なのでこのままだとちょっと使いにくい。今回はツールチップの色を変更する方法を備忘録として残していきます。

続きを読む

ユーザビリティのよいチェックボックス・ラジオボタンのCSS見本53選!

Webサービスを使っていて、入力フォームのチェックボックスやラジオボタンで自分がどれを選択したのかがひと目でわかるようなデザインだと気遣いのきいているサービスだなと思わず感心してしまいますね。

そんなユーザビリティのよいデザインをCodePenから53個ピックアップしたのでタイプ別にまとめていきます。

今回選んだデザインは全てjsは一切使っていないCSSのみで構成されているものばかりを集めてみました。
デザインに参考にしてみてください。

続きを読む

[Animate.css] ボタンクリック時にアニメーションを動かす方法

css
HTMLの文字や画像などにアニメーションで動きをつけることのできるライブラリで「Animate.css」というライブラリは比較的有名だと思います。

しかし、ボタンクリックやマウスオーバーで文字や画像を動かそうと思うと一手間必要になります。

今回はそんな一手間について紹介していきます。

続きを読む

シンプルなHTMLの雛形を公開します。ちょっとした動作確認にどうぞ。

フロントサイドの人はHTMLの雛形なんて当たり前のように持っていると思うのですが、エンジニアがCSSやJavaScriptの確認をしようとすると、HTMLを用意するところから始めるという人が多いと思います。

そんな人のため(自分のため)にコピペで動くHTMLテンプレートを公開していきます。
続きを読む

FlexBoxの基本的な使い方

css
ボタンなどのレイアウトを横並びにさせる方法で以前でしたらfloatの方がよく使われていたと思うのですが、最近ではfloatの代わりにflexboxを使っているところも大分増えてきましたよね。

レイアウトの幅を自在に変えたり、右寄せしたりと比較的floatよりも簡単に扱える印象もあります。ただ古いIEには対応していなかったりと多少の懸念材料はあるものの、将来的にはflexboxのほうが主流になるのではないかと思います。

今回はそんなflexboxの基本的な使い方をソースコードを使って紹介していきます。

続きを読む

Font Awesomeの導入方法を紹介します!

css

最近よくみかけるようになったFont Awesomeの導入方法を紹介します。

このページでは、Font Awesomeをダウンロードして導入する方法と、CDN上にあるFont Awesomeを使う方法の2種類について書いていきます。

続きを読む

Font AwesomeをCSS内に定義して使う方法

css

最近ではすっかりメジャーになったFont Awesomeを使っているサイトも増えたのではないでしょうか。

今回は、Font AwesomeをHTMLで直接指定して使う方法ではなく、CSS内でFont Awesomeを定義する方法を紹介します。

続きを読む