PR

[CSS] 直感的なCSS エディタを探す

HTML は長らく使っているし、商用ソフト、フリーソフトなど知っている。HTML が文章を定義するものであったものから次第にデザインに利用されるようになり、スペーサーgif やテーブルレイアウトが一般的になりつつあった。このあと、CSS が登場してHTML は文章定義にもどり、デザインはCSS に書くようになった。これはSEO 対策の1つでもあった。

が、CSS はどういうわけか苦手で、その辺逃げ回っていた。といっても完全には逃げ切れないから、だましだましスクリプトの中に必要最低限書いたり、すでにできてい るものの改造程度くらいだった。だが、スマートフォンやデザインがより重要視されるようになってきたこともあって、この苦手な分野にももう少し理解を深め なければならないようだ。

スポンサードリンク

すっかり逃げ回っていた間に、きっと素晴らしいツールがしかもフリーで出回っているはずだ!と勝手に期待と思い込みを練り込み探すことにした。

すでに書いたように、基本の「き」くらいを書いたり改造したり読んだりはできる。例えば1から作らなければならないような場合に何か良いエディタは無いものか、というのが今回の趣旨だ。

メモ帳に始まりオンラインエディタ、ツリーエディタ、ソースエディタなど様々な選択しがあるが、GUI という意味ではないビジュアルな勝手の良いものを探したい。細かいところは仕方なしに自分で作るにしても、2カラム3カラムなど超基本よりは少しはみ出る ようなものを探したい。

オンライン

YAML Builder

YAML Builder | A tool for visual development of YAML based CSS layouts

CSS(スタイルシート)のソースを書いてくれるエディタがあるページ

CSS(スタイルシート)のソースを書いてくれるエディタがあるページ

好みの数値を入力するだけで、思い通りのCSSソースを簡単に書いてくれるエディタがこんなに沢山あるとは。(「CSS(スタイルシート)のソースを書いてくれるエディタがあるページ」より引用)

DrawAble Markup Language

Drawter.com – DrawAble Markup Language

CSS Maker

CSS Maker – スタイルシート簡単作成ツール

選択肢から選択する程度でスタイルシートを出力してくれる。

CSS Type Set

CSS Type Set

選択肢を調整すると、プレビューしながらフォントの確認ができる。

CSS Border Radius Generator

CSS Border Radius Generator

カドを丸めるスタイルシートが簡単に得られる。

エディタ

エディタを使う方法もある。エディタは数が多く、1つで複数の言語に対応するものもあるので割愛する。

参考

私は結構エディタ難民で、HTML/CSS/PHP等をコーディングする際のエディタをWindows・Mac含め色々試してきましたが、最近 は NetBeans IDE に落ち着いています。 NetBeans IDE は厳密にはエディタではなく、Windows・Mac・Linux用の無料で利用できるIDE(統合開発環境)の一種です。(「HTML/CSS/PHP等のコーディングに、無料のNetBeansが快適過ぎる件 | Stocker.jp / diary」より引用)

CSS 解析ツール

すでにあるデザインを参考にしたい場合に活躍する。

ブックマーク型(Javascript)

参考文献

  • CSS・スタイルシート作成ツール

コメント

  1. @jahumming より:

    [css][エディタ][webデザイン][あとで試す] / “http://t.co/t2Fx89qd » [CSS] 直感的なCSS エディタを探す” http://t.co/iX2iaBqT