助け合い掲示板 - エムペ！無料ホムペ作成

headとbody
By Ａ

2011-05-22 13:31:46
つい先ほどホームページ全体を同じに(headやカラーなどを)統一したいと[トップページ編集のカラー設定]や、[共通head]などいろいろと見て回っていました。また、他サイト様でhead、bodyなどのタグのことも調べてきました。
そこで疑問になったのですが、大抵のテンプレートではheadに文字サイズ、検索避け、カラー設定、リンク設定などをしているじゃないですか。テンプレートは個人が作っているので完璧かどうかはないにしろ、大概は同じようなheadなんです。
ですが私が調べたサイト様ではhead→style、linkなど。body→文字、カラー、リンクなど。となっていました。リンクが２つ？と思い詳しく見てみればheadのlinkはlink要素、bodyのリンクはa要素とありました。
そしてナノ様で全ページ共通して記述できるのは[共通head]のみ…。カラーはこのheadに記述してもいいのか？それとも[トップページ編集のカラー設定]で全ページに適用させなければならないのでしょうか。私は改装などをする度に共通headさえ変えれば楽だと思い、個人的にはそうしたいのですが、bodyではなくheadに記述してもいいのか…。

長くなりましたが、申し訳ありませんがheadとbodyの違いや記述できるタグの説明をしてください。よろしくお願いします。

SA002
[編集]

By たすけあい

2011-05-22 14:16:44
まず、ナノ様の仕様から説明します。
docomoブラウザ1.0で対応するCSSを適用させるには「XHTML変更する設定」をしますが、この設定をするとdocomoブラウザは「色設定」で指定したページ全体背景色・ページ全体文字色が
<body style="background-color:#色;color:#色;">
というようにbodyタグに自動挿入され、ページ全体各リンク色は
<style type="text/css"><![CODATA[a:link{color:#色;}a:visited{color:#色;}a:focas{color:#色;}]]></style>
というようにHEAD内に自動で挿入されます。
また、レイアウト内に記述されたfontタグはspanタグに変更＋インラインCSSに変更されます。及びhrタグ等もインラインCSSに変更されます。

ナノ様の場合、すべての機能でocomoブラウザ1.0に対応するCSSを適用させ、他ブラウザもCSSを適用させるには次のように設定します。

943SH
[編集]

By たすけあい

2011-05-22 16:06:58
機能すべてに共通で指定する場合
▲共通HEAD
「出力しない」に設定し、以下を記述します。
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta name="viewport" content="width=device-width;target-densitydpi=device-dpi" />
<noimode><meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /></noimode><imode><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /></imode>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="content-style-type" content="text/css" />

<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" href="/static/css/smartphone/common.css">
<link rel="apple-touch-icon" href="/favicon_sp.ico" />
<style type="text/css">
a:link{color : #～すべての機能全体のリンク色;
}
a:visited{
color : #～すべての機能全体のリンク済み色;
}
a:focas{
color : #～すべての機能全体のフォーカス時リンク色;
}
</style>

▲各機能のHEAD・HTML詳細設定内
※ DOCTYPE内
<pc><!doctype html></pc><nopc><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></nopc>

※ HTML内
デフォルトの空のまま何も記述しない。

※ HEAD内
<title>サイト名｜機能のタイトル名</title>
/*このの機能だけに適用したいCSSがあれば、ここに記述*/

※ body内
<body style="background-color:#ページ背景色;color:#ページ文字色;">

▲docomoブラウザと他ブラウザで同じ背景色とページ文字色にするには、各機能のHEAD・HTML詳細設定ごとに、body内に上記のようにインラインCSSを指定します。
body内に毎回指定は面倒でしたら、「色」設定だけでもいいと思います。「色」設定で各色を指定した場合、docomo携帯以外の端末には、HTMLの<body bgcolo="" text="" link="" vlink="" alink="">が出力されます。

▲titleタグは記述しなくても各機能の「タイトル設定」でもいいです。
titleタグを記述する場合は共通HEADではなく、各機能ごとに記述すると、ブックマークした閲覧者の方が「何のページかわかりやすくなります」

▲文書型宣言はHTML5ですが、IEも標準モードになります。また、HTML5文書型宣言をして空要素<要素名属性名="値" />の書き方をしても問題は起こりません。

▲携帯は、docomoブラウザ2.0以上は文書型宣言によって変わります。他携帯は文書型宣言なしあり関係ありませんが、XHTMLタグセットを使う場合HTML内に名前空間を記述は必須なのですが、ナノさんの仕様上、HTML内で端末振り分け独自タグが使えないため、仕方ないので何も記述せずデフォルトの空にします。

▲共通HEADを「出力しない」設定にする理由は、すべての端末に適切な指定をするためです。

943SH
[編集]

By Ａ

2011-05-22 17:24:37
返信ありがとうございます。改めて自分の書いた文を見ると本当にめちゃくちゃでした…。わざわざこんなご丁寧に説明してくださって本当にありがとうございました。

自分なりに解釈をしてみましたが、まずheadには"リンク"色、bodyには"文字"色・"背景"色と考えたらいいのですね。全て一概に考えていました。そしてdocomo1.0や他機種、全てにそれらを反映させるには共通headと各ページのHEAD･HTML詳細に書いてくださったタグを記述して、色を指定する。そうすれば同じように反映される…ということですね。

質問なんですが、当然のことだから各ページのHEAD･HTML詳細にはそれぞれのページだけに使うタグを記述してもよろしいのですよね？例えば行間、だとか。共通で設定させないものです。あと、独自タグも使われていませんし定型文にしてしまっても問題はありませんか？

SA002
[編集]

By たすけあい

2011-05-22 17:43:02
▲共通ではない指定の場合
共通に適用させたくないCSSは、各機能のHEAD内に追記でいいです。
また、上書きしたい指定(例えば、特定のリンク色を変更)なども、各機能のHEAD内に記述なさればいいです。

▲定型文利用できない指定
共通HEAD内に記述する
<noimode><meta http-equiv="content-type" content="text/html; charset=Shift_JIS" /></noimode><imode><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" /></imode>
と
各機能のHEAD・HTML詳細設定内の
※ DOCTYPE内
<pc><!doctype html></pc><nopc><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></nopc>
は、定型文を利用しないでこのまま記述します。

HEAD内に記述する指定は指定する順番がありますから、定型文を利用する場合は提示させていただいた記述の順番になるようにしてください。(下部になると適用されない指定があるため)

また、各ブラウザのリセットCSSも共通HEADに記述なさるといいです。
各ブラウザはデフォルトで各要素にmargin・padding・font-styleを持っていますから、これを一度リセットなさればブラウザ間の差異を少なくできます。
参考までに「リセットCSS」で検索なさり、貴方のデザインに合うものを適用してみてはと思います。

あと、docomoブラウザむけに「XHTMLに変換する」のデフォルト設定にしてくださいね。

検索避けをしたい場合は、ご自身でHEAD内には記述しないで、設定内でチェックなさればいいです。

検索避けをしないで、検索サイトにクロールさせたい場合は、検索避け設定のチェックはしないで、各機能のHEAD内にmeta空要素でキーワード・ページ概要・ページ作成者を記述し、link要素で連絡先(メールフォームなどのURL)・各ページのナビゲーションの記述・titleタグでページタイトルを記述なさるといいです。
これは、各機能のHEAD内ごとに記述しないと意味がないです。
(各機能は内容が違うからです)

943SH
[編集]

[1-10表示]

[返信する]

[新規トピ]

[戻る]

無料HPエムペ！