カテゴリー: CSS

PHPStorm(WebStorm)でのSCSS/Compassの自動コンパイル設定(Mac OS EI Capitan)

メニューの[Prefrerence]からパネルを開く。

コンパスの有効化

978bbc83-13e4-46f0-9e92-b4b34f921207

File Watchersの設定(変更があった場合に自動コンパイルするファイルタイプ関連の設定)

(scss)

52151a2d-060b-460a-9238-b301293c7bd1

(sass)

screen-shot-2016-12-13-at-11-40-19-am

Program : /usr/local/bin/compass
Arguments : compile
Working directory : $FileDir$
Environment variables : (空)
Output paths to refresh : $FileParentDir$/css/$FileNameWithoutExtension$.css

※追記 : sassファイルが多くなって更新時に編集中のファイルのみをコンパイルしたい場合は、Arguments : compile $FileName$ と指定すると良いです。

 

PHPStormでつかってますが、コードヒントが出てくれて便利です。@includeで一覧したり、

screen-shot-2016-12-13-at-11-21-50-am

先頭数文字タイプすると候補が絞込まれて、その引数も見れたり

screen-shot-2016-12-13-at-11-24-54-am

さらに @includeで書いたmixinの部分を Cmd+クリックで compassのソース(mixin)が見れたり。

screen-shot-2016-12-13-at-11-26-51-am

なかなか便利、wordpressなどの関数も数文字タイプで候補に上がったりで便利すぎて
手放せない開発環境になっています。
(Atom,Sublime,Aptanaとかもどうなのか時間があれば調べてみたいがなかなか><)

SublimeText2のメモ[テキストエディタ]

SublimeText2をインストールしてセッティングしてみたのでいろいろメモしながら覚えてみる。

続きを読む

PhpStormの使い方メモ[PhpStorm]

PhpStormを使い始めたので使い方メモ

ショートカットメモ

ZenCodingのキーは、[TAB]

設定関係

実行のショートカットキーを変更
→[メニュー] > [Preferences] > [Keymap] の
→[Main menu] > [Run] > [Run]を
[Cmd + Enter]に。

デリートのショートカットキーを追加
→[メニュー] > [Preferences] > [Keymap] の
→[Editor Actions] > [Delete to Word End] を
[Ctrl + D]に。
→[メニュー] > [Preferences] > [Keymap] の
→[Editor Actions] > [Delete to Word Start] を
[Ctrl + W]に。

VCS( version control system )

[Cmd + Option + A ] > Add
[Cmd + K] > Commit Changes..
コミットダイアログでのショートカット
[Ctrl + Enter]でコミット

Coda2が今日中半額なので急ぎ足でコード補完とか試した。[coda2,mac]


Coda2が発売から24h無料だと言う事で話題です。
ちょっとそそられる機能もあったので買おうかどうかデモ版を使ってみました。

続きを読む

FlashCS6のHTML5書出しと、EdgeでつくったHTML5を比べてみた。[HTML5,FlashCS6,Edge]


ちょっと気になって、FlashCS6のHTML書出しとEdgeのHTML書出しを比べてみました。

続きを読む

FireFoxのトップのFireFoxアイコンのサイズ[css]


FireFoxのトップページのアイコンがWindowサイズに併せて可変するる。。。
いろいろ調べてみました。

続きを読む

Webページのスライスで良く使うPhotoShopキーボードショートカット

Webページのスライスでよくあるパターン

[Cmd + Shift + G]
グループ解除

[Cmd + E]
選択したレイヤーを統合

[Cmd + alt + E]
選択したレイヤーをコピーしたレイヤーを統合

[(自分でショートカットを割り当てる)]
[レイヤー] > [レイヤーに基づく新規スライス]

[C]キー
スライスツール

これだけ覚えると個人的には結構スライスの効率がだいぶ上がってます。

スマートフォンのマークアップ高速化%指定[mac,iPhone,SmartPhone]


※今回はMacOSでの話です。Windowsの方ももしこんな方法あるよとかあれば嬉しいです。
スマートフォンのマークアップの高速化Tips
スマートフォンにHTMLを対応させようとした場合、ディスプレイのサイズが様々なので、%で指定して行く事になりますね。
そんな時にアプリケーションランチャーの「Alfred」を使うと結構効率よくコーディング出来るようなきがします。

続きを読む

WordPressテーマのTwenty Eleven 1.2を少々いじってみた[WordPress]

WordPressテーマのカスタマイズ
WordpressテーマのTwenty Eleven 1.2を使ってみた&カスタマイズ。

続きを読む

Webフォントを簡単につかえる[Google Web Fonts]

GoogleWebFonts
フォントを選んで、コードをコピーして使えます。
簡単です。

続きを読む

Powered by WordPress & Theme by Anders Norén