The Blog | Welcome to Adobe BlogThe Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
Sass、Retinaディスプレイ、Sketchなどのアンケート結果
Webデザイン Sass、Retinaディスプレイ、Sketchなどのアンケート結果 Thursday, July 28th, 2016 Web制作で以前から気になっていたことについて、Twitter の投票機能でアンケートを取ってみました。 アンケートの実施期間は2016年6月〜7月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100件前後で、普通に考えれば私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 フォロワーの方の興味関心としては、モバイル、テクノロジー、Webデザイン、
Dreamweaverで覚える最新Web開発ワークフロー: Sass編 | Adobe Blog
Dreamweaver CC ベータ版で追加された CSSプリプロセッサー CSSプリプロセッサーとは、SassなどのCSSメタ言語（CSSの元になるファイル）からCSSファイルにコンパイル（変換）するプログラムのことです。従来、CSSメタ言語をCSSにコンパイルするには、ターミナルやSassをコンパイルするアプリケーションに頼らならければなりませんでした。 Dreamweaverベータ版では、SassやLessのコンパイルに必要な環境が自動で構築されます。Windowsでは面倒なRubyなどの環境構築もDreamweaverをインストールするだけで整います。CSSメタ言語のコンパイルはファイル保存のタイミングで自動的に行われ、コマンドプロンプトなどを使わずに、CSSが生成されます。 本記事では、Sassを中心にDreamweaverベータ版の関連機能の使い方を取り上げます。 Sass自体
完全に生まれ変わる次世代 Dreamweaver ベータ版を先行公開 ー コードエディター刷新、ダークUI、Sass/LESS対応 | Adobe Blog
この記事は、2016/6/21 にポストされた See How Dreamweaver is Transforming for the Futureを抄訳したものです。 これまで19年の間、Dreamweaverは世界中のユーザーと数百万にも上るさまざまなタイプのWebサイトを築き上げてきました。まだWebの黎明期の頃からです。この長い旅路を未来に向けてさらに続けていくために、Dreamweaverはもっと速くて効率がよいモダンなツールにとてつもなく大きく変わろうとしています。 本日より、新たに生まれ変わる Dreamweaver の最初の一歩をベータ版として公開します。（Adobe IDでどなたでもログインできます。） 主なポイントは以下の通りです。 モダン化されたUI 他のアドビ製品のようにダークUIが採用されます。UIの明るさは調整可能です。また、UI全体が直感的で分かりやすくなり、
CompassでTwitter Bootstrapの見た目をカスタマイズ - Qiita
Twitter Bootstrapをダウンロードして使っていたけどやっぱりカスタマイズしたくなった。それもCompass使ってSassで管理したい。 前提 Compass使うのでRubyが必要 (Rubyのセットアップは割愛) 使うアプリケーションのフレームワークに依存せず単独で使う(Ruby以外のプロジェクトでも使う) カスタマイズはcssのみ、javascriptは対象外 Sass版を探す github.com/twitter/bootstrapはLessファイルで公開されているのでSassにしてくれてる人を探す。 Compass or Twitter Bootstrap? Why Not Bothより https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/jlong/sass-twitter-boot
Bootstrap 3 Sassの使い方 | Webエンジニアブログ
Twitter Bootstrap Sassポートの使い方とカスタマイズ bootstrap-sassをインストール Ruby on Railsではない環境でbootstrap-sassをインストールして、標準のbootstrapのCSSをカスタマイズを追加したcssをコンパイルしてみます。 ruby, sass, compassを利用可能な状態にする Sass版のBootstrap3をインストールために、 ruby sass compass を使える環境にしておく。rubyのインストールは、Windows環境であれば、 Rubyinstaller を利用するのが簡単でおすすめです。rubyのインストールが終わったら、gemコマンドを利用して、sassとcompassをインストールすることが出来ます。 gem install sass gem install compass Bootstr
Compassで書き出すCSSファイルを軽量化する
Compassで書き出すCSSファイルを軽量化する Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSSファイルの容量を削減することが可能です。 Step1.圧縮する コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書き出してくれます。config.rbに以下のコードを追加するだけで圧縮してくれます。 output_style = :compressed Step2.無駄なベンダープリフィックスを取り除く(ブラウザ別) CompassのCSS3ミックスインは便利な反面過剰なベンダープリフィックスをつけます。 Sassファイルの冒頭に以下のようなコードを追加することで「-o-」や「-ms-」、「-moz-」といったベンダープリフィックス付のプロパティが書き出されなくなります。Operaは現
2013年9月13日発売の「Web制作者のためのSassの教科書」を執筆させていただきました。
どうも、ソウラボこと森田壮です。 インプレスジャパンさんから、2013年9月13日発売の 「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語」 を執筆させていただきました。 CSS HappyLifeの平澤隆さんと共著です。 本書の内容や、見どころを紹介させていただきます。 Amazon以外（楽天ブックスなど）のリンクは本書サポートサイトにのっております！ 本書の内容 はじめに 以下、本書の紹介文です。 Webサイト制作に必須のCSSを、より便利に効率的に書けるようにパワーアップさせた 「Sass」（サス）についての教科書的な解説書が登場！ ・Sassって聞いたことはあるけど、導入が面倒そうという方 ・Sassを始めてみたいと思っているが、今一歩踏み出せない方 ・勉強コストとの天秤に掛けて、Sassのメリットがイマイチ見えてこない方 ・周りでSas
【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とCompassでSprite画像を作る
やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C
無効なURLです
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
今さら聞けない？！Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ
こんにちは。ウェブサービス本部の hamashun です。 今回は CSS を便利にする Sass （さっす）という技術を、ディレクター向けにご紹介します。 最初に結論：Sassとは？ CSS の、コーディング効率やソースコードの保守性を向上させる技術が、Sass です。 まずは普通のCSSについて Sass のことを知るには、まずは CSS のことを知っておく必要があります。CSSを自分で書ける or 読める人は、この項は飛ばしてしまってかまいません。 p { color: red; } このソースコードは、ごくシンプルな CSS です。このソースコードの各部分を解説すると、次のようになります。 従って、上記のソースコードを日本語にすると、「p要素（pタグ）内の、文字色を、赤にする」となります。 こうして見てみると、CSS の構文は、とてもシンプルであることが分かります。 CSS は、こ
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？
【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 何かタイトルが適当だけど、無事に2回目のエントリーです！ このエントリーは、もうちょっとSassに興味を持ってもらうためのエントリーなので、早く試したい人は次のエントリーに行っちゃって下さい！ Sassがスゴイとは言っても、プログラムが出来ないと効果があんまり出ないんじゃ？とか学習コストが高い気がするとか、黒い画面が怖いとか、面倒な気がするとか、なんか色々有るかと思うので、このエントリーではSassを利用するにあたっての疑問点や不安などを出来るだけ解決出来ればと思ってます。 まず最初に言っておきたいのは、JSやPHPとかプログラムが一切出来なくても、普通に(X)HTML + CSS でのコーディングが出来てる人ならほぼ確実にコーディングスピードが上がるって事です。 ただ、このブログのタ
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やLESSを導入するメリット | Good thinking
SassやLESSといったCSSを拡張するメタ言語がいろんなブログ記事などで取り上げられ、すでに導入しはじめている人も多いかもしれませんが、まだ導入していない人のために、本記事ではそのメリットを一部紹介します。 SassやLESSはCSSを拡張するためのメタ言語です。メタ言語というと小難しいような気もしますが、かなり大雑把に言ってしまえば、Ruby（Sass）、JavaScript（LESS）によって、CSSをより便利にする技術というところでしょうか。.sass,.scss (Sass)、.less（LESS）という拡張子のファイル上でスタイルを書き、それらをCSSにRuby,JavaScriptでコンパイル（変換）します。 いずれもプログラミング言語の要することで、普段HTML/CSS、JavaScriptはjQueryで、という人には「なんか便利そうだけど難しそう、導入が大変そう」と思
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
5509.me