個別要素関係
p要素とdiv要素の違い
p要素は段落を表すブロックレベルの要素。中には素のテキストと、インライン要素を含むことができる。
一方div要素は、単にブロックレベルの入れ物というだけ。中にブロックレベル要素も含めることができる（p要素の中にブロックレベル要素を含めることはできない）
formのcheckboxで複数の値を受け取る
以下のように同一のname属性値を持つcheckbox入力要素を複数設けても、一番後に登場するチェック済み要素のvalueだけが送られるよう。
<form action="hoge.php" method="post">
<p>
<label><input type="checkbox" name="mammal" value="dog"/>いぬ</label>
<label><input type="checkbox" name="mammal" value="cat"/>ねこ</label>
<label><input type="checkbox" name="mammal" value="deer"/>しか</label>
</p>
<p>
<input type="submit" value="送信"/>
</p>
</form>
↓ 「いぬ」と「ねこ」の両方をチェックして送信しても「ねこ」しか送られない
$_POST = array('mammal'=>'cat');
name属性の末尾を「[]」にして配列変数にすればOK[19]（受領スクリプトコードはPHPで確認、他の言語もこれが通用するのかは未確認）
<form action="hoge.php" method="post">
<p>
<label><input type="checkbox" name="mammal[]" value="dog"/>いぬ</label>
<label><input type="checkbox" name="mammal[]" value="cat"/>ねこ</label>
<label><input type="checkbox" name="mammal[]" value="deer"/>しか</label>
</p>
<p>
<input type="submit" value="送信"/>
</p>
</form>
↓ 「いぬ」と「ねこ」の両方をチェックして送信すれば両方送られる
$_POST = array('mammal'=>array(0=>'dog',1=>'cat'));
イメージマップ
XHTML1.1の場合、img要素のusemap属性はID参照で指定するためusemap="id"のようにid属性値をそのまま記述（XHTML1.0以前はURI指定のためusemap="#id"のように記す）。またmap要素の名前はid属性で指定（XHTML1.0以前はname属性）。ところがこれを厳密に守ってもイメージマップが効かないことがある。
動作互換性上は７番がいいが、XHTML1.1には非準拠。
- △：図の外に不要なハイパーリンクが出る
- ブラウザ(1)：MacOSX(10.4.11)＋Firefox 3.0.11
- ブラウザ(2)：MacOSX(10.4.11)＋Opera 9.6.4
- ブラウザ(3)：MacOSX(10.4.11)＋Safari 4.0
- 1
-
<img src="images/html_fig01.gif" usemap="#map01" alt=""/>
<map name="map01">
<area href="index.html" shape="circle" coords="50,50,20" alt="Topへ" />
</map>
- 2
-
<img src="images/html_fig01.gif" usemap="#map02" alt=""/>
<map name="map02">
<p>
<a href="index.html" shape="circle" coords="50,50,20">Topへ</a>
</p>
</map>
Applet関係
applet/object/embed要素の比較
Appletを表示するのに使える要素は applet、object、embed の3種類がある。それぞれの概要は以下の通り。object要素を使うのが
- applet要素
-
appletを表示するのに特化しており、applet表示に関しては記述しやすいが、HTML4以降では使用非推奨の要素となっている。
- object要素
-
appletの代替としてこの要素を使うことが推奨されている。appletだけではなくあらゆるオブジェクトの表示に用いることができるが、オブジェクトの型も表記しなければならないなど、記述がapplet要素に比べて煩雑。
またHTML4.01 Strict/XHTML1.0 Strict/XHTML 1.1では使用できないiframe要素をこの要素で代替。
- embed要素
-
埋め込みオブジェクトを扱う要素で、いくつかのブラウザがサポートするが、W3Cの標準規格外の要素。
object要素について
object要素は文書、画像、Flash、Java Appletなど様々なオブジェクトを埋め込むための要素。iframe要素、img要素、embed要素、applet要素の機能を全て備えたような汎用要素。
オブジェクトにパラメータを渡す際は、object要素の子要素として必要な数だけ param要素 を記述する。
<object classid=""
codetype=""
data=""
type=""
width=""
height=""
name=""
固有属性
- classid
-
オブジェクトのURI。ホームページアドレス（URL、例：http://www.hoge.com/）の他、Windowsのみで用いられていると思われるclsid（例：clsid:8AD9C840-044E-11D1-B3E9-00805F499D93→最新Java）、プラグラム名:クラス名（例：java:org.jdesktop.applet.util.JNLPAppletLauncher→環境に応じたJava OpenGL(JOGL)を自動ダウンロードするApplet Launcher）など。
- codebase
- codetype
- data
- type
- archive
- declare
- standby
汎用属性
- id, class
- lang
- dir
- title
- style
- onclick, ondbclick, onmousedown, onmouseup, onmouseover, onmouseout, onkeypress, onkeydown, onkeyup
- tabindex
- usemap
- name
object要素は指定されたオブジェクトを表示しようとするが、表示できない場合は次にobject要素内に記された別のobject要素を表示しようとする。つまり指定オブジェクトが表示できない時の表示対象次候補を子要素として記述できる。
<p>
<!-- 最初に Python applet の表示を試みる-->
<object title="The Earth as seen from space"
classid="http://www.observer.mars/TheEarth.py">
<!-- 次に MPEGビデオの表示を試みる-->
<object data="TheEarth.mpeg" type="application/mpeg">
<!-- 次に GIF画像の表示を試みる-->
<object data="TheEarth.gif" type="image/gif">
<!-- 次に テキストの表示を試みる-->
The <strong>Earth</strong> as seen from space.
</object>
</object>
</object>
Java Appletをobjectで記述する
Java Appletをobject要素で記述する場合、ブラウザによってオブジェクトを正常表示させるためのコードが異なるので、object要素を入れ子構造にしてどのブラウザでも表示できるようにする。なお、CGI、PHPなどでウェブページを表示している場合はユーザエージェント情報を見て、適したコードを返すようにすればobject要素を多重構造にしなくて済むかもしれない。
以下、分子構造ビュワーjVで、Applet Launcher（必要となるJOGLの環境に合ったものを、自動的にクライアントにダウンロードさせる仕組み）を使ったAppletについて。
【例】Macの場合
<object classid="java:org.jdesktop.applet.util.JNLPAppletLauncher"
type="application/x-java-applet" <!-- type属性:Safariでは必要、Firefox/OperaはあってもなくてもOK-->
codetype="application/java"
archive="/jv/applet-launcher.jar,
/jv/jogl.jar,
/jv/gluegen-rt.jar,
/jv/jv_signed.jar"
width="100%"
height="500">
<param name="code" value="org.jdesktop.applet.util.JNLPAppletLauncher"/>
<param name="codebase_lookup" value="false"/>
<param name="subapplet.classname" value="org.pdbj.viewer.gui.ViewerApplet"/>
<param name="noddraw.check" value="true"/>
<param name="noddraw.check.silent" value="true"/>
<param name="jnlpNumExtensions" value="1"/>
<param name="jnlpExtension1"
value="http://www.pdbj.org/jv/jogl.jnlp"/>
<param name="pdbmlURL" value="http://www.pdbj.org/XML/all-extatom/1smd-extatom.xml.gz"/>
<param name="commands" value="set picking ident;background black;select all;wireframe off;
select protein & (!hydrogen) & */1;cartoon on;color group;select (DNA || RNA) & (!hydrogen) & */1;
wireframe 50;trace 100;color group;select (DNA || RNA) & (!hydrogen) & */1 & sidechain;color shapely;
select hetero & (! water) & (!hydrogen) & */1;spacefill;color [200,200,200];select all;center;zoom 140"/>
<param name="command_area" value="true"/>
<param name="progressbar" value="true"/>
</object>
【例】Windowsの場合
jarファイルの署名
キーストア（暗号鍵の倉庫）とキーペア（公開鍵と秘密鍵の組み合わせ）を作成する。
【書式】
keytool -genkey -keyalg アルゴリズム名 -storepass パスワード -keystore ファイル名 -alias 別名 -keypass パスワード -validity 有効期限
-genkey- キーペアを作成。
-keyalg アルゴリズム名- 署名アルゴリズムを指定。
rsaなどを指定。
-storepass パスワード- キーストアのパスワード。新規キーストアの場合はパスワード設定、既存キーストアの場合はパスワード照合。
-keystore ファイル名- キーストアファイル名を指定。指定しなければホームディレクトリに
.keystoreという名前でファイルが作成される。
-alias 別名- キーペアの別名。指定しないとmykeyが指定される。
-keypass パスワード- キーペアのパスワード設定。
-validity 有効期限- キーペアの有効期限を日数で指定。
-dname 識別名-
X.500 識別名。以下のようなものが指定可能。
- cn：common name（人の通称）
- ou：organizational unit name（所属単位名、部や課などの所属部署名）
- o：organization name（より大枠の組織名）
- l：locality name（地域、都市名）
- st：stateOrProvinceName（州または地方名）
- c：countryName（２文字の国コード）
【例】
暗号鍵キーペア、キーストアを生成。暗号化アルゴリズムはRSA、キーストアパスワードはpass、
キーペアの別名はjws、キーペアパスワードはpass、有効期限は365日、
識別名は名前：mom、所属：PDBj、場所：Suita、州地方名：Osaka、国名：JP
shell> keytool -genkey -keyalg rsa -storepass pass -alias jws -keypass pass -validity 365
-dname "cn=mom,ou=PDBj,l=Suita,st=Osaka,c=JP"
jarファイルに署名する。キーペアの作成は初回のみで、２つ目以降のjarファイルには同じキーペアを使って署名する。
【書式】
jarsigner -keystore ファイル名 -storepass パスワード -keypass パスワード -signedjar 署名後ファイル名 署名前ファイル名 キーペア別名
-keystore ファイル名- キーストアファイル名を指定する。
-storepass パスワード- キーストアのパスワードを指定。
-keypass パスワード- キーペアのパスワードを指定。
-signedjar 署名後ファイル名- 署名後のjarファイル名を指定
- キーペア別名
- 署名に使用するキーペアの別名
【例】
shell> jarsigner -storepass pass -keypass pass -signedjar hoge.jar hoge_org.jar jws
YouTubeムービーをobjectで記述する
YouTubeの動画共有で表示される埋め込みコードは iframe 要素を用いて記述する内容になっている（2011/07/08現在）が、HTML 4.01 Strict などでは iframe 要素が使えず、object 要素を使ったコードに書き換える必要がある。
【Windows】
【Mac＋Safari】
【Mac＋Firefox】
iframeオブジェクトをobjectで記述する
TwitterのTweet Buttonはiframeでコードが生成されるが、これをobjectで記述する方法。
Tweet Buttonページで生成されるコードは以下のようなもの。
<a href="http://twitter.com/share"
class="twitter-share-button"
data-count="vertical | horizontal | none" ←カウント数表示位置（垂直、水平、なし）
data-via="Twitterユーザ名"
data-lang="ja">ツイート</a>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js">
</script>
これがJavaScriptによって書き換えられ、以下のようなコードになる（カウント数表示位置水平の場合）。
<iframe title="WEBサイト向けTwitter: ツイートボタン"
style="width: 130px; height: 20px;"
class="twitter-share-button twitter-count-horizontal"
src="http://platform0.twitter.com/widgets/tweet_button.html?_=1311728880115&count=horizontal&
id=twitter_tweet_button_0&lang=ja&original_referer=ボタンを設置したページのエンコード済みURL
&text=ボタンを設置したページのtitle&url=ボタンを設置したページのエンコード済みURL
&via=Twitterユーザ名"
allowtransparency="true"
scrolling="no" frameborder="0">
</iframe>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js">
</script>
iframeはHTML 4.01 Strict, XHTML 1.0 Strict, XHTML 1.1 では使えないので、これらでも使えるobject要素を使って書き換えてみる。
<object title="WEBサイト向けTwitter: ツイートボタン"
style="width: 130px; height: 20px;"
class="twitter-share-button twitter-count-horizontal"
data="http://platform0.twitter.com/widgets/tweet_button.html?_=1311728880115&count=horizontal&
id=twitter_tweet_button_0&lang=ja&original_referer=ボタンを設置したページのエンコード済みURL
&text=ボタンを設置したページのtitle&url=ボタンを設置したページのエンコード済みURL
&via=Twitterユーザ名">
<param name="allowtransparency" value="true"/>
<param name="scrolling" value="no"/>
<param name="frameborder" value="0"/>
</object>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js">
</script>
上記のように不明な灰色の帯がボタンの右側に現れて、カウント数が表示されない。下記のように高さを41px以上にすると表示される（高さを比較しやすいよう周囲に枠を表示している）。
クリックで言語表示などを切り替える（１つのHTMLファイルで）
javascriptを使ってcssを切り替える。デフォルトでは切り替えリンクのある場所がハイパーリンク様の表示形式にならないので、その部分は意図的にスタイルを設定する。
共通して使用するスタイルを記述したスタイルシートを用意し、それとは別に個別設定のスタイルシートを準備する。
表示を消すには"display:none"のスタイルを使う。
参考サイト：http://www.din.or.jp/~hagi3/JavaScript/JSTips/Std/csschg.htm
JavaScript
function replace_css(id,url){
if(!document.getElementById) return false;
var element = document.getElementById(id);
if(!element || !element.cloneNode) return false;
var new_node = element.cloneNode(true);
new_node.href = url;
element.parentNode.replaceChild(new_node,element);
return true;
}
head 要素（linkタグにid属性をつける）
<link id="ccss" rel="stylesheet" href="csschg1.css" type="text/css">
つまり、id属性を指定した link タグでスタイルシートが定義されていることが前提です
replace_css 関数は linkタグに付けた id名と、切り替えたいスタイルシートの URLを引数で指定します
具体的には、HTMLの記述を以下のようにします
<head>
<link id="ccss" rel="stylesheet" href="csschg1.css" type="text/css">
</head>
:
<a onclick="replace_css('ccss','csschg2.css');">別のスタイル</a>
:
なお、Apache web server にはWebクライアントから送られてきたWebアクセス要求に含まれるクライアントの使用言語情報に基づいて返すWebコンテンツを変える「コンテントネゴシエーション」という機能がある。言語選択についてはこれを用いる方が拡張性は高そう。
但しサーバサイドの内容なので、プロバイダの個人ホームページスペースなどでは使えないかもしれない。
css＋javascriptを用いる方法では、javascriptを無効にしている場合には切替が効かないという問題や、ページが複数存在して選択している言語情報を保持したい場合や、言語数が増えた場合はさらに処理が煩雑になるという問題がある。
アップロードするだけでそのファイルの表示内容を切り替える
javascript
window.location
window.location.hostname
css
切り替え
ローカルでしか動作しないcgiへのリンクを含むページをそのままプロバイダのスペースにアップロードすると、リンク切れなどのあるページになってしまいます。
そういう時、アップロードしたファイルのある場所（URL）を認識して、cssを切り替えられるようにしておくと便利かと思います。
JavaScriptの"windos.location.hostname"でURLのホストネーム部分が取得できます。
→どうもxhtmlにするとJavaScriptが動作しない。宣言をhtml4.01に戻すとどうかな？
→こちら
これを応用すれば、ページ内のパス記述部分にファイル位置を示す値を代入できるようにしておけば、パスが変わることによるリンク切れを防ぐことができると思われる。
ソーシャルネットワークのボタンなど
Facebook いいね!ボタン
あるURLに対してFacebookの「いいね!」（Like!）をPOSTするためのボタンを表示させるコードは以下の通り[1]。
【書式】
<div fb-xfbml-state="rendered" class="fb-like fb_edge_widget_with_comment fb_iframe_widget"
data-href="対象URL" data-send="false" data-layout="button_count" data-width="450"
data-show-faces="true">
<span style="height: 20px; width: 97px;">
<iframe src="http://www.facebook.com/plugins/like.php?api_key=&locale=表示言語コード&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Dfc865670b4f8c%26origin%3Dhttp%253A%252F%252Flegacy.pdbj.org%252Ff2d0d4bbf88d32e%26domain%3Dlegacy.ipr.pdbj.org%26relation%3Dparent.parent&href=対象URL&node_type=link&width=450&layout=button_count&colorscheme=light&show_faces=false&send=false&extended_social_context=false" class="fb_ltr" title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 20px; width: 97px;" name="f2c9df6c05a6856" id="f1e3ec0859eca2" scrolling="no"></iframe>
</span>
</div>
- 対象URL
- 参照したいURL。URLはエンコード処理をかけておく
- 表示言語コード
- ボタンに表示する文字列の指定。日本語で「いいね!」と表示するなら「ja_JP」を指定。
【例】http://legacy.pdbj.org/mom/index.php?l=ja&p=163 のいいね!ボタン
<div fb-xfbml-state="rendered" class="fb-like fb_edge_widget_with_comment fb_iframe_widget"
data-href="http://legacy.pdbj.org/mom/index.php?l=ja&p=163" data-send="false"
data-layout="button_count" data-width="450" data-show-faces="true">
<span style="height: 20px; width: 97px;">
<iframe src="http://www.facebook.com/plugins/like.php?api_key=&locale=ja_JP&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Dfc865670b4f8c%26origin%3Dhttp%253A%252F%252Flegacy.pdbj.org%252Ff2d0d4bbf88d32e%26domain%3Dlegacy.pdbj.org%26relation%3Dparent.parent&href=http%3A%2F%2Flegacy.pdbj.org%2Fmom%2Findex.php%3Fl%3Dja%26p%3D163&node_type=link&width=450&layout=button_count&colorscheme=light&show_faces=false&send=false&extended_social_context=false" class="fb_ltr" title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 20px; width: 97px;" name="f2c9df6c05a6856" id="f1e3ec0859eca2" scrolling="no"></iframe>
</span>
</div>
Lineに送る
Lineの公式サイト[2]に従ってコードを書けば、ボタンは表示されたが、クリックしても同じページがリロードされるだけでLineは起動せず。公式サイトの方法では、Android環境でうまく機能しないらしく、修正してみた[2]。しかしまだ改善せず...と思ったが、Android既定のブラウザでアクセスし、「Lineで送る」ボタンをタップしたところ、リンク先を開くを尋ねる「アプリケーションを選択」ダイアログが出て、その中にちゃんとLineがあった。AndroidのFirefoxだと動作しないらしい。
モバイルアクセス対応
通常のPC用htmlコードで書かれたページにモバイル端末でアクセスすると画面が自動縮小されて字などが小さくなって見づらい。自動縮小を防ぐにはhead要素内に <meta name="viewport" content="width=device-width">を書いておくといい。デバイスの画面幅に応じた表示にしてくれる。
また、画像のスタイル指定でmax-width: 実際の画像幅;のようにしておくと、画面幅の大きいPCでは実寸で、画面幅の小さいモバイル端末では縮小して表示してくれる。
ソーシャルネットワークのボタンなど
Facebook いいね!ボタン
あるURLに対してFacebookの「いいね!」（Like!）をPOSTするためのボタンを表示させるコードは以下の通り[1]。
【書式】 <div fb-xfbml-state="rendered" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="対象URL" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"> <span style="height: 20px; width: 97px;"> <iframe src="http://www.facebook.com/plugins/like.php?api_key=&locale=表示言語コード&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Dfc865670b4f8c%26origin%3Dhttp%253A%252F%252Flegacy.pdbj.org%252Ff2d0d4bbf88d32e%26domain%3Dlegacy.ipr.pdbj.org%26relation%3Dparent.parent&href=対象URL&node_type=link&width=450&layout=button_count&colorscheme=light&show_faces=false&send=false&extended_social_context=false" class="fb_ltr" title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 20px; width: 97px;" name="f2c9df6c05a6856" id="f1e3ec0859eca2" scrolling="no"></iframe> </span> </div>【例】http://legacy.pdbj.org/mom/index.php?l=ja&p=163 のいいね!ボタン <div fb-xfbml-state="rendered" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" data-href="http://legacy.pdbj.org/mom/index.php?l=ja&p=163" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"> <span style="height: 20px; width: 97px;"> <iframe src="http://www.facebook.com/plugins/like.php?api_key=&locale=ja_JP&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D25%23cb%3Dfc865670b4f8c%26origin%3Dhttp%253A%252F%252Flegacy.pdbj.org%252Ff2d0d4bbf88d32e%26domain%3Dlegacy.pdbj.org%26relation%3Dparent.parent&href=http%3A%2F%2Flegacy.pdbj.org%2Fmom%2Findex.php%3Fl%3Dja%26p%3D163&node_type=link&width=450&layout=button_count&colorscheme=light&show_faces=false&send=false&extended_social_context=false" class="fb_ltr" title="Like this content on Facebook." style="border: medium none; overflow: hidden; height: 20px; width: 97px;" name="f2c9df6c05a6856" id="f1e3ec0859eca2" scrolling="no"></iframe> </span> </div>Lineに送る
Lineの公式サイト[2]に従ってコードを書けば、ボタンは表示されたが、クリックしても同じページがリロードされるだけでLineは起動せず。公式サイトの方法では、Android環境でうまく機能しないらしく、修正してみた[2]。しかしまだ改善せず...と思ったが、Android既定のブラウザでアクセスし、「Lineで送る」ボタンをタップしたところ、リンク先を開くを尋ねる「アプリケーションを選択」ダイアログが出て、その中にちゃんとLineがあった。AndroidのFirefoxだと動作しないらしい。
Google+
[2]