十三日目！（プロパティ～視覚整形、文字色・背景、フォント・テキスト）

少しテキストを使っての勉強は間があきましたが、続きをやっていきます。

●line-heightプロパティ
行の高さを指定単位はフォントサイズとの兼ね合い（フォントを大きくした場合にテキストの重なりが発生）の問題があるので、「１」や「１．５」といった実数でしておく方法がよく使われる。


●視覚整形モデルのプロパティ

プロパティ	効果	指定できる値	初期値	適用できる要素
display	ボックスの種類	inline,block,list-item,noneなど	inline	すべての要素
position	ボックス配置方法	static,relative,absolute,fixed	static	すべての要素
top right bottom left	ボックスの上下左右からの位置指定	長さ、％,auto	auto	配置が決められている要素（positionプロパティの値が「static」以外の要素）
z-line	ボックスの重なり順序	整数、auto	auto	配置が決められている要素（positionプロパティの値が「static」以外の要素
float	ボックスのフロート	left,right,none	none	すべての要素
clear	フロートのクリア	left,right,both,none	none	ブロックレベル要素
line-height	行の高さ	normal,実数、長さ、％	normal	すべての要素
vertical-align	行内やセル内での上下関係	baseline,top,middle,bottomなど	baseline	インライン要素、th・td要素

●visibilityプロパティ
ボックスの可視・不可視を指定します。「visible」が可視、「hidden」不可視の値。
displayプロパティで「none」と指定した場合は「非表示化」であり、ボックスは生成されませんが、visibilityプロパティで「hidden」と指定した場合は「不可視化」であり、ボックスが生成されたうえで内容が見えない状態になる、という違いに注意。

 ●overflowプロパティ
ボックスの切り抜き方法（内容がボックスからはみ出す場合の表示方法） を指定。
「visible」「hidden」「scroll」などの値が指定できる。ブラウザに任せる場合は「auto」を指定。

●colorプロパティ
文字色をRGB値やカラー名で指定します。次に解説「背景」とのコントラストが保たれていないと、テキストが読みにくくなる点に注意。

●背景のプロパティ
背景を指定するには、さまざまなプロパティがあります。背景色はbackground-colorプロパティ、背景画像はbackground-imageプロパティで指定。さらに背景画像の繰り返し方法をbackground-repeatプロパティ、開始位置をbackground-positionプロパティ、スクロールに対する移動・固定をbackground-attachmentプロパティで指定できる。これらのプロパティを一括指定するためにbackgroundという「ショートハンドプロパティ」を利用し、値をスペース区切り・順不同で指定することができる。

文字色・背景のプロパティ

プロパティ	効果	指定できる値	初期値	適用できる要素
color	文字色	#rrggbb,#rgb,カラー名など	ブラウザに依存	すべての要素
background-color	背景色	##rrggbb,#rgb,カラー名など	ブラウザに依存	すべての要素
background-image	背景画像	url(...),none	none	すべての要素
background-repeat	背景画像の繰り返し方法	repeat,repeat-x,repeat-y,no-repeat	repeat	すべての要素
background-attachment	背景画像の移動・固定	scroll,fixed	scroll	すべての要素
background-position	背景画像の開始位置	left,right,center,top,bottom,%,長さ	0% 0%	すべての要素
background	背景の一括指定	各プロパティの値をスペース区切りで	各プロパティを参照	すべての要素

●フォントのプロパティ
フォントの種類を指定するfont-family、斜体や通常体などを指定するfont-style、太さを指定するfont-weight、大きさを指定するfont-sizeプロパティなどがある。

font-familyプロパティでは、フォント名をカンマ区切りで複数指定できる。その際は、最後に総称ファミリーである「serif」「sans-serif」「cursive」「fantasy」「monospace」いずれかを指定しておくことが
推奨されている。
一般的には、明朝体を指定している場合は「serif」、ゴシック体を指定している場合は「sans-serif」を最後に指定しておく。

フォント・テキストのプロパティ

プロパティ	効果	指定できる値	初期値	適用できる要素
font-family	フォントの種類	フォント名をカンマで区切り複数指定	ブラウザに依存	すべての要素
font-style	フォントのスタイル	normal,italic,oblique	normal	すべての要素
font-weight	フォントの太さ	normal,boldなど	normal	すべての要素
font-size	フォントの大きさ	長さ、％、mediumなどのキーワード	medium	すべての要素
font	フォントの一括指定	各プロパティの値をスペース区切りで	各プロパティを参照	すべての要素
text-indent	テキストの行頭の字下げ幅	長さ、％	0	ブロックレベル要素、th・td要素など
text-align	テキストの行揃え	left,right,center,justify	テキストの表記方向に依存	ブロックレベル要素、th・td要素など
text-decoration	テキストの装飾	underline,line-through,noneなど	none	すべての要素
text-transform	テキストの大文字・小文字の変換	capitalize,uppercase,lowercase,none	none	すべての要素
letter-spacing	テキストの文字間隔	normal、長さ	normal	すべての要素
word-spacing	テキストの単語間隔	normal、長さ	normal	すべての要素

今日の投稿分から、途中、HTML編集に変えてtable要素を使って表を作りました。今までに勉強した内容にも表を作ったほうが分かりやすいと思うところがいくつかあるので、また過去の投稿分にも再編集して、表を追加しようと思います。

本日はここまで。

十二日目！（番外編～実際にＨＰを１ページ作成 その２）

また昨日分はブログ更新できませんでしたが、内容は完璧とは全然いえないですがなんとか公開しても問題のない所まで、月曜から木曜までの４日間で作成する事ができました。今日は、実際にＵＰする作業がありましたが、私はそのあたりの環境・知識がまだないので、Ｉくんに任せる形になりました。

一緒に作業して、勉強させてもらったＩくん

お忙しい中、アドバイス、指摘などたくさん教えて下さったＹさん

同じくお忙しい中、最終的にトップページの改変などして下さったＦさん

本当にありがとうございました。今後ともよろしくお願いします。

（ブログ上でイニシャルだけですがお礼申し上げます。）

●今回実際にＨＰを作ってみて勉強になった事、わかった事など。

デザイン、構成面。

　今回デザインに関しては、元々あるＨＰを流用する形で行い、ほぼそのデザインを使わせてもらったので、比較的苦労は少なかったはずです。実際に１から作るとなると相当大変なのだろうという事が予測できました。構成やテキスト内容についても、元の原稿をほぼ使用したので、多少はこちらで考えた所もありましたが、それでもなかなかいい表現などができず、アドバイスなど頂けなければ出来なかったように思います。ＨＰを掲載する側の気持ちや、見る側の気持ち、伝えたい内容など、しっかりと把握して考えなければなりません。

また、ＨＰ上、文章だと思っていた場所が、画像として作成されていて、埋め込まれているものがかなり多いんだなぁということがわかりました。そのためＨＰ作成に於いて、画像の作成や加工などの知識も必要になってくるのだと思いました。

具体的なＨＴＭＬ、ＣＳＳ作成。

　教材を使って、色んな表現をするためのＨＴＭＬ属性を勉強していたものの、実際に作成するとなるとなかなか、思ったように出来ないものでした。基本的な部分がまだかなりあやふやなので、しっかりと自分のものにしなければならないと思います。今回の作成が終わったあとに、Ｙさんから課題として、その辺をもっと勉強しておくようにアドバイス頂きました。また今回作成したＨＰのファイルは全てあるので、自分のＰＣ上だけならば、改変してブラウザで表示することができるので、今回出来なかった事などを勉強する、具体的な教材として使えるという事を教えて頂きました。

ＣＳＳについても作業中自分の思った通りに、スタイルを適応させることができず、自分の知識のなさや勉強不足な事を痛感することが多かったです。特に、細かい位置調整、画像やテキストなどのブロックで上部やサイドを揃えるといった部分、空白の大きさを揃える部分などは、どのプロパティをどのくらい変更すれば、どのくらい位置が変わるのかというのを、把握できてないため、数値を入れて、適応して、反映結果を見ながらまた数値を変えて・・・という、かなりアバウトなやりかただった様に思います。今後は、こういった部分の勉強もしっかりしていかなければならないと思いました。

今回実際にＨＰ作成したことで、自分が足りない知識、覚えていかなければいけない事などが、更に具体的にわかってきたので、今後の勉強の為にもよい経験ができたと思いました。

　

本日はここまで。

十一日目！（番外編～実際にＨＰを１ページ作成）

昨日ブログ更新しなかったんですが、昨日から、木曜日までに実際に使用するHPを１ページ作る事になりました。もちろん１人では作れませんので、社内で１番知識があるYさんにサポートやアドバイス、修正すべき箇所の指摘などをしてもらいながら、僕よりも勉強が進んでいて知識のあるIくんと２人で作業を進めています。

昨日はまず、作るＨＰの元になる原稿から、実際にどういうレイアウトにするのかというのを、Ｉ君と相談しながらラフを作成しました。私が京都、Ｉ君が神戸と離れた状態の共同作業だったので、スカイプを使ってコンタクトを取り、最終的には２通りのラフを作成して、Ｙさんに指示を仰ぐという形で終了。

今日からはＩ君が京都に来てくれて作業。まず朝はＹさんが昨日に続いて京都にいらしてくれて、昨日のラフ提出についてのダメ出し、指摘、アドバイス、今日やっておくべき事など色々教えていただきました。

まず、昨日提出したラフですが僕とＩ君とで２通り提出したんですが、２人で１つの共同作業すると言ってるんだから、話し合って１つにまとめて提出しなさいと、言われました。。。
全くそのとおりですね。
ＨＰに掲載する内容も、実際に読むであろう人の気持ち、掲載する側の“ここを伝えたい”という所をしっかり考えて、作っていかなければならないと教えてもらいました。
作業について今日の作業は、ラフを実際にＨＰで表示された時の状態と同じようなものを、ファイアーワークスを使って“画像として作成する”という事でした。

ＨＴＭＬやＣＳＳを使って組み立てていく完成型の為の見本という形でしょうか。
「なるほど、そういう作り方するんだなぁ」と思いました。パズルを作るときに見本にする完成図（パズルの箱の表面の写真など）みたいな感じなんですね。
この部分では、全体のサイズやフォントの種類や大きさ、埋め込む写真やレイアウトの際の空白や間隔なども出来る限り忠実に、同じ状態で作らなければならないようです。
私はファイアーワークスを使った事がないため、Ｉくんに任せる感じになりました。。。

昨日と今日の作業の内容はＨＰを作る際の最初のアイデア、デザインの部分だったと思います。ＨＴＭＬやＣＳＳなどの知識面に関しては、勉強して覚えてさえいけばある意味答えのはっきりしているものなので、なんとかなりそうですが、デザイン部分に関しては、正解が決まっていることではないし、掲載したい側の気持ち、見る側の人の気持ちもその都度変わるので、しっかり考えてやらないといけないため、難しいと思いました。

明日からは、ＨＴＭＬで今日作ったものを元にブラウザ同じように表示されるように、ソースコードなどを書いていきます。不安はまだまだあるのですが、がんばってやっていきたいと思います。

本日はここまで。

十日目！（セレクタ～プロパティ～）

日曜ですが、CSS進めていきます。

●セレクタの組み合わせ
セレクタは組み合わせて利用できる。たとえば「#header h1｝と指定した場合「id="header"」に子孫要素として含まれるh1要素にスタイルが適用される。

クラスや擬似クラスを利用したやや複雑な子孫セレクタの例

#main .highlight ul li a:link {
  color: #000080;
}
#main .highlight ul li a:visited {
  color: #800080;
}


●セレクタのグループ化
セレクタをカンマ区切りでグループ化し、同じスタイルを同時に適用できる

h1,h2,h3 {
  color: #ff6600;
}


子孫セレクタを利用している場合など、長いセレクタをグループ化するときは、カンマごとに改行すると見やすい。

#utility-nav ul li a:link,
#global-nav ul li a:link,
#local-nav ul li a:link {
  color: #0000cc;
}
#utility-nav ul li a:visited,
#global-nav ul li a:visited,
#local-nav ul li a:visited {
  color: #cc0000;
}


●プロパティ
ボックスモデルのプロパティ
XHTMLの要素にはそれぞれ自分の領域をもっている。領域は「四角形」ときまっていて、この四角形の領域のことを「ボックス」という。ボックスはさらに４つの領域によって構成されている。
１、内容（content）・・・・・・・・・・・・・要素含まれるテキストや画像などの内容
２、パディング（padding） ・・・・・・・・内容とボーダーとの余白
３、ボーダー（border） ・・・・・・・・・・枠線
４、マージン（margin）・・・・・・・・・・・ボーダーと他の要素の間隔

このようなしくみを「ボックスモデル」といい、CSSでページの見た目を決めていく上でもっとも大切な考え方。

●margin／paddingプロパティ
マージンとパディングは、marginプロパティとpaddingプロパティで指定。どちらも値の数によって上下左右どこに適用されるかが次のように変わってくる。

• 値がひとつ・・・・・「上下左右」
• 値がふたつ・・・・・「上下」「左右」
• 値が３つ・・・・・・・「上」「左右」「下」　　
• 値が４つ・・・・・・・「上」「右」「下」「左」

たとえば、「margin: 5px 10px 8px」という指定は値が３つなので、上が5px、左右が10px、下が8pxのマージンとなる。

●borderのプロパティ
値には「太さ」「形状」「色」をスペース区切りで指定。たとえば「1px solid #ff6600」。太さには「thin」「medium」「thick」という細・中・太の3段階の値のほか、任意の太さが指定できる。形状は一重線の「solid」、点線の「dotted」、破線の「dashed」、二重線の「double」。
太さ・形状・色は（-width、-style、-color）を別々指定したり上下左右（-top、-right、-bottom、-left)
の4辺に分割し、別々の値を設定することもできる。
たとえば、「border-bottom: 2px dashed #cc0000」

●width／heightのプロパティ
内容の幅と高さのプロパティ。マージン、ボーダー、パディングは含まれない点に注意。


●視覚整形モデルのプロパティ
displayプロパティ
生成するボックスの種類を指定。「block」「inline」「list-item」「none」などの値が指定できる。通常、ブロックレベルとして生成されるボックス（たとえばli要素）に「inline」と指定してインライン化したり、逆にインラインとして生成されるボックス（たとえばa要素）に「block」と指定してブロックレベル化する、といった目的で利用。

●positionプロパティ
ボックスの配置方法を指定。相対配置、絶対配置、固定配置を意味する「relative」「absolute」「fixed」や元の位置（通常位置）に戻すための「static」という値が指定できる。さらに、top、right、bottom、leftプロパティで細かく位置きめでき、さらにボックスの重なり順序をz-indexプロパティで指定できる。

※テキストに説明の画像とかのっていたがイマイチわからずorz

●floatプロパティ
ボックスを左右にシフトさせることを「フロート」という。floatプロパティで「right」「left」などの値が指定できる。画像を左や右に配置し、テキストを回りこませるのが代表的な使い方。

フロートの解除にはclearプロパティを利用し、「right」「left」「both」という解除方向を値として指定。

実務的には、マルチカラム（段組み）レイアウトを実現するために、これらのプロパティがよく使われる。メイン部分を左に、サイド部分を右にフロートさせ、後続の内容をクリアさせる、といった使い方。





#main {
 width: 70%;
 float:left;/*左にフロート*/
}


#side {
 width: 30%;
 float:right;/*右にフロート*/
}


#footer {
 clear:both;/*フロートのクリア*/
}






今日はここまで。

九日目！（CSS 適用、セレクタ、擬似クラス・擬似要素）

先日のブログに書いていたように、イマイチＣＳＳを理解できなかったので、実際になにか書いてみて、ＣＳＳを適用させたらもう少し、現実的にわかるのではないかということで、書いてみました。

こんな感じで書いて見ました。現段階で書いても意味がないものも含まれてるように思うのですが、とりあえず、勉強してきた事の復習もかねて、いろいろ書きました。

そして次に、同じフォルダ内に別のテキストでCSSのソースコードも書きました。

こんな感じです。中身はテキストの例にあったのを使ったので、適用されたらどうなるか？というのは知らないままソースコードうちこみました。自分で考えてやったのは、セレクタくらいしかないかもしれませんが。。








で、実際に適用してみました。

 上の黒字が適用前、でブルーの白抜き文字が適用後です。
これではじめて、「自分のPC上で書いたhtmlにＣＳＳを適用させてデザインを変える 」ということが出来ました。だいぶ理解できてきました。

まず、わかってなかった事はＣＳＳを読み込む為のソースコード
<link rel="stylesheet"type="text/css"href="TEST.css" media="screen,projection,tv"/>
この部分と、読み込む対象のＣＳＳ、TEST.cssの部分を、テキストの入力例そのままで書いていたりした為、実際に読み込ませたいCSSのソースコードが書かれたものと名前が違っていたりで、うまく適用できてませんでした。

これで、実際にＣＳＳを適用できるのかがわかったので、ソースコードだけみても、わからないものは、試してみて理解していけるので、すすみやすくなった気がします。

 それでは、昨日の続きです。

●ＸＨＴＭＬにＣＳＳを適用する方法
１．ｌink要素でＣＳＳファイルを読み込む
<link rel="stylesheet" type="text/css" href="○○○.css" />

２．@importでＣＳＳファイルを読み込む
<style type="text/css">
@import "○○○.css";
</style>

３．style要素でＣＳＳソースを指定
<style type="text/css">
p { margin: 15px;
</style>
４．style属性でＣＳＳソースを指定
<p style="margin: 15px;">テキスト</p>

これらのなかでは、１．や２．のようにＣＳＳファイルを読み込む方法が望ましい。

●ＣＳＳ内での文字コードの指定
１．や２．の方法で読み込むＣＳＳファイルの１行目には
@charset "UTF-8";
と文字コードを指定しておくのが一般的。

●ＣＳＳを適用するメディアの種類
ＣＳＳを適用するメディア（デバイスやソフトウェア）指定することができる。
パソコンのモニタやプロジェクターにＣＳＳを適用
<link rel="stylesheet" type="text/css" href="○○○.css" media="screen, projection"/>
テレビ、テレビゲーム機にＣＳＳを適用
<link rel="stylesheet" type="text/css" href="○○○.css" media="tv />
プリンターなどの印刷メディアに適用
<link rel="stylesheet" type="text/css" href="○○○.css" media="print"/>
携帯端末にＣＳＳを適用
<link rel="stylesheet" type="text/css" href="○○○.css" media="handheld"/>

●セレクタの種類
ユニバーサルセレクタ（*）
セレクタにアスタリスクを指定すると全ての要素にスタイルが適用される。

タイプセレクタ
要素名のセレクタ。その要素すべてにスタイルが適用される。たとえば、「body」や「p」と指定する。

子孫セレクタ
要素のなかの子孫要素にスタイルを適用するセレクタ。スペースで区切りセレクタをつなげる。
たとえば、「div p」と指定した場合、「div」に子孫要素として含まれる「p」に適用される。

クラスセレクタ
クラス属性でクラス名が指定された要素に適用。たとえば「.articles」は、「class="articles"」が指定された要素に適用される。

ＩＤセレクタ
id属性で、そのID名が指定された要素にスタイルを適用。「#header」は、「id="header"」が指定された要素に適用される。

●擬似クラス・擬似要素の種類
擬似クラス・擬似要素は特殊なセレクタであり、要素名や属性名、属性値を手がかりにスタイルを適用するのではなく、「状況」や「状態」（カーソルオンしたり、要素の１文字目など）をもとに適用。これが「擬似」（英語では「pseudo」）という名前の由来。

リンク擬似クラス（:link／:vidited）
未訪問リンクのときに適用する「:link」、既訪問リンクのときに適用する「:visited」。基本的にアンカー（a要素）で利用する擬似クラス。

ダイナミック擬似クラス（:hover／:focus／:active）
要素がカーソルオンされたときなどにスタイルを適用する「:hover」（ホバー）、フォーカスされたとき(選択状態になった場合など）に適用する「:focus」、 アクティブになったとき（クリック後に何らかのアクションを行っている場合など）に適用する「:active」がある。

:first-letter擬似要素（:first-letter）
要素の１文字目のみにスタイルを適用するのが「:first-letter」たとえば、段落（p要素）の１文字目だけ大きくして目立たせ、後続のテキストを回りこませるのに利用。

:before／:after擬似要素（:before／:after）
要素前後に何らかの内容を生成するためには、「:before」「:after」を利用。どちらもcontentプロパティで生成内容を指定。たとえば「p.note:before {content:"注意！";}」というスタイルでは、「class="note"」と指定されたp要素の直前に、「注意！」というテキストが生成されることになる。

今日はここまで。

八日目！（CSS基本、単位、色）

今回から、CSSの基本内容に入っていきます。前回の投稿で書いたとおり、テキストを読み進めてはいるんですが、内容が頭に入ってない状態ですがなんとか頑張っていきたいと思います。

XHTMLで製作したWEBページはそのままでもデバイスやブラウザで表示できるが、CSS（カスケーティングスタイルシート）利用することで、見た目を詳細に設定することができる。
スタイルシート言語にはいくつか種類があるがWEBデザインの世界で「スタイルシート」といえば、「CSS」を指すのが一般的。

実務的には、CSSを複数のファイルに分けて制作し、読み込み専用のCSSファイルを用意してXHTMLに適用する方法がよく利用される。

現在広く利用されているCSSのバージョンは「CSS2.1」
CSSには音声表現（読み上げ速度、強弱、音を出す方向など）を設定する仕組みも用意されているが、現在のデバイスやブラウザの機能を考えると、まだ一般的ではない。しかし、今後は「見た目」だけではなく「音声」も含めて、適切な表現が求められるようになるかもしれない。

●セレクタ、プロパティ、値
CSSでは「セレクタ」「プロパティ」「値」という3つの用語を押さえておくことが重要。
「セレクタ」はスタイルの適用範囲「プロパティ」はスタイルの種類、「値」はスタイルの具体的な内容や程度。段落（p要素）の文字を赤にする場合は
「p { color: red; }」
と指定しますが、この場合セレクタは「p」、プロパティは「color」、値は「red」。

セレクタは、まずは「h1」や「p」といったXHTMLの要素名と考える。
他にも、IDやクラスのセレクタにしたり、ある要素に含まれる子要素といった書き方も認められている。

プロパティと値はコロンで区切る。プロパティと値のセットは、セミコロンで区切って複数指定できる。
例）
p {
color: red;
font-size: 120%;
line-heighr: 1.5;
}
●コメントの書き方
CSSのソースコードにコメントを記入するには、テキストを「/*」と「*/」で囲む。
コメントは製作者が目印やメモに使うのでスタイルの適用に影響しない。

●指定できる値
CSSのプロパティそれぞれには、「指定できる値」「初期値」「適用できる要素」があらかじめ標準仕様で決められている。たとえば、背景画像の繰り返し方法を指定するための
background-repeatプロパティでは、「repeat」「repeat-x」「repeat-y」「no-repeat」が指定でき、初期値では「repeat」適用できる要素は「すべての要素」となっている。
初期値とはそのプロパティを指定していない場合に自動で設定される値。

任意の値を指定できるものもあり、たとえばフォントサイズを指定するための、font-sizeプロパティでは「120％」「10pt」といった任意の値が指定できます。
値に「0」を指定する場合、単位が省略できる（たとえば「0px」は「0」と書くことができる。）

●利用できる単位
長さ
pt ・・・ポイント（1/72インチ）
pc ・・・パイカ（12pt）
in ・・・インチ（2.54cm）
cm ・・・センチメートル
mm ・・・ミリメートル
px ・・・ピクセル
em ・・・フォントの大きさ1とする単位
ex ・・・小文字「x」大きさを1とする単位

% ・・・パーセンテージ

●色の単位
6桁のRGB値（#rrggbb）、3桁のRGB値（#reb）、カラー名（「red」など17色）が利用できる。

aqua　・・・　水色　・・・　#00ffff
black ・・・　黒　　・・・　#000000
blue ・・・　青　　・・・　#0000ff
fuchsia ・・　紫紅色・・・　#ff00ff
gray ・・・　灰色　・・・ #808080
green ・・・　緑　　・・・　#008000
lime ・・・　黄緑　・・・　#00ff00
maroon・・・　えび茶色・・　#800000
navy ・・・　紺色　・・・　#000080
olive ・・・　オリーブ色・　#808000
orange・・・　オレンジ色・　#ffa500
purple・・・　紫　　・・・　#800080
red ・・・　赤　　・・・　#0000ff
silver・・・　銀色　・・・　#c0c0c0
teal ・・・　青緑　・・・ #008080
white ・・・　白　　・・・　#ffffff
yellow・・・　黄色　・・・　#0000ff

●URL
一部のプロパティでは画像パスなどURLを指定する。「url(.....)」という形式で記述するのが一般的。
例）body { background-image: url(...images/body_bcg.gif); }
●文字列
一部のプロパティでは文字列が指定できる「"...."」（二重引用符で囲む）という形式記述。
例）body:after { content: "ページ本文はここまで";}
今日はここまで。

七日目！（XHTML続き コメント、文字参照）

201108/17から、ブログ更新中の現在も、Bloggerがバグってる？様子で、昨日は更新できませんでした。設定を、以前のエディタにすると更新できるという書き込みがあったので今はそれで書き込んでるところです。

では、XHTMLの基本つづきです。

●コメント
XHTMLには任意のコメントを入れることができる。ブラウザには表示されない。製作者が目印やメモ書きとして利用。
テキストを「<!-- 」と「-->」で囲む。

●文字参照/実体参照
XHTMLのソースコードで使う記号、たとえば「<」や「>」などをそのまま文字として記述してしまうと、ブラウザがマークアップ特有の記号と認識してしまい、きちんと表示されないことがある。
こういった記号を通常の文字として表示したり、キーボードで直接入力できない文字を指定する方法を「文字参照」という。



XHTMLの基本についてはここまでです。これからは、CSSの基本にはいっていきますが、テキストのほうは、CSSの基本部分を何度か読み進めて行ってはいるんですが、現在の所、全然わからないですorz
具体例や、実際にブラウザ上でどのように変わったのかといった図とかがないので、頭にはいってきにくい状態です。とりあえずは、書いてあることを、ブログにUPしながら再度、熟読して、少しでも理解できるようにしたいとは思ってます。

七日目の更新は、昨日にUP予定でしたが投稿できずで時間がなかったのもあり、丁度キリのいいところまで進んだので、ここまでにします。

六日目！（XHTML続き フォーム、ブロックレベル、アンカー等）

昨日は、テキストエディタ入力例の横に実際ブラウザでどのように表示されているかというのを追加する更新はしましたが、ブログは盆休みという事で休みましたので、今日が六日目になります。

●フォーム（form要素）
ユーザーによる入力や選択が可能なフォームの範囲を示すためにform要素を利用。お問い合わせフォームやアンケートフォーム、検索ボックスなど。
フォームに含めるさまざまなパーツを「フォームコントロール」と総称。ほとんどの場合、input要素で埋め込み、type属性でパーツの種類を指定。例えば、テキスト入力欄（text)や送信ボタン（submit）、チェックボックス（checkbox）など。他にも、セレクトメニューはselect属性で、複数行テキストエリアはtextarea要素で、汎用ボタンはbutton要素で埋め込む。

例）  <h1>お問い合わせ</h1>
       <p>スイートレシピへのお問い合わせは、以下のお問い合わせフォームよりお願いいたします。</p>
       <form action="./postmail.cgi" method="post">
         <dl>
           <dt><label for="name"> お名前 </label></dt>
           <dd><input type="text" size="50" name=" お名前" id="name" value="" /></dd>
           <dt><label for="email">E メール </label></dt>
           <dd><input type="text" size="50" name="E メール" id="email" value="" /></dd>
           <dt><label for="comment"> 内容 </label></dt>
           <dd>textarea name="内容" id="comment" rows="7" cols="50"></textarea></dd>
         </dl>
         <p><input type="submit" value=" お問い合わせを送る " /></p>
       </form>

form要素は「フォームパーツの入れ物」のようなものなので、中身をブロックレベル要素できちんとマークアップすることが大切。table要素でまとめたり、dl要素で「ラベル」と「パーツ」を対応させてマークアップしたり、見出しや段落を含めたりなど。
パーツのグループ化のためのfieldset要素、グループ名を指定するlegend要素、個々のパーツラベルテキストを指定するlabel要素を利用することで、フォームを更に詳細に構造化できる。

●水平線（hr要素）
ページのなかの区切りを表す「水平線」を埋め込むには、hr要素（空要素）を利用。

例）<hr />
     <address>Copyright (C) 2005-2008 Sweet Recipe, Inc. All Rights Reserved.
     </address>

必ずしもhr要素がなければコンテンツを区別できないわけではない。適当な見出しづけやdiv要素によるコンテンツの範囲設定によって、ページをきちんと構造化するのが基本。
一般的にあまりつかわれなくなってきている。

●汎用ブロックレベル要素（div要素）
ページ内コンテンツの範囲を定義する要素として、div要素を利用。

例）  <div id="heading-lead">
         <h1>チョコチップクッキーのつくり方</h1>
         <p>チョコチップクッキーを簡単につくつ方法を解説します。</p>
       </div>

div要素にはIDやクラスを振り、「ここはこういう範囲」ということを示す。CSSでは、IDやクラスを手がかりに、その部分だけスタイルを適用させることもできる。


インライン要素
●アンカー（a要素）
アンカーを定義するためにはa要素を利用。「アンカー」と書くとわかりにくいのでクリックしたら別のページに飛ぶ、という「リンク」と考えればよい。

例）  <p>詳しくは、<a href="howto/oven.html">オーブンの使い方</a>をご参照ください。なお、<a href="http://www.lets-cook.com/">○○というサイト</a>にもわかりやすい解説があります。</p>

アンカー（anchor）とはそもそも「碇」のこと。name属性をつけた場合は他の場所からの「終点」、href属性をつけた場合はリンク先への「始点」を意味することになる。
実務的には「終点」とする使いかたはほとんどしなくなってきている。
どの要素であってもid属性をつけておけば、そこをリンク先にできるから。例えば、
「<div id="materials">」という要素があれば、ファイル名（ここでは「index.html」とします）につづけて、
「index.html#materials」というURLにすれば、その部分に直接リンクできる。

●画像（img要素）
画像を埋め込むにはimg要素（空要素）を利用。src属性とalt属性が必須で、src属性で画像ファイルのURLを、alt属性で代替テキストを指定。またwidth属性とheight属性で幅と高さが指定でき、ブラウザでの画像の安定表示のためにきちんと指定しておくのが一般的。

例）  <h1>
          <img src="images/chocochip-cookie.gif" alt="チョコチップクッキーのつくり方" width="300"
          height="80
       </h1>

●改行（br要素）
テキストの途中で改行するために利用。テキストは領域幅に合わせて自動的に折り返されるが、br要素を利用することで任意の改行位置が指定できる。ソースコードのなかで改行を入れても、ブラウザの表示上はbr要素が指定されてないと改行されないので注意。

例）  <p>180度から200度に熱したオーブンで、15分から20分焼きます。<br />
       焼きあがったら、網の上に乗せて粗熱をとります。</p>

●強調（em要素とstrong要素）
テキストに「強調」という意味をあたえる要素。em要素は通常の強調、strong要素はより強い強調を意味する。ブラウザ上では、em要素はテキストがイタリック体（または斜体）で、strong要素は太字で表示される。

例）  <p>溶いた卵を<em>2、3回にわけながら</em>少しずつ加えます。</p>

●削除と追加（del要素とins要素）
テキストに「削除」という意味をあたえるにはdel要素、「追加」という意味をあたえるにはins要素を利用。ページをサーバーにアップロードして上書き保存すれば内容が自動的に更新されますが、どの内容が変更されたかをユーザーに明確に伝えたり、関係者間で共有する必要がある場合に利用。

例）  <p>温めてとかした<del>無塩バター</del><ins>チョコレート</ins>を加えて、ムラがなくなるまでしっかり混ぜます。</p>

●汎用インライン要素（span要素）
汎用的な要素。たとえば「強調という意味はないけど、テキストの色を変えたい」という場合に利用。
CSSを適用するために利用するのが一般的。

例）  <p>粉がまだ混ざりきってない状態で<span class="chocochip">チョコチップ</span>を加え、ゴムベラで粉っぽさがなくなるまでサックリ混ぜます。<span class="chocochip">チョコチップ</span>は、食感を楽しみたければ大粒のものを用意しましょう。</p>

●オブジェクト（object要素）
さまざまな外部データを埋め込む要素として利用。画像や別ページなど「ほかの場所にあるもの」を埋め込むことができる。ただし通常画像はimg要素で埋め込む。
実務的には「Flash」や動画コンテンツの埋め込みで利用。

例）<div id="keyvisual">
       <objectclassid="clsid:D27CDB6E-999X-11cf-96B8-44455354000"
       codebase="http://download.macromedia.com/pub/shockwave/cabs/
       flash/swflash.cab=version9,0,28,0" width="576" height="244"
       title="...">
         <param name="movie" value="swf/keyvisual.swf" />
         <param name="quality" value="high" />
         <img src="images/keyvisual.jpg" width="576" height="244" alt="..." />
       </object>
    </div>

今日はここまで。

五日目！（XHTML続き リスト、画像）

日曜日ですが続きをちょっとだけでも進めていきます。

※テキストエディタ入力例のとなりに、実際にブラウザでどのように表示されるかの画像を付け足しました。（8/15日更新）

●順不同リスト（ul要素）

項目を順不同で並列的に列挙するタイプのリスト。ul要素でリスト全体を囲み、項目それぞれをli要素でマークアップ。

例）<h2>材料</h2>
     <ul>
        <li>薄力粉　50グラム</li>
        <li>ベーキングパウダー　小さじ4分の1</li>
        <li>砂糖　30グラム</li>
        <li>無塩バター　50グラム</li>
        <li>卵　1個</li>
        <li>チョコレート　10グラム</li>
        <li>チョコチップ　30グラム</li>
    </ul>

料理を作るための材料は順不同なので、ul要素で。実務的には、ナビゲーションなど並列的なリンクリストもul要素でマークアップするのが一般的。

●順序リスト（ol要素）
項目を順序や順番として定義するタイプのリスト。ol要素でリスト全体を囲み、項目をそれぞれli要素でマークアップ。

例）<h2>下準備</h2>
     <ol>
        <li>薄力粉とベーキングパウダーを合わせ3回くらいふるいにかける。</li>
        <li>バターと卵は室温に戻しておく。</li>
        <li>オーブンを180度に加熱し、温めておく。</li>
        <li>チョコレートを刻んで耐熱容器にいれ、電子レンジで数秒加熱する。</li>
     </ol>

料理をつくる手順は「順序」を示す必要があるので、ol要素でマークアップ。他にも、売り上げランキングなど順位を示す場合にも利用。
ブラウザではli要素の先頭に「1.」「2.」「3.」と番号がふられる。

●定義リスト（dl要素）
「用語」と「説明」で構成するタイプのリストを定義リストという。dl要素で全体を囲み、用語をdt要素で、説明をdd要素でマークアップ。

例）<h2>用語集</h2>
     <dl>
        <dt>薄力粉</dt>
        <dd>タンパク質・グルテンが最も少ない小麦粉。粘りが弱く、菓子作りによく
              使われます。</dd>
        <dt>ベーキングパウダー</dt>
        <dd>ふくらし粉のこと。生地をふっくらと膨らませるためにつかいます。</dd>
        <dt>無塩バター</dt>
        <dd>食塩を添加してないバターのこと。通常のバターは食塩が添加されているので注意しましょう。</dd>
     </dl>

実務的には、新着情報リスト（「日付」と「内容」）、商品リスト（「商品写真」と「説明」）、役員リスト（「役職名」と「名前」）、会話リスト（「発言者」と「発言内容」）などに応用して利用。

●表（table要素）
ある内容を表として定義するために利用。単なるテキストの羅列よりも、一覧表としてまとめたほうが見やすくわかりやすいコンテンツもあるので、そういう場合に利用。

例）<h2>材料</h2>
     <table summary="材料の一覧表です。">
        <tr>
           <th>材料名</th><th>分量</th>
        </tr>
        <tr>
           <td>薄力粉</td><td>50グラム</td>
        </tr>
        <tr>
           <td>ベーキングパウダー</td><td>小さじ4分の1</td>
        </tr>
        <tr>
           <td>砂糖</td><td>30グラム</td>
        </tr>
        <tr>
           <td>無塩バター</td><td>50グラム</td>
        </tr>
        <tr>
           <td>卵</td><td>1個</td>
        </tr>
        <tr>
           <td>チョコレート</td><td>10グラム</td>
        </tr>
        <tr>
           <td>チョコチップ</td><td>30グラム</td>
        </tr>
      </table>

マークアップにおける用語法として、表の中のひとつひとつの項目を「セル（cell）」、横方向のセルの並びを「行（row）」、縦方向のセルの並びを「列（column）」と表現する。
table要素で全体を囲み、tr要素で行を定義し、ヘッダセル（見出しセル）であるth要素や、データセル（通常のセル）であるtd要素を含める。

caption要素でキャプション（表のタイトル）をつけることもできる。さらに、列グループを定義するcolgroup要素とcol要素、行グループを定義するthead要素、tfoot要素、tbody要素を利用することで、表をさらに詳細に構造化することができる。

例）<table summary="材料の一覧表です。">
       <caption>材料</caption>
       <col span="1" id="material-name" />
       <col span="1" id="material-volume" />
       <thead> 
         <tr>
            <th scope="col">材料名</th><th scope="col">分量</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>薄力粉</td><td>50グラム</td>
         </tr>
         <tr>
           <td>ベーキングパウダー</td><td>小さじ4分の1</td>
         </tr>
         <tr>
           <td>砂糖</td><td>30グラム</td>
         </tr>
         <tr>
           <td>無塩バター</td><td>50グラム</td>
         </tr>
         <tr>
           <td>卵</td><td>1個</td>
         </tr>
         <tr>
           <td>チョコレート</td><td>10グラム</td>
         </tr>
         <tr>
           <td>チョコチップ</td><td>30グラム</td>
         </tr>
        </tbody>
      </table>

ちょっと最後のやつはあんまりわからなかった。。。実際になにか作成していって何度も入力したりして使ってみないとなかなかわからないのかもしれない。

今日はここまで。
   

四日目！（XHTML続き body）

本日も昨日の続きでXHTMLの基本を本を元に読み進めて行った内容です。

●ブロックレベル要素とインライン要素
body要素（ページ本文）内を構成するものには、大きく分けて「ブロックレベル要素」と「インライン要素」の2種類ある。
ブロックレベル要素でコンテンツを構造化し、インライン要素でテキストなどに意味を与える。

ブロックレベル要素とは「ひとつの独立した集まり」という意味。見出し（h1 ～ h6要素）、段落（p要素）、リスト（ul、ol、dl要素)、表（table要素）、フォーム(form要素）など。文字どおり、コンテンツのブロック（かたまり）を定義するための要素。

インライン要素は「行内の一部」という意味で、アンカー（a要素）、画像（img要素）、強調（em、strong要素）など。ブロックレベル要素の中で一部のテキストに役割を与えたり、内容を埋め込むための要素。

（本に載っていた図をペイントで描いて貼り付けました。）



●見出し・・・見出しにはh1 ～h6まで６つのレベルがあり、h1要素は大見出し、h2要素は中見出し、h3要素は小見出しに使い、h4～h6要素は必要に応じて以下の見出しに利用するのが基本。

例）　<h1>チョコチップクッキーの作り方</h1>
       <h2>材料</h2>
       <h2>下準備</h2>
       <h2>調理方法</h2>
       <h3>生地づくり</h3>
       <h3>焼き方</h3>
       <h2>用語集</h2>


●段落（p要素）・・・段落（パラグラフ）とは「文章のひとかたまり」のこと。

例）　<h1>チョコチップクッキーの作り方</h1>
       <p>チョコチップクッキーを簡単に作る方法を解説します。</p>

実務的には、数行にわたる文章ばかりでなく、見出しやリストといった特定の役割を与えることの出来ないコンテンツもp要素としてマークアップするのが一般的。


●引用文（blockquote要素）・・・テキストをまとまった引用文として定義するのに利用。

例）　<p>著名なパティシエである〇〇〇〇さんは、</p>
       <blockquote cite="http:www.example.com/2008/11/01.html">
           <p>甘さ控えめで大人向けのチョコチップクッキーをつくるには、カカオ70％ぐらいのチョコレートをつかうのがよい。</p>
       </blockquote>
       <p>と書かれています。</p>

書籍や雑誌、他のサイトやブログから文章を引用する場合には、著作権法に従って実施。blockquote要素でマークアップし、可能ならcite属性で引用元のURLを示す。

●サイト所有者・製作者情報（address要素）・・・主にページのフッター部分で、著作権表記やサイト所有者・製作者の連絡先を指定するときに利用。

例）　<address>Copyright &copy; 2005-2008 Sweet Recipe, Inc. All Rights Reserved.</address>

多くのサイトのフッターで「Copyright © 1999-2008 Example, Inc. All Rights Reserved.」と書いてあるのは
著作権表記。


今日はここまで。

三日目！（XHTML全体像）

今日は、XHTMLをもうすこし具体的に読み進めて行った内容を書いていこうと思います。
一応、ノートにも勉強した内容を書いていますので、ブログに書き込むときは2度目だったりするんですが、実際にキーボードを使っての入力なので、練習になるんじゃないかと思います。
まだ今は、ブログを誰かに読まれることを意識した書き方とか、編集をしてないんですが、もう少し余裕ができてきて、実際に構造やデザイン的な部分が頭に入ってきたら、練習がてら、このブログで色々やっていきたいとは思っています。

ＸＨＴＭＬのバージョンには1.0と1.1があり、さらに1.0に「Strict」、「Transitional」、「Frameset」という３つの文書型がある。

●Ｓｔｒｉｃｔ　　・・・・・・　最も厳格で見栄えに関する、要素、属性を認めない。
●Ｔｒａｎｓｉｔｉｏｎａｌ・・・ 移行型、これまでのＨＴＭＬで利用されてきた、見栄えにに関する要素、属性を認める。
●Frameset ・・・・・　フレームアウト向けの要素、属性までも認める。

実務的には「XHTML1.0　Transitionｌ」を採用するのが一般的。

文書型宣言
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org
/TR/xhtml1/DTD/xhtml-transitional.dtd">

XHTML全体像(本に載っていたのをそのまま使うのはよくなさそうなので、同じような図を描いて貼り付けました）

●XML宣言・・拡張可能マークアップ言語の一種を示すための指定。
（XMLはXHTMLだけではなく、RSSやAtomなど様々な言語の上位に位置するメタ言語）
       <?xml version="1.0 encoding="UFT-8?>  。。イマイチ理解できてない。。

●文書型宣言
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org
/TR/xhtml1/DTD/xhtml1-transitional.dtd">

●html要素・・xmlns属性　xml:lang属性　lang属性を指定。
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
XHTMLではひとつの文書の中で、他のマークアップ言語を複合的に利用することが出来るため、それぞれの言語で同じ名前の要素や属性が使用されていた場合に衝突を避けるため、どの文書型の要素と属性を参照するかを指定するのが、xmlns属性。
XHTMLの場合は「http://www.w3.org/1999/xhtml」という値がきまっている。
xml:ｌang属性とlang属性ではページ全体で利用する言語コードを指定。日本語は「ja」英語は「en」
フランス語は「fr」、ドイツ語「de」、韓国語「ko」

●head要素・・htmlの子要素。「そのページの基本情報」ブラウザでは基本的に表示、表現されない部分。ページタイトルを指定する　title要素、メタ情報（そのページ全体に関わる基本データ）を指定する　meta要素、文書間関係を指定する　link要素などを含める。

●body要素・・「ページ本文」ブラウザで表示、表現される部分。具体的なコンテンツはここに含まれる。見出しを意味する　h1 ～　h6要素、コンテンツの大まかな範囲を示す　div要素、段落を示す
p要素、リストを定義する　ulやol要素、表を示す　table要素、フォームを定義する　form要素など。

ページタイトル（title要素）
head要素の中で必ず一度だけ指定。
通常、トップページではサイト名とともに「-」（ハイフン）で繋ぎ、キャッチコピーなどを含めておく。
カテゴリートップでは「カテゴリー名とサイト名」個別ページでは「ページ名、カテゴリー名、サイト名」を含めて「｜」（パイプ）で繋いでおく。

例）トップページ　　　 <title>スイートレシピ - ケーキやクッキーなどのレシピ紹介</title>
     カテゴリートップ  <title>クッキーのレシピ|スイートレシピ</title>
     個別ページ        <title>チョコチップクッキーの作り方|クッキーのレシピ|スイートのレシピ</title>

メタ情報(meta要素）
そのページに関するメタ情報は　meta要素で指定。　http-equiv属性、または　name属性を指定し、　content属性で具体的な値を指定。
多くの要素では、開始タグと終了タグで内容を囲むが、meta要素のように内容を持たない要素
（空要素）は簡略終了タグを用いて、「<meta  />」と記述。

http-equiv属性では、そのページの種類(text/html）スタイルシートの種類（text/css）スクリプトの種類（text/javascript）などを指定、title要素よりも先に指定する。

<meta http-equiv="Content-Type"content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type"content="text/css" />
<meta http-equiv="Content-Script-Type"content="text/javascript" />

name属性を指定した場合、ページ概要文（description）やキーワード（keywords）製作者（author）
著作権保有者（copyright）など製作者側が指定したいデータをメタ情報として定義　tite要素よりも後

<meta name="description" content="ページの概要文" />
<meta name="keywords" content="キーワード１、キーワード２、キーワード３" />
<meta name="author" content="株式会社～～" />
<meta name="copyright" content="Copyright &Copy;～～Inc." />

なお、http-equiv属性で指定するページの種類では（text/html）文字コードを一緒に指定しておくのが一般的で、日本語のページの場合は「ＵＴＦ-８」「Shift_JIS」「EUC-JP」などの文字コードが利用される。

文書間関係（link要素）
そのページから見て、他のページやファイルがどのような役割かを定義する。空要素。
例えば、スタイルシートやRSSファイル、目次やヘルプにあたるページ、日本語以外で作成したページなどを指定。
rel属性で関係、href属性でURL、type属性でMIMEタイプ、media属性でメディアタイプを指定。

※MIMEタイプ・・「text/html」といったクライアントとサーバー間のやりとりのフォーマットを、メディアタイプはCSSなどの適用メディアを指す。　　　　　。。いまいちわからず。。。

スタイルファイルシートの指定
<link rel="stylesheet" type="text/css" href="css/import.css" media="screen, projection, tv" />

RSSファイルの指定
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="feed.xml" />

トップページやヘルプページの指定
<link rel="contents" href="index.html" title="ホーム" />
  <link rel="help" href="guide/help.html" title="ヘルプ" />

日本語以外の言語で製作したページの指定
<link rel="alternate" type="text/html" href="index-en.html" hreflang="en" />

スタイルシート(style要素）は、ソースコードを直接XHTMLに記述してしまうと、構造に無関係な情報がXHTMLに含まれることになるので、link要素を使って外部ファイルから読み込むほうが望ましい。
CSSはstyle要素や、style属性でも適用できるが、構造と見た目の分離が徹底できない、CSSを外部ファイルで一括管理できないといったデメリットがあるので、style要素、style属性は利用せず、CSSは外部ファイルにまとめておくのが原則。
javascriptも記述せず、外部から読み込む。

今日はここまで、あんまり理解できてない部分もかなり多い。。。

二日目！（XHTMとCSSとは）

今日からは、用意してくださった教材「現場のプロから学ぶXHTML+CSS」という本を読み進めて行き、勉強していくことになりました。

まず、タイトルにある、「XHTML」も「CSS」もなんのことだかさっぱり・・・です。HTMLは昨日の勉強や、それ以前から多少の復習などなどから、なんとなくわかってきてはいたんですが。。

とりあえず、読んでみないことにはすすまないので、読み進めていくと色々なことがわかってきました。

まずは、XHTMLの「X」が「Extensible」＝広げることができる、拡張可能という意味だそうで、HTMLをさらに拡張したり、広げていけるものであるという事だと理解しました。CSSは、「Cascading Style　sheets」の略で、スタイルシートという言葉からもわかる通り、XHTMLでつくったものをきれいに見やすくデザインするもののようです。

これでちょっとだけ疑問に思ってたことが解決しました。疑問に思っていたこととは、いままでは基本的にテキストエディタに色々な要素を入力していくことのみで、HPなんかを作っていっていると思っていたので、昨日勉強したような、<font size=～や　<font color= 文字の間隔をあけたければ,<br>をいくつか並べたり、という事を駆使して、HP全体のデザインまでやっていると思っていたからです。
昨日まで勉強していた内容でも、HP上に文字列を色々と並べることはそれほど難しいと思わなかったんですが、実際のHPはそれだけでなく、デザイン的な要素が見る側にとっては重要なので、どうやってるんだろう・・・と疑問に思っていたところ、CSSがそういうデザイン部分を担当していることがわかりました。

CSSが「デザイン」担当がわかったことにより、XHTMLのほうは、「構造」を担当しているのだということも理解できました。つまりは、見栄えはCSSのほうで触れるから、XHTMLのほうは適当でいいってことではなく、構造がきちんと作られていないと、デザインもできないということのようです。

実は昨日勉強した内容で、ブログには書かなかった所があるんですが、それは、自サイト内の相対リンクの部分で、文書を「ツリー構造」としてとらえる所です。ブログに書かなかった理由に単純にツリー構造の図を書けなかったというのもあるんですが、それほど重要だと認識できなかったというほうが大きいです。
他に、書いてはいたもののあまり重要だと思ってなかったのは,<p>～</p>の段落ですね。これはエディタに入力して実際ブラウザで見ても何か具体的に見栄えが変わるものではないので、重要視せず、さらっと流していたんですが、ＣＳＳでデザインをやっていくときには、重要になってくるようです。

こうやってＸＨＴＭＬ（ＨＴＭＬ）の部分が「構造」部分を担当しているということがわかったことにより、実際に、ＨＰを作るときに載せたいことの見出しや段落などをしっかりと把握しておかなければならないこと、ＨＴＭＬのＭである「マークアップ」がそういう事なんだというのがわかりました。

今まで、少しずつＨＴＭＬのことなんかも勉強していたんですがその際に、エディタへの入力例のようなもので
<html>
    <head>
        <title>～</title>
    </head>
       <body>
         <>   </>
            <>   </>
       </body>
</html>
な感じで、ずらして入力していくのも構造を把握しやすく、見やすくするためだったのかと思うとよくわかりました。

本日はここまで。

20110810 初日スタート！

本日より具体的に勉強がスタート。とりあえずは、教えていただいたブログ、とほほのWWW入門から、ホームページ入門をやってみることに。

会社で勉強をスタートするのに先駆けて、多少は自分で予習していたところだったので、全く分からないという訳では無かった。メモ帳に実際入力して、何をすればどうなるのか？というのを確認しながら打っていきました。
やってる時は「ふむふむ、なるほど。」となるんですが
例えば　<a href= とか、<img src="xxx..拡張子" width=x height=y alt="○○">
のような 構文みたなものを学生時代に英単語や熟語を記憶したみたいに覚えていかないといけないのかと思うと、数もかなりありそうなのでちょっと不安ではあります。
とりあえず、まだ数がたくさん出てきてるわけではないので、覚える気でやったほうがいいかなーとは思っていますが。

本日の学習内容を復習
ホームページのひながた
<html>         　　　　　　　　 Hyper - Text Markup Language
<head>　　　　　　　　　　　　 ヘッダ部
<title>タイトル名</title>     タイトル
</head>
<body>         　　　　　　　　 本文
～内容～
</body>
</html>

改行　<br>   breakの略　　
太字　<b> ～ </b>  boldの略
イタリック体　<i> ～ </i>
カラー（例えば赤字）　<font color=red> ～ </font>
文字の大きさ　<font size=X> ～ </font>
                    <font size"+X"> ～ </font> 現在より、+Xレベル分大きくなる。
フォント変更　　<font face=....> ～ </font>
章や段落　<h1> ～ </h1>で囲まれた部分が章の表題。
数字は表題のレベルで１～６まで指定できる。
<p> ～ </p> 各段落の始まりを表す。</p>は省略可能だがしないほうがいい。

リスト書き　<ul>　～　</ul>  <ol>　～　</ol>

他サイトヘのリンク　<a href="http://www.yahoo.co.jp/">Yahoo!</a>
自サイトのリンクの場合、http://～を省略できる。
ページ内特定の場所へジャンプ
まず、ジャンプ先の箇所に　<a name="名前"> ～ </a> で名前をつけておく。
<a href="#名前"> ～ </a> のリンクをクリック。

別ウインドウで表示　target 属性を指定。
<a target="_blank" href="http://www.yahoo.co.jp/">Yahoo!</a>

画像の貼り付け　<img src="画像名.拡張子" width=X height=Y alt="文字">
                        widthとheightは画像サイズ、altには画像表示できないブラウザで代わりに表示させる文字を指定。　widthとheightは省略可能だが、指定したほうが表示速度が少し速い。

画像をリンクボタンに　<a href="XX.html"><img
                               src="xx.gif" border=0 height=X width=Y alt="説明">
                               </a>


本日はここまで。