イマドキのコーダー環境構築2016CSS Nite LP47 Coder's High 2016 http://cssnite.jp/lp/lp47 「イマドキのコーダー環境構築」で発表したスライドです。 ※スライド上のURLリンクは効かないので、下部文字起こしから飛んでください。Read less
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 | DevelopersIO
コーダー必見、SCSS・Compassで開発効率アップ｜Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか？ 2月のリア充イベントといえばバレンタインですね（企業戦略）。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 本題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ
Sass で Font Awesome を使おう « shilog
この記事は CSS Preprocessor Advent Calendar 2012 23日目の記事です。 Font Awesome Font Awesome と言えば Twitter Bootstrap のアイコンを Web フォントとして使えるということでお馴染みのサービスです。Web フォントなので、CSS でアイコンの色やサイズを調整することができますので、ある程度柔軟にアプリや Web サイトなどで使用することができます。 Font Awesome のサイトを見てみると、LESS と CSS についての導入方法は書いてあるのですが、Sass については書いてない（と思う）ので、その手順をシタタメます。 導入手順 まずは Font Awesome のサイトでファイル一式をダウンロードして解凍します。するといくつかフォルダが出来上がります。 Font Awesome のサイトに
コーダー必見、SCSS・Compassで開発効率アップ｜便利なCSS Sprite実装編 | DevelopersIO
はじめに 今回から「すぐに使えるSCSS入門シリーズ」からタイトルを変えてSCSS・Compassを使ったコーダー向け開発効率アップテクニックを紹介していきます（シリーズは続きます）。 今回作成したサンプル このサンプルはgithubで配布しています。ダウンロードしてソースなどご確認ください。 動作するHTMLサンプルはこちらです。 CSS Spriteって？ CSS Spriteについてお復習いです。 簡単に言うと画像をくっつけてCSSのbackgroud-positionで表示を制御するテクニックです。 CSS Spriteのメリット 画像をくっつけることによってHTTPリクエスト数の削減 マウスオーバーなどで表示を切り替えるがスムーズ（個別に画像を読み込んでいる場合、切り替わったときに読み込みが発生します） CSSのみでボタンなどのアフォーダンスを切り替えることができる CSS Sp
CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法
CompassでCSS Spriteする際にスプライト画像間のマージンを取る方法 CompassでCSSスプライトを作成する際に画像間に余白を取らないとRetina対応した際に奇数のサイズの画像などがあると表示が少しおかしくなります。 all-<map>-sprites(true);の場合は$<map>-spacing:10px;などのconfigで設定できるのですが、sprite-map()などでは余白が確保されません。 sprite-map()では以下のようにすると余白を取ることができます。 sprites: sprite-map("sprites/*.png", $spacing: 20px); 参考:Individual sprite spacing in the sprite-map function doesn't work · Issue #934 · chriseppste
【Sass】あえて、Compassに頼らずスプライト。 | バシャログ。
未だに9月くらいの気がしているhakoishiです。 おかしい...街がクリスマスとか、正月とか、なんか浮き足立った事言ってる。 さて、今回はSassでスプライト対応する時にCompassを使わないサンプルをご紹介。 Compassのスプライト、すっごく便利なんですよね。 けれど、実案件では使えない場合もあるのではないでしょうか。 画像名を決まったものにしたい、とか。 画像の並びをソースと同じ順にしたい、とか。 納品後、お客さまが更新していく案件では少なくなさそうです。 そんなときの為に、@forを使う方法をば。 サンプル サンプル 恐ろしくざっくりしたサンプルですが...。hoverでの画像切り替え有りです。 使っている画像がこちら。 上に8pxの余白を設けています。理由は後ほど。 HTML 画像置換の為、li>a>spanの入れ子にしています。 <ul class="sprite-li
コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 ｜https://wp.yat-net.com/name
2012年 10月 31日 コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 カテゴリ： Sass タグ：CodingSassScssコーディング効率化 \ CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass（Scss）ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
howtohp.com - howtohp リソースおよび情報
Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS拡張メタ言語「Sass」の概要と導入手順
Sassと仲良くお付き合い
StartUp Sass + Compass [基本と活用]![StartUp Sass + Compass [基本と活用]](https://cdn-ak-scissors.b.st-hatena.com/image/square/7768d8b0c259cc3fe69178f4113b7eb1890d4d61/height=288;version=1;width=512/https%3A%2F%2Fcdn.slidesharecdn.com%2Fss_thumbnails%2Fsasscompasscmujp01-130223095651-phpapp02-thumbnail.jpg%3Fwidth%3D640%26height%3D640%26fit%3Dbounds)
develo.org
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
IDEA * IDEA