タグ

ブックマーク / tetra-themes.com (3)

  • 次世代CSS登場!PostCSSの簡単な使い方 - TetraThemesブログ

    最近のWeb制作の現場では、ふわっとした自然な動きのアニメーションやSMACSSのようなスタイルの概念、スタイルのコンポーネント化など、PSDをそのままCSS化すればいいという時代ではなくなってきていますね。 レスポンシブデザインなどに対応するため、すでにBootstrapやSASSのようなpre-processorを採用されているところも多いと思いますが、ここにきてPostCSSというヤツが注目されています。 今回は次世代CSS!になるかもしれない、PostCSSの使い方を紹介します。 PostCSSって何? PostCSSjavascriptを使ってCSSスタイルを変換する、CSS Processor。javascriptはプラグインとして既に数多く公開されており、変数やミックスイン、カスタムセレクターなど様々な機能があります。 また、関数を使う場合を除きCSSからかけ離れた特殊な記

    次世代CSS登場!PostCSSの簡単な使い方 - TetraThemesブログ
  • Web・アプリ開発に使える無料のワイヤーフレームツールまとめ

    Web制作やアプリ開発では、格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。 以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい!という方は要チェック。 無料で使えるワイヤーフレームツールまとめ JUSTINMIND こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ&ドロップでコンテンツを追加することができます。 Wireframe CC こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集す

    Web・アプリ開発に使える無料のワイヤーフレームツールまとめ
  • HTMLを効率よく書く!Emmetの書き方・使い方まとめ

    コードエディターにはHTMLCSSを効率良く編集する方法でも書いたように、コードの自動補完などの機能が備わっています。これらの機能を使うことで効率良くコードを記述することができるのですが、ここではさらに効率アップできるEmmetを使ってみます。 Emmetを使うとHTMLタグを記述する際に必要な< >などを省略したり、長いHTMK構造をたった数行で書くことができるようになります。慣れるとこれ以外で書くのがめんどくさくなるというデメリットがありますが、とにかく効率良く記述できるのでまだ使ってない人は是非使ってみて下さい。 EmmetにはHTMLCSSがありますが、ここではHTMLの記述方法を紹介します。 CSS編はこちら -> CSSを効率良く書く!Emmetの書き方・使い方まとめ Emmetのインストール方法 コードエディターにEmmetをインストールする Emmetはコードエディター

    HTMLを効率よく書く!Emmetの書き方・使い方まとめ
  • 1