【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
溜まってしまったフィードをfeedlyで整理してみました！ | WebDesign Basic（Webデザインベーシック）
あけましておめでとうございます。 新しい年という事でついに僕もブログなるものを始めようと思います（やっとw みなさんは身の回りの整理、整頓をしてから新年を迎えた事でしょう！ 自分はと言えばもともとめんどくさがりな性格のせいかついついおろそかになってしまいます… そこで、今回はほぼ放置状態でたまに見る程度だったRSSフィードをfeedlyを使って整理したいと思います。 ●feedlyの導入方法 feedlyインストールページはこちら feedlyはGoogleリーダーと連動したアプリケーションです。なのでgoogleのアカウントが必要です。ただ、googleのアカウントを持っていなくてもfeedlyからでもgoogleのアカウントを取得できます。 FirefoxアドオンとChrome、Safari、Android端末、iPhone、iPad用もあるようです。今回はChrome用のfeedly
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）
さてさて、3回目のエントリーからは、実際に手を動かして行きますよっと。 何はともあれ、Sassが使えるようにしないといけないので、この記事では環境構築に関して書いてきます。 まずは黒い画面は一切使わずにGUIで操作が出来るScoutと言うAIRアプリでSassを動作させる方法をご説明します。 恐らく、現状ではコレが一番カンタンな方法だと思うので、取っ掛かりとしてはとても良いかなーと思います。 ちなみに、Scoutのインストールに関しては、まーしーさんの記事も分かりやすいかと思うのでそちらも参照して下さい。 Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker Scoutのインストール方法 んでは最初に、下記のサイトからScoutをダウンロードします。 英語なサイトですが、英語力は全く必要無いので躊躇なくいきませう！ Sco
デザインやファッションに取り入れたい、2012年のトレンドカラー
Pantoneが2012年セレクションしたカラーは、生き生きとし魅惑的なオレンジ「タンジェリンタンゴ」。 2012 Pantone Color of the Year PANTONE 17-1463 Tangerine Tango [ad#ad-2] タンジェリンタンゴは深みのあるオレンジ色で、再充電・前へ動くといったエネルギーを後押しする意味がこめられています。 タンジェリンタンゴの赤色は熱とエネルギーを放射する快活、黄色は友好と暖かさをもっており、夕焼けの美しいグラデーションに似ています。 洗練された色使いだけでなく、魅力的でドラマティックに活気づけてください。 PANTONE Color Systems: 17-1463 Tangerine Tango 「タンジェリンタンゴ：17-1463」のPantoneのカラーシステムです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
