http://www.codeproject.com/Articles/750863/Beginners-Guide-to-HTML-CSS-Part-of
http://www.codeproject.com/Articles/753817/Beginning-with-HTML-and-CSS-Part
上記サイトから内容を抽出して、まとめてみました。
●HTMLの歴史
研究状況の確認、論文などの資料を探す、など必要な情報を効率よく行き渡らせる環境を実現するために開発された。
サーバーに情報を蓄積させ、必要な時に必要な情報をブラウザで表示するように、HTTPを使って1990年に誕生した。
2008年にHTML5草案が誕生した。
参考：http://matome.naver.jp/odai/2136874479784697001
●HTMLの基本タグ
(1) Doctype
title, style, base, link, metaタグが使われる
(2) Html
(3) Head
text, bgcolor, link, vlink, alink タグが使われる
<head>
<title>Hello World Page</title>
<base href="C:/helloworld/images/" target="_blank" />
<meta name="Author" content="Guru Prasad KB">
<meta name="keywords" content="HTML">
<meta name="description" content="HTML Beginners Guide">
</head>
(4) Body
属性で、text, bgcolor, link, alink, vlinkが使われる
※属性(attribute)は、タグ内で、text="green"といったように使われます（styleの場合はstyle="width:100px”といったように少し他と異なります）
<body text ="green" bgcolor ="lightBlue" link ="blue" alink ="red" vlink ="purple">
タグは、Text(pre, h1-h6, b, i, font ), Links(a href, a name), Formatting(p, p align, br, blockquote, ol, ul, li, img src=, hr)などが使われる
(5) p
p=paragraph(段落)の意味だったのですね。
●image
(1) Raster
スマートフォンで作成すると、Rasterイメージとなります。TasterはBMP, JPEG, GIF, PNGファイルで使われます。ファイル内に、寸法(ピクセル)と色が定義されています。
・BMP
WindowsとOS/2の32bitで定義したファイルです。高精度でファイルサイズが大きいのでWebではほとんど使いません。
・JPEG (Joint Photographic Experts Group)
色は、RGBで定義されており、静止画像を扱う不可逆圧縮方式の画像形式。圧縮率が高く、写真やフルカラーの静止画を扱う形式
・GIF
1画素あたり、8bit(256色種類)から色は使われているので、サイズは小さくなっており、主にイラストのような色数の少ない画像圧縮で使われています。アニメーションもできます。
・PNG(Portable Network Graphics)
Webページ用の標準的な画像形式の可逆圧縮方式ファイルで、GIFより圧縮率が高く、1画素あたり48ビットのカラー情報まで扱える。透明の度合いを設定できるアルファチャンネル（透明度を表すためのチャンネルあるいはデータ領域のこと）に対応している
Rasterイメージは、ブラウザサイズ変更で、荒くなります。
(2) Vector
Vectorイメージは、テキストファイル(SVGタグで作成)で作成します。
Vectorイメージはサイズ変更しても、鮮明であるが、RasterファイルをVectorに変換が大変ですので、ラインや四角などに使われます。
●フォントタグ
b(ボールド), i,(イタリック) u（アンダーライン), em(イタリック), strong(ボールド), code, q(quotesをおく), small, sub(subscript) sup(Superscript), spanタグを使います
●CSS内の意味
(1) ListにBorderをつけて、下に色をつけるサンプル
<ul style="border:double;text-align:left;width:10%">
<li style="border:groove;border-bottom-color:aquamarine;">藤沢</li>
<li style="border:groove;border-bottom-color:darkorange;">鎌倉</li>
<li style="border:groove;border-bottom-color:aquamarine;">茅ヶ崎</li>
<li style="border:groove;border-bottom-color:darkorange;">横浜</li>
<li style="border:groove;border-bottom-color:aquamarine;">川崎</li>
</ul>
・属性定義
Selector/Property/Valueで定義します。
Selector { Property: Value ; }
(例） h1 { color: #36CFFF; }
・クラス属性要素の使用方法
（例：全ての要素で、blackクラスに色を設定)
.black { color: #000000; }
<table class="black"> ....</table>
（例：h1要素で、blackクラスに色を設定)
h1.black { color: #000000; }
<h1 class="black">I am a black header-1</h1>
<h1> ....</h1> ←h1要素の色は#000000に変更されない
・ID属性要素 の使用方法
（例：全ての要素で、ID=blackに色を設定)
#black { color: #000000; }
<table id="black"> ....</table>
（例：h1要素で、blackクラスに色を設定)
h1#black { color: #000000; }
<h1 id="black"> ....</h1>
<h1> ....</h1> ←h1要素の色は#000000に変更されない
・タグ内要素属性変更の使用方法
（例：BlackGridタグ要素内のtd要素で、色を設定)
#BlackGrid td { color: #000000; }
・子要素属性変更の使用方法（例：body内p要素の、色を設定)
body > p { color: #000000; }
・div要素属性変更の使用方法（例：全てのdiv内brand要素の、色を設定)
div[brand]{ color: #000000; }
（例：全てのdiv内brand要素が"honda"の、色を設定)
div[brand="honda"]{ color: #000000; }
（例：全てのdiv内brand要素が"toyota"でない要素の、色を設定)
div[brand~="toyota"]{ color: #ffffff; } /*Selects all divs with brand attribute is not toyota*/
●長さ単位
% ： 親要素の領域や初期値を基準として、%で相対的にサイズを指定
cm ： センチメートル（1cm = 10mm）
em ： 1em = 1文字分の長さ
その時点の1文字分の高さが 1em になります。
例えば、その時点の文字サイズが14ptの場合、1em、2em、0.5emの長さは次のようになります 1em = 14pt
2em = 28pt
0.5em = 7pt
ex ： 1ex = 「x」文字の長さ
in ： インチ(1in = 2.54cm)
mm ： ミリメートル（10mm = 1cm）
pc ： バイカ(1pc = 12pt)
pt ： ポイント(72pt = 1in)
px ： ピクセル( 1px = 画面上の1ピクセル)
参考サイト：http://www.htmq.com/csskihon/011.shtml
-------------------------------------------------------------------------------
【クラスとIDの使い分け】
http://allabout.co.jp/gm/gc/23897/
●クラス
対象の要素名とclass名との間に「.」(ドット)記号を記述します。要素名は省略することもできます。
・HTML：
<p class="sakura">クラスを使った例</p>
・スタイルシート：
p.sakura { color: red; }
●ID
対象の要素名とid名との間に「#」(シャープ)記号を記述します。要素名は省略することもできます。
・HTML：
<p id="tomoyo">アイディーを使った例</p>
・スタイルシート：
p#tomoyo { color: red; }
● class属性とid属性の役割の違い
class：「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える
id：「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない（一意に表すために使う）
※仕様は、スタイルシートのソースを読み解く際にも役立ちます。装飾に「id」が使われていれば、「どこか一意に特定できる部分だけに限定した装飾なのだ」と簡単に把握できます。
なお、1ページ中に同じid名を複数回登場させても、たいていのブラウザでは問題なくスタイルを適用してくれます。これは、ブラウザ側が気を効かせて適用してくれているだけであって、HTMLの文法上では間違いです。
●id属性を使って、「ページ内リンク」を作る
<a href="#footer">ページ末尾へ</a>
idが一意であることによって、「footer」という名称のアンカーポイント(＝ページ内で「footer」という名前が付けられた位置)にジャンプするリンクができます。
0 件のコメント:
コメントを投稿