【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
Sassで複数のcssファイルを統合 @import |
もちろんSassじゃなくても@importで複数のcssファイルを読み込むことはできます。ですがその場合ですと、読み込むcssファイル分のHTTPリクエストが発生してパフォーマンスに影響を与えてしまいます。 Sassだと@importを使うとスタイルシートを統合することになるので、1回のHTTPリクセストで済むことになり、パフォーマンスに影響を与えなくなるそうです。（実際に吐き出されたファイルを見ても@import の記述はなくなっています） 統合するファイル：style.scss 他のscssファイル：_other.scss、_homu.scss Sassコマンド入力後生成されるファイル：style.css style.scssに @import "other"; @import "homu"; と記述して sass style.scss:style.css 上記のようにコマンドを
Sass + Compass を使って、効率良く css をコーディングしよう！ | SONICMOOV LAB
皆さまお久しぶりでございます。 ラーメン女子のうさこです。 会社に入ってもうすぐ１年が経とうとしています。 早いですね・・・色々ありましたが本当にあっという間でした（遠い目 今年も残りわずか 26 日ですよ・・・っ 皆さま、やり残したことはありませんか？・・・わたしはいっぱいあります。 最近はラーメンを食べる機会が徐々に減ってきています。 ちょっとは体に気をつけなきゃいけないお年頃に・・・。 前回の記事「Sublime Text 2 を使ってみよう（コーダー編）」が大変好評だったので、今回はそれに関連付けた記事とさせていただきますっ こちらの記事は、CSS はある程度書けるんだぜッ！という方を対象としています！ CSS をこれから勉強するつもりである方は、ある程度習得してからトライしてみてください！ 昔の恩師からよく言われていました・・・Step by Step です！ 目次 Sass の
Gitの忘れがちだけど絶対に使うであろうコマンド達 | Basicinc Enjoy Hacking!
ベーシックでは、Gitを使ったバージョン管理システムを導入しています。一部のプロジェクトでは先行して導入していたものの、全社的にはまだまだ…といったわけで、よくGitコマンドについて質問されるので、ここで軽くまとめておきたいと思います。 普段は git add / commit / push / pull しかしてない…っていう人向けです。 addしたファイルを取り消す $git reset HEAD ファイル名 更新内容自体は取り消さず、addしてインデックスに登録するのを取り消します。 更新したファイルの更新内容を取り消す $git checkout ファイル名 commitする前限定です。 他ブランチの特定のコミットだけマージしたい $git cherry-pick コミットID とても便利なコマンドですが、cherry-pickを多用するような運用スタイルになっていたら問題なので、
新しいスキルを学ぶときにぶち当たる「やっぱり向いてないかも」の壁の乗り越え方 | ライフハッカー・ジャパン
新しいスキルを学ぶというのは精神的に億劫になりがちです。"三日坊主"という言葉があるように、何かを学び始めてもすぐにやめてしまうケースがあったりしませんか？ 学び始めの数日間、数週間が一番きつく感じ、その期間が何かを学ぶ際、一番の山場とも言えるでしょう。 最初は下手で良い！ 学び始めの頃は何も上手にできないので、モチベーションを保つのが難しいというのが本音だと思います。ギターの弾き方を学ぶ場合、いくつかのコードを学び弾くことはできるかもしれませんが、手を早く動かせないので曲を演奏するには更なる練習が必要になります。サーフィンを学ぶ場合にはもしかしたら波に乗れずに時間が過ぎてしまい、自分には才能がないと思ったり、難しすぎると思ったりして、辞めてしまう人もいるでしょう。 この山場は乗り越える必要があり、新たなスキルを学ぶ際の試練ともいえるでしょう。どれくらいの試練かというと、以前このテーマにつ
一日18時間VimでRailsを開発している僕が選ぶVim Tips 10選 - Qiita
寝ている時間以外はVimとRailsを触っている僕が選ぶVim Tips10選を紹介します。 Vimを使い始めて3ヶ月ぐらいの人にオススメです。 ※ あんまりRailsは関係ありません。 diw （ノーマルモード） カーソル上の単語を消す こいつがなくてはVimを使う意味が無いというほどよく使うコマンド。 ノーマルモードで hoge という文字列上の、どこかにカーソルがある状態でdiwとタイプするとhogeという単語が消えます。 この何を単語とするのか、その判定が非常に秀逸で、直感にマッチしていて便利です。 たとえば、|をカーソル位置だとして、 ho|ge bar -> bar ho|ge.bar -> .bar "ho|ge" -> "" <di|v> -> <> このように、うまい感じに特殊記号等を避けて、単語を削除してくれます。 ciwとタイプすることで、hogeを削除後、挿入モード
アイデアを大量生産できる最強のフレームワーク「オズボーンのチェックリスト」 | お土産屋さんブログ
若かりし頃、上司から「アイデアを出せ」「次の会議までにアイデアを考えておけ」と言われ、 そのたびに「またアイデアかよ・・・。」「全然思いつかない・・・。」と悩んだものです。 アイデア本を片っ端から読んで試してみましたが、そう簡単にはアイデアは出ないもので、上司へのアイデア報告は大変苦痛だったことを思い出します。 そんな当時の自分に「オズボーンのチェックリスト」を教えることができれば、ずいぶん状況は変わっていたのではないかと思います。 「オズボーンのチェックリスト」は、「入れ替えてみたら」「大きくしてみたら」「逆にしてみたら」などと、１つのお題からアイデアを大量生産することができるフレームワークです。 アイデア出しに困っている方、ぜひ「オズボーンのチェックリスト」を試してみてください。 「オズボーンのチェックリスト」は、どんなツールなのか？ ９つの視点から、アイデアを発想できるツールです。
Macユーザー必見！手軽にスマホを動作確認できるiOSシミュレーターをご紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ディレクターのエリカです。 スマートフォンサイトの制作で面倒なのは、実は、実機での動作確認だと思います。 PCからスマートフォン表示を確認する方法はいくつかありますが、今回はMacユーザーにぜひ使って欲しい便利なツールをご紹介いたします！ iOSシミュレータとは？ Appleの開発者向けツールXcodeに含まれるiOSのシミュレータソフトです。Mac上で、iPhoneやiPadの環境をシミュレートすることができます。他のシミュレータソフトと比べて次のような特徴があります。 Appleが正式に配布しているMac標準アプリケーションなので、動作が軽い iOSの再現がかなり本物に近く、実機との差が少ない ※ゼロではありません！ 最終確認は必ず実機で行いましょう。 シミュレーターを起動するまでの手順 まずは、起動するまでの手順をみていきましょう。 1. Xcodeのダウンロード、インス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ソースコードを表示するためのフォント「Source Code Pro」をアドビがオープンソースで無料公開 － Publickey