---
title: "このXMLエディタは、HTML5とCSS3に対応しています"
date: "2012-01-03"
tags:
- "css3"
- "html-editor"
- "html5"
- "v2012"
- "xmlspy"
description: AltovaのXMLSpy 2012が、HTML5およびCSS3の編集機能を、構文ハイライト、コード補完、統合ブラウザ表示といった高度な機能によってどのように強化しているかをご覧ください。
---
Status: #blog
Tags: #css3 #html-editor #html5 #v2012 #xmlspy
Categories: [Altova](/blog/ja/category/altova.md)
# このXMLエディタは、HTML5とCSS3に対応しています
弊社の最新版であるバージョン2012において、Altova MissionKitのWebツールが重要なアップデートを受けました [発表、公開、放出、解除](https://www.altova.com/ja/whatsnew.html): HTML5およびCSS3に対応しています。コード編集にはXMLSpy 2012（およびそれ以降のバージョン）、グラフィカルなスタイルシートおよびレポートのデザインにはStyleVision 2012を使用することで、これらのWeb標準の最新バージョンに対応しています。
[](http://lh4.ggpht.com/-jax0JUfDpzg/TwIafF8lrYI/AAAAAAAAAHM/eN08gQzWlbE/s1600-h/clip_image001%25255B3%25255D.png)
ここでは、XMLSpyに搭載されているHTML5およびCSS3エディタに焦点を当てます。StyleVisionの機能については、今後の記事で解説します。
### HTML5 エディター
XMLSpyは長らくHTML4の[編集](https://www.altova.com/ja/xmlspy/html-editor.html)をサポートしており、もちろんXHTMLも同様です。そして今、これらの優れたコーディング機能が[HTML5](https://www.altova.com/ja/xmlspy/html-editor.html)にも拡張されました。
もしすでにXMLSpyをご利用のお客様でしたら、HTML5ファイルを編集用に開いた際に、高度なテキスト表示機能で提供される便利な構文のハイライト表示、コードの折りたたみ、行番号表示をすぐに認識されるでしょう。入力中に、ドロップダウンメニューや静的な入力支援ウィンドウで、有効なHTML5の要素や属性が提示されるため、ご自身の好みに合わせたコーディングスタイルでコードを完成させることができます。同時に、コード補完機能は、要素が正しく閉じられることを保証しながら、作業をより迅速に進めるのに役立ちます。
[](http://lh6.ggpht.com/-RgxgBoIMhPw/TwIafmCNstI/AAAAAAAAAHc/D2LIQP-TWZQ/s1600-h/clip_image002%25255B3%25255D.png)
これらの高度な編集機能は、現在使用しているHTMLのバージョンに対応しています。既存のHTML5ドキュメントを開く場合や、新しいファイルから作業を開始する場合、HTML5のすべての要素と属性が、すぐに利用可能なヘルプウィンドウやドロップダウンメニューに表示されます。
XMLSpyには、HTML5のコーディング結果をすぐに確認できる統合ブラウザビューが搭載されています。このブラウザビューでは、インストールされているInternet Explorerを使用して、XMLSpy内で直接ウェブページがレンダリングされます
[](http://lh6.ggpht.com/-0kNO6Tl3YHY/TwIagG5XUSI/AAAAAAAAAHs/6IE-jNjr_08/s1600-h/clip_image004%25255B3%25255D.jpg)
…そして、お客様はすぐにその内容をご確認いただけます [HTML5ウェブページ](https://www.altova.com/ja/xmlspy/html-editor.html) インストールされているブラウザのいずれかを使用した場合に。
[](http://lh5.ggpht.com/-VSwezP3iNvI/TwIag7aPseI/AAAAAAAAAH8/k2ZG_FSh_EE/s1600-h/clip_image005%25255B3%25255D.gif)
これにより、迅速なテストとデバッグが可能になり、異なるブラウザでの互換性を確保できます。
新しいHTML5の機能が実際にどのように動作するかを試してみたい場合は、XMLSpy 2012の「Examples」フォルダに付属している簡単なHTML5のサンプルドキュメントを参照してください。このドキュメントは、サンプルプロジェクトからもアクセスできます。HTMLについてさらに詳しく知りたい場合は、Web上には多くの優れた情報源があります。例えば、[http://www.w3.org/TR/html5/](http://www.w3.org/TR/html5/)などがあります。
### CSS3 エディタ
～と緊密に連携しながら～ [HTML5 エディタ](https://www.altova.com/ja/xmlspy/html-editor.html) XMLSpyは、以下のものです [CSS3 エディタ](https://www.altova.com/ja/xmlspy/css-editor.html), また、テキスト表示機能では、構文のハイライト表示、入力支援機能に加え、ブックマーク機能やコードの折りたたみ機能も提供しています。
[](http://lh6.ggpht.com/-3bE7my-XCNQ/TwIahUxeFzI/AAAAAAAAAIM/d9Dg6iF9sBk/s1600-h/clip_image006%25255B3%25255D.png)
CSSのアウトラインウィンドウには、ドキュメントの構造が、セレクタがグループ化されて表示されます。各グループは折りたたみおよび展開が可能で、CSSアウトライン内のセレクタをクリックすると、ドキュメント内の対応する部分がハイライト表示されます。また、CSSのプロパティやHTML要素に関するヘルプは、ウィンドウやコンテキストに応じたドロップダウンメニューで表示されます。さらに、XMLSpyには、入力中に各プロパティとその可能な値を定義するツールチップも用意されています。
[](http://lh4.ggpht.com/-zNowLSk-LPM/TwIahhG7U1I/AAAAAAAAAIc/CTRfLtZ7D7Y/s1600-h/clip_image007%25255B3%25255D.png)
XMLSpyには、組み込みのブラウザビュー機能があり、これを利用することで、HTMLページ上で、[CSSの編集内容](https://www.altova.com/ja/xmlspy/css-editor.html)を即座に確認することができます。
[](http://lh5.ggpht.com/-BWRgsCJ-TCo/TwIaiLS6kRI/AAAAAAAAAIs/yDO9PQ9OFWY/s1600-h/clip_image008%25255B3%25255D.png)
### HTML 用の XMLSpy を使う理由は何ですか？
もちろんです。XMLSpyはXMLに関するあらゆる機能で知られていますが、HTMLの開発にも最適なツールです。XMLSpyでは、XML、XSLT、WSDLなどの関連技術への対応、統合されたプロジェクト管理機能、主要なバージョン管理/ソースコード管理システムへの対応、そしてMicrosoft® SharePoint® Serverとの連携などにより、HTML5およびCSS3の編集が容易になっています。これにより、次世代のウェブサイトやアプリケーションを開発するために必要なすべてのツールが揃っています。
現在、HTML5をどのように活用されているかぜひお聞かせください。下記にコメント欄をご用意しておりますので、ぜひご意見をお寄せください。