2013年02月24日

HTML+CSSを少しかじったら、HTML5+CSS3に対応しているStyleNote5を使ってみよう

toolhizou.jpg

 どもアラフォーでござんす。
かなり長い期間、ブログの記事更新をサボっていたのですが、個人的に色々ありまして
(まあ…ぎっくり腰やらネタ切れやら、弱り目に祟り目だったわけですが)
久しぶりの更新という事でございます。

 HTML+CSS初学の方から〜適しているエディタはあるのか?という事で、2013年2月23日現在、どのHTML系エディタが適しているのか?と、少し条件を絞って考えてみたのです。
  • HTML5にも対応していること
  • HTMLだけでなくCSSの入力も楽に行えるか?
  • 文字コードUTF-8が問題なく使えるか?
  • 欲を言えばZen-Codingなども使えるのか?
  • 多数のファイルを操作出来るように、SDIではなくタブタイプであれば便利
  • 内蔵プレビューなど、プラウザ確認がスムーズに行えるか?
  • ショートカットキーのカスタマイズが、自分好みで行える
 
 こんな条件にしてみたら、HTML+CSS初学の人でも、なんとかなるのではないか?と筆者は考えてみたのです。(かなり欲張りですが)

 このワガママに、星の数ほどあるHTMLエディタの中で、StyleNote5がマッチしましたね。

sty1.png

以前のStyleNote4では文字コードUTF-8に対応していなかった(T_T)

 以前筆者は、HTML初学の時にStyleNote4を入れた経験があるのですが、この時は文字コードUTF-8に対応していなかった為、他のHTMLエディタを選択した経緯があります。

 しかし今回、かなり久しぶりの(何年ぶりかな)ソフト更新のお陰で、文字コード対応が改善されましたので、「これなら、少し使ってみてインプレッションしてみようか?」という気持ちになったわけです。

 

導入から設定まで

 まずStyleNote5はどこに置いてあるのか?という事ですが、Vectorサイトのカテゴリーでは、HTML作成>DHTML・JavaScript・CSSに置かれています。
http://www.vector.co.jp/soft/dl/winnt/net/se264071.html

 人気順のNO1ですから、すぐに発見出来るとおもいます。

作者さんのサイトはこちら
   http://sn.lowedge.com/
style.png


 基本的に圧縮ファイルになっていますので、適当なフォルダを作成してそこに置くとすぐに使えます。インストーラータイプではないので、パソコンのレジストリを汚さない部分は、いつも好感を持てます。

 解凍してexeファイルをクリックして、ソフトを起動させますが、まずは自分好みの設定にしておく必要があります。

 

1・ ツールバーに、どのアイコンを表示させるのか?

sty5.png
 

筆者はファイル系は外して、日付とかclass idを追加しました。
HTMLには、右寄せなどのアイコンを外して、フォーム系を追加といった具合です

2・タグ入力に便利な、ショートカットの設定

sty4.png
 

  個人的に、マウスをイジイジしてタグ入力を行うことは嫌いなので、ショートカットにタグ入力を配分して対応するようにしています。
 するとデフォルトキーを少々変更しなければならない、といった問題が出てくるのですが、これはショートカットキーをカスタマイズ出来る各エディタは、全て共通になるようにしていますねぃ。

 ちなみに、参考になるのか分かりませんが、筆者の一例として

  • p(段落)タグには、Ctrl+Enter
  • br(強制改行)タグに、Shift+Enter
  • H(見出し)タグに、Ctrl+番号キー
  • ul(リストタグ)に、Ctrl+U
  • ol(番号リストタグ)に、Ctrl+O
  • dl(定義リストタグ)に、Ctrl+D
  • li(リスト内容)に、Ctrl+L
  • dt(定義見出し)には、Ctlr+Shift+T
  • dd(定義内容)に、Ctlr+Shift+D
  • blockquote(長い引用文)に、Ctrl+Q
  • q(一行の引用文)には、Ctlr+Shift+Q
  • cite(引用先参照)に、Ctlr+Shift+C
  • aリンクには、Ctlr+Shift+A
  • aアンカーに、Ctlr+Alt+A
  • table(テーブル表)に、Ctrl+T
  • tr(テーブル行)には、Ctrl+Alt+R
  • th(セル見出し)に、Ctrl+Alt+H
  • td(セル内容)に、Ctrl+Alt+D
  • caption(テーブル表題)は、Ctrl+Alt+C
  • Zen-Codingには、Shift+Ctlr+Z

  基本的に、頻繁に使いそうなタグのショートカットが設定出来れば、そんなに困ることがないと思います。
先に文章を書いておいて、後からタグを入力する使い方には、タグによる文章挟み込みが必要になるのですが、StyleNote5は問題なく行うことが出来ます。
これにZen-codingが加わるというわけですから、使いやすいだろうということは容易に想像することが出来ると思うわけですよ。

 

3・StyleNote5の設定

sty3.png
 

  このStyleNoteの基本的な設定を行うのですが、特に重視しておきたいのが
「CSS入力支援」の部分ですね。

 CSS2.1やCSS3.0のリファレンスサイトを参考にして、入力文字3文字で入力補完が自動的にポップアップしてくる、辞書の作成を行なっておくと便利です。
CSSリファレンスサイトですが、ググるとすぐに判明すると思いますが、筆者が参考にしているサイトは

  この2つのサイトは、参考になると思います。
 
styote.png


 出来る事ならテキストエディタなどで、CSS入力補完辞書を手書き(違うか…タイピングの方が正解だよね)で辞書を作成した方が、自分の頭で理解もできますし、スキルの向上も見込まれますので、本当ならばそうした方が良い。
 しかし時間がない、スペル間違いが多いという方は、リファレンスサイトに記載されている内容を、コピペして編集した方が良いのかもしれないですね。

 
sty10.png
 

4・エディタの設定

sty2.png
 

 エディタを自分に合った視覚性にする設定ですね。
使用している環境によって、フォントの大きさや、色分け(好み)を変更すると便利ですね。
 モバイル系ノートの方と、ディスクトップでモニターが23インチの方では、設定が違ってくるのは当然ですから、自分が見やすいようにしておくことが大事だと思います。

 

ちょっとだけ残念だったZen-Coding

  このStyleNote5にはZen-Codingが仕込まれているのですが、少しだけ残念だった部分に、メニューなどのタグ入力を行う時の、リンクタグがhttp〜とならずに、単なる<a></a>タグであったという部分です。

 Zen-Codingで、例えばサイド・メニュータグをまとめて入れ込むとします。


sty8.png


記載方法としては、
「div#side.nav>ul>li*6>a」と入力して、Zen-codingを使用しますと


<div id="side" class="nav">
  <ul>
    <li><a;href=""></a></li>
         〜
    <li><a;href=""></a></li>
</ul>
</div>


  となるのですが、StyleNote5では
<li><a;href=""></a></li>の部分が
<li><a></a></li>となってしまいます。

sty9.png

 まあリンクについては、StyleNote5で拾えますので、リンクタグをついでに入力しようとせずに、後から入力すれば良いと割りきって使うしかないと思います。

画面の設定も、柔軟性が高い

sty6.png
 
 使用している状況に応じて、画面の表示も色々行なってくれます。
 
sty7.png


編集に没頭したい時には、エディタ画面だけを表示すれば良いわけですし、表示確認の為プレビューを利用する時、CSSのプロバディを確認したい時など、様々な用途に応じて画面表示を切り替えれば便利さが増すと思います。

 
sty.png

まとめ的なものとして

 このStyleNote5は、HTML+CSSの初心者さんだけでなく、もっと上級者の方でもある程度満足出来ると思います。

 DreamWaverなどのオーサリングツールを使っている場合は別でしょうが、ちょっと便利なHTMLエディタを使いたい、テキストエディタをカスタマイズするのが面倒、そういった方にも最適だと筆者は感じました。

 
posted by アラフォー親父 at 13:26 | Comment(0) | TrackBack(0) | HTMLエディタ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/331555996
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
最近のコメント
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。