お問い合わせなどのメールにあらかじめ文章をいれとく【スマホ】

◆メールアドレスを書き込む※PCと同じ

<p><a href="mailto:aaa@aaa">メールでのお問い合わせ</a></p>

↓↓
本文と件名に文章いれる

<p><a href="mailto:aaa@aaa?subject=件名にいれる言葉&amp;body=本文の中にはいります">メールする</a></p>

パソコンは、IE以外はそのまま見える


スマホの場合↓↓


↓↓日本語をURLエンコーディングしてはりつける


▼変換してくれるサイトはこちら▼

・Web便利ツール/URLエンコード・デコードフォーム - TAG index Webサイト
http://www.tagindex.com/tool/url.html



エンコードしたものを張り付けた例↓

<p><a href="mailto:aaa@aaa?subject=%e4%bb%b6%e5%90%8d%e3%81%ab%e3%81%84%e3%82%8c%e3%82%8b%e8%a8%80%e8%91%89&amp;body=%e6%9c%ac%e6%96%87%e3%81%ae%e4%b8%ad%e3%81%ab%e3%81%af%e3%81%84%e3%82%8a%e3%81%be%e3%81%99">メールする</a></p>

※紫の部分がエンコードした日本語部分

ベッキー mailto：をベッキーで開く win7

設定方法など↓↓
http://okwave.jp/qhttp://www.blogger.com/img/blank.gifa/q6462099.html

CSSを無効にする【javascript】

◆特定のIDのCSSを無効にする

document.getElementById("ID指定").disabled = true;

--------------------参考サイト--------------------
http://www.openspc2.org/reibun/JavaScript_technique/sample/07_css/011/index.html

htmlの中にjavascriptをいれる

◆htmlの中にjavascriptをいれる（body内）

<script type="text/javascript" >
<!--
★★★
// -->
</script>

例：

<script type="text/javascript" >
<!--
document.write("テキスト");
// -->
</script>

FC2サーバ（無料） 広告を消す【スマホ】

◆広告を消す。

イライラする広告を消す。CSS
※スマホ用のCSSがある場合

#ad_cloud_overlay_space {
display:none !important;
}

ad_cloud_overlay_spaceのIDは変わるかも



注：アカウントの削除対象になります（たぶん）

写真の背景をアニメのように加工【photshop】

加工してた人↓↓

・新海誠風な背景 | SHOUTAROU NIKKI
http://visionplus.jugem.jp/?eid=290

googleマップの貼り付け 【スマホ】

◆googleマップを使う方法は2つ

①googleマップをページ内に張り付ける

②googleマップに飛ばす



◆やり方
googleマップにアクセス
　　　　↓
住所を検索・表示
　　　　↓
右側のリンク（赤の丸枠）をおす。


Bが…googleマップをページ内に張り付ける
（そのままコピペ、サイズ調節）

Aが…googleマップに飛ばす
（＜a＞タブのリンク先に張り付けるだけ）

※Aはマップの画像の簡単な写真の下にボタンをつくって
googleマップで探すとか、住所の下にテキストリンクでいれる。

無料の写真素材を加工して使う

無料写真を下記サイトからダウンロード

不正に使用が多発したため？
残念ながら女性モデルさんが掲載終了してしまったので
文字を入れてあります。

写真のクオリティが高いもの・人間無料
・無料写真素材　足成
http://www.ashinari.com/



●加工①
肌の色を明るくしたり、色味を調節

●加工②
スタンプツールで暗い部分の肌を修正

●加工③
まつげつける（「付けまつげ」で検索、使えそうなものを拝借）


↓↓↓結果

・・・加工したし、文字なくてもいいかを思ったのですが、
悪用されても申し訳ないので文字入りです。

ナチュラルっぽくするために、唇の色などが調節してあります。

ポジションでセンターに配置

◆ポジションで配置するときに、センターにおく方法

position: absolute;
width: 800px; ←横幅
margin-left:-400px; ← widthの半分をマイナスで指定
left: 50%;

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

・教えてgooより
http://oshiete.goo.ne.jp/qa/5017853.html

怪しいサイトをしらべるとき

調べるにはこちら

↓↓

 http://www.aguse.jp/

スマホサイトをつくる【スマホ】

◆実機以外の確認方法
シミュレーター

firefoxアドオン：Default User Agent


◆どうやってつくるのか

→スマホ専用サイトつくる

→PC版と同じ、CSSをきりかえる


◆スマホデータのつくりかた(PSD/PNG)
横幅640pxでつくって、320pxでコーディング
画像がきれいになる。
※画像はサイズを指定してあげないと、読み込むときにきれちゃうときがある

※フォントはヒラギノ角ゴProかメイリオがよい



*MEMO*

→機種によって、横幅を合わせてくれるものがある
→だいたいの基準320px×480px




※横向きでも同じように見せたいときは、デザインをCSSでやる（出来る範囲…）



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

・スマートフォン向けサイトの作り方｜ユージック
http://www.u-ziq.com/blog/2011/01/post_61.html

・デザインカンプが出来るまで « takashi178.me
http://takashi178.me/2010/05/design_work_flow/
http://wp.yat-net.com/?p=2574

・スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ
http://blog.asial.co.jp/814

HTML4からHTML5でかわったこと（一部）

◆strongとemの役割/強調するタグの使いわけ　

→strong
強調箇所→重要性

→em
よくつかってないからわからん→強調



～～～例～～～

今日の課題は、「きんぴらごぼう」です。

↓↓↓（重要だとして）

<strong>今日の課題は、<em>「きんぴらごぼう」</em>です。</strong>

※必ずしも一緒に使う必要はなし

◆dlタグは定義リストという意味あいがなくなった

定義リストとして使いたい場合は、


<dt>タグの中に<dfn>で囲む。

<dl>
 <dt><dfn>なつめ そうせき</dfn></dt>
  <dd>1867年2月生まれ、日本の小説家、評論家、英文学者。</dd>
 <dt><dfn>みやざわ けんじ</dfn></dt>
  <dd>1896年8月生まれ、日本の詩人、童話作家。
 </dd>
</dl>

◆aタグにブロック要素も入れてOKになった

<a>
<dl>
 <dt><img></dt>
  <dd>きょうのごはん</dd>
</dl>
</a>
<a>
 <dl>
 <dt><img></dt>
  <dd>きのうのごはん</dd>
</dl>
</a>