HTML5／CSS3 - 版の履歴

2012年2月16日 (木) 09:28に192.168.200.108による

2012-02-16T09:28:19Z

← 古い版		2012年2月16日 (木) 18:28時点における版
176行目:		176行目:
	また、このプロパティもベンダープリフィックスが必要となる。</p>		また、このプロパティもベンダープリフィックスが必要となる。</p>

	'''・background-image:gradient();'''		'''・background-image:linear-gradient();'''
	<p>ボックスの背景色にグラデーションをつけられる。-moz-と-webkit-~~で記述法が異なるので注意。~~<br>		<p>ボックスの背景色にグラデーションをつけられる。<br>-moz-と-webkit-で記述法が異なっていたが、2011年初頭頃からwebkitがmozに合わせる形で統一された。<br>
	~~［-moz-］~~<br>		しかし、古いwebkit系ブラウザ（Android2.1の「ブラウザ」など）では統一前の記述でなければ効かないため、両方の記述を併記する必要があるので注意。<br>
	background-image:-~~moz~~-linear-gradient(グラデ方向, 開始色, 終了色);<br>		［基本（統一後）］<br>
			background-image:-moz（webkit）-linear-gradient(グラデ方向, 開始色, 終了色);<br>
	グラデ方向はtopで縦方向、leftで横方向。色は16進数で指定する。<br>		グラデ方向はtopで縦方向、leftで横方向。色は16進数で指定する。<br>
	~~［-webkit-］~~<br>		［旧webkit］<br>
	background-image:-webkit-gradient(linear, 開始位置, 終了位置, color-stop(位置, 色), color-stop(位置, 色));<br>		background-image:-webkit-gradient(linear, 開始位置, 終了位置, color-stop(位置, 色), color-stop(位置, 色));<br>
	グラデ方向は開始位置と終了位置の関係で決まる。<br>		グラデ方向は開始位置と終了位置の関係で決まる。<br>

2011年5月26日 (木) 07:15に192.168.200.108による

2011-05-26T07:15:31Z

← 古い版		2011年5月26日 (木) 16:15時点における版
3行目:		3行目:
	<div id="manual">		<div id="manual">
	==HTML5 概要==		==HTML5 概要==
	1999年に勧告されたHTML4.~~01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、~~<br>~~様々な要素を追加・廃止、そして一部定義変更もしている。~~<br>		1999年に勧告されたHTML4.01の後継にあたる。<br>
	~~2012年3月頃に正式に勧告される予定である。~~		FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、<br>様々な要素を追加・廃止、そして一部定義変更もされている。<br>
			2011年5月26日にW3Cより最終草案が公開された。正式勧告は2014年を目標としている。

	==HTML4.01と異なる点==		==HTML4.01と異なる点==
131行目:		132行目:

	'''・i、b'''		'''・i、b'''
	<p>これらの要素も用いるのにはあまり好ましくないとされていたが、i要素はイタリック表記、b要素はボールド表記が一般的なテキストに用いることができるようになった。<br>~~が、特に用いる機会はあまりなさそうである。~~</p>		<p>これらの要素も用いるのにはあまり好ましくないとされていたが、i要素はイタリック表記、b要素はボールド表記が一般的なテキストに用いることができるようになった。<br>が、日本語サイトでは特に用いる機会はなさそうである。</p>

	'''・s'''		'''・s'''
	<p>~~非推奨要素であったが、HTML5では非推奨ではなくなったので、打ち消し線が気軽に作れるようになった。（2010年10月19日更新の草案より）~~</p>		<p>非推奨要素であったが、2010年10月19日更新の草案より非推奨ではなくなったので、打ち消し線が気軽に作れるようになった。</p>

			'''・u'''
			<p>こちらも非推奨要素であったが、2011年5月26日更新の最終草案で非推奨ではなくなった。<br>
			が、基本的にCSSを用いるのがベターだと思われるので、使いどころが謎である。</p>

			'''・table'''
			<p>用いるのは好ましくないとされていたborder属性が気にせず使えるようになり、逆に用いた方が好ましいとされていたsummary属性が非準拠になった。</p>

	<br>		<br>

2011年1月14日 (金) 09:10にHamanaによる

2011-01-14T09:10:31Z

← 古い版		2011年1月14日 (金) 18:10時点における版
36行目:		36行目:

	'''・nav'''		'''・nav'''
	<p>従来の<div id="navi">等の代替として使用できる。nav要素の中にul要素を用いるのが一般的のようである。<br><s>また、パンくずリストやページネーション等に用いるのも効果的。</s>[http://www.cybergarden.net/ 益子さん]によると、主要なナビゲーションのみに用いるのが正しいらしい。</p>		<p>従来の<div id="navi">等の代替として使用できる。nav要素の中にul要素を用いるのが一般的のようである。<br><s>また、パンくずリストやページネーション等に用いるのも効果的。</s> [http://www.cybergarden.net/ 益子さん]によると、主要なナビゲーションのみに用いるのが正しいらしい。</p>

	'''・header'''		'''・header'''
73行目:		73行目:

	'''・canvas'''		'''・canvas'''
			<p>JSと組み合わせて使用することによって図を描いたりできる。詳しくは[http://www.html5.jp/canvas/ HTML5.JPの解説ページ]を参照されたい。</p>

	'''・embed'''		'''・embed'''

2011年1月11日 (火) 03:20にHamanaによる

2011-01-11T03:20:45Z

← 古い版		2011年1月11日 (火) 12:20時点における版
143行目:		143行目:
	新プロパティや新セレクタが登場し、CSS2.1では実装できなかった角丸や細かいセレクタ設定などが可能となった。<br>		新プロパティや新セレクタが登場し、CSS2.1では実装できなかった角丸や細かいセレクタ設定などが可能となった。<br>
	また、従来はJSを用いないと実装出来なかったこともこのCSS3では一部実装可能となっている。<br>		また、従来はJSを用いないと実装出来なかったこともこのCSS3では一部実装可能となっている。<br>
	すなわち、CSS3の登場によってWebの表現技法が広がったわけである。~~</p>~~		すなわち、CSS3の登場によってWebの表現技法が広がったわけである。

	==新プロパティ==		==新プロパティ==

2010年11月4日 (木) 08:50に192.168.200.208による

2010-11-04T08:50:04Z

← 古い版		2010年11月4日 (木) 17:50時点における版
18行目:		18行目:
	<html lang="ja"><br>		<html lang="ja"><br>
	<head><br>		<head><br>
	~~'''~~<meta charset="UTF-8">'''~~←charsetが属性化~~<br>		<meta''' charset='''"UTF-8">←charsetが属性化<br>
			<meta''' name'''="description" content="●●●">←属性名がnameに変更<br>
			<meta''' name'''="keywords" content="●●,●●">←┘<br>
	<title>●●●</title><br>		<title>●●●</title><br>
	'''<link rel="stylesheet">'''←type属性が不要になった（scriptについても同様）<br>		'''<link rel="stylesheet" src="css/import.css">'''←type属性が不要になった（scriptについても同様）<br>
	</head><br>		</head><br>
	また、従来meta要素でhttp-equiv属性にContent-Typeを指定したりしていたが、HTML5ではこれらの記述は一切不要になった。<br>		また、従来meta要素でhttp-equiv属性にContent-Typeを指定したりしていたが、HTML5ではこれらの記述は一切不要になった。<br>
129行目:		131行目:
	'''・i、b'''		'''・i、b'''
	<p>これらの要素も用いるのにはあまり好ましくないとされていたが、i要素はイタリック表記、b要素はボールド表記が一般的なテキストに用いることができるようになった。<br>が、特に用いる機会はあまりなさそうである。</p>		<p>これらの要素も用いるのにはあまり好ましくないとされていたが、i要素はイタリック表記、b要素はボールド表記が一般的なテキストに用いることができるようになった。<br>が、特に用いる機会はあまりなさそうである。</p>

			'''・s'''
			<p>非推奨要素であったが、HTML5では非推奨ではなくなったので、打ち消し線が気軽に作れるようになった。（2010年10月19日更新の草案より）</p>

	<br>		<br>

2010年9月29日 (水) 09:48に192.168.200.208による

2010-09-29T09:48:18Z

← 古い版		2010年9月29日 (水) 18:48時点における版
141行目:		141行目:

	==新プロパティ==		==新プロパティ==
	~~いくつかの実装の進んでいないプロパティは以下のように先頭にベンダープリフィックスが必要になるので注意。~~<br>		いくつかの実装の進んでいないプロパティは以下のように先頭にベンダープリフィックスをつけたプロパティを併記する必要があるので注意。<br>
	'''-moz-プロパティ:'''<br>		'''-moz-プロパティ:'''<br>
	'''-webkit-プロパティ:'''<br>		'''-webkit-プロパティ:'''<br>
172行目:		172行目:
	縦グラデ：left top, left bottom　横グラデ：left top, right top　斜めグラデ：left top, right bottom<br>		縦グラデ：left top, left bottom　横グラデ：left top, right top　斜めグラデ：left top, right bottom<br>
	color-stopは、開始色と終了色が必要になるため最低2つは必要で、中間で色を変えたりする場合には3つ以上に増やすことも可能。<br>		color-stopは、開始色と終了色が必要になるため最低2つは必要で、中間で色を変えたりする場合には3つ以上に増やすことも可能。<br>
	位置には0～100%（開始が0で終了が100）、色は16進数で指定する。		位置には0～100%（開始が0で終了が100）、色は16進数で指定する。</p>
	</p>
			'''・transform:動作(値);'''
			<p>要素の位置移動、拡大縮小、回転、ねじれを指定できる。動作によって値の指定方法が異なるので注意。<br>
			位置移動：動作＝translate、値＝X方向の距離, Y方向の距離<br>
			拡大縮小：動作＝scale、値＝X方向への倍率, Y方向への倍率（0.1～1.0）<br>
			回転：動作＝rotate、値＝回転角度（単位はdeg、マイナスで反時計回り）<br>
			ねじれ：動作＝skew、値＝X軸の傾斜角度, Y軸の傾斜角度</p>

	==新セレクタ==		==新セレクタ==

2010年9月29日 (水) 03:55に192.168.200.208による

2010-09-29T03:55:26Z

@@ 161行目: / 161行目: @@
 <p>ボックスに角丸を作ることができる。rには角丸の半径をpxで指定。親要素の背景が画像の場合、角丸部分が白抜けになってしまうことがあるので注意。<br>
 また、このプロパティもベンダープリフィックスが必要となる。</p>
 ==新セレクタ==

2010年9月16日 (木) 08:23に192.168.200.208による

2010-09-16T08:23:58Z

@@ 141行目: / 141行目: @@
 ==新プロパティ==
-（編集中）
+いくつかの実装の進んでいないプロパティは以下のように先頭にベンダープリフィックスが必要になるので注意。<br>
 ==新セレクタ==

2010年9月8日 (水) 07:31に192.168.200.208による

2010-09-08T07:31:50Z

← 古い版		2010年9月8日 (水) 16:31時点における版
3行目:		3行目:
	<div id="manual">		<div id="manual">
	==HTML5 概要==		==HTML5 概要==
	1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、<br>~~様々な要素を追加・廃止している。~~<br>		1999年に勧告されたHTML4.01の後継にあたる。FlashやSilverlight等のリッチインターネットアプリケーションのプラットフォームを置き換えることを標榜としており、<br>様々な要素を追加・廃止、そして一部定義変更もしている。<br>
	2012年3月頃に正式に勧告される予定である。		2012年3月頃に正式に勧告される予定である。

	==HTML4.01と異なる点==		==HTML4.01と異なる点==
	<p>~~前述した通り、様々な要素が追加・廃止されている。※以下は、2010年2月23日版~~ WHATWG Draft Standardに基づく。今後変更の可能性あり。<br>		<p>前述した通り、様々な要素が追加・廃止・定義変更されている。※以下は、2010年2月23日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。<br>
	廃止要素：'''basefont'''、'''big'''、'''center'''、'''font'''、'''s'''、'''strike'''、'''tt'''、'''u'''、'''frame'''、'''frameset'''、'''noframes'''、'''acronym'''、'''applet'''、'''isindex'''、'''dir'''<br>		廃止要素：'''basefont'''、'''big'''、'''center'''、'''font'''、'''s'''、'''strike'''、'''tt'''、'''u'''、'''frame'''、'''frameset'''、'''noframes'''、'''acronym'''、'''applet'''、'''isindex'''、'''dir'''<br>
	~~新要素については次項を参照されたい。要素の追加・廃止によってマークアップがより厳格になったため、注意が必要である。~~<br>		新要素については次項を、定義変更された要素については次々項を参照されたい。要素の追加・廃止によってマークアップがより厳格になったため、注意が必要である。<br>
	また、DTDが存在しないためDOCTYPE宣言が簡略化された。記述方法は以下の項目を参照。</p>		また、DTDが存在しないためDOCTYPE宣言が簡略化された。記述方法は以下の項目を参照。</p>
	<br>		<br>

	===~~【セッティング】~~===		===【head要素内記述】===
	head要素内の記述はかなりシンプルになる。<br>		head要素内の記述はかなりシンプルになる。<br>
	'''<!DOCTYPE html>'''<br>		'''<!DOCTYPE html>'''<br>
78行目:		78行目:
	'''・mark'''		'''・mark'''
	<p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p>		<p>テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。</p>

			'''・wbr'''
			<p>英文やURL表記などのアルファベットで、折り返し可能な文字がない連続したテキストの場合指定した幅に収まらなくなり、<br>
			IEやSafari、Chromeでは折り返されずにはみ出てしまう。<br>
			FirefoxやOperaでは折り返されるが、折り返し位置が各々のブラウザの判断によるので適切でない位置で折り返す場合がある。<br>
			それを解決するために、折り返してもかまわない箇所にこのwbr要素を指定する。</p>

	'''・time'''		'''・time'''
110行目:		116行目:
	'''・device'''		'''・device'''
	<p></p>		<p></p>

			==定義変更要素==
			'''・address'''
			<p>基本的にはサイト管理者や制作者の連絡先だけとなり、住所や店舗情報に使うのはNGとなった。</p>

			'''・em、strong'''
			<p>従来はem＝強調、strong＝より強調であったが、HTML5ではem＝強調（制作者目線）、strong＝重要（ユーザー目線）となった。</p>

			'''・small'''
			<p>従来は装飾的な意味合いが強く、用いるのにはあまり好ましくないとされていたが、HTML5からは著作権表示や注釈などに用いることが出来るようになった。</p>

			'''・i、b'''
			<p>これらの要素も用いるのにはあまり好ましくないとされていたが、i要素はイタリック表記、b要素はボールド表記が一般的なテキストに用いることができるようになった。<br>が、特に用いる機会はあまりなさそうである。</p>

	<br>		<br>
	~~===【空要素】===~~
	~~'''・wbr'''~~
	~~<p>英文やURL表記などのアルファベットで、折り返し可能な文字がない連続したテキストの場合指定した幅に収まらなくなり、<br>~~
	~~IEやSafari、Chromeでは折り返されずにはみ出てしまう。<br>~~
	~~FirefoxやOperaでは折り返されるが、折り返し位置が各々のブラウザの判断によるので適切でない位置で折り返す場合がある。<br>~~
	~~それを解決するために、折り返してもかまわない箇所にこのwbr要素を指定する。</p>~~
	~~<br>~~

	==CSS3 概要==		==CSS3 概要==
	事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。<br>		事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。<br>

2010年9月8日 (水) 00:53に192.168.200.208による

2010-09-08T00:53:09Z

← 古い版		2010年9月8日 (水) 09:53時点における版
18行目:		18行目:
	<html lang="ja"><br>		<html lang="ja"><br>
	<head><br>		<head><br>
	'''<meta charset="UTF-8">'''~~←簡素化された~~<br>		'''<meta charset="UTF-8">'''←charsetが属性化<br>
	<title>●●●</title><br>		<title>●●●</title><br>
	'''<link rel="stylesheet">'''←type属性が不要になった（scriptについても同様）<br>		'''<link rel="stylesheet">'''←type属性が不要になった（scriptについても同様）<br>
47行目:		47行目:

	'''・article'''		'''・article'''
	<p>他の部分と切り離してもひとつの文書やページとして体裁が成り立つ部分（＝サイト内のどこかから内容を引用している部分）に用いる、とされている。<br>が、この定義の解釈は難しく、誤った使い方をしてしまいがちなので注意が必要である。</p>		<p>他の部分と切り離してもひとつの文書やページとして体裁が成り立つ部分に用いる、とされている。<br>が、この定義の解釈は難しく、誤った使い方をしてしまいがちなので注意が必要である。<br>※トップページには存在しないケースも多い。迷ったら「section」を用いる。</p>

	'''・hgroup'''		'''・hgroup'''