画像の中にリンクを埋め込む

Posted by muchag | HTML | 2011-07-09 (土) 11:00:28

画像の中にリンクを埋め込む手法。

概要

img タグ、map タグ、area タグの3つを組み合わせる。

img タグで画像を配置し
map タグで設定を宣言し
area タグで詳細設定を行う。
 

img

一般の img タグとの相違点は
usemap 属性。

  1. <img id="sample" src="hoge.png" usemap="#mapname" />

usemap 属性に後続の map タグの name 属性値を設定。

ページ内リンクのときと似ている。
 

map

map タグは、設定を宣言する感じ。

よって、name 属性のみで実現可能。

  1. <map name="mapname">
  2.     <area ・・・ />
  3.     <area ・・・ />
  4. </map>

「mapname」は任意。
 

area

リンクを貼りたい 形状領域リンク先 を指定する。
 

形状
shape
内容 指定方法
coords
rect 長方形 (x,y,x,y)
指定した2点の座標を対角線とする長方形
circle (x,y,r)
中心の座標と半径を指定
poly 多角形
凹凸共に可能
(x,y,x,y,・・・)
全ての頂点の座標を指定

 

形状

shape 属性。
 

  1. <area shape="rect" />
  2. <area shape="circle" />
  3. <area shape="poly" />

 

領域

coords 属性。
 

  1. <area shape="rect" coords="10,15,210,185" />
  2. <area shape="circle" coords="100,75,30" />
  3. <area shape="poly" coords="30,50,10,85,70,65" />

 

リンク

href 属性。
 

  1. <area shape="rect" coords="10,15,210,185" href="hoge.html" />
  2. <area shape="circle" coords="100,75,30" href="hoge.html" />
  3. <area shape="poly" coords="30,50,10,85,70,65" href="hoge.html" />

 

マウスイベント

onclick 属性。
onmouseover 属性。
onmouseout 属性。
onmousedown 属性。
onmouseup 属性。
 

  1. <area shape="rect" coords="10,15,210,185" href="hoge.html" onclick="sample.src='click.png'" />
  2. <area shape="circle" coords="100,75,30" href="hoge.html" onmouseover="sample.src='mouseover.png'" />
  3. <area shape="poly" coords="30,50,10,85,70,65" href="hoge.html" onmouseout="sample.src='mouseout.png'" />

 

参考元サイト

TAG index:画像内に複数リンクを設定する
eWeb:マップ

HTML | 2011-07-09 (土) 11:00:28 |

テキストボックスが伸びる

Posted by muchag | HTML | 2011-06-20 (月) 21:11:05

今日初めて遭遇して焦った。
 

現象
テキストボックスが伸びる

テキストボックスに
aaaaaaaaaaaaaaaaaaaaaaaa・・・
と試しに入力したら、テキストボックスが勝手に横へ伸びていく・・・。

jgoaijgiaegjaopiejgoaiejgapgijeapijeaijeklajejgoaijgpaioegja・・・
と滅茶苦茶に入力しても同様の結果になる。
 

自動改行されない

そしてその確認画面へ遷移したら
テーブルレイアウトにも関わらずセルの幅に合わせて自動改行されない。
 

対処

うへ! と思いグーグル先生に質問してみたら
@IT:テーブル内のラベルが自動改行されない
こんなページを見つけた。
 

結論

結果から言えば、何ていうことはない。
半角文字を連続させると、全体で1つの単語として捉えられ
テキストボックスが伸びたり自動改行がなされなかったりするようだ。

はービックリした。 :rool:

HTML | 2011-06-20 (月) 21:11:05 |

リストタグ <ul> <ol>

Posted by muchag | CSS,HTML | 2010-07-10 (土) 23:52:43

リスト表示用のHTMLタグ <ul> <ol>

今まではあんまり好きになれず使ってこなかったが
今回使いたくなったので調べてみた。
 

用例と差異

<ul> <ol> は <li> とセットで

  1. <ul>
  2.     <li>hoge</li>
  3.     <li>moge</li>
  4. </ul>
  5.  
  6. <ol>
  7.     <li>hoge</li>
  8.     <li>moge</li>
  9. </ol>

このように記述する。

実際に使ってみると

<ul>
  • hoge
  • moge

 

<ol>
  1. hoge
  2. moge

 
こんな感じ。

つまるところ <ul> と <ol> の違いは、どうやら
先頭のマーク。

<ul> は● <ol> は数字。
でも、それはデフォルトがそうっていうだけで
CSSなどで自由に設定できる。
本当にそれだけの違い・・・ですか? 🙄
 

入れ子

あ~ あと、入れ子も可能。

  1. <ul>
  2.     <li>hoge</li>
  3.     <ul>
  4.         <li>soge</li>
  5.     </ul>
  6.     <li>moge</li>
  7.     <ul>
  8.         <li>xoge</li>
  9.         <ul>
  10.             <li>goge</li>
  11.             <ul>
  12.                 <li>poge</li>
  13.                 <ul>
  14.                     <li>koge</li>
  15.                     <ul>
  16.                         <li>koge</li>
  17.                         <ul>
  18.                             <li>koge</li>
  19.                             <ul>
  20.                                 <li>koge</li>
  21.                                 <ul>
  22.                                     <li>koge</li>
  23.                                     <ul>
  24.                                         <li>koge</li>
  25.                                     </ul>
  26.                                 </ul>
  27.                             </ul>
  28.                         </ul>
  29.                     </ul>
  30.                 </ul>
  31.             </ul>
  32.         </ul>
  33.     </ul>
  34. </ul>
実例
  • hoge
    • soge
  • moge
    • xoge
      • goge
        • poge
          • koge
            • koge
              • koge
                • koge
                  • koge
                    • koge

意地になって10段階までしてみたけど、何段階までいけるんだろう・・・。
 

先頭記号の設定

CSSで設定する場合は

list-style-type : none; /* マークを使用しない */
list-style-type : disc; /* 黒い丸、デフォルト */
list-style-type : circle; /* 白い丸 */
list-style-type : square; /* 黒い四角 */
list-style-type : decimal; /* 数字 */
list-style-type : decimal-leading-zero; /* 数字(zero-fill) */
list-style-type : lower-roman; /* ローマ数字(小文字) */
list-style-type : upper-roman; /* ローマ数字(大文字) */
list-style-type : lower-greek; /* ギリシア文字(小文字) */
list-style-type : lower-alpha; /* アルファベット(小文字) */
list-style-type : upper-alpha; /* アルファベット(大文字) */
list-style-type : lower-latin; /* アルファベット(小文字) */
list-style-type : upper-latin; /* アルファベット(大文字) */
list-style-type : cjk-ideographic; /* 漢数字 */
list-style-type : hiragana; /* ひらがな */
list-style-type : katakana; /* かたかな */

<引用元>
Home > CSSリファレンス(HTML/XHTML用) > リストに関するプロパティ > リストのマークの種類

でも、ブラウザに依存するらしいので、あんまり特殊なのは使わない方がいいかも。
 

実験

さて! うちのブラウザはいかに!

none
  • hoge
  • moge
disc
  • hoge
  • moge
circle
  • hoge
  • moge
square
  • hoge
  • moge
decimal
  • hoge
  • moge
decimal-leading-zero
  • hoge
  • moge
lower-roman
  • hoge
  • moge
upper-roman
  • hoge
  • moge
lower-greek
  • hoge
  • moge
lower-alpha
  • hoge
  • moge
upper-alpha
  • hoge
  • moge
lower-latin
  • hoge
  • moge
upper-latin
  • hoge
  • moge
cjk-ideographic
  • hoge
  • moge
hiragana
  • hoge
  • moge
katakana
  • hoge
  • moge

 

結果
Firefox 3.6.6

全て表示された。

Firefox 3.5.10

全て表示された。

IE 7.0.5730.13

decimal-leading-zero ×
lower-greek ×
lower-latin ×
upper-latin ×
cjk-ideographic ×
hiragana ×
katakana ×
上記は全て disc(デフォルト)に。

IE 6.0.2900.5512.xpsp_sp3_gdr.090206-1234

decimal-leading-zero ×
lower-greek ×
lower-latin ×
upper-latin ×
cjk-ideographic ×
hiragana ×
katakana ×
上記は全て disc(デフォルト)に。
 
あなたのブラウザはいかが?

CSS,HTML | 2010-07-10 (土) 23:52:43 |

携帯シミュレータ

Posted by muchag | ActionScript,CSS,Flash,HTML,JavaScript,PHP,ガラケー | 2010-06-09 (水) 23:42:07

携帯サイトの作成については
大袈裟に言えば、全機種挙動が違うので
実機テストは無理・・・。

そこで大まかにではあるが
キャリア毎にシミュレータが存在する。

DoCoMo : iモード HTML シミュレータ Ⅱ

iモードHTMLシミュレータII
2010-06-09現在 ヴァージョン8.4
シミュレートモードというのが8段階あり、
発売時期別の大まかな仕様グループになっていて
それを見れば、どの辺の機種に対応しているか
わかりやすい。

細かい内訳は

「1」・・・
FOMA 901iシリーズ(2004年12月頃発売開始)、MOVA 505iシリーズ(2003年5月頃発売開始)・506iシリーズ(2004年5月頃発売開始)以降。
iHTML5.0 Flash Lite1.1 Deco-mail1.0

——————————————————————————–

「2」・・・
FOMA 901iSシリーズ(2005年6月頃発売開始)
iHTML5.0 Flash Lite1.1 Adobe Reader LE1.0 Deco-mail1.0 ※PDF閲覧に対応

——————————————————————————–

「3」・・・
FOMA 902iシリーズ(2005年11月頃発売開始)、702iシリーズ(2006年2月頃発売開始)以降。
iHTML6.0 Flash Lite1.1 Adobe Reader LE1.0 Deco-mail2.0 ToruCa1.0 ※トルカに対応

——————————————————————————–

「4」・・・
FOMA 903iシリーズ(2006年10月頃発売開始)、703iシリーズ(2007年1月頃発売開始)以降。
iHTML7.0 Flash Lite1.1 Adobe Reader LE2.0 Deco-mail3.0 ToruCa2.0

——————————————————————————–

「5」・・・
FOMA 903iシリーズ(2006年10月頃発売開始)、703iシリーズ(2007年1月頃発売開始)以降。
iHTML7.1 Flash Lite3.0 Adobe Reader LE2.0 Deco-mail3.0 ToruCa2.0

——————————————————————————–

「6」・・・
FOMA 905iシリーズ(2007年11月頃発売開始)、705iシリーズ(2008年1月頃発売開始)以降。
iHTML7.2 Flash Lite3.0 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.0

——————————————————————————–

「7」・・・
FOMA 906iシリーズ(2008年6月頃発売開始)以降。
iHTML7.2 Flash Lite3.1 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.1

——————————————————————————–

「8」・・・
2009年5月以降発売のシリーズ(一部機種を除く)
i-mode Browser2.0 Flash Lite3.1 Adobe Reader LE2.0 Deco-mail4.0 ToruCa2.1
※クッキー・リファラー・JavaScript、文字コードUTF-8、CSSへ対応

引用元:ReNeWDA! モバイルサイト構築の際の確認に。【iモードシミュレータ】

au : Openwave SDK6.2K

開発元が休止中らしく、公式Downloadサイトは閉鎖中、
あちこちにあるリンクはほとんど切れている。

なので実際にDLするときは こちら 。
開発中止になってから大分経つので、さすがに使い勝手が悪い。
と思ってすぐ止めた記憶が・・・。

SoftBank : Web Contents Viewer

SoftBank公式の会員専用サイトに登録して
そこからDLできる。

これは、シミュレートするだけでなく
HTMLコードを表示することができ
どこがエラーの元になっているかもわかるようになっている優れもの。

ActionScript,CSS,Flash,HTML,JavaScript,PHP,ガラケー | 2010-06-09 (水) 23:42:07 |

HTML から Flash Lite 2.0 への変数の受け渡し

Posted by muchag | Flash Lite 2.0,HTML | 2010-06-08 (火) 15:59:30

どうやら変数の受け渡し方もヴァージョンによって違うらしい。
めんど~!!!

今回は実際に成功した Flash Lite 2.0 のお話。

swfファイルへのパスを書く際に

  1. example.swf?id=1&name=hoge

のように記述してやるだけで
swfファイル内で普通に変数として利用可能。

ActionScript

  1. _root.vars_txt.text = name;

あ、そうそう。
ささっと試しただけだけど
HTML->Flash Lite 2.0 では
FlashVars属性での変数の受け渡しはできなかった。

ちなみにAS3では
受け取り方がめんどいらしい・・・。
せっかく調べたのでリンクのみ残しておこう。
Flashで遊ぼう! 13.HTMLから値を渡す

Flash Lite 2.0,HTML | 2010-06-08 (火) 15:59:30 |

swfファイルのHTMLへの埋め込み

Posted by muchag | Flash,HTML,ガラケー | 2010-06-08 (火) 15:47:08
1.PCサイト

PCサイトについては、Flashでパブリッシュを行う際に
自動的にHTMLファイルを生成してくれるので
基本事項としての注意点はIE問題。

一般的にはobjectタグで埋め込むようだが
IEはそれだと認識しないので
embedタグを併記するというわけだ。

さて、応用としてJavaScriptライブラリの
SWFObject」を利用するパターンもある。
私も実際使っている。

現在は2.0系統になっていて1.0系統とは大きく異なっている。
内容をよく見て、どちらを選ぶかは自分次第だ。

2.0系統には手法が2通り用意されていて
その2≒1.0系統のようだ。

私が実際に使っているのは1.5なので
その手法のみ掲載。

こちら から1.5をDLする。

→解凍後、swfobject.jsをルートディレクトリ作成したjsフォルダ内にUL。
jsフォルダの位置を別のところにしたら、下のパスも随時変更。

→HTMLファイルのheadタグ内に

  1. <script type="text/javascript" src="/js/swfobject.js"></script>

→bodyタグ内に

  1. <div id="FlashExample">
  2.   Flashの再生に失敗したときに表示されるテキスト
  3. </div>
  1. <script type="text/javascript">
  2.    var so = new SWFObject("flash_example.swf", "hoge", "760", "570", "8", "#336699");
  3.    so.write("FlashExample");
  4. </script>

SWFObjectの引数は
(FlashURL, name(自由), 横サイズ, 縦サイズ, FlashPlayerのヴァージョン, 背景色)

以上で出来上がり~♪
ありがたやありがたや。

2.携帯サイト

携帯サイトへswfファイルの再生方法は2つある。

◆インライン再生
HTML文書中に動画オブジェクトとして埋め込みます。
ダイヤルボタンなどでの操作は一切使えません。

◆インタラクティヴ再生
独立したコンテンツとしてフラッシュを再生します。
ダイヤルボタンなどでの操作も出来ます。
・ソフトバンクではインタラクティヴ再生を単体再生と呼んでおります。

引用元:しらぎくのウェブサイト作成入門 携帯電話向けコンテンツでフラッシュを使うには。

そしてHTMLに埋め込む方法だが

インライン再生
  1. <object data="/scripts/sample/3535/sample3535.swf" type="application/x-shockwave-flash" width="180" height="90">
  2.   <param name="bgcolor" value="#000000">
  3.   </param><param name="loop" value="on">
  4.   </param><param name="quality" value="high">
  5. </param></object>

▼objectタグ
data
 SWFファイルのURLを指定します。相対パスでも絶対パスでも指定可能です。
 
type
SWFファイルのMimeTypeを示す文字列「application/x-shockwave-flash」を設定します。
 
width
 横サイズをピクセル値の数値で指定します。
 
height
 縦サイズをピクセル値の数値で指定します。
 
▼paramタグ
bgcolor
 背景色をカラーコードまたはカラーネームで指定します。
 bodyタグでの背景色指定やFlashで指定した背景色よりも優先されます。
 カラーコード例:#000000
 カラーネーム例:red
 
loop
 連続でループ再生するかどうかを「on」「off」で指定します。
 ※「true」「false」での指定はDoCoMoの505iシリーズ、506iシリーズ及びSoftbankでサポートされていません。
 
quality
 再生画質を「high」「medium」「low」のどれかで指定します。
 ※auではサポートされていません。

引用元:携帯サイトをつくろう ケータイFlashをHTMLページ上でインライン再生させるには

インタラクティヴ再生
  1. <object id="FLASH1" declare="declare" type="application/x-shockwave-flash" data="flash.swf">
  2.     <param name="loop" value="on" />
  3.     <param name="quiality" value="high" />
  4. </object>
  5. <a iswf="#FLASH1" href="alternate.html">フラッシュ(非対応端末では静止画像)を見る</a>

・フラッシュは flash.swf
・代替コンテンツは alternate.html
・フラッシュへのID FLASH1

引用元:しらぎくのウェブサイト作成入門 携帯電話向けコンテンツでフラッシュを使うには。

Flash,HTML,ガラケー | 2010-06-08 (火) 15:47:08 |

DoCoMoのXHTML

Posted by muchag | HTML,ガラケー | 2010-05-31 (月) 14:08:20

相変わらず面倒くさいDoCoMo。

DoCoMoでXHTMLを正しく使うには

  1. <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
  2. ではなく
  3. <meta http-equiv="ContentType" content="application/xhtml+xml; charset=Shift_JIS" />

という風にmetaタグを書き換えてやらなければならない。

また、XHTMLを利用する場合は
拡張子を .xhtml にする必要がある。

もし、拡張子を変更できないなら
.htaccessで

  1. AddType application/xhtml+xml .html

と宣言してやる必要があるそうだ。

そして、.php で通すなら

  1. header("Content-type: application/xhtml+xml");

こうしてやることでXHTMLが利用できる。

参考元
iモードHTMLとiモードXHTMLを正しく切り替える方法
ドコモ端末でCSSを利用するには

HTML,ガラケー | 2010-05-31 (月) 14:08:20 |

mailto

Posted by muchag | HTML,ガラケー | 2010-05-27 (木) 18:10:06

各サイト内でよく見かける
「このサイトをお友達に紹介する」
を使いたい。

その際は基本的に以下の通り

  1. <a href="mailto:hoge@example.jp?subject=hoge&body=hoge%0D%0Ahoge%0D%0A">

※「%0D%0A」は改行コード(CL&LF)

その際の注意点を少々。

携帯サイトの場合
「CC」「BCC」

機種によって使えたり使えなかったり。

文字コード

現時点ではメールの文字コードは
「ISO-2022-JP」にするとよいっぽい。

この文字コード変換を
URLエンコード(URLエスケープ)というらしい。

HTML,ガラケー | 2010-05-27 (木) 18:10:06 |

携帯3キャリアを1ソースで!

Posted by muchag | HTML,PHP,ガラケー | 2010-05-27 (木) 13:28:54

携帯サイトはキャリア個別仕様が多くて
無駄な作業が増える一方ですなぁ。

それでも我慢して作らなきゃならない。
長いものには・・・巻かれちゃう!

ちゅうわけで覚書を。

1.DOCTYPE

3キャリアは、それぞれDOCTYPEが異なるようなので
その部分は外部ファイルに頼る。

  1. function doctype($carrier) {
  2.  
  3.     print("< ?xml version=\"1.0\" encoding=\"UTF-8\"?>\n");
  4.    
  5.     if($carrier == "DoCoMo") {
  6.    
  7.         print ("< !DOCTYPE html PUBLIC \"-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3)1.0//EN\" \"i-xhtml_4ja_10.dtd\">\n");
  8.    
  9.     }
  10.     elseif($carrier == "SoftBank") {
  11.    
  12.         print ("< !DOCTYPE html PUBLIC \"-//J-PHONE//DTD XHTML Basic 1.0 Plus//EN\" \"xhtml-basic10-plus.dtd\">\n");
  13.    
  14.     }
  15.     elseif($carrier == "EZweb") {
  16.    
  17.         print ("< !DOCTYPE html PUBLIC \"-//OPENWAVE//DTD XHTML 1.0//EN\" \"http://www.openwave.com/DTD/xhtml-basic.dtd\">\n");
  18.  
  19.     }
  20.     else {
  21.    
  22.         print
  23.         ("< !DOCTYPE html PUBLIC \"-//WAPFORUM//DTD XHTML Mobile 1.0//EN\" \"http://www.wapforum.org/DTD/xhtml-mobile10.dtd\">\n");
  24.    
  25.     } // if($carrier == "DoCoMo") {
  26.  
  27. }

こんな感じで。

ちなみに各キャリアの公式情報は
DoCoMo:iモード対応XHTMLのバージョン
au:記述のルール
Softbank:技術資料
PDFファイル P.25

2.その他注意点

参考元
モバゲーのような携帯サイトを作るための12のTips
ZFではじめる携帯サイト

HTML,PHP,ガラケー | 2010-05-27 (木) 13:28:54 |

画像ファイルのアップロード

Posted by muchag | HTML | 2008-04-23 (水) 15:57:24

PHP で、画像ファイルをアップロードする際、form タグを使う場合は

  1. <form method="post" enctype="multipart/form-data" action="example.php">
  2. </form>

と、 enctype=”multipart/form-data” を入れる必要がある。

HTML | 2008-04-23 (水) 15:57:24 |
次ページへ »