Sassを使って時間短縮！アイコンフォントを手軽に使える方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、ももこです。 先日発売されたGE2のプレイ時間を確保する為に、作業の時短は重要な任務です。 今回はSassでアイコンフォントを手軽に使える方法をご紹介します！ アイコンフォントを使ってみたいけど導入方法が難しそう…という方にオススメです。 アイコンフォントの用意をする まずはアイコンフォントを用意します。 過去記事にアイコンフォントの紹介がありますので、宜しければご参考ください。 「Retinaでもボケない「シンボルアイコン」を使いこなそう！」 「無料で出来る！オリジナルアイコンフォントを作ってみよう」 今回は「Fontello」から可愛いアイコンフォントをダウンロードしました。 cssフォルダと同階層に「fonts」フォルダを作り、その中にフォントデータを入れてください。 アイコンフォントの読み込み 早速Sassにフォントを読み込ませます。 LIGブログでたびたび登場する
Macユーザーなら絶対覚えておくべき6つのキーボードショートカット | ライフハッカー・ジャパン
毎日パソコンを使う人なら、キーボードショートカットを覚えておけば確実に生産性を高めてくれます。今回は、Macユーザーが知っておくべき6つのショートカットを紹介します。 以下、紹介します！ Command＋Shift＋A／U／D：Finderを開いているときに使うショートカットです。Command＋Shiftに加え、Aでアプリケーション、Uでユーティリティ、Dでデスクトップのそれぞれのフォルダを直接開きます。どれも頻繁にアクセスするフォルダです。ショートカットを覚えれば時間の節約になりますね。 Command＋1／2／3／4：Finderの表示形式を切り替えます。1はアイコン表示、2はリスト表示、3はカラム表示、4はcover flow表示です。 Command＋Option＋I：複数ファイルの情報をまとめて確認したいときは、ファイルを選択してこのショートカットを実行します。 情報パネルがひ
【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で公開しているらしいです。各プロパティの対応ブラウザが一目でわかるのがありがたい。 ベンダープレフィックスの要・不要とかまで書いてます。時々更新され
デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました ｜https://wp.yat-net.com/name
2013年 02月 05日 デザイナーでも使うと便利なバージョン管理システムGitの勉強会に参加しました カテゴリ： Git タグ：Git この週末にGitの勉強会を開いてもらって基礎的なところから教えてもらいました。これまで興味はあったけど全く何も知らなかったので、いろいろ詳しく教えて頂きました。 1.Gitとは？ 2.用語解説 3.実際に使ってみる。msysgit 4.参考文献 Gitとは？ 分散型バージョン管理システムの一つです。ファイルの更新状態を好きなタイミングで保存しておくことが出来、好きなタイミングで保存している状態へ戻したり、編集した箇所の差分を表示したりする事が出来ます。 また、プロジェクトを複数人で進行している場合に起こりうる、古いファイルでの最新ファイルの上書きといったトラブルについても、Gitを利用すればエラーが帰ってくるため避けやすくなります。 尚、Gitと聞くと
[Mac] 月いちメインテナンスのススメ
やらないよりはやっておいた方が良い定期的なメインテナンス 今日は月初（一日）なので、定期メインテナンスを行いました。 ことあるごとにディスクユーティリティによるメインテナンスは行っていますが、どうせならと思い今回はリカバリーモード下で実行。 Mac の電源を入れて起動音が鳴ったら［command］と［R］を押下 しばらくするとログイン画面……と同じ背景画像とともに冒頭の画面が出現 → (5) までマウスは初期状態で動作するので軌跡は普段より遅く感じる方も居るかもしれません ディスクユーティリティを選択して［続ける］をクリック 起動ディスクに対して［ディスクの検証（or 修復）］を実行 ディスクユーティリティを終了して Mac を再起動 再起動での起動音が鳴ったら［shift］を押下：セーフモードでの起動 （ログイン画面が表示されたらそのままログインして）Finder 画面が現れたら Mac
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
意外と知らないExcel技を紹介！ 他人と差をつけるExcel技特集【知っ得！虎の巻】 ｜ ガジェット通信 GetNews
9月に突入しましたが、みなさんはいかがお過ごしでしょうか？ ここ数日、雨が降ったりですっかり夏らしさから秋へと季節が変わってきつつあるようです。ところで知っ得連載でExcelテクニックのまとめを紹介してから、1か月以上も経過してしまった。ということでExcelのテクニックまとめの項目を追加したので参考にしてもらいたい。 ■連続入力するデータを自分で作っちゃおう！ Excel便利ワザ Excelでは、ドラッグだけで入力できる連続データはひんぱんに使う機能だ。しかし、「これれが入力したい！」と思ったものでも、意外に連続データ入力できないものも多い。そんな時は、自分でデータを作成してしまおう。 ■Excel表を書き換えたのに再計算されない!? を解決する 人から受け取ったExcelファイルを更新しようとしたところ、値を変更したのに合計が変更されないことがある。そんなときには自動で再計算する設定に
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
WordPress私的マニュアル – WordPressを使ったサイト作成資料として
WordPressのテーマやプラグイン作成において、よく利用する関数やグローバル変数などを個人的に整理したコンテンツです。 各関数やグローバル変数は、情報別（データの種類）と目的別（機能の種類）に分類しています。 なお、ほとんどの情報はソースコードを見ながら書き留めた内容であり、確認不足による誤りや更新の遅れによる不正確な内容を含んでいる可能性があります。あらかじめご了承ください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Mac] 知らない人は損してると思うMacの使い方【その２】 | Appleちゃんねる