【ｿﾌﾄﾊﾞﾝｸ】

実機を2機種にしてテスト
*************************
821SH・・・・H　やや新しい
803T・・・T　やや古い

*************************

★太字にする
(H)では太字になった。

strong→太字に
B→太字に
CSS指定→変わらず

(H)では見出しも太字になって表示される。

結果：基本太字は使わない方がよさげ。



★フォントの大きさ
全キャリア統一するために、ドコモにあわせて、下記で指定。

font-size:small;【小】
font-size:medium;【中】
font-size:large;【大】

やや古い機種は3段階。【大/中/小】
やや新しい機種は5段階。【特大/大/やや大？/中/小】



▼(T)の場合：
【大】表示
ｈ1～ｈ3/large/x-large/xx-large

【中】表示
ｈ４/ノーマル

【小】表示
small/x-small/xx-small


▼(H)の場合：
【特大】表示
ｈ1/xx-large

【大】表示
ｈ2/x-large

【やや大】表示
ｈ3/large

【中】表示
ｈ４/ノーマル

【小】表示
small/x-small/xx-small

※(H)のみｈ１～ｈ4は太字で表示された。



***********************************
見出しを【中】にするCSSは↓

h1,h2｛
font-size:medium;
｝

**********************************

【AU】

すべて(見出し・リスト等含む)において
padding・marginは最初はついてない

padding:0;
margin:0;

の状態。だが、

1ｐｘくらいの隙間ができる。上記のCSSを指定してもこの隙間はかわらない。

【AU】

実機を2機種にしてテスト
*************************
ｗ61CA・・・・W　やや新しい
A5506T・・・A　やや古い

*************************

★太字にする
結果：何してもならない。太字にならない。
(strong/B/CSS指定)
ということで、
見出しなどに対して、font-weight:normal;などの指定がいらない。

★フォントの大きさ
全キャリア統一するために、ドコモにあわせて、下記で指定。

font-size:small;【小】
font-size:medium;【中】
font-size:large;【大】


■見出し
h1【大】(W/A)
h2【大】(W/A)

ｈ3【中】(W/A)
ｈ4【中】(W/A)

指定無し【中】(W/A)
small【中】(W/A)
large【中】(W/A)
x-small【中】※古い機種のみ【小】
x-large【大】(W/A)
xx-small【小】(W/A)
xx-large【大】(W/A)

★他サイト参考
タイトル【中】使用
文章【中】使用
注意書き【小】
【大】あまり使われていない様子。。。


ドコモと一緒で、三段階で表示される。

***********************************
見出しを【中】にするCSSは↓

h1,h2｛
font-size:medium;
｝

文字を小さくするには、古い機種と新しい機種のことも考えると↓

｛font-size:xx-small;｝※ｘ-smallだと、新しい機種は、【中】のまま

***********************************

【AU】その①

見出しの入れこが反映されない。


**XHTML**

＜h2＞ダミー＜/h2＞


**CSS**

h2｛color:red;｝→反映される
div h2｛color:red;｝→反映されない

確認作業について

★携帯
・レイアウト
・絵文字
・色


★PC
・リンク先
・文章内容

携帯についてかいてあるサイト

★村式開墾日記
http://blog.ville.jp/2008/06/04/99

＜hr＞【帯を作る】

ｿﾌﾄﾊﾞﾝｸ→背景で指定
AU→カラーで指定

ドコモ→
＜hr style="height:10px;background:red;border:red solid;" /＞高さ・背景・ボーダー

***ボーダーをnoneにしても消えない。ので↑***

※終了タグは必須



【最新情報】

＜hr style="color:#fff;background-color:#fff;height:1px;border:0px solid #ccc;margin:0.3em 0;" size="1" /＞

* color要素はau端末がラインの色として認識する
* background-color要素はドコモとSoftBank端末がラインの色として認識する。colorと揃えておく必要がある。
* height要素はドコモとSoftBank端末がラインの高さとして認識する。
* border要素は入れておかないとドコモとSoftBank端末が勝手に黒っぽいボーダーを表示してしまう。なので背景色と同じにしておくのが良い。
* ドコモとau端末はhrタグを使うと勝手に上下に2ピクセルぐらいのマージンを付けるが、softbankは付かない。なので、margin要素を記述してその差異を吸収する。
* sizeはau端末でのラインの高さを指定している。なので、heightとそろえておく必要がある。
* ここには書いていないが、幅を指定する場合はインラインCSSでwidth:80%みたいな感じで3キャリア共通指定が可能

「適当な日々」サイトより
http://sj6.org/how_to_create_mobile_site_by_xhtml/#6

メモ

patent：特許

service：サービス
company ：会社概要 【略：co】
urgency：緊急
contact：お問合せ

＜ｐ＞タグについて

★＜ｐ＞にかかってるマージンを一緒にみせる。★

ドコモ＜ｐ＞ダミー＜/ｐ＞勝手にマージンがかかります。

ｿﾌﾄﾊﾞﾝｸ＜ｐ＞ダミー＜/ｐ＞勝手にマージンがかかります。

AUの＜ｐ＞ダミー＜/ｐ＞マージンがかからない。

*AU**
p｛margin：1.0em 0；｝

※古い機種だとemで指定するとエラいことになるので8ｐｘと指定した方がいい


*AU**
p｛margin：8ｐｘ 0；｝


※ドコモの場合文字の大きさがspanでかこまないと変わらないのであまりつかわない。

回り込みについて【ALL】※携帯

回り込みに使うのは、

＜img / align="left"①　style="float:left;"②＞


ドコモの場合＜img style="float:left;" /＞※①は不可

ｿﾌﾄﾊﾞﾝｸの場合：＜img style="float:left;" /＞

AUの場合：＜img align="left" /＞※②は不可

回り込み解除について
ドコモ:＜div style="clear:both;"＞＜/div＞
ｿﾌﾄﾊﾞﾝｸとAU:＜br clear="all" /＞※＜div style="clear:both;"＞＜/div＞でも可



*******　imgについて　********
画像にはmarginがかかります。(CSS)


******************************


*******　【AU】について　********
回り込むテキストは<ｐ>タグなどにいれない。
まわりこまなくなるから

▼反映される
＜img align="left" /＞ああああ

▼反映されない
＜img align="left" /＞＜p＞あああ＜/p＞



******************************

【ドコモ】その①

■見出しタグの大きさ
＜ｈ＞見出しタグにxx-smallを指定しても小さくならない。

→＜span＞で指定
＜ｈ＞＜span font-size:small;＞あああ＜/span＞＜/ｈ＞

■太字にする。

→太字にはならない
※spanを使っても一定



■余白をいれる。
→使えないCSS
margin/padding

結果：空白画像の高さで指。色は背景指定。

***************************************
margin/paddingはドコモは使えないが、
画像にマージンはかかる。

＜img src="img.gif" alt="ｲﾒｰｼﾞ" width="値" height="値" style="margin-bottom:8; "/＞

***************************************

-------------------
imgにはどっちもきく。

携帯サイト色見本

★HTMLで定義されている基本色16色(白を除く15色)
■■■■■■■■■■■■■■■


★ウェブセーフカラー216色(白を除く215色)

■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■　　 ■■■■■■

■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■
■■■■■■　■■■■■■　■■■■■■

【CSS名前つけ】class+id

▼主な名前【class+id】▼


全体
* wrap
* wrapper
* all_wrapper
*allwrap

ヘッダー
* head
* header

ナビ
* navi
* gnavi
* sub_navi
* gnav

コンテンツ
* main
* contents
* contents_name
* c_name

フッター
* foot
* footer


▼メインコンテンツ内でよく使うもの▼

→数字で
sec01,sec02,sec03
apply01,apply02,apply03
box01,box02,box03


→内容で
タイトルなど：head
メッセージ・挨拶：message
コース：course
申し込み：price
問合せ：contact
ブログ：blog
注意書き：warning/warn



************参考サイト*****************
■class名やid名を付ける際の一般的な名前集
http://phpspot.org/blog/archives/2007/01/classid.html


■もう、class名やid名で悩まないんだからっ！！
http://css-happylife.com/log/memo/000100.shtml


■Web標準においての、idとclassの考え方
http://ayohata.jugem.jp/?eid=320


****************************

【ドコモ編】

ドコモのフォントの大きさは、3段階【大・中・小】のみ。
ｐｘ・emは使えない。

font-size:small;【小】
font-size:medium;【中】
font-size:large;【大】


▼実機テスト▼
何にもしてない状態：【中】
あああ＜br /＞

pxで指定：【中】変化なし
＜span ＞ああああ＜/span＞＜br /＞

2emで指定：【中】変化なし
＜span ＞あああああ＜/span＞＜br /＞

見出しタグをつかう：
H1：【大】
＜h1＞あああ＜/h1＞
H2：【大】
＜h2＞あああ＜/h2＞
H3：【大】
＜h3＞あああ＜/h3＞
H4：【中】
＜h4＞あああ＜/h4＞

追加：＜body＞にCSSをかけて全体の文字を指定しても変わらない。CSSがきかない。

【ドコモ編】＜a＞リンクについて

最新：リンクについての色指定
http://sakaki0214.com/2009/11/09034850.html


ドコモのリンクの色指定。

①内部リンクのCSSで(一括)指定。

**＜head＞内***
＜style type="text/css"＞
＜!--
a：linka：visited｛
color:#FF9900;
｝
-->＜/style＞

②一部だけリンクの色を変えるとき。

＜span＞で色指定

＜a href="http://www.blogger.com/index.html"＞＜span style="color: rgb(51, 102, 204);">TOP＜/span＞＜/a＞

※下のアンダーラインの色は変わりません。削除不可。色変更も不可。
一括指定していなくてもブルーになります。


*************************その他メモ*************************

①link自体が使えない。→外部ファイル出来ない。※ドコモのみ、ソフトバンク/auは可。
＜link rel="stylesheet" href="%E5%90%8D%E5%89%8D.css" type="text/css"＞

②その他、実機でためしたこと
■「a」に直接(実記では変化なし、Dreamweaverのみ変更する。)
＜a href="index.html" style="color:#3366CC;"＞TOP＜/a＞

■divの中にいれてdivに色指定
＜div style="color:#3366CC;"＞＜a href="index.html"＞TOP＜/a＞＜/div＞

■スタイル名で指定
＜a href="index.html" class="red"＞TOP＜/a＞

■divの中にいれてクラス指定
＜div class="red"＞＜a href="index.html"＞TOP＜/a＞＜/div＞

■非推奨だけど、fontタグで
＜a href="index.html"＞＜font color="#CC6633"＞TOP＜/font＞＜/a＞

googleブログ、カテゴリ別に分ける

★グーグルブログの作り方★
http://www.seesaablog.com/2009/03/blogger.html

ガジェットの追加→ラベル

投稿右下に、カテゴリ入力

ブログでタグを入力して表示させる方法

①『<』半角を『＜』全角にする。（全くオススメしない）

②もしくは特殊文字を使う（手間）
＆lt; ＆gt;→< >


もっと簡単な方法はｺﾁﾗ→googleブログにソースを貼りつける。

携帯サイトについて【実機テスト】

◆HTML
①＜body text="#666666"＞
②＜b＞タグ

◆XHTML
①＜body style="color:#666666;"＞
②＜style="font-weight:bold;"＞