Memo/HTML

http://dexlab.net/pukiwiki/index.php?Memo%2FHTML
 

HTML


プレゼン


デザイン


高速化/最適化


ツール

スマートフォン対応

HTMLテンプレート

長いURLや半角文字を強制改行する

  • ブラウザの独自タグを利用するのがスマートそうだ
    pre {
      white-space: -moz-pre-wrap; /* Mozilla */
      white-space: -pre-wrap; /* Opera 4-6 */
      white-space: -o-pre-wrap; /* Opera 7 */
      white-space: pre-wrap; /* CSS3 */
      word-wrap: break-word; /* IE 5.5+ */
    }

buttonタグの動作

IEやNetscapeはタダのボタンとして動作するが、Firefox2.0やOpera9.5はsubmitとして動作する。
確実にsubmitさせたいなら、type="submit"を付ける。

  • <button> - ボタン
    • HTML4.01 では submit が既定値と定義されていますが、IE6.0 や Netscape の実装では既定値は button のようです。
  • <button>の時submitしない
    • IE6.0
    • IE7.0
  • <button>submitする
    • Firefox2.0
    • Opera9.5

HTTPSの認証ページから認証後、HTTPのページへセキュリティーの警告無しにリダイレクトする方法

  1. https://hoge/firstpage ページで入力
  2. http://hoge/secondpage ページへリダイレクト
  3. IEの場合、セキュリティ警告ダイアログが表示
  4. 「はい。」でhttp://hoge/secondpage へ移動
  • 条件
    • Location: ヘッダで移動した場合
    • <form action="">で移動した場合

htmlファイルから他のhtmlファイルを読み込む

外部ファイルをphpとかにすれば、動的ファイルを埋め込める。

  1. .htaccessを使う
    AddType application/x-httpd-php .htm .html
  2. <iframe>を使う
    <iframe src="xx.html" height=300 width=300>
    この部分は iframe 対応のブラウザで見てください。
    </iframe>
  3. <object>を使う。xhtml的にはiframeはNGらしい。
    IFRAMEを使わずにHTMLファイルから他のHTMLファイルを読み込む方法。
    <html>
    <head>
    <title>test</title>
    </head>
    <body>
    header
    <br/>
    <!--[if IE]>
    <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html" style="width:100;height:100px">
    <p>non object</p>
    </object>
    <![endif]-->
    <!--[if !IE]> <-->
    <object type="text/html" data="some.html">
    <p>non object</p>
    </object>
    <!--> <![endif]-->
    <br/>
    footer
    </body>
    </html>
  4. JavaScript?でdocument.write()、もしくはinnerHTMLする。 document.getElementById?("disp").innerHTML = 'hoge'
    <SCRIPT src="header.js"></SCRIPT>

htmlの文法チェック

html,Compact HTML(CHTML)の文法チェックをして点数をつけてくれる。オープンソース

デフォルトスタイルの初期化

CSSで、デザインを整えるとして、ブラウザ毎のデフォルトスタイルを消しておく。

* {
    margin: 0;
    padding: 0;
    font-style: normal;
    font-weight: normal;
}

SELECTボックスに横スクロールバーを表示させる

最近のブラウザでも表示は厳しい。

  • Mozilla系限定
    ただし、option毎にスクロールバーが出るのでウザイ。。
    File not found: "SELECTタグで横スクロールバー.html" at page "Memo/HTML"[添付]

formタグの中でグループ化

  • <fieldset>…formタグの中でグループ化
    File not found: "fieldset.html" at page "Memo/HTML"[添付]

optionタグの中でグループ化

  • <OPTGROUP>…セレクトボックスの選択肢をグループ化する
    File not found: "index.html" at page "Memo/HTML"[添付]

単語の途中でも自動的に折り返しさせる

スタイルシートで以下のように指定する。IE6で確認

BODY { word-break: break-all; } 
style="word-break: break-all;"
word-break説明
normal通常の状態
break-all単語に関係なく改行
keep-all単語の途中では改行しないようにする


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-04-27 (木) 19:30:39 (364d)