作業メモ: 2009

2009-10-22

携帯サイトについて

▼携帯サイトっぽいタグ・属性を使う
＜marquee＞スクロール★
＜br＞
＜hr＞

＜a href=”/” accesskey=”0″>あああ＜/a＞

▼気にかけること
サイトの階層はあまり深くしすぎない
ぎちぎちに。

▼その他
文字コードはShift-JIS

*****************参考サイト***********************

★HTMLタグリファレンス
http://www.htmq.com/html/marquee.shtml

★ケイタイライフ
http://mobile-net.dreamblog.jp/blog/103.html

☆携帯サイトをつくろう。
↓検索エンジンに認識させるための８つのTIPS
http://www.plusmb.jp/2009/04/03/3127.html

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

モバイルについて

◆モバイルデザイン
http://www.designwalker.com/2009/06/mobile-web.html
→デザイン見本
http://www.mobileawesomeness.com/listings/gallery/julian-andrade/

◆DOCTYPE宣言

・XHTML Basic(W3C)
・XHTML Mobile Profile(OMA)

[XHTML Basic]
＜?xml version="1.0"?＞
＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"＞

[XHTML Mobile Profile]
＜?xml version="1.0"?＞
＜!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"
"http://www.wapforum.org/DTD/xhtml-mobile10.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"＞

推奨？
→XHTML Mobile Profile

****************参考サイト****************
●サラトガIT日記
http://it.pakapaka.jp/info/297.html

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

2009-10-21

色味が変わってしまう

▼書き出したときに色が違う

プリセット右側の→をクリック
　　↓
sRGBに変換

▼そもそもデータの色が違う

編集
　↓
プロファイルを変換
　↓
プロファイル(R)をAdobe RGB(1998)に
※自分のPCの場合

***************　参考サイト　***************
◆薮田織也のフォトショップ早わかり
http://aska-sg.net/pstips/tips/pages/color-profile_jpeg-hozon.html

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

CSSを優先

CSSを優先させるとき

＜#top{ background:#ffdff9 !important ; }＞

**************　参考サイト　**************
◆HTMLタグボード
http://www.dspt.net/stylesheet_css/001/016.html

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

2009-10-13

検索エンジンへの登録方法

TACUE COM

http://www.tafcue.com/2009/04/seo-startstep001.html

2009-10-09

回り込み、にマージンを使う。

-----------------参考サイト-----------------

http://i-nyu.jugem.jp/?eid=2750

---------------------------------------------

display:inline;

をCSSに追加。すると、フロートをかけててもマージンがとれる。

.名前 {
　float:left;
　width:横幅;
　margin-right:10px;
　margin-left:10px;
　display:inline;
}

フローと解除について

＜div class="clear"＞＜/div＞を
　　↓↓
class="clearfix"だけで、済ます。

親要素の一番下に入れる要素をCSSで生成する
※下記、サイト参考

////// HTML //////

＜div class="clearfix"＞＜/div＞

////// CSS //////

.clearfix:after {
content: ".";(新しい要素をつくる)
display: block;(clearはブロックレベル要素にあてることになっているので)
clear: both;
height: 0;①
visibility: hidden;②
}

(①と②で、高さの表示されない要素に。)

.clearfix {
min-height: 1px;(IE7のためのCSS)←★
}

* html .clearfix {
height: 1px;(IE6のためのCSS)←★
/*\*//*/(MAC IE5ためのCSS)←☆
height: auto;
overflow: hidden;
/**/

★:afterがIE6・7ではサポートされていない。

* htmlをつけるとIE6以前（Mac IE5を含む）でしか効かなくなくなります。（Starハック）
/*¥*//*/と/**/で挟んだ部分はMac IE4,5にしか効きません。

▼解説＆メモ▼

:afterとは、

疑似要素。当該要素の直後を対象とする疑似要素。
(http://www.marguerite.jp/Nihongo/WWW/RefCSS/_after.htmlより)

-----------------------参考サイト---------------------
↓d-spica
http://blog.d-spica.com/entry/070307clearfix.html

--------------------------------------------------------

最新版はこっち→

2009-09-18

【ｿﾌﾄﾊﾞﾝｸ】

実機を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だと、新しい機種は、【中】のまま

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

2009-09-17

【AU】その①

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

**XHTML**

＜h2＞ダミー＜/h2＞

**CSS**

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

確認作業について

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

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

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

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

2009-09-16

＜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：お問合せ

2009-09-15

＜ｐ＞タグについて

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

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

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

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にはどっちもきく。

2009-09-10

携帯サイト色見本

★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＞

2009-10-22

2009-10-21

2009-10-13

2009-10-09

2009-09-18

2009-09-17

2009-09-16

2009-09-15

2009-09-10

2009-09-08

アマゾン和書/最新の情報

ラベル

このブログからキーワードで検索

ブログ アーカイブ

hamster

自己紹介

使用ツール、バージョンなど

便利ツール

参考本

ブログアーカイブ