HTML5 一覧

HTMLやCSSコードを入力するテキストエディタのオススメ4選。SublimeTxet

テキストエディタとは?

テキストエディタは、Windouwでは、アクセサリーの中に入っているメモ帳。macではmiなどの標準で入っているプログラムで、テキスト(文字)をだけを扱うことを主体としているものです。Wordなどは、その文字の書式を変える(文字サイズや色・配置)ことできますが、テキストエディタは、そういう機能は持ち合わせていません。そういう機能がないぶん、動作は軽くスピーディに入力できる点に重点をおいています。

良い点(こういう点を備えています)

  • 検索や置換の設定
  • 行番号がでる
  • 行末揃えを変更できる
  • スペースなどが記号になる
  • 文字エンコードを操作できる
  • 保存がテキスト形式なので、他のプログラムでも開くのが容易

HTMLやCSS入力に最適なテキストエディタ

素早い入力ができるテキストエディタは、ほとんどがHTML/CSSやJavaScriptなどのプログラムに適した作りになっています。コードと呼ばれるプログラム部分の色をこまかく変えたり、入力補助機能がついていたり。これらの機能を使うことで、正確に素早くコードを入力することができます。

Windouwsのエディタ

TeraPad

試験会場などでよく使われているエディタです。初めての方にはとても使いやすい導入編テキストエディタです。

tp_w7_s

http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html

 

さくらエディタ

html

http://sakura-editor.sourceforge.net/

 

秀丸エディタ

http://hide.maruo.co.jp/software/hidemaru.html

 

SublimeTxet

本家は英語モードなので、日本語用に変える手間はありますが、非常に高性能なテキストエディタです。今回の動画はこちらのSublimeTextをご紹介します。

http://www.sublimetext.com/


header, footer, nav, section, article, figure, aside の新要素はインライン要素として認識される

HTML4.01やXHTMLでは、h1やpなどはブロック要素、br img a はインライン要素として大別して、CSSを考えてきた。

HTML5では、このインライン・ブロック要素という考え方はなくなり、コンテンツモデルという概念になっている。

ただ、CSSを考える際は、やはりこのブロックだ。インラインだ。という考え方は必要で、今回HTML5で新しく追加された要素である

header, footer, nav, section, article, figure, aside

は、HTML5未対応のブラウザの場合、インライン要素として扱われる。

そのために、div id=”header” を<header> で使う場合は、ブロック要素という考え方がないので、レイアウトがくずれやすい。

そのために CSSのdisplayプロパティを使って、“block”の値でインライン要素をブロック要素のように表示させることが必要。

 

header, footer, nav, section, article, figure, aside {display:block;}

ブラウザで認識しないのはやはり、Internet Explore(v8 v9)とFirefoxがheader要素とfooter要素をインライン要素としてあつかうようだ。

ただv8や以下のIEは新要素にも対応していないのhead要素内で、JavaScriptのライブラリの記述も必要

<!–[if lt IE 9]>
<script type=”text/javascript” src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>
<![endif]–>
<style type=”text/css”>
header, footer, nav, section, article, figure, aside {
display:block;
}
</style>
</head>