Font Awesome Animationは、アイコンフォントであるFont Awesomeにアニメーションをつけることができるスタイルシートです。 スタイルシートをロードして、アイコンにクラスを追加するだけで、アニメ…
クラスを追加するだけでアイコンフォントにアニメーションをつけることができる「Font Awesome Animation」
YouTubeなどのiframe埋め込み動画をレスポンシブにする方法
YouTubeなどのiframeで埋め込む動画をレスポンシブに対応させる方法を紹介します。 以前、「たった1行追加するだけでYouTubeの埋め込み動画をレスポンシブに対応させる方法」という非常に簡単な方法を紹介しました…
IEのバージョン毎に異なるスタイルを適用するための小技まとめ
ちょいちょい忘れるので、メモとして残しておきます。 IEのバージョン毎に異なるスタイルを適用する方法のまとめです。 IEに異なるスタイルシートを適用する方法 IEのみ異なるスタイルシートを適用する IEのみ異なるスタイル…
HTMLからクラスやIDを検出してCSSのひな形を作成してくれるWEBサービス「extractCSS」
extractCSSは、HTMLの内容からCSSのひな形を作成してくれるWEBサービスです。 HTMLを貼り付けるだけで、クラスやIDを検出してCSSのひな形を作成してくれるので、かなりコーディングの時間短縮を図ることが…
サイト内に設置したFacebook Like Boxをレスポンシブに対応させる方法
Facebook Like Boxをサイト内に設置している方は多いのではないでしょうか。当ブログでもFacebookページを宣伝するために、記事の下の方に設置しています。 レスポンジブデザインを採用したサイトで、Face…
CSSのプロパティを指定した順番に並べ替えてくれるWEBサービス「Online sorting」
Online sortingは、バラバラに書かれたCSSのプロパティを指定した順番通りに並べ替えてくれるWEBサービスです。 CSSを頻繁に修正していると、プロパティの順番はセレクタによってバラバラになってしまうことがあ…
position:absolute;やposition:fixed;で要素をきれいに中央配置する方法
ある要素をposition:absolute;やposition:fixed;で配置する場合、topやleftで要素の位置を調整しますが、要素の左上が指定された位置に配置されます。なので、以下のようにtopとleftを5…
CSSの改行やスペースを削除して軽量化することができる「CSS Minifier」
CSS Minifierは、CSS内の改行やスペースを削除して、ファイルを軽量化することができるWEBサービスです。 CSS内の改行やスペースを削除して軽量化することで、コードの読み込み速度を上昇させることができます。 …
使う分だけ選択してアイコンフォントをダウンロードすることができるWEBサービス「Fontello」
Fontelloは、使いたいアイコンだけをダウンロードして利用することができるアイコンフォントジェネレーターです。先日、Font Awesomeというアイコンフォント用のフレームワークを紹介しましたが、Fontelloは…
手軽にアイコンフォントが利用できるCSSフレームワーク「Font Awesome」
Font Awesomeは、超手軽にアイコンフォントを利用できるようになるフレームワークです。アイコンフォントとは、WEBフォントにテキストではなくアイコンを指定することで、テキストをアイコンとして表示させることができる…