担当は整備士です。
XHTML+CSS
担当は整備士です。
XHTMLのhead要素
今回は、ろけっと開発ホームページのhead要素を見てみましょう。
ちなみに、HTMLではタグと呼んでいたものを、XHTMLでは要素と呼びます。
1〜3は、前回の「XHTMLの宣言」で書いたので飛ばします。
4 head要素の開始。
5 MIMEタイプ（メディアタイプ/文書形式）と文字コードを明示。
あまり考えず、MIMEタイプは「text/html」、文字コードは「EUC-JP」にします。
ちなみにXHTML1.1の場合、MIMEタイプは「application/xhtml+xml」にするべし（しかもmetaに書いちゃダメ）とのことらしいですが、こーすると当然、旧いブラウザとかで見えなくなっちゃったりするので、みなさん釈然としないながらもこれを入れているようです。
【参考】 XHTML1.1 XHTML1.0とXHTML1.1の違い
【参考】 XHTML1.1のMIMEタイプ指定
6 スタイルシートに、CSS（text/css）を使用していることを明示。
7 スクリプト言語に、Javascript（text/javascript）を使用していることを明示。
XHTML1.1の場合は、http-equiv属性自体が非推奨なので、これらも.htaccessとかで指定して、HTTPヘッダに直接書くみたいです。
8 文書の著者名を記述。メールアドレスを書く人もいます。
9 文書の内容の説明（概要）を記述。googleの検索結果とかにも表示されます。
10 文書のキーワードを記述。複数の単語を半角カンマ区切で書いときます。
meta要素には他にも様々な機能をもったものがありますので、必要に応じて記述しましょう。
【参考】 HTML辞典 meta要素
【参考】 HTML/XHTML meta要素
11 外部スタイルシートの読み込み。
link要素は外部文書の読み込み以外にも、他文書との関連性を明示するために記述されたりします。
【参考】 HTML辞典 link要素
【参考】 HTML/XHTML link要素
12 文書のタイトルを明示。ブラウザのタイトルバーや、お気に入りとかに表示されます。
13 head要素の終了。
おしまい。
ちなみに、HTMLではタグと呼んでいたものを、XHTMLでは要素と呼びます。
| 1 | <?xml version="1.0" encoding="EUC-JP"?> |
| 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 3 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> |
| 4 | <head> |
| 5 | <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> |
| 6 | <meta http-equiv="Content-Style-Type" content="text/css" /> |
| 7 | <meta http-equiv="Content-Script-Type" content="text/javascript" /> |
| 8 | <meta name="author" content="Rocket-div.Co.Ltd" /> |
| 9 | <meta name="description" content="ソフトウェアとウェブサイトの製作会社 株式会社ろけっと開発のホームページです。" /> |
| 10 | <meta name="keywords" content="ソフトウェア,ウェブサイト,顧客管理ソフト" /> |
| 11 | <link href="main.css" rel="stylesheet" type="text/css" media="all" /> |
| 12 | <title>株式会社ろけっと開発</title> |
| 13 | </head> |
4 head要素の開始。
5 MIMEタイプ（メディアタイプ/文書形式）と文字コードを明示。
あまり考えず、MIMEタイプは「text/html」、文字コードは「EUC-JP」にします。
ちなみにXHTML1.1の場合、MIMEタイプは「application/xhtml+xml」にするべし（しかもmetaに書いちゃダメ）とのことらしいですが、こーすると当然、旧いブラウザとかで見えなくなっちゃったりするので、みなさん釈然としないながらもこれを入れているようです。
【参考】 XHTML1.1 XHTML1.0とXHTML1.1の違い
【参考】 XHTML1.1のMIMEタイプ指定
6 スタイルシートに、CSS（text/css）を使用していることを明示。
7 スクリプト言語に、Javascript（text/javascript）を使用していることを明示。
XHTML1.1の場合は、http-equiv属性自体が非推奨なので、これらも.htaccessとかで指定して、HTTPヘッダに直接書くみたいです。
8 文書の著者名を記述。メールアドレスを書く人もいます。
9 文書の内容の説明（概要）を記述。googleの検索結果とかにも表示されます。
10 文書のキーワードを記述。複数の単語を半角カンマ区切で書いときます。
meta要素には他にも様々な機能をもったものがありますので、必要に応じて記述しましょう。
【参考】 HTML辞典 meta要素
【参考】 HTML/XHTML meta要素
11 外部スタイルシートの読み込み。
link要素は外部文書の読み込み以外にも、他文書との関連性を明示するために記述されたりします。
【参考】 HTML辞典 link要素
【参考】 HTML/XHTML link要素
12 文書のタイトルを明示。ブラウザのタイトルバーや、お気に入りとかに表示されます。
13 head要素の終了。
おしまい。
※ ブログランキングに参加しています。気がむいたときにでもクリックお願いします。
XHTML+CSS
| 2009-01-14 13:48
| Comment(0)
XHTMLの宣言
さて、これからXHTMLでコードを書いていくにあたり、最初の宣言文から軽く検証していきます。
ろけっと開発ホームページの宣言文はこんな感じになっています。
1 XML宣言。第１行目で「これはXMLだよ」と宣言します。
ウェブの標準仕様とかつくっているW3Cが、こう書くことを「強く推奨」とか言っているようなので、「じゃあ書いとくか」ってことになりますが、これを書くことでIE6での表示とかに問題が出るらしく、宣言してないページなんかも結構あったりします。 また、文字コードがUTF-8やUTF-16のときなんかも、無理には宣言しなくてもいいようです。
しかしまぁ今回は、IE6でも確認したし、文字コードもEUC-JPだし、一応書いておくかなって感じです。
【参考】 XML宣言についてのアレコレ
【参考】 xml 宣言を利用すべきか否か
【参考】 DOCTYPE宣言がないとIE7でも表示は古いまま 補足：XHTMLを使う場合の注意点
2 DOCTYPE宣言。XHTMLのバージョンとDTD（文書型定義）を宣言します。
HTML1.0のDOCTYPE宣言には以下のタイプがあります。
・ XHTML1.0 Strict ： 非推奨要素や属性などは使えない厳格タイプ。
・ XHTML1.0 Transitional ： あまり厳格でない旧いブラウザでもＯＫな互換（移行）タイプ。
・ XHTML1.0 Frameset ： frameset要素を使用するときのみ使うフレーム・タイプ。
・ XHTML Basic 1.0 ： PDAや携帯電話などで使われるベーシック・タイプ。
一般のブラウザで見てもらうのが目的のページだったら、「XHTML1.0 Strict」が無難でしょう。
【参考】 PHP & JavaScript Room XHTML 文書型宣言
3 HTML開始。html要素に名前空間と言語コードを指定します。
日本語のページならこう書いとけばＯＫです。
以上。 続く？
ろけっと開発ホームページの宣言文はこんな感じになっています。
| 1 | <?xml version="1.0" encoding="EUC-JP"?> |
| 2 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 3 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> |
ウェブの標準仕様とかつくっているW3Cが、こう書くことを「強く推奨」とか言っているようなので、「じゃあ書いとくか」ってことになりますが、これを書くことでIE6での表示とかに問題が出るらしく、宣言してないページなんかも結構あったりします。 また、文字コードがUTF-8やUTF-16のときなんかも、無理には宣言しなくてもいいようです。
しかしまぁ今回は、IE6でも確認したし、文字コードもEUC-JPだし、一応書いておくかなって感じです。
【参考】 XML宣言についてのアレコレ
【参考】 xml 宣言を利用すべきか否か
【参考】 DOCTYPE宣言がないとIE7でも表示は古いまま 補足：XHTMLを使う場合の注意点
2 DOCTYPE宣言。XHTMLのバージョンとDTD（文書型定義）を宣言します。
HTML1.0のDOCTYPE宣言には以下のタイプがあります。
・ XHTML1.0 Strict ： 非推奨要素や属性などは使えない厳格タイプ。
・ XHTML1.0 Transitional ： あまり厳格でない旧いブラウザでもＯＫな互換（移行）タイプ。
・ XHTML1.0 Frameset ： frameset要素を使用するときのみ使うフレーム・タイプ。
・ XHTML Basic 1.0 ： PDAや携帯電話などで使われるベーシック・タイプ。
一般のブラウザで見てもらうのが目的のページだったら、「XHTML1.0 Strict」が無難でしょう。
【参考】 PHP & JavaScript Room XHTML 文書型宣言
3 HTML開始。html要素に名前空間と言語コードを指定します。
日本語のページならこう書いとけばＯＫです。
以上。 続く？
※ ブログランキングに参加しています。気がむいたときにでもクリックお願いします。
XHTML+CSS
| 2009-01-13 16:52
| Comment(0)
CSSってなに？
CSSとは、Cascading Style Sheets（カスケーディング・スタイルシート）の略で、ウェブページのレイアウトやデザインの指定を行なう規格のことです。
これまで、ウェブページのレイアウトやデザイン（文字の色や大きさ、行間、背景など）の指定は、HTML文書に直接書き込んでいましたが、CSSの登場により、レイアウトやデザインに関する指定を、HTML文書から切り離して記述することができるようになりました。 これにより、HTML文書は単純化し、文書の装飾や複数のページ・レイアウトなども、一括して変更することができようになりました。
CSSの記述方法には、以下の３つの方法があります。
1．HTMLのタグ（要素）に直接書き込む
上のコードは、1行目がHTMLでの記述、2行目がCSSを使った記述の例です。文章中の、「青い」という文字だけ、青色の太字にしています。
こんな感じ。「海も青いし、空も青いよ。」
CSSを使っている方がコードも長くなり、逆に見にくくなっちゃってます。 つまり、この方法だとCSSの使う価値はあんまりないよねってことです。
2．HTML文書内に書き込む
5〜10行目がCSSに関する記述です。
6行目で固有の名前（ここでは「blue_bold」というクラス名）をつけて、スタイルを定義しています。内容は名前の後に続く｛ ｝内に、いくつでも指定しておくことができます。
13行目。ここで定義しておいた「blue_bold」というスタイルを２箇所で適用しています。
CSSの超便利なところは、このようにスタイルを１箇所で定義しておけば、複数の箇所で同一の表現を実現できること。 そして、その定義している１箇所を変更するだけで、それを適用しているところ全てのスタイルを変更することができるということです。
3．外部ファイルに書き込み、HTMLで読み込む
ちょっと長くなってしまったので、一応「つづく」にさせていただきますが、CSSがその真価を発揮するのは、外部ファイルとして読み込むときなのです。
レイアウトやデザインに関するHTMLタグの多くは、今後廃止されていく方向にありますので、ホームページをつくるにはCSSは必須にってことになりますね。 （整備士）
これまで、ウェブページのレイアウトやデザイン（文字の色や大きさ、行間、背景など）の指定は、HTML文書に直接書き込んでいましたが、CSSの登場により、レイアウトやデザインに関する指定を、HTML文書から切り離して記述することができるようになりました。 これにより、HTML文書は単純化し、文書の装飾や複数のページ・レイアウトなども、一括して変更することができようになりました。
CSSの記述方法には、以下の３つの方法があります。
1．HTMLのタグ（要素）に直接書き込む
| 1 | <p>海も<font color="#0066FF"><b>青い</b></font>し、空も<font color="#0066FF"><b>青い</b></font>よ。</p> |
| 2 | <p>海も<span style="color: #0066FF; font-weight: bold;">青い</span>し、空も<span style="color: #0066FF; font-weight: bold;">青い</span>よ。</p> |
CSSを使っている方がコードも長くなり、逆に見にくくなっちゃってます。 つまり、この方法だとCSSの使う価値はあんまりないよねってことです。
2．HTML文書内に書き込む
| 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 2 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> |
| 3 | <head> |
| 4 | <title>青い海と青い空</title> |
| 5 | <style type="text/css"> |
| 6 | .blue_bold { |
| 7 | color: #0066FF; |
| 8 | font-weight: bold; |
| 9 | } |
| 10 | </style> |
| 11 | </head> |
| 12 | <body> |
| 13 | <p>海も<span class="blue_bold">青い</span>し、空も<span class="blue_bold">青い</span>よ。</p> |
| 14 | </body> |
| 15 | </html> |
6行目で固有の名前（ここでは「blue_bold」というクラス名）をつけて、スタイルを定義しています。内容は名前の後に続く｛ ｝内に、いくつでも指定しておくことができます。
13行目。ここで定義しておいた「blue_bold」というスタイルを２箇所で適用しています。
CSSの超便利なところは、このようにスタイルを１箇所で定義しておけば、複数の箇所で同一の表現を実現できること。 そして、その定義している１箇所を変更するだけで、それを適用しているところ全てのスタイルを変更することができるということです。
3．外部ファイルに書き込み、HTMLで読み込む
ちょっと長くなってしまったので、一応「つづく」にさせていただきますが、CSSがその真価を発揮するのは、外部ファイルとして読み込むときなのです。
レイアウトやデザインに関するHTMLタグの多くは、今後廃止されていく方向にありますので、ホームページをつくるにはCSSは必須にってことになりますね。 （整備士）
※ ブログランキングに参加しています。気がむいたときにでもクリックお願いします。
XHTML+CSS
| 2009-01-09 11:49
| Comment(0)
XHTMLってなに？
XHTMLとは、HTMLをXMLの文法に基づいてより厳密に再定義したもの。
ウェブ関連技術の標準化団体W3Cにより2001年1月にXHTML1.0が勧告。
簡単に言うと、HTML4の次バージョンはXHTML1.0ってことでしょ？
と思い込み、せっせとXHTML仕様のホームページをつくってまいりました。
が、ここにきてHTML5なるものが出現してきたのです。
じゃあ、XHTMLってなに？ ってことですが…、「知りません」「考えたくありません」。
ただ、あと何年かはXHTMLでやって行くんだろうな、と思っている整備士でした。
簡単に言うと、HTML4の次バージョンはXHTML1.0ってことでしょ？
と思い込み、せっせとXHTML仕様のホームページをつくってまいりました。
が、ここにきてHTML5なるものが出現してきたのです。
じゃあ、XHTMLってなに？ ってことですが…、「知りません」「考えたくありません」。
ただ、あと何年かはXHTMLでやって行くんだろうな、と思っている整備士でした。
※ ブログランキングに参加しています。気がむいたときにでもクリックお願いします。
XHTML+CSS
| 2009-01-07 16:14
| Comment(0)