submitのボタンを画像にする場合で複数ある場合のコーディング方法

いろいろなサイトで書かれているような以下の方法では、うまくいかない。
<input name="next" type="image" value="btn_torecrute"
src="../images/other/png/btn_torecrute.png" width="84" height="24" onclick="this.form.submit(); return false;"/>

firefoxでは、return falseをとらないとvalue値を受け取ることができない。
IEではvalue値そのものが返らない。

二つボタンがある場合は、ひとつは、リンクによるコーディング(a href=)を使用するコーディング、
もうひとつは、submitを使用するコーディングにする方法がある。



<a href="recruitment_ess.html"><img src="../images/other/png/btn_torecrute.png" width="84" height="24" alt="応募要項へ ボタン" /></a>
<input name="next" type="image" alt="確認画面へ ボタン" src="../images/other/png/btn_toconfirm.png" width="84" height="24" />
<input name="next" type="hidden" value="btn_toconfirm" />

スポンサーサイト

formのボタンを画像にする方法 (input type="image")

www.webbibo.com/stylesheet/form/input_image_btn.html

上記のURLに説明がある。
上記内のJavaScriptによる方法のreturn falseは、その動作をキャンセルするという意味である。
この場合は、type="image"は、座標を返すので、これを戻さないようにするという意味である。




IEで、テーブル内に定義した文言が意図しないところで改行する。

IEで、テーブル内に定義した文言が意図しないところで改行する。
FireFoxでは問題なし。

[IE]
iefloatバグ

[FireFox]
iefloatバグ2

詳細な原因は不明であるが、IEは、thやtd配下に同一のタグがあり、かつ、floatさせると、
別のクラスを指定していても、同一配下の同じタグに引き継いでしまうようである。

今回は、以下のようなコーディングをしている。
[html]
<th>
<p>電話番号</p>
<span><img src="../images/other/png/img_essential.png" width="50" height="22" alt="必須マーク" /></span>
<p class="exp_note">(※日中ご連絡がつく番号をお願いします)</p>
</th>
<td>

[CSS]
/* テーブルヘッダ内 本文 */ 
#bty_contents table th p {
float:left;
}

/* テーブルヘッダ内 注釈 */
/* (※日中ご連絡がつく番号をお願いします) */
#bty_contents table th p.exp_note {
clear:both;
font-size:12px;
}

/* テーブルヘッダ内 必須・選択マーク配置 */
#bty_contents table th span {
float:right;
}

/* テーブルヘッダ内 本文 */  のCSSが<p class="exp_note">にも引き継がれているようである。
以下のように修正した。

[html]
<th>
<p class="bty_th_title">電話番号</p>
<span><img src="../images/other/png/img_essential.png" width="50" height="22" alt="必須マーク" /></span>
<p class="exp_note">(※日中ご連絡がつく番号をお願いします)</p>
</th>
<td>

[css]
/* テーブルヘッダ内 本文 */
#bty_contents table th p.bty_th_title {
float:left;
width:110px;
}

/* テーブルヘッダ内 注釈 */
/* (※日中ご連絡がつく番号をお願いします) */
#bty_contents table th p.exp_note {
clear:both;
font-size:12px;
}

/* テーブルヘッダ内 必須・選択マーク配置 */
#bty_contents table th span {
float:right;
}

/* テーブルヘッダ内 本文 */のCSSにWidthを追加し、htmlで個別に適用されるように
変更した。



IE6でPosition:absolite指定した画像がずれる。

絶対指定バグ
IE6以外では問題なし。

IE6は、position:absoluteを指定し、かつ、left指定するとおかしくなることがあるようである。
今回、leftt側にIE以外では765pxであったが、IE6では805px指定されていた。

上記図のCSSは以下のように指定していた。
#bty_title span#bty_title_pht img {
  position:absolute;
  top:2px;
  right:2px;
}

今回は、以下のように指定することにより回避した。
#bty_title span#bty_title_pht img {
  position:absolute;
  top:2px;
  left:765px;
}

または、以下のようにwidthを明確に指定する。
#bty_title {
 padding:0px 0px 12px 0px;
 position:relative;
 width:860px;
}

/* 応募フォーム タイトル */
#bty_title span#bty_title_pht img {
 position:absolute;
 top:2px;
 right:2px;
}


IE6,7のz-indexの解釈について

miyazakiweb.seesaa.net/article/117561935.html
learnaboutcss.blogspot.com/2010/10/ie6z-index.html

IE6,7でdroppyを使用すると、一部が隠れて表示される。

z-indexバグ

原因は、IE6,7のZ-Indexの解釈。

IE6,7は、relative指定されたBoxが複数存在すると、後に記述したrelative指定が
優先して表示されるようになっている。

上記の場合、?の部分が後に記述されているため、こちらが優先して表示された。

この場合、それぞれのCSSに以下のように定義して回避した。

?のCSS
#com_contents_right #com_contents_title {
    padding:0px 0px 15px 0px;
    position:relative;
    z-index:1; /* for IE6,7 */
}

?のCSS
#com_gnavi {
    padding:0px 20px 15px 20px;
    position:relative;
    width:860px;
    clear:both;
    z-index:2; /* for IE6,7 */
}

グローバルナビゲーションの部分が上に表示されるように、
z-index:2を指定する。

参考URL
miyazakiweb.seesaa.net/article/117561935.html
learnaboutcss.blogspot.com/2010/10/ie6z-index.html

上記二つは、z-indexに関する説明である。



IE6でフロート落ちが発生する。

IE6で以下のようなレイアウトを設定すると、フロート落ちが発生する。
IE6以外では問題なし。

原因は、IE6のwidthの解釈。
本来ならば、widthは、borderを含まないようになっているが、IE6では、
borderを含んでしまう。

そのため、設定によっては、フロート落ちが発生してしまう。
(以下参照)

+?????????????????????+
|+?????????++????????+|
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
||    A        ||      B      ||
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
||             ||             ||
|+?????????++????????+|
+?????????????????????+

上記のようにBoxを指定し、AにフロートとPadding-rightを設定し、
Bにフロートを設定すると、フロート落ちが発生する。

これを回避するためには、以下のようにする。
(1):Aのwidthをpadding-rightを含んだ値で設定する。
(2):Bのwidthを設定する。(これを忘れるとフロート落ちの原因になる。)


IE6で、テキストとイメージを同一行に設定した場合、line-heightが無効になる。

ie6は、imgタグとテキストを同一行に設定すると、
line-heightが無効になるようである。

imgタグにpadding-bottomを設定することにより回避した。

PHPで年月日の年,月,日単位で取り出すことができない

下記のようなコーディングをしたところ、19700822が取り出されてしまう。

// 指定日の年を求める(yyyy)
    $l_app_year = date("Y",$arg_app_date);
    // 指定日の月を求める(mm)
    $l_app_month = date("m",$arg_app_date);
    // 指定日の日を求める(dd)
    $l_app_day = date("d",$arg_app_date);

いったんdate_create関数でDateTime オブジェクトを作成し、
date_format関数で年月日単位に取り出すようにする。

    $l_dcreate = date_create($arg_b_date);
    // 基準日の年を求める(yyyy)
    $l_b_year = date_format($l_dcreate,"Y");
    // 基準日の月を求める(mm)
    $l_b_month = date_format($l_dcreate,"m");
    // 基準日の日を求める(dd)
    $l_b_day = date_format($l_dcreate,"d");


PHPのデータ型指定について

css-php.com/php/2-2.htm

PHPのdate関数で変換したところ、19700101になってしまう。

date関数で yyyy-mm-dd hh:mm:ssの形の日付を変換すると
19700101になってしまう。

原因は、date関数の第2パラメータにセットしたデータ型。
文字型(string)で設定していたため、date関数が不正な動きをしてしまったようである。

strtotime関数で整数型に変換し、その後date関数を使用して変換するようにする。

php 日付計算関係

www.hoge256.net/2007/08/63.html
日付計算関係のサンプルがまとまっている。

php.atpedia.jp/php/ja/function.date.html
php date_formatのパラメータの説明

jquery.pngFix.jsについて

eswan.blog120.fc2.com/blog-entry-158.html

IE6で透過PNGを使用する方法

ie6の半透明pngの対処方法
d.hatena.ne.jp/fujimogn/20081119/1227055413
いろいろ書かれている。
f32.aaa.livedoor.jp/~azusa/
上記も同じ。jquery.pngFix.jsの説明もあり。

今回は、使い勝手の点からjquery.pngFix.jsを使用する。
適用範囲を決めてまとめて適用できる点が特長である。
ただし、Paddingなどの余白を指定している場合、cssの記述方法によっては
余白が無効になることがあるので注意すること。
そして、指定範囲内すべてのpngに適用されるため、
透過png以外のpngにも適用されてしまうので注意すること。

NG例
<img id="paddingを指定するCSS" src・・・>

OK例
<div id="paddingを指定するCSS">
   <img src=・・・>
</div>


IE6でボックス下部に余分なpaddingが設定されてしまう。

IE6でボックス下部に余分なpaddingが設定されてしまう。
IE6以外では問題なし。

IE6のバグ?のようである。
floatを含むボックスを以下のように定義すると余分なpadding-bottomが設定される。

+????????????????????????????????+
|+?????????++????????++?????????+|
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||    A        ||      B      ||     C       ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
||             ||             ||             ||
|+?????????++????????++?????????+|
+????????????????????????????????+

上記のようにBoxを指定し、一番外側のBoxにpadding-bottomを指定すると、
指定された以上のPadding-bottomが設定されてしまう。

対策としては、以下のようにする。
     (1):A,B,Cのみで構成し、それぞれにpadding-bottomを設定するようにする。
  (2):一番外側のBoxを指定する場合は、A,B,Cいずれかにpadding-bottomを設定する。
     (2):一番外側のBoxを設定する場合は、一番外側のBoxにpadding-bottomを設定しない。
         (padding-left,padding-top,padding-rightは設定可)




HTML,CSSコーディングガイドライン一例

css コーディングガイドラインの一例

hail2u.net/blog/webdesign/css2-property-order.html

html,cssコーディングガイドライン一例
(画像のネーミングルールの一例もある)
enoq.jp/guideline/

RollOverを設定する時の注意点

ビヘイビアでRollOver効果を持たせる時(ビヘイビア内の「スワップイメージ」を使用する時)は
設定するイメージのImgタグにカーソルを当てた上で設定すること。

Dreamweberでテンプレートを使用する方法

www.oyakonews.com/oyanews/homep/UPDATE/UPD_05.html#UD5_1

ヘッダ部に「挿入」→「テンプレートオブジェクト設定」→「編集可能領域」で編集可能領域を設定しようとすると、うまくいかないので注意すること。

手動でInstanceBeginEditable name="(任意の名前)"とInstanceEndEditableを
設定する必要がある。

以下にも記載がある。
thinkit.co.jp/article/101/2

ActionScript3.0 コンパイルエラー一覧

livedocs.adobe.com/flash/9.0_jp/ActionScriptLangRefV3/compilerErrors.html

JIS規格ウェブコンテンツ(JIS X 8341-3:2010)について

以下を参照のこと。

www.web-accessibility.jp/accessibility/new-jis/2010-jis8341-3.html


フレームアクションで自動的にインポートされるパッケージについて

以下のものが読み込まれる

adobe.utils.*
flash.accessibility.*
flash.display.*
flash.errors.*
flash.events.*
flash.external.*
flash.filters.*
flash.geom.*
flash.media.*
flash.net.*
flash.printing.*
flash.system.*
flash.text.*
flash.ui.*
flash.utils.*
flash.xml.*

PHPで画像情報(Width,heightなど)の情報を取得する方法

GetImageSize関数で取得することが可能。

取得できる内容については、PHPマニュアルを参照するか、
以下を参照のこと。

nyx.pu1.net/function/image/getimagesize.html
プロフィール

e.swan

Author:e.swan
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR