HTML5 – 大きなテーブルのスクロール

横幅が長いテーブルの表示

セルの内容が連続した長いASCII文字列の場合、それが一つのワードとみなされて改行されず、表が横に伸びて表示が乱れる。

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc

通常の英文の場合は、表示領域の幅に合わせてワード境界で自動改行される。

The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo

マルチバイト文字の場合は、各文字がワード扱いになり、任意の位置で自動改行される。

いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは

横スクロール

基本形

切れ目のないASCII文字列を画面幅に合わせて横スクロールさせたい場合。

実行例

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccccccccccc

 

自動改行の抑止

英文やマルチバイト文字列の場合、スクロール表示させようとしても、自動改行されて常に表示領域に収まるように表の幅が調整されるので、スクロールが効かない。

そこで空白(ワード境界)での改行を抑止させると、折り返されずに票の横幅が長くなり、横スクロールの対象となる。

実行例:英文

The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo

 

実行例:和文

いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは

 

表幅の固定

自動改行の抑止では、一文が一行となって表の幅が広すぎる。適当なところで折り返したい場合には、表やセルの幅を指定するとよい。

幅指定の際は、ピクセルやセンチ/インチなどのデバイス依存単位より、emなどの文字相当の単位がよい。

実行例:英文

The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo
The rain in Spain stays mainly in the plain Daisy, Daisy, Give me your answer do! Salagadoola mechicka boola bibbidi-bobbidi-boo

 

実行例:和文

いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは
いいいいいいいいいいいいいいいいいいいい ろろろろろろろろろろろろろろろろろろろろ はははははははははははははははははははは

幅と高さの指定

幅と高さをピクセル単位で指定した例。

 

実行例

aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee
aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee

HTML5 – IE互換性

CSSの指定前の処理(IE対応)

IE8以下ではHTML5に対応していないため、新要素は無視されてしまう。IEをHTML5に対応させるJavaScriptがhtml5shivサイトで公開されており、これを最初に読み込んで対応する。

  • 新要素に対してCSSの設定をしている場合、スクリプトがCSSの設定をオーバーライドしないよう、スクリプトの記述をCSS呼び出しの前に置かなければならない。
  • IEの判定部分を<!–[if IE]>としている例もある。
  • HTML5ではscript要素のtype属性の初期値は”text/javascript”として設定されているので省略可能。

IEの条件付きコメント

Microsoft Internet Explorer (MSIE)において、HTMLソースコード中にある条件付きのステートメント。 IE5で初めて導入され、IE9までサポートされた。IE10以降この機能は廃止され、単なるコメントとして扱われる。

コメントの種類 記述
標準のHTMLコメント <–コメント–>
下の階層が隠れる <!–[if expression]>HTML<![endif]–>
下の階層が見える <![if expression]>HTML<![endif]>

下の階層が隠れる条件付きコメント

ブラウザがIEの場合のみHTMLが解釈され、IE以外の場合はブラウザからHTMLが見えない。たとえば、ブラウザがIEの場合のみスクリプトを実行するような場合。

下の階層が見える条件付きコメント

以下は、Microsoftのデフォルトの記法で、ブラウザがIEの場合にはHTMLが解釈されず、IE以外のブラウザにはHTMLが見える記法。

の表現をIEから見ると、ブラウザがIEなのでifの中身は無視される。一方IE以外のブラウザからみると前後のタグ自体が無視されるため、ifの中身だけが見えて実行される。

この記法は正当な(X)HTMLに準拠したものではなく、IE以外のブラウザで前後のタグが無視されることを期待しているにすぎない。そこで、W3C標準を順守するため、以下のような表現が考えられる。

この記法は、正当な(X)HTMLである。ただし条件式のパターンによっては、条件が真となる場合に、HTMLの解釈の前に”–>”を表示してしまう。

 

HTML5 – 標準形・ひな形

全体構成

  • DOCTYPE宣言で始める
  • html要素の中にhead要素とbody要素を記述
  • head要素の中には、meta要素、title要素と、必要に応じてスタイル設定のための要素を記述

DOCTYPE宣言

  • XHTMLに比べて簡略化
  • ブラウザなどにHTML5であることを明示
  • DOCTYPE宣言がないと、ブラウザによってはレンダリングモードが互換モードとなりCSSの解釈が意図と異なるレイアウトとなる場合がある
  • DOCTYPE宣言によって、主要なブラウザは標準モードとなる。

html要素

lang属性による言語の指定

  • htmlタグのlang属性で言語を指定し、ブラウザ・検索サイトなどに伝える。

head要素

文字コード指定

  • head要素内のmeta要素で文字コードを指定する
  • HTML4以前の記述も可能だが、HTML5ではより簡略な表現が可能
  • この宣言より前のものは文字化けの可能性があるため、head要素の冒頭に記述

title

  • head要素内のtitle要素で指定
  • [タイトル]がブラウザのタイトルバーに表示される
  • 検索サイトでの検索結果のタイトルにも使われる

CSS設定

外部ファイル指定

  • head要素内のlinkタグの属性で指定
  • HTML5ではrel属性の値が”stylesheet”の場合のtype属性の値は”text/css”として設定されているので省略可能

CSSの直接記述

  • head要素内のstyle要素の中にCSSの文を直接記述

Path2D

概要

Path2DはJavaScriptによるWeb APIの一つで、一連のサブパスを保持する。Path2Dの内容は後に一度に描画される。

コンストラクタ

Path2Dのコンストラクタは3種類。

Path2D()
空のPath2Dオブジェクトをつくる。
Path2D(path)
既存のPath2Dオブジェクトを複製する。
Path2D(d)
SVGパスの文字列を与えてオブジェクトをつくる。

パスの追加

addPath(path)
現在のパスにpathを追加する。

パスの操作

moveTo(x, y)
(x, y)の点に移動する。
lineTo(x, y)
現在の点から(x, y)の点まで直線を引く。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
現在の点から(x, y)の点までベジエ曲線を描く。
quadraticCurveTo(cpx, cpy, x, y)
現在の点から(x, y)の点まで二次ベジエ曲線を描く。
arcTo(x1, y1, x2, y2, radius)
現在の点から、指定した制御点と半径で円弧を描く。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x, y)を中心とした半径radiusの円弧を描く。startAndleが開始角、endAngleが終了角で、デフォルトは時計回りだがanticlockwiseをtrueにすると反時計回りに描く。
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
(x, y)を中心とし、xyの2方向の半径を指定して楕円(弧)を描く。rotationは楕円全体の傾き。その他はarc()と同じ意味。
rect(x, y, width, height)
(x, y)から幅width、高さheightの長方形を描く。

 

スクリプトへの引数渡し

たとえば以下のような場合。

  • CoffeeScript、Javascriptの外部スクリプトに引数を渡したい
  • 外部スクリプトの定数定義を柔軟に変更可能なようにしたい

定数となる変数定義をスクリプト内に書くと、定数の値を変更したいときに再コンパイルやアップロードなどが必要になって煩雑。

以下の方法が考えられる。

  • HTMLの外部スクリプト呼び出しより前に、変数定義のscript要素を書く(変数のスコープはグローバルになる)
    • その際、行の末尾にセミコロン(;)をつけること
  • 外部スクリプト内で上で定義した変数を利用する

HTML

外部スクリプト

CoffeeScriptも実行時にはJSにコンパイルしたものを読み込むので、変数定義もJavascriptの文法で末尾にセミコロン(;)をつけなければならない。

上の例では、定数を意識して変数名を大文字のスネークケースとしたが、通常の変数名でも実行に問題はない。

 

CoffeeScript – HTMLから外部スクリプトファイルを実行

HTMLファイル

test_htmml.html

外部スクリプトファイル

test_html.coffee

上記のCoffeeScriptファイルをコンパイル

コンパイル後のファイルは拡張子がjsになり、test_html.jsとなる。

このファイルを上のtest_html.htmlファイルのscript要素から読める場所に配置。

 

HTML – input

概要

input要素はフォームを構成する各種入力部品を作成する際に使用する。

属性

input要素のtype属性で部品の種類を指定し、部品のタイプに応じた属性でそれぞれの設定を行う。

type属性

type属性のデフォルトは”text”。

ボタン

type=”button” 汎用ボタン
type=”submit” 送信ボタン
type=”image” 画像ボタン
type=”reset” リセットボタン
type=”checkbox” チェックボックス
type=”radio” ラジオボタン

入力ボックス

type=”text” 一行テキストボックス【デフォルト】
type=”hidden” 画面上に表示されない隠しデータ

任意属性

type=”…”
MIMEタイプを指定
media=”…”
メディアクエリ(初期値は”all”)
hreflang=”…”
外部リソースの言語を指定
sizes=”…”
アイコンなどのサイズを指定

 

HTML5 – link

link要素の配置

meta要素は文書にリンクさせる外部ソースを指定する際に使用し、<head>~</head>の間に配置する。

link要素の属性

link要素には必須属性と任意属性がある。

必須属性

rel リンク先のリンクタイプを指定。CSSの場合はstylesheet
href リンク先のURL

任意属性

type MIMEタイプを指定
media メディアクエリ(初期値は”all”)
hreflang 外部リソースの言語を指定。
sizes アイコンなどのサイズを指定。

HTML5 – メディア・クエリ

概要

link要素のmedia属性の値として使用。メディアタイプやメディア特性で指定。演算子を使って複数の条件を指定可能。

メディア・クエリの要素

メディア・タイプ

screen コンピュータ画面
tty テレタイプなどの字幅が固定の機器
tv テレビ
projection プロジェクタ
handheld モバイル機器
print プリンタ
braille 点字出力機器
aural 音声出力機器
all 全てのメディア

メディア特性

width
表示領域の幅。min-/max-前置詞使用可。
height
表示領域の高さ。min-/max-前置詞使用可。
device-width
出力デバイス(画面や印刷用紙)の幅。min-/max-前置詞使用可。
device-height
出力デバイス(画面や印刷用紙)の高さ。min-/max-前置詞使用可。
orientation
縦表示(portrait)/横表示(landscape)を指定。
aspect-ratio
表示領域のアスペクト比。水平ピクセル数と垂直ピクセル数を、スラッシュ(/)区切りで指定。min-/max-前置詞使用可。
device-aspect-ratio
出力デバイスのアスペクト比。考え方はaspect-ratioと同じ。min-/max-前置詞使用可。
color
出力デバイスのカラーコンポーネントあたりのビット数。カラーデバイスでない場合の値は”0″。min-/max-前置詞使用可。
color-index
出力デバイスのカラールックアップテーブルのエントリ数。min-/max-前置詞使用可。
monochrome
モノクロデバイス上のピクセルあたりのビット数。モノクロデバイスでない場合の値は”0″。min-/max-前置詞使用可。
resolution
出力デバイスの解像度。min-/max-前置詞使用可。
scan
テレビ型出力デバイスの操作方式。

progressive プログレッシブ方式
interlace インターレース方式
grid
出力デバイスがグリッド又はビットマップであるかどうかを調べる。

演算子

and AND演算子
not NOT演算子
, (comma) OR演算子
only メディアクエリ非対応ブラウザからスタイルシートを隠す

実装例

表示領域の幅が300px以上900px以下のコンピュータ・スクリーンに限って、スタイルシートを適用する場合

メディアクエリの実装例

 

HTML – MIMEタイプ

概要

MIMEでデータ形式を識別するためのコード体系。

“type/subtype”の形式で記述され、たとえばHTML文書は”text/html”。JPEG画像は”image/jpeg”と表す。typeに指定できるものの例として、text(文字)、image(画像)、video(動画)、audio(音声)、application(アプリケーション固有)、message(メールメッセージ)、multipart(複数形式が混在)など。

MIMEタイプ一覧

ファイル形式 拡張子 MIMEタイプ
HTML、テキスト
 テキスト .txt  text/plain
HTML .html, .html text/html
XHTML .xhtml application/xhtml+xml
XML .xml text/xml
RSS .rss, .xml application/rss+xml
application/xml
text/xml
CSS、スクリプト
 CSS .css text/css
CGI .cgi application/x-httpd-cgi
PHP .php application/x-httpd-php
JavaScript .js. text/javascript
VBScript .vbs text/vbscript
画像
GIF  .gif image/gif
JPEG .jpeg, .jpg image/jpeg
PNG .png image/png
ico .ico image/vnd.microsoft.icon
動画
 Flash  .swf application/x-shockwave-flash
MPEG .mpeg, .mpg video/mpeg
MP4 .mp4 video/mp4
WebM .webm video/webm
Ogg .ogv video/ogg
QuickTime .mov, .qt video/quicktime
AVI .avi video/x-msvideo
音声
 MP3  .mp3  audio/mpeg
AAC .m4a audio/aac
Ogg .ogg audio/ogg
MIDI .midi, .mid audio/midi
RealAudio .ra audio/vnd.rn-realaudio
WAVE .wav audio/wav
その他
ZIP .zip application/zip
PDF .pdf application/pdf
Word .doc application/msword
Excel .xls application/msexcel