HTML,CSS,Parlなどホームページ制作に使う言語を編集する
概要:HTMLやCSSなどに特化したテキストエディタで、文法チェックが出来るのが最大の特徴。また、文字列の検索と置き換えができる。
右の画像は、HTML5を選択し、エラーを意図的に出したメッセージを合成したもの。
文法のチェックの事例
比較的多く使うHTMLタグでエラーを記述して、どのようにエラーチェックされるのか以下に試して見る。
「文法チェック」を試したソースコード
1 2 3 4 5 6 7 8 9 10 11 |
<h>HTML,CSS,Parlなどチェック</h1> <!-- hタグに「1」が無い --> <div sttyle="padding:5px 10px;"> <!-- 属性「sttyle」の綴り誤 正:「style」 --> <p clas="time">2019/10/6</p> <!-- 属性「clas」綴りが誤 正:「class」 --> <p>終了タグエラー</> <!-- pタグの終了タグに「p」が無い --> <a href="url" taget="_blank"> <!-- 属性「taget」の綴り誤 正:「target」。 --> <img srrc="url" class="left"> <!--画像のurl指定「srrc」の綴り誤、正:「src」--> </div> <ul> <!-- 「ul」の開始タグ無し --> <li><li></li><li></li> <!-- 1つ目の「li」の終了タグが無い --> <table><tr><td></tr></table> <!-- 「td」の終了タグが無い --> </div> <!-- 「div」 の開始タグが無い--> |
実行結果の表示
◆ 1行: 未定義の要素です。(h)
◆ 1行: /h1に対応する開始タグが見つかりません。
◆ 2行: 未定義の属性です。(sttyle)
◆ 3行: 未定義の属性です。(clas)
◆ 4行: 要素名がありません。
◆ 5行: 未定義の属性です。(taget)
◆ 6行: 未定義の属性です。(srrc)
◆ 7行: /divの前に、/Aが必要です。
(⇒5行目参照)
◇ 7行: /divの前に、/Pが省略されています。
(⇒4行目参照)
◇ 9行: liの前に、/LIが省略されています。
◆ 10行: 要素tableはこの位置には置けません。
◇ 10行: /trの前に、/TDが省略されています。
◆ 11行: /divに対応する開始タグが見つかりません。
◆ 11行: /ULが必要です。
(⇒8行目参照)
【 文法チェック結果: ◆エラー 11, ◇情報 3 】
上記内容は、Crescent Eve のエラー領域の「全てコピー(c)」でテキスト化したものです
- HTML行番号
- エラー内容へのコメント
- 1-3
- タグや属性のテキストエラーとなる
- 4
- 「p」タグの終了タグに「p」が無い
- 5
- 属性「taget」の綴りが誤り 正:「target」。「a」の終了タグが無いと、7行目の前に</a>が無いと表示される。
- 6
- 画像のurl指定「srrc」の綴りが間違い、正しくは、「src」
- 7
- ここにはエラーが無いが、5行目の「a」に終了タグが無いとエラーリスト「7行」の前に「/a」が必要と表示される
- 8
- 「ul」の終了タグが無いとエラーリスト「11行」に「ul」に終了タグが必要と表示される
- 9
- 最初の「li」に終了タグが無い、このタグは終了タグが省力可なので。チェックで情報と表示
- 10
- 1) 「ul」終了タグが無いため、「table」タグは入れられない
- 2) </td>が無いが、html5から< >が省略できるようになったので、「情報」に
- 11
- 1) <div>タグが無いため
- 2) 8行目「ul」の終了タグが無いため
個人的考察
1.操作が簡単でとても使い易い
2.ショートカットが多く用意されている(メニューのヘルプ)0
3.チェック出来るCSSは、html内のインラインCSSで、ファイル化されたCSSはチェック出来ません。また、「style=」に引用符に囲まれた中身はチェックされません。