Wiki@KDS - 利用者の投稿記録 [ja]

HTML5／CSS3

2011-01-14T09:10:31Z

Hamana:

2010年代のWeb制作に欠かせなくなるであろう、HTML5とCSS3についてまとめてみる。

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

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

===【head要素内記述】===
head要素内の記述はかなりシンプルになる。 
'''<!DOCTYPE html>''' 
<html lang="ja"> 
<head> 
<meta''' charset='''"UTF-8">←charsetが属性化 
<meta''' name'''="description" content="●●●">←属性名がnameに変更 
<meta''' name'''="keywords" content="●●,●●">←┘ 
<title>●●●</title> 
'''<link rel="stylesheet" src="css/import.css">'''←type属性が不要になった（scriptについても同様） 
</head> 
また、従来meta要素でhttp-equiv属性にContent-Typeを指定したりしていたが、HTML5ではこれらの記述は一切不要になった。 

==新要素==
特に「セクショニング」と「埋め込みコンテンツ」は実務的なニーズが高いとされている。 
※以下は、2010年6月24日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。
 
===【セクショニング】===
'''・section'''
div要素の区分け的存在。見出しを付けられるような内容ごとに、このsection要素で区切ることが出来る。 
コーディングの都合で区切る場合などは、従来通りdiv要素を用いる。

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

'''・header'''
従来の<div id="header">の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの先頭に用いることもできる。

'''・footer'''
従来の<div id="footer">の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの最後に用いることもできる。

'''・aside'''
メインコンテンツではないが、それと直接関連のある内容をマークアップする際に用いる。 
例えば[http://www.dokidokivisual.com/ きららのTOPページ]であれば、「うごうご4コマ」「Web限定連載」の部分にこれを用いるのが適していると言えそうである。

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

'''・hgroup'''
その名の通り、見出しをグループ化する要素。多くの場合、ページのタイトルとサブタイトル（タグライン）各々をh1～h6要素でマークアップしたものを グループ化するのに用いられる。
 
===【グルーピング】===
'''・figure'''

 
===【埋め込みコンテンツ】===
'''・video'''
文字通り、動画を埋め込むための要素。従来のやり方ではFlashが必要であったりしたが、video要素では不要になった。 
video要素には様々な属性が存在する。自動再生させる'''autoplay'''、ページ読み込みと同時にバッファを開始させる'''autobuffer'''、 
万が一動画が読み込まれなかった場合に画像を表示させる'''poster'''など。 
ただ、このvideo要素にはコーデックやIE対策など、様々な問題点が指摘されているため、実用できるようになるにはまだ時間がかかるとされている。

'''・audio'''
文字通り音楽を埋め込むための要素だが、ブラウザ間でサポートしているコーデックに差があるため、実装する際はやや複雑を要する。 
詳細については[http://www.html5.jp/html5doctor/native-audio-in-the-browser.html html5doctorの記事]を参照されたい。

'''・source'''
他のメディア要素と組み合わせて使用する。例えば、audio要素の中にsource要素を用いて音楽ファイルをロードする、など。

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

'''・embed'''

 
===【テキストレベル】===
'''・mark'''
テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。

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

'''・time'''

'''・ruby／rt／rp'''

 
===【フォーム】===
'''・meter'''
最大値のある数量に用いる。体重や長さなど、最大値が明確にならない数量には適していない。 
meter要素にはいくつかの属性がある。実際の値となる'''value'''、最小の許容値を示す'''min'''、最大の許容値を示す'''max'''など。 
例：<meter value="1" min="1" max="20">20件中1件目</meter>

'''・datalist'''

'''・keygen'''

'''・output'''

'''・progress'''

 
===【インタラクティブ】===
'''・details'''

'''・summary'''

'''・command'''

'''・menu'''

'''・device'''


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

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

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

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

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

 
==CSS3 概要==
事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。 
しかし、一部プロパティやセレクタはすでに様々なブラウザでの実装が進んでいる。が、IEでの実装具合は言うまでもない。

==CSS2.1と異なる点==
新プロパティや新セレクタが登場し、CSS2.1では実装できなかった角丸や細かいセレクタ設定などが可能となった。 
また、従来はJSを用いないと実装出来なかったこともこのCSS3では一部実装可能となっている。 
すなわち、CSS3の登場によってWebの表現技法が広がったわけである。

==新プロパティ==
いくつかの実装の進んでいないプロパティは以下のように先頭にベンダープリフィックスをつけたプロパティを併記する必要があるので注意。 
'''-moz-プロパティ:''' 
'''-webkit-プロパティ:''' 
 
'''・background:rgba(R,G,B,a);'''
バックカラーをRGBで指定できるようになり、かつ不透明度（値は1.0～0.0）も指定できるようになった。

'''・opacity:a;'''
こちらはボックス全体の不透明度を指定する。バックカラーだけでなくテキストなどの包含要素も影響する。値は同じく1.0～0.0。

'''・text-shadow:x y z c;'''
文字通りテキストにシャドウを付ける。xにはX方向のズレ、yにはY方向のズレ、zにはぼかし距離を、それぞれpx単位の値で指定する。cにはシャドウの色を16進数で指定する。

'''・box-shadow:x y z c;'''
こちらはボックスにシャドウを付ける。値の指定方法は text-shadow と同様。
また、このプロパティはベンダープリフィックスが必要となる。

'''・border-radius:r;'''
ボックスに角丸を作ることができる。rには角丸の半径をpxで指定。親要素の背景が画像の場合、角丸部分が白抜けになってしまうことがあるので注意。 
また、このプロパティもベンダープリフィックスが必要となる。

'''・background-image:gradient();'''
ボックスの背景色にグラデーションをつけられる。-moz-と-webkit-で記述法が異なるので注意。 
［-moz-］ 
background-image:-moz-linear-gradient(グラデ方向, 開始色, 終了色); 
グラデ方向はtopで縦方向、leftで横方向。色は16進数で指定する。 
［-webkit-］ 
background-image:-webkit-gradient(linear, 開始位置, 終了位置, color-stop(位置, 色), color-stop(位置, 色)); 
グラデ方向は開始位置と終了位置の関係で決まる。 
縦グラデ：left top, left bottom　横グラデ：left top, right top　斜めグラデ：left top, right bottom 
color-stopは、開始色と終了色が必要になるため最低2つは必要で、中間で色を変えたりする場合には3つ以上に増やすことも可能。 
位置には0～100%（開始が0で終了が100）、色は16進数で指定する。

'''・transform:動作(値);'''
要素の位置移動、拡大縮小、回転、ねじれを指定できる。動作によって値の指定方法が異なるので注意。 
位置移動：動作＝translate、値＝X方向の距離, Y方向の距離 
拡大縮小：動作＝scale、値＝X方向への倍率, Y方向への倍率（0.1～1.0） 
回転：動作＝rotate、値＝回転角度（単位はdeg、マイナスで反時計回り） 
ねじれ：動作＝skew、値＝X軸の傾斜角度, Y軸の傾斜角度

==新セレクタ==
'''・:nth-child( )'''
( )内には任意の数値などを指定する。例えば p:nth-child(3) とすると、3番目に出てくるp要素を指定することができる。 
数値以外では、3n+1で3つごと、oddで奇数番目、evenで偶数番目を指定できる。

'''・:nth-of-type( )'''
前述のnth-child( )とほぼ同じ働きをするが、入れ子構造になっている場合では子要素全体で数えるnth-child( )に対し、nth-of-type( )は同じ要素ごとに数える。 
例えば、div要素の中にp要素とdiv要素が存在する場合に、'''div:nth-of-type(even)'''とすると、親のdiv要素の中のp要素とdiv要素それぞれで偶数番目に出てくる要素を指定する。 
一方、'''div:nth-child(even)'''とすると、親のdiv要素の中全体で数えるので、子のp要素とdiv要素は関係なく偶数番目に出てくる要素を指定することになる。

==プログレッシブエンハンスメント==
前述の通り、IEはCSS3に殆ど対応していない。そこで、Web Designing 2010年4月号に以下のような考え方が掲載されていたので紹介する。 
IEユーザーにはローリテラシーユーザーが多く、一方でFirefoxやSafari、Chrome、Operaのユーザーには、ハイリテラシーユーザーが多いという傾向がある。 
そのため、前者にはCSS2.1による最低限のビジュアルデザインを提供し、後者にはCSS3によるビジュアルデザインとインタラクション（よりリッチなユーザー体験） を提供しようという考えだ。 
今後この考え方が普及することも考えられる。

==資料==
このページを作成するのに参考にしたページ等をリストアップ。
===【Webサイト】===
[http://www.html5.jp/html5doctor/index.html HTML5.JP ＞ html5doctor] 
[http://www.apple.com/html5/ HTML5 Showcase] - AppleがHTML5・CSS3などのWeb標準で構築したサイト 
[http://web.g.hatena.ne.jp/keywordlist http://web.g.hatena.ne.jp/keywordlist]
 
===【雑誌・書籍】===
・Web Designing 2010年4月号特集「実践・CSSコーディングの新常識」　公式サイト：[http://book.mycom.co.jp/wd/ http://book.mycom.co.jp/wd/] 
・Web Designing 2009年11月号特集「HTML5＆CSS3でWebは変わるのか？」　公式サイト：同上 
・実践 Web Standards Design　公式サイト：[http://gihyo.jp/book/2009/978-4-7741-3684-4 http://gihyo.jp/book/2009/978-4-7741-3684-4]
</div>

スタッフ紹介

2011-01-13T08:55:53Z

Hamana:

当オフィスのスタッフ紹介です。各自、自分のプロフィールを作成・更新してください。尚、座席は[[東京オフィス座席表]]でご確認ください。 
※このページは社内からしか見れません。（社外からは閲覧不可能） 

==スタッフ一覧==
*[[多田正宏]] (タダマサヒロ)
*[[千葉宏治]] (チバコウジ)
*[[由良雄飛]] (ユラユウヒ)
*[[萩原麻美子]] (ハギワラマミコ)
*[[倉田健太郎]] (クラタケンタロウ)
*[[佐藤信二]] (サトウシンジ)
*[[海野優貴]] (ウンノユウキ)
*[[中村友美]] (ナカムラトモミ)
*[[古口真澄]] (コグチマスミ)
*[[大山洋介]] (オオヤマヨウスケ)
*[[中才紗哉香]] (ナカサイサヤカ)
*[[上指亜希]] (カミサシアキ)
*[[小泉吉生]] (コイズミヨシオ)
*[[福森孝二]] (フクモリコウジ)
*[[鈴木恵美子]] (スズキエミコ)
*[[小林勇太]](コバヤシユウタ)
*[[東條弘嗣]] (トウジョウヒロツグ)
*[[香取美奈子]] (カトリミナコ)
*[[上村大勝]] (ウエムラヒロカツ)
*[[鈴木雅俊]] (スズキマサトシ)
*[[高橋裕美]] (タカハシユミ)
*[[浅沼千春]] (アサヌマチハル)
*[[北山久仁子]] (キタヤマクニコ)
*[[永富裕章]] (ナガトミヒロアキ)
*[[園部一海]] (ソノベヒトミ)
*[[濵名裕幸]] (ハマナヒロユキ)
*[[満田恵]] (ミツタケイ)
*[[田邊裕美子]] (タナベ　ユミコ)
==関連項目==
*[[無人島に持っていく漫画]]
*[[無人島に持っていくCD]]
*[[無人島に持っていくビデオ・DVD]]
*[[無人島に持っていくゲームソフト]]
==OB・OG==
*[[高山潤也]]（タカヤマジュンヤ）
*[[守屋有希奈]] (モリヤユキナ)
*[[大山美樹]] (オオヤマミキ)
*[[中村千春]] (ナカムラチハル)
*[[堀田あゆみ]] (ホリタアユミ)
*[[大曽根亜依]] (オオソネアイ)
*[[山岸武志]] (ヤマギシタケシ)
*[[日向由紀]] (ヒナタユキ)
*[[浅香敬子]] (アサカノリコ)
*[[岡野美奈子]] (オカノミナコ)
*[[桐生あや音]] (キリュウアヤネ)
*[[外山英幸]] (トヤマヒデユキ)
*[[遠藤建]] (エンドウタケル)
*[[阿佐崇]] (アサタカシ)
*[[岡田紋]] (オカダアヤ)
*[[広瀬彰香]](ヒロセアヤカ)
*[[赤間慧]] (アカマサトシ)
*[[高橋紗弥可]] (タカハシサヤカ)
*[[加園啓介]] (カソノケイスケ)
*[[沖裕樹]] (オキユウキ)
*[[鈴木竜介]] (スズキリュウスケ)
*[[山口千穂]] (ヤマグチチホ)
==助っ人==
2010年2月15日～18日まで 
*[[宮崎大介]] (ミヤザキダイスケ)
*[[藪田晋平]] (ヤブタシンペイ)
2009年6月9日～12日まで 
*[[太田正弘]] (オオタマサヒロ)

濵名裕幸

2011-01-12T07:04:04Z

Hamana:

濵名裕幸（ハマナヒロユキ）：hamana@kohga.co.jp 
（「濵」の字は旧字なので人名変換でないと出ません。メール等では「浜」でもOK、「濱」は別字なので避けてください） 
社員：コーダー 
所属：社内報編集部、カラオケ部、ダーツ部、B・BOY（弁当ボーイ） 
入社日：2010年04月01日（出社は3/23より） 
誕生日：1989年08月10日 
血液型：B型 
生息地：東京都葛飾区（生まれも育ちも葛飾） 
最寄駅：金町（常磐線、平均通勤時間65分） 
略歴：道上小学校→飯塚小学校→金町中学校→都立向丘高校→日本電子専門学校Webデザイン科 
趣味： 
・ライブ参戦 
好きなアーティストのライブにちょこちょこ行きます。 
過去行ったライブの主なアーティスト（行った順）： 
「MARIA（2010年春解散）」「mimika」「幸美AMP」「Every Little Thing」「いきものがかり」 
 
・バンド活動 
専門学校在学中に組んだバンド「HONK」でベースをしています。 
<s>たまーにライブもするので良かったら遊びに来てください</s> ただ今充電期間中。 
ベース暦は2年半程、名前は「ベー子」（Fender MEX' 60s Jazz Bass） 
 
・野球観戦 
2004年頃から、中日ドラゴンズの大ファン。年に5試合程度は球場に行きます。 
 
・鉄道 
「撮り鉄」を主に、「音鉄」「乗り鉄」もします。 
好きな車両・・・209系シリーズ、207系900番台（2009年末に廃車。。。） 
 
他に好きなものとか： 
・Every Little Thing・・・2003年からのファン。自分にとって音楽の原点です。 
・けいおん！・・・聖地巡礼は2度ほど行きました。唯可愛いよ唯（← 
・ZONE（ガールズバンド）・・・ベースを始めるきっかけになりました 
・水曜どうでしょう・・・この番組をリスペクトした番組に出演してたりします（AdamanTVでググってくださいｗ） 
・ジョナサン・・・学生時代、2年半ほどキッチンでバイトしてました。詳しいです。 
 
Webの経歴とか： 
2003年04月（13才）・・・親父のノートPCをいじりはじめる 
2003年11月（14才）・・・親父の見よう見まねで初めてWebサイトを作る（当時はホームページビルダーを使ってました） 
2005年頃（16才）・・・・・Webデザイナーになる決意をする 
2008年04月（18才）・・・本格的にWebを学ぶため日本電子専門学校Webデザイン科に進学 
2008年05月（18才）・・・専門学校で「コーダー」の存在を知り、志望がコーダーに 
2010年02月（20才）・・・KDSにコーダーで入社決定 
 
Twitter：[http://twitter.com/turbo19/ turbo19]（<s>色々自重してないつぶやきになってますがｗｗ</s> 最近落ち着きましたｗ） 
 
とまぁこんな感じで。。。よろしくお願いします！！

HTML5／CSS3

2011-01-11T03:20:45Z

Hamana:

2010年代のWeb制作に欠かせなくなるであろう、HTML5とCSS3についてまとめてみる。

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

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

===【head要素内記述】===
head要素内の記述はかなりシンプルになる。 
'''<!DOCTYPE html>''' 
<html lang="ja"> 
<head> 
<meta''' charset='''"UTF-8">←charsetが属性化 
<meta''' name'''="description" content="●●●">←属性名がnameに変更 
<meta''' name'''="keywords" content="●●,●●">←┘ 
<title>●●●</title> 
'''<link rel="stylesheet" src="css/import.css">'''←type属性が不要になった（scriptについても同様） 
</head> 
また、従来meta要素でhttp-equiv属性にContent-Typeを指定したりしていたが、HTML5ではこれらの記述は一切不要になった。 

==新要素==
特に「セクショニング」と「埋め込みコンテンツ」は実務的なニーズが高いとされている。 
※以下は、2010年6月24日版 WHATWG Draft Standardに基づく。今後変更の可能性あり。
 
===【セクショニング】===
'''・section'''
div要素の区分け的存在。見出しを付けられるような内容ごとに、このsection要素で区切ることが出来る。 
コーディングの都合で区切る場合などは、従来通りdiv要素を用いる。

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

'''・header'''
従来の<div id="header">の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの先頭に用いることもできる。

'''・footer'''
従来の<div id="footer">の代替として使用できる。また、ドキュメント内に1つしか書けないということはないので、セクションの最後に用いることもできる。

'''・aside'''
メインコンテンツではないが、それと直接関連のある内容をマークアップする際に用いる。 
例えば[http://www.dokidokivisual.com/ きららのTOPページ]であれば、「うごうご4コマ」「Web限定連載」の部分にこれを用いるのが適していると言えそうである。

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

'''・hgroup'''
その名の通り、見出しをグループ化する要素。多くの場合、ページのタイトルとサブタイトル（タグライン）各々をh1～h6要素でマークアップしたものを グループ化するのに用いられる。
 
===【グルーピング】===
'''・figure'''

 
===【埋め込みコンテンツ】===
'''・video'''
文字通り、動画を埋め込むための要素。従来のやり方ではFlashが必要であったりしたが、video要素では不要になった。 
video要素には様々な属性が存在する。自動再生させる'''autoplay'''、ページ読み込みと同時にバッファを開始させる'''autobuffer'''、 
万が一動画が読み込まれなかった場合に画像を表示させる'''poster'''など。 
ただ、このvideo要素にはコーデックやIE対策など、様々な問題点が指摘されているため、実用できるようになるにはまだ時間がかかるとされている。

'''・audio'''
文字通り音楽を埋め込むための要素だが、ブラウザ間でサポートしているコーデックに差があるため、実装する際はやや複雑を要する。 
詳細については[http://www.html5.jp/html5doctor/native-audio-in-the-browser.html html5doctorの記事]を参照されたい。

'''・source'''
他のメディア要素と組み合わせて使用する。例えば、audio要素の中にsource要素を用いて音楽ファイルをロードする、など。

'''・canvas'''

'''・embed'''

 
===【テキストレベル】===
'''・mark'''
テキスト部分をハイライトする際に使用する。イメージとしては、蛍光ペンなどでテキストをマークするように、このmark要素を用いることができる。

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

'''・time'''

'''・ruby／rt／rp'''

 
===【フォーム】===
'''・meter'''
最大値のある数量に用いる。体重や長さなど、最大値が明確にならない数量には適していない。 
meter要素にはいくつかの属性がある。実際の値となる'''value'''、最小の許容値を示す'''min'''、最大の許容値を示す'''max'''など。 
例：<meter value="1" min="1" max="20">20件中1件目</meter>

'''・datalist'''

'''・keygen'''

'''・output'''

'''・progress'''

 
===【インタラクティブ】===
'''・details'''

'''・summary'''

'''・command'''

'''・menu'''

'''・device'''


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

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

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

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

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

 
==CSS3 概要==
事実上現在の「標準」となっているCSS2.1の後継にあたる。2010年6月現在、策定中にあるため実用段階ではないという考えが強い。 
しかし、一部プロパティやセレクタはすでに様々なブラウザでの実装が進んでいる。が、IEでの実装具合は言うまでもない。

==CSS2.1と異なる点==
新プロパティや新セレクタが登場し、CSS2.1では実装できなかった角丸や細かいセレクタ設定などが可能となった。 
また、従来はJSを用いないと実装出来なかったこともこのCSS3では一部実装可能となっている。 
すなわち、CSS3の登場によってWebの表現技法が広がったわけである。

==新プロパティ==
いくつかの実装の進んでいないプロパティは以下のように先頭にベンダープリフィックスをつけたプロパティを併記する必要があるので注意。 
'''-moz-プロパティ:''' 
'''-webkit-プロパティ:''' 
 
'''・background:rgba(R,G,B,a);'''
バックカラーをRGBで指定できるようになり、かつ不透明度（値は1.0～0.0）も指定できるようになった。

'''・opacity:a;'''
こちらはボックス全体の不透明度を指定する。バックカラーだけでなくテキストなどの包含要素も影響する。値は同じく1.0～0.0。

'''・text-shadow:x y z c;'''
文字通りテキストにシャドウを付ける。xにはX方向のズレ、yにはY方向のズレ、zにはぼかし距離を、それぞれpx単位の値で指定する。cにはシャドウの色を16進数で指定する。

'''・box-shadow:x y z c;'''
こちらはボックスにシャドウを付ける。値の指定方法は text-shadow と同様。
また、このプロパティはベンダープリフィックスが必要となる。

'''・border-radius:r;'''
ボックスに角丸を作ることができる。rには角丸の半径をpxで指定。親要素の背景が画像の場合、角丸部分が白抜けになってしまうことがあるので注意。 
また、このプロパティもベンダープリフィックスが必要となる。

'''・background-image:gradient();'''
ボックスの背景色にグラデーションをつけられる。-moz-と-webkit-で記述法が異なるので注意。 
［-moz-］ 
background-image:-moz-linear-gradient(グラデ方向, 開始色, 終了色); 
グラデ方向はtopで縦方向、leftで横方向。色は16進数で指定する。 
［-webkit-］ 
background-image:-webkit-gradient(linear, 開始位置, 終了位置, color-stop(位置, 色), color-stop(位置, 色)); 
グラデ方向は開始位置と終了位置の関係で決まる。 
縦グラデ：left top, left bottom　横グラデ：left top, right top　斜めグラデ：left top, right bottom 
color-stopは、開始色と終了色が必要になるため最低2つは必要で、中間で色を変えたりする場合には3つ以上に増やすことも可能。 
位置には0～100%（開始が0で終了が100）、色は16進数で指定する。

'''・transform:動作(値);'''
要素の位置移動、拡大縮小、回転、ねじれを指定できる。動作によって値の指定方法が異なるので注意。 
位置移動：動作＝translate、値＝X方向の距離, Y方向の距離 
拡大縮小：動作＝scale、値＝X方向への倍率, Y方向への倍率（0.1～1.0） 
回転：動作＝rotate、値＝回転角度（単位はdeg、マイナスで反時計回り） 
ねじれ：動作＝skew、値＝X軸の傾斜角度, Y軸の傾斜角度

==新セレクタ==
'''・:nth-child( )'''
( )内には任意の数値などを指定する。例えば p:nth-child(3) とすると、3番目に出てくるp要素を指定することができる。 
数値以外では、3n+1で3つごと、oddで奇数番目、evenで偶数番目を指定できる。

'''・:nth-of-type( )'''
前述のnth-child( )とほぼ同じ働きをするが、入れ子構造になっている場合では子要素全体で数えるnth-child( )に対し、nth-of-type( )は同じ要素ごとに数える。 
例えば、div要素の中にp要素とdiv要素が存在する場合に、'''div:nth-of-type(even)'''とすると、親のdiv要素の中のp要素とdiv要素それぞれで偶数番目に出てくる要素を指定する。 
一方、'''div:nth-child(even)'''とすると、親のdiv要素の中全体で数えるので、子のp要素とdiv要素は関係なく偶数番目に出てくる要素を指定することになる。

==プログレッシブエンハンスメント==
前述の通り、IEはCSS3に殆ど対応していない。そこで、Web Designing 2010年4月号に以下のような考え方が掲載されていたので紹介する。 
IEユーザーにはローリテラシーユーザーが多く、一方でFirefoxやSafari、Chrome、Operaのユーザーには、ハイリテラシーユーザーが多いという傾向がある。 
そのため、前者にはCSS2.1による最低限のビジュアルデザインを提供し、後者にはCSS3によるビジュアルデザインとインタラクション（よりリッチなユーザー体験） を提供しようという考えだ。 
今後この考え方が普及することも考えられる。

==資料==
このページを作成するのに参考にしたページ等をリストアップ。
===【Webサイト】===
[http://www.html5.jp/html5doctor/index.html HTML5.JP ＞ html5doctor] 
[http://www.apple.com/html5/ HTML5 Showcase] - AppleがHTML5・CSS3などのWeb標準で構築したサイト 
[http://web.g.hatena.ne.jp/keywordlist http://web.g.hatena.ne.jp/keywordlist]
 
===【雑誌・書籍】===
・Web Designing 2010年4月号特集「実践・CSSコーディングの新常識」　公式サイト：[http://book.mycom.co.jp/wd/ http://book.mycom.co.jp/wd/] 
・Web Designing 2009年11月号特集「HTML5＆CSS3でWebは変わるのか？」　公式サイト：同上 
・実践 Web Standards Design　公式サイト：[http://gihyo.jp/book/2009/978-4-7741-3684-4 http://gihyo.jp/book/2009/978-4-7741-3684-4]
</div>

濵名裕幸

2010-12-22T01:14:19Z

Hamana:

濵名裕幸（ハマナヒロユキ）：hamana@kohga.co.jp 
（「濵」の字は旧字なので人名変換でないと出ません。メール等では「浜」でもおｋです。「濱」は別字なので避けてくださいｗ） 
社員：コーダー 
所属：社内報編集部、カラオケ部、ダーツ部、B・BOY（弁当ボーイ） 
入社日：2010年04月01日（出社は3/23より） 
誕生日：1989年08月10日 
血液型：B型 
生息地：東京都葛飾区（生まれも育ちも葛飾） 
最寄駅：金町（常磐線、平均通勤時間65分） 
略歴：道上小学校→飯塚小学校→金町中学校→都立向丘高校→日本電子専門学校Webデザイン科 
趣味： 
・ライブ参戦 
好きなアーティストのライブにちょこちょこ行きます。 
過去行ったライブの主なアーティスト（行った順）： 
「MARIA（2010年春解散）」「mimika」「幸美AMP」「Every Little Thing」「いきものがかり」 
 
・バンド活動 
専門学校在学中に組んだバンド「HONK」でベースをしています。 
たまーにライブもするので良かったら遊びに来てください。 
ベース暦は2年半程、名前は「ベー子」（Fender MEX' 60s Jazz Bass） 
 
・野球観戦 
2004年頃から、中日ドラゴンズの大ファン。年に5試合程度は球場に行きます。 
 
・鉄道 
「撮り鉄」を主に、「音鉄」「乗り鉄」もします。 
好きな車両・・・209系シリーズ、207系900番台（2009年末に廃車。。。） 
 
他に好きなものとか： 
・Every Little Thing・・・2003年からのファン。自分にとって音楽の原点です。 
・けいおん！・・・聖地巡礼は2度ほど行きました。唯可愛いよ唯（← 
・ZONE（ガールズバンド）・・・ベースを始めるきっかけになりました 
・水曜どうでしょう・・・この番組をリスペクトした番組に出演してたりします（AdamanTVでググってくださいｗ） 
・ジョナサン・・・高3の1月～KDS入社直前までジョナでバイトしてました。詳しいですｗ 
・F1・・・カムイ頑張れ！！！F1好きは親父譲りです。いつか鈴鹿行きたい（`・ω・´） 
 
Webの経歴とか： 
2003年04月（13才）・・・親父のノートPCをいじりはじめる 
2003年11月（14才）・・・親父の見よう見まねで初めてWebサイトを作る（当時はホームページビルダーを使ってました） 
2005年頃（16才）・・・・・Webデザイナーになる決意をする 
2008年05月（18才）・・・専門学校で「コーダー」の存在を知り、志望がコーダーに 
2010年02月（20才）・・・KDSにコーダーで入社決定 
 
Twitter：[http://twitter.com/turbo19/ turbo19]（色々自重してないつぶやきになってますがｗｗ） 
 
とまぁこんな感じで。。。よろしくお願いします！！