HTML5にも対応したHTMLエディタ「BlueGriffon」を使ってみた

2011年07月21日 - Shimpei Okamoto

先日、運転免許を更新するために教習所に行って来たのですが、へぇーとタメになったことがありました。
「高速道路」と「自動車専用道路」の見分け方の話なのですが、簡単に言うと「◯◯道」→高速道路、「◯◯道路」→自動車専用道路、で99%間違いないそうです。
つまり「首都高速道路」は自動車専用道路とのこと。
紛らわし過ぎる。
最高速度とか色々と法律が違いますので皆さんも気をつけてくださいね。

さて、W3Cのサイトを巡っていたところBlueGriffonというエディタがあったので使ってみました。
HTML5にも対応可能ということだそうで、ブログの流れもHTML5っぽいので乗ってみます。
ダウンロードはこちらから
ありがたいことに日本語にも対応しています。
ちょっとグリフォンの絵がかっこいい。

それはいいとして、開くとこんな画面が出て来ます。

まず左上にある白い紙に鉛筆マークのボタンを押して、「新しいタブでページを作成する」でページを作ります。
好きな文字を打ち込んでみましょう。

以下の赤丸の部分についてはボタンの見た目でおそらくわかると思います。太字・下線・リスト・配置・インデントなどなどが設定できます。

では実際に色々と手を加えてみましょう。まず先ほどの赤枠で示した中にある中央揃えを使います。次に、１.先に書いた文章を選択　２.左上に２つのプルダウンがありますが、ここでIDもしくはクラスを割り振ることができます。
ここでは「hello」というIDを割り振りました。その後もう一度文章をクリックします。３.画面下部にさきほど割り振ったIDが書かれていたら第一段階完成です。

次はこの文章にいろいろと装飾してみましょう。上の画像で4と示した赤丸部分、階段状のボタンをクリックしてスタイルプロパティを呼び出します。見るとわかりますが、ここでは色々設定ができるみたいですね。今回はフォントサイズと影を付け加えてみました。こんな感じ。

お気づきの方も居るかもしれませんが、実は画面下部にプレビューとソースの画面を切り替えるボタンがあります。今回設定した「影」はtext-shadowというcss3のプロパティなんですね。もちろん直接この部分を書き換える事でプレビューも反映されますし、これからの勉強にもなります。