必要なのはブラウザだけ!CSSの練習や確認に最適な無料エディター

  • このエントリーをはてなブックマークに追加
20131105cssdesk_03

CSSを書くには色んな方法がありますが、皆さんはどんなソフトをお使いですか?DreamweaverやSublime Textに無料のCot Editorなど使いやすいソフトはたくさんあります。でもこんな悩みもあるはず。

Dreameweaverはプレビューを見ながら書いていけるけど、立ち上げるのに時間がかかったり、たくさんのメモリを消費してしまう。かといって軽量のテキストエディターを使うとプレビューが面倒。などなど。

もっと簡単に始められて、手軽なのにリアルタイムでコードがプレビューできる素晴らしいものがあるのでご紹介。

ブラウザで使えるCSSエディター”CSS Desk”

20131105cssdesk_02

こちらがアクセスしたトップ画面。上にHTML。下にCSSを入力。右に入力されたコードをプレビューする画面があります。デフォルトで”Hello World”の文字とそれに対するCSSが入力されています。

面倒なログインも必要ありませんし、アクセスするとすぐに使い始める事ができます。

20131105cssdesk_01

試しに”Hello World”のCSSを変更してみました。文字色の指定と、サイズを変更。そして背景色を変えてみました。コードを書くとすぐにプレビューに反映されます。

20131105cssdesk_03

デフォルトでは背景が青い格子状になっていますが、作りたいサイトイメージに合わせて背景を変更する事もできます。背景画像との色合いを試すにも最適。試しにWoodを選択してみました。

書いたコードはダウンロードも出来る

20131105cssdesk_04

入力したコードは画面右上からダウンロードボタンを選択するとHTMLファイルをダウンロードして保存する事ができます。ブラウザでだけでこれだけ出来ると必要十分。

CSSの練習に最適

本格的なWebサイト製作にはもちろん向かないかもしれませんが、CSSの挙動を確認しながら進めていくのに最適なエディターです。無料で誰でも使用出来ますし、プレビューで自分が今書いたコードがどんな意味を持つのか一目で分かります。
ブックマークをしておくと、ネットで見つけたサンプルコードもすぐに試してみる事ができますし、一度使用されてみる事をおすすめします。

リンクはこちらから。
CSS Desk

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*


*