今さら聞けないHTMLとCSSについて

今更聞けないHTMLと
CSSについて
株式会社オークニー神谷貴広

●2008/11よりオークニーに所属
●その前はフラクタリストという携帯サイトメインのベン
チャーで、携帯小説やら動画配信、着うた、着うたフル、
着せ替えツール、グラビアアイドル、ECサイトやら運用
などなど、PHPでゴリゴリ開発していました。
●その前はファルコンというGISの会社で、WEBという
より、VC++で消防の指令系のシステムの開発やら運
用をやってました。
自己紹介

●最近興味あるのは、もちろんサービスは興味はある
けど、FOSS4G以外に広告に興味があります。まわり
には、広告エンジニアの人たちや、メディアをやっている
エンジニアの友達が多いので、次回はこのあたりを発表
したいかも。
自己紹介

・HTML、XHTML、HTML５について
・CSSについて
基本的なことをまとめてみました。
今日の発表内容

・XMLの宣言が必要
・DOCTYPE宣言がことなる
・htmlタグにxmlns属性とxml:lang属性をつける必
要がある
・HTMLでは大文字小文字の区別がないが、キーワー
ドと属性名は小文字にしなければならない
・属性値は「”」(ダブルクォート)で囲まなければならない
・すべてのタグに終了タグが必要で、空要素は”/>”で
終わらなければならない
HTMLとXHTMLの違い

①<?xml version=“1.0” encoding=“EUC-JP”>
②<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
③<html xmlns=http://www.w3.org/1999/xhtml xml:lang=“ja” lang=“ja”>
④ <head>
⑤ <title>タイトルは必須です</title>
⑥ </head>
⑦ <body>
⑧ 内容は入れます。
⑨ </body>
⑩</html>
①XMLで記述しており、バージョンは1.0、文字コードは”EUC-JP”と宣言
②XHTML1.0 Transitionalで記述していると宣言
（XHTML1.0 Transitional DTDは、後方互換モードと呼ばれ、XHTML
で標準となったすべてのタグと属性が使用可能）
③htmlタグの内部はXHTMLのデフォルトの名前空間
xml:lang属性は名前空間が日本語であることを意味している
lang属性はドキュメントが日本であることを意味している
④以降は、HTMLのドキュメント
XHTMLのドキュメントの例

<!DOCTYPE html>
※大文字、小文字の区別はありません。
HTML5にはStrictやTransitional、Framesetと
いうようなDTDの違いが存在しない。そのため、
DOCTYPEはそのページコーディングがHTML5に準
拠した記述であることのみを示す。HTML5は、
HTML4.01の後継版となるマークアップ言語ですが、
現在主流を占めているXHTML1.0との記述の互換性
を高めるため、XHTMLと同じような記述方法が許され
ている。HTML5でXHTMLの記述方法を採用する場
合、DOCTYPEは記述しなくて良いとされている。
HTML5

http://www.findmebyip.com/litmus/
CSS3とHTML5の主要ブラウザの対応状況一覧
。・Canvas
動画や画像の表示を行う
・audio
音楽の再生
・video
ビデオの再生

スタイルシート(style sheet)とはページの見栄えを
設定する技術や概念の総称
W3Cがスタイルシートを採用するときに、ひとつのスタ
イルシートですべて定義するのではなく、複数の定義方
法を持たせ、それらの優先順位を持たせることにした。
これを「段階状の滝」を意味する「cascade」(カスケー
ド)からCSS(カスケーディングスタイルシート)と呼ぶこ
とにした。
CSS

①HTMLのタグを正しく記述することが可能となる
・・・スタイルシートを使うことで、タグの意味に沿ったコーディングを行い、さら
にスタイルを割り付けることで、デザインも可能になった。
②メンテナンス性の向上
・・・HTMLドキュメントとスタイルシートを分離することによって、サイトのメンテ
ナンス性が向上
③HTMLドキュメントの軽量化
・・・HTMLドキュメントからスタイルを分離し、スタイルの一括指定や、外部ス
タイルシートを活用することで、ページに読み込ませるドキュメント全体の量を
減らすことが可能
④アクセシビリティの向上
・・・アクセシビリティとは文字の大きさを可変にしたり、色味を変更したり、音声
デバイスや点字デバイスへの対応を行うことで、多くのユーザにとって使いや
すい勝手の良いサイトにすること。
スタイルシートのメリット

検索エンジンは、収集したサイトのドキュメント構造を解
釈し、それに従ってそれぞれの要素を重み付けし蓄積
する。検索語を入力するとサーバは蓄積したデータとア
ルゴリズム（ルール）によって解釈した順番にサイトを
表示する。
これは、正しくコーディングされたHTMLドキュメントと
CSS構成されたサイトが検索エンジンによって上位に
表示される可能性が高くなることを意味する。
スタイルシートとSEO

①CSS1(Cascading Style Sheet, level 1)
②CSS2(Cascading Style Sheet, level 2)
③CSS2.1(Cascading Style Sheet, Level 2 Revision 1)
・・・CSS2のエラー修正、一部のプロパティの削除、説明変更などCSS2を修正し
たものになっている。また、CSS3を視野に入れた仕様変更も含まれている。現
在、多くの現場で使用されている。
④CSS3(Cascading Style Sheet, Level 3)
・・・CSS2の次世代バージョンとして策定作業が進められている。ドロップシャドウ
や角丸などの新しいプロパティの追加や、機能モジュール化などが検討されてい
る。
CSSのバージョン

・タグに対して固有名詞をあたえるもの
①class属性
<body>
あいうえお
あいうえお
</body>
②classセレクタ
.aiueo{color:red;}
class属性はグループ名のようなもので、同一のclass属性値は
ページ内で何回でも現れることが可能
class 属性 class セレクタ

・タグに対して固有名詞をあたえるもの
・１つのHTMLに１回しか使用できない
①id属性
<body>
あいうえお
あいうえお
</body>
②idセレクタ
#tokubetsu{color:red;}
・同一のid属性値をもつタグがページ内で重複しても、ほとんどのブラウザでスタ
イルの適応が行われるが、CSSの文法上、正しい記述ではない。
・idセレクタは、classセレクタを含む属性セレクタより優先される。
id 属性 id セレクタ

・CSSやHTMLの基本的なことは、なにげに知らないこともあって、
勉強になりました。
・Webエンジニアであれば最低限のことは理解しておく必要がある
のかなと。
・HTML5といっても、HTMLの後継版で、XHTMLと同じような記
述もできるため、まったく違うものでもないので、それほどビビること
はないのかなと思う。
・CSS3も色々なことができるらしい。例えばPhotoshopでの画像
編集などをCSSの指定とかで、良い感じで画像を表示してくれたり
とか。
まとめ

今さら聞けないHTMLとCSSについて

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to 今さら聞けないHTMLとCSSについて

Similar to 今さら聞けないHTMLとCSSについて (20)

Recently uploaded

Recently uploaded (8)

今さら聞けないHTMLとCSSについて