Sassを使って時間短縮！アイコンフォントを手軽に使える方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、ももこです。 先日発売されたGE2のプレイ時間を確保する為に、作業の時短は重要な任務です。 今回はSassでアイコンフォントを手軽に使える方法をご紹介します！ アイコンフォントを使ってみたいけど導入方法が難しそう…という方にオススメです。 アイコンフォントの用意をする まずはアイコンフォントを用意します。 過去記事にアイコンフォントの紹介がありますので、宜しければご参考ください。 「Retinaでもボケない「シンボルアイコン」を使いこなそう！」 「無料で出来る！オリジナルアイコンフォントを作ってみよう」 今回は「Fontello」から可愛いアイコンフォントをダウンロードしました。 cssフォルダと同階層に「fonts」フォルダを作り、その中にフォントデータを入れてください。 アイコンフォントの読み込み 早速Sassにフォントを読み込ませます。 LIGブログでたびたび登場する
【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。
対象になるグループの範囲は？ :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。 その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。 図にするとこのような感じ。 直属の親要素が異なると、別グループになります。 また、グループ内の要素の種類は一種類に限りません。 「:(hoge)-child」は並び順→要素、「:(hoge)-type」は要素→並び順 ポイントはここ。 :(hoge)-child系と:(hoge)-type系では、並び順と要素の判定順が逆になります。 :(hoge)-child系はまず並び順を見て、次にそれが要素と一致するかを見ます。 :(hoge)-type系は指定の要素だけにしぼって、その上で並び順を見ます。 最後のdt、1つ目のddにスタイルがあたらなくて困った場合、 dt:last-child {
【css】いろんな形をスタイルシートで at softelメモ
.square { width:100px; height:100px; border:1px solid #000; background:yellow; } .parallelogram { width:100px; height:100px; border:1px solid #000; background:yellow; transform: skew(20deg); -o-transform: skew(20deg); -moz-transform: skew(20deg); -webkit-transform: skew(20deg); } .parallelogramRight { width:100px; height:100px; border:1px solid #000; background:yellow; transform: skew(-20deg); -o-
CSSだけで簡単に吹き出しを作成する方法4つ！
こんにちは、橋本です。 今日はCSSだけでお手軽に吹き出しを作る方法をご紹介したいと思います。 今回ご紹介するサンプルは4つ 一般的な三角の吹き出し 一般的な三角の吹き出し（ボーダー付き） ぽわわーんとした吹き出し 丸い（曲線の）吹き出し 4つのサンプルの実行結果は、ここで確認できます。 IE9以上とIE以外のブラウザであればちゃんと表示されるかと思います。 IE8以下はborder-radiusが使用出来ないため、サンプル3とサンプル4がちゃんと表示されません。 それでは1つ1つ見て行きましょう。 1.一般的な三角の吹き出し まずはソースから。 <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapp
もうCSS3で悩まない チートシート/リファレンス系サイトまとめ
先日書いたCSS小ネタまとめのようにCSS3も使えば使うほど味が出て、応用次第で色んなことできて楽しいですよね。私も大好きです、CSS3。 IE非対応云々のためハックがどーこーとかめんどくさいことはありますけど。 というわけでここらで初心者からパワーユーザーまでぜひおさえておきたいチートシートページやリファレンスサイトをまとめておきますので参考にどうぞ。 CSS3の困った/アレが知りたい、はここで調べよう 筆者選で7つほど。他にもいろいろあるんですが、読みやすいのメインに挙げてみました。 1.E BISUCOM TECH LAB : CSS3プロパティ＆ブラウザ対応一覧 恐ろしくまとまり過ぎているページ。もともと書籍の巻末付録だったものをWebで公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
