初めてSassとCompassを使った際に参考にした記事まとめ
しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。 Sassの公式サイトは以下から。 Sass – Syntactically Awesome Stylesheets Compassとは Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。 Compassのドキュメントは以下から確認できます。 Compass H
Sublime Text 2 + Sass + Compass + Emmet 最強説！導入方法と自動アップロードの設定まとめ | Cappee Design
本日が決算日の@cappeeです。 Sublime Text 2 + Sass(SCSS) + Compass + Emmet(Zen-Coding) 最強説！ ついにたどり着いてしまったかもしれません。 今話題にもなっている通り上の4つがタッグを組むことでものすごい効率的にコーディングができます。（そこまでまだ使いこなしてないので、正しくは「できそうです」。） せっかくなので導入するにあたり参考にさせていただいたサイトのまとめとつまづいたところなどをメモしておきたいと思います。 導入のキッカケ 話題すぎるほど人気のツールですので導入を検討するために調べてみたりはみなさんすでにしているかと思います。 私はDreamweaverを使用していてEmmet(Zen-Coding)は今までも活用してきたので、さらなるスピードアップを求めてSass+Compassの導入をしようと思っていました。 S
CSSが速くかけるようになるSublime Text2 パッケージ Hayakuで、世界が変わるらしい | inkdesign
CSSが速くかけるようになるSublime Text2 パッケージ Hayakuで、世界が変わるらしい Published on Nov 27, 2012 Zen CodingもといEmmetを使いこなすとまでいかなくとも、それなりに使ってはいるが、実はCSSではあんまり活用していなかった。 というもCSSに関しては、多少Emmetや他のコード補完プラグイン（パッケージ）の支援はあるものの、HTMLよりも手グセというか、自然とプロパティなり値なりをさっさと書いてしまうし、それほどありがたい、と思えるほどでもない。 またZen Codingにせよ、Emmetにせよ、短縮形のルールが決まっているし、それらを覚えないといけないので少し大変だ。 追記（2012-11-30）: Emmetでも若干ファジーに書ける様子。 そこでHayaku、らしい 二度見しそうな名前だが、これはHayakuというSu
Object of Null inc
PARADOX OF INDUSTRIAL CITIES / IRON NATURE AGRICULTURAL REVOLUTION 3.0 With the impossibility of coexistence with nature, industrialized nature… Grid Forest, wood pellets / energy, biomass and others, we will face an era where grain will take the place of oil. We named this the "Agricultural Revolution 3.0"- “The Counterattack of Agriculture.” This plan is intended to capture this trend. / "IRON N
Emmet CSSショートコード
Emmetは、Zen-Codingの次期バージョンの名前です。 Zen-CodingはHTMLの記述方法が取り上げられることが多いですが、個人的には、CSSの入力補助こそ真価が発揮されると思っています。 私は、EmmetまたはZen-Codingがなければ、CSSのプロパティを打つのが苦痛なほどです。 Emmetから、さらに多くのプロパティに対応し、数値も含めて展開できるようになりました。CSSの記述がより使いやすくなったので、紹介します。 Zen-Codingから使える CSSの展開は、ほとんどのZen-Codingから使えます。 Emmetではさらに使いやすくなりましたが、Emmetは現在開発中のため、不安定な部分があります。不安な方は、Zen-Codingをおすすめします。 プロパティに、ショートコードが用意されており、+でつないで展開(Expand Abbreviation)する形
Zen-Codingの次期バージョン、Emmet について - kojika17
Sergey Chikuyonok氏のGithubを見に行ったら、"Emmet (ex-Zen Coding)" という気になる記述があり、気になったので調べてみました。 Zen-Codingについて Zen-Codingは、IDEやエディタで使えるHTML/CSSのコーディングをパワフルにサポートするプラグインです。多くのアプリケーションで提供されており、3年前ほどから日本でも多くのサイトがZen-Codingを紹介しています。 そのZen-Codingが、「Emmet」と、リネームされてプロジェクトが進められているようです。 Emmet(beta) Emmetは、開発中です。 正式リリースはまだですが、機能は試すことができます。 Emmetは、2013年2月24日に正式リリースされました。 基本的には、今までのZen-Codingと変わりません。 Zen-Codingを使っていた人は、
「トーンカーブ」で自由自在に色調補正① | Photoshop 色調補正ゼミナール | Shuffle by COMMERCIAL PHOTO
今回のテーマは、使いこなせば色調補正において絶大な威力を発揮する「トーンカーブ」について。「絶対わかる。トーンカーブ！」をテーマに、2回に分けて解説する。 連載4回目の今回は、「トーンカーブ」コマンドについて解説いたします。 「トーンカーブ」は、脱落する方が多い、色調補正基本コースの最初の壁です。ギターコードの練習で言うなら「F」！ ギターの「F」で挫折した過去のある方でも、「トーンカーブ」では挫折しないよう、私が頑張ります！！ 「トーンカーブ」は2回に分けて、特にわかりやすく丁寧に解説していきます。 今回と次回、2回の「トーンカーブ」の解説を読めば、必ずトーンカーブがマスターできます。そしてトーンカーブがマスターできれば、以下の様な新境地が広がります。 １ 「トーンカーブ」は、覚えれば覚えるほど色調補正を行なう際にあなたがどんどん自由になっていきます。 ２ 「レベル補正」や「明るさ・コン
Sublime Text 2とEmmetで制作効率アップ！@福岡マークアップ勉強会
Tweet半年くらい前からSublime Text 2を使い始め、使い心地がよくてすっかりメインエディタになってしまいました。 というわけでSublime Text 2やプラグインのEmmetを使ってコーディングのスピードアップを図ろう！というテーマでまとめてみます。 ちなみにこの内容は福岡マークアップ勉強会でライブコーディングを交えてお話しさせて頂きました。 Sublime Text 2って何がいいの？ 僕は以下のようなポイントが気にっています。 起動が軽い。 前までDreamweaverやNetbeansでコーディングをしてたのですが立ち上がりの速さがだいぶ変わりました。 プロジェクトの管理が簡単 サイドバーにフォルダをドラッグ＆ドロップするだけ。 拡張性が高い プラグインのインストール、アンインストールも簡単です。 まずはインストール！ こちらのサイトからSublime Text 2
SublimeTextに開発環境変えました
またまた空いてしまいました。。。。いろいろとネタ書いていこうと思いますが、なかなかこちらの方まで手が回らないですわ～ さて、ここ最近になってようやく開発環境をSublimeText2に変えました。ドリームウィーバーからAptana3に変えてから1年、まあ、Aptanaには開発する限り特に問題ないのですがカスタマイズの点と起動が遅いのが気になりはじめ、ちまたでフィーバー中の恋するエディタSublimeTextに興味津々でございました。 使ってみて思ったのが初心者向きじゃないねってことです。カスタマイズ方法がチョット変わっている。プログラム書くようにコードを書き換えることでカスタマイズするようになっていていろいろなところで詰まったりしました。単純にブラウザ表示とかうまくできないし、FTPもプラグインで行えるなんて・・・・ しばらくは両方使っていたのですが、SublimeTextに乗り換えた決定
Sublime Text2でコードのチェックできるSublimelinterの導入
「それが普通に出来る事とはどれだけすばらしい事か」と言う事で、Sublime Text2のデフォルトではCSSやJSに対してチェック出来る機能は存在しないので、Sublimelinterなるパッケージをインストールしたのだけど、これもまたそのままでは使う事ができず、色々設定が必要となる。しかも結構面倒って言う。今まで普通だと思っていた事が普通では無くなった時、何としてでも普通の状態にまで無理やり持って行きたくなるのは僕だけだろうか。 SublimelinterパッケージのインストールShift+Ctrl+PでPackage Controlを開いてinstと入力してEnter、Sublimelinterと入力して出た候補をクリック、インストールが完了したら、一応再起動して完了。この状態ではCSSくらいしかチェックできないので、とりあえず基本設定、JavaScriptとPHPの設定と、CSSに
ターミナルを起動してコマンドラインを使う方法を覚える | StudyTech [スタディテック]
目次 ターミナルを起動してコマンドラインを使う方法を覚える はじめに パソコンの操作方法には大きく分けて２種類あります。１つが、今使っているブラウザのようなグラフィカルなUIを操作するGUI（グラフィックユーザーインターフェース）と、文字（キャラクター）で操作するCUI（キャラクターユーザーインターフェース）があります。 CUIの操作に使う文字はコマンドと呼ばれています。 今あなたは、GUIを使ってパソコンを使っています。そのパソコンからCUIを使うためにはターミナルと呼ばれるアプリケーションを起動する必要があります。ターミナルには、コマンドを入力する場所があり、それをコマンドラインと呼びます。 普通のアプリケーションはGUIで操作しますが、プログラミングの世界ではCUIを頻繁に使います。そのため、ターミナルの起動方法とコマンドラインの使い方を覚えましょう。 前提条件 MacまたはLinu
不肖者の人生実験
Sublime Text2 使い方まとめ Sublime Text2を使い始めました ちょっと前から流行ってるらしい、噂の恋に落ちるテキストエディタSublime Text2を使い始めました。今までEclipseを使っていたのですが、すぐにSublimeText2に乗り換えをきめました。 軽い、最初はある程度の機能で好みにカスタマイズできる、オシャレと私の心を鷲掴されました。 以下は自分の忘備録を兼ねての記事です。下のリンクの内容を更にまとめたといった感じです。 画面構成 画面下に LineとColumn Tabのサイズ ソースコードのカラーリング 画面右に ミニマップ 画面左に サイドバー、(表示・非表示の切り替えcmd + k,cmd + b) 各種設定 設定変更方法 Preferencesで変更していく。 FontとColor Schemeは直接変更。 それ以外はDefaultの中身
SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ
Sublimetext使用開始時に、検索して、みなさんの利用しているPackageを色々入れてみていました。3ヶ月経ってみての感想ですが、自分がちゃんと利用していたPackageは思ったより少なかったです。 自分のマークアップ環境で利用するPackageを厳選してみました。 主にHTMLコーダーさんには参考になるかなと思います。 まずは、Package Controlをインストールします Console画面を開きます。 View > Show Console Consoleに下記を入力して、Sublime Textを再起動するとPackage Controlが利用できます。 import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();os.makedirs(ipp)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
中川諒 | Ryo Nakagawa
Howlt
山梨の注文住宅なら光と風設計社
Webデザインギャラリー・参考サイト集｜MUUUUU.ORG
Mastering Sublime Text 2
https://www.tettori.net/post/293/
layer8.sh