タグ

HTMLとtipsに関するmonjudohのブックマーク (14)

  • dropboxをIE9で見るとDocument Modeが7になる件について - hokaccha memo

    Document Modeが7だとaddEventListenerとか使えない。色々検証したけどよくわからんくてyomotsuに教えてもらった。 これがDocument Modeを決めるフローで http://ieblog.members.winisp.net/misc/How%20IE9%20Determines%20Document%20Mode.svg こういうリストがあってこいつを参照するらしい。 http://ie9cvlist.ie.microsoft.com/ie9CompatViewList.xml んで、ここに <domain>dropbox.com</domain> というのがあって If a domain element does not contain additional attributes, webpages on the affected site are

    dropboxをIE9で見るとDocument Modeが7になる件について - hokaccha memo
    monjudoh
    monjudoh 2011/09/14
    これ入れておく<meta http-equiv='x-ua-compatible' content='ie=edge'>
  • 文字列からHTMLDocumentを作成するコード

    必要に迫られて引数で渡された文字列から HTMLDocument を動的に作成するコードを書いたので紹介します。このコードはchromeコンテキスト上で、つまり拡張上で動作させることを前提としていますのでご注意ください。 下記コードを書く際にmodestで紹介されているnanot_viさんのサイトを参考にしました。またrange.createContextualFragment()実行時のセキュリティ上の課題を克服するためにkazさんのblogを参照させていただきました。 let getDOMHtmlDocument=function(str){ let doc; let range; if(document.implementation.createHTMLDocument){ // Firefox 4.0から doc=document.implementation.createHTML

    文字列からHTMLDocumentを作成するコード
  • iPhone用サイトのフォームにはHTML5の属性を使おう - NullPointer's

    ガラケーからiPhone4に乗り換えました。おサイフケータイ等のガラパゴス機能は使っていなかったのでiPhoneになって不便を感じることもなく、iPhoneの便利さだけを享受しています。東京にいる限りはソフトバンクの電波で困ることもないですしね。 ところでiPhone4のSafariはHTML5で追加されたinputの新しいtype属性値に対応しています。キーボードのレイアウトが属性にあった形に変更され、入力しやすくなります。また属性に合わない値の入力が制限されます。 https://nullpon.moe/dev/sample/form.html type="email"では @ と . のキーが追加されます。 type="url"では . と / と .com が追加されます。 type="number"では数字キーボードになります。ただし数字以外も入力可能でした。 type="tel

    iPhone用サイトのフォームにはHTML5の属性を使おう - NullPointer's
    monjudoh
    monjudoh 2010/08/17
    『iPhone4のSafariはHTML5で追加されたinputの新しいtype属性値に対応しています。キーボードのレイアウトが属性にあった形に変更され、入力しやすくなります。』
  • Perlで壊れたHTMLを補完する

    タイトルの問題ですが、自分はよく以下のような関数でやります。 HTML::TreeBuilderのas_HTML()がうまいことやってくれます。 (実際にはHTML::Element::as_HTML()ですが) sub _complement_html { my $broken_html = shift; my $html = do { no strict 'refs'; no warnings 'redefine'; local *HTML::Entities::encode_entities = sub {}; local *HTML::Entities::decode = sub {}; my $tree = HTML::TreeBuilder->new; $tree->parse( $broken_html ); $tree->as_HTML; }; $html =~ s#<ht

  • <script>タグから読み込んだjsのディレクトリを取得 - prog*sig

    <script src="..."> という感じでjsファイルを読み込んで、src部分が http://example.com/lab/test.js であるとき、 http://example.com/lab/ を自分自身で取り出す方法を模索する。 自分自身のsrcを調べる方法は とてもシンプルに自分自身が属する script 要素を取得 - IT戦記 http://d.hatena.ne.jp/amachang/20061201/1164986067 で大体いいと思います。 もしくは var n=document.getElementsByTagName("script"); n[n.length-1].src; // 自分自身のurl 相対パスの場合とか調べてないけど、今回の主題はディレクトリを取り出すとこなので後回し。 Twitterでどういう方法があるのだろうと投

  • IE6のバグや仕様の解決方法のまとめ -Ultimate IE6 Cheatsheet

    IE6のCSSJavaScriptなどのバグや仕様で困った時の解決方法をまとめたチートシートをVirtuosi Mediaから紹介します。

  • 1行が長いときに改行を入れる - 偏った言語信者の垂れ流し

    仕事でWebデザイナーさんがもってきたHTMLに面白い書き方があったので紹介。 HTMLで文章の途中に改行を入れた場合、半角スペースと同様の空白が入ってしまうので、改行せずに長い行にしてしまいがち。 そこで以下のような方法で改行を入れる。 <p>あいうえおかきく<!-- -->けこさしすせそた<!-- -->ちつてと</p> HTMLのコメント中に改行を含ませている。これだと空白が入らないようだ。JavaScriptで文章を処理したりする場合は面倒だとかあるかもしれないけどね。 行単位のバージョン管理システムを使っているならこの方が楽じゃないかなー。 追記 はてな記法とHTMLのコメント記法が同じなのを忘れてた。

    1行が長いときに改行を入れる - 偏った言語信者の垂れ流し
    monjudoh
    monjudoh 2009/03/04
    HTMLコメントを入れてその中で改行する
  • Web屋のためのVim設定・Tipsまとめ 2/2 - ナレッジエース

    おそらく、誰もがやる深夜のWebサーフィンは、究極のところ時間の無駄ではないのかもしれない。 それは、Webで夢をみているのにほかならないのだ。(T.B=リー「Webの創成」より) 「Web屋のためのVim設定・Tipsまとめ 1/2」からの続き。 Vimを使ったHTMLCSSの編集について、さらに関係しそうな事項を紹介します。 HTML編集でもよく使うVim機能 =キーで自動インデント HTMLのインデントが崩れているときは、範囲選択して=キーを押せば、自動的にタグの入れ子を認識してインデント調整されます。 ばらばら→範囲選択→「=」ですっきり カレント行だけインデント調整したい場合はノーマルモードで==とすれば可能です。 なお、手動でインデントを上げ下げするには、ノーマルモードでは>と<、インサートモードでは<C-t>と<C-d>が使えます。 gfで相対パスのリンク先ファイルを開

  • Web屋のためのVim設定・Tipsまとめ 1/2 - ナレッジエース

    Comments» 1. 日のTwitter 2009-01-18 | memoMania - 2009-1-19 […] Web屋のためのVim設定・Tipsまとめ 1/2 - ナレッジエース http://blog.blueblack.net/item_340 # […] 2. ゲスト - 2009-1-19 (ただ、私の環境だとたまに、実行時にDOS窓が残ってブラウザを閉じるまでファイルが編集不能になる現象が発生します。なぜだろう。) firefoxの前にstartを入れるとどうでしょう? 3. nase - 2009-1-19 ありがとうございます!動作確認できました。よけいなDOS窓が開かなくなって、いい感じです。文も修正させてもらいました。 4. sasata299's blog - 2009-2-6 vim環境を晒してみる… いきなりですが、僕はvi派です。emacsは・

  • はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知

    はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28

    はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
    monjudoh
    monjudoh 2008/12/23
    『floatingによる回り込みを解除するには最後の要素にfloat:none;を 適用する. 』知らなかった。サンプルはもうない。
  • HTMLDocument と XMLDocument を見分ける方法 - latest log

    HTMLDocument と XMLDocument を見分ける方法を模索していました。 2008-10-12追記: 内容を大幅に更新しました 何がしたいのか uupaa-selector.js version 1.2では、HTMLDocuemnt と XMLDocument で、CSSセレクタの挙動が変化します。 HTMLDocuemnt なら 小文字の a タグ と 大文字の A タグ は一緒。 uu.css("a"); で <a>, <A> がヒットする XMLDocument なら タグの大小は区別する。 uu.css("a"); なら <a> のみヒットする これを実装するためには、XMLDocument と HTMLDocuemnt を見分けたうえで動作する必要があります。 どこを調べれば、XMLDocument を区別できるのか調べてみた text/html, elm = d

    HTMLDocument と XMLDocument を見分ける方法 - latest log
  • HTMLを小綺麗にするための4つの方法 | エンタープライズ | マイコミジャーナル

    HTMLを規約にそった記述にすることは最低条件として要求されることだが、最後の状態ではない。まずHTMLを規約にそった記述にし、さらに次の段階でアクセサビリティに対応できる形式であったり、必要になる情報を追加したり、もっと小ざっぱりとさせてブラッシュアップさせた方がいい。 Kevin Yank氏がSitePointにアップした4 Easy Ways To Spruce Up Your HTML Markupはその点でかなり興味深いドキュメントだ。同氏はこれまでの経験からHTMLドキュメントを小ざっぱりとさせるための4つの方法を紹介している。要約すると次のとおり。 h1、h2、 h3などのヘッダ要素を厳密に階層化する。h2のあとでh3を飛ばしてh4をつけるといったことをしない。ヘッダ要素による階層化はFirefoxのエクステンションWeb Developerを使うとわかりやすい。Inform

    monjudoh
    monjudoh 2008/07/05
    『h1、h2、 h3などのヘッダ要素を厳密に階層化する。』『HTML文書内リンクにname属性ではなくid属性を使う。』『html要素に言語を指定~<html lang="en">など』『文字エンコーディングを指定する。~content="text/html; charset=UTF-8"』
  • ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips

    GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

    ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips
  • Re:href=

    Re:href="#" onclick の悪習 ネタ元:某日記:href="#" onclick の悪習 <a href="#" onclick="...">検索</a> なんて書き方やめようぜ!というお話 a要素のhref属性に値が入ってるとonclick属性の内容を実行後にhref属性の値を参照しようとする。 #なんかが入ってるとページの一番上部にページ内遷移をする。(※1) 某日記さんの代替案ですけどspanで代替するもの <span style="cursor: pointer" onclick="...">検索</span> 私だとこんな書き方 <a href="javascript:void(0)" onclick="...">検索</a> onclickイベントハンドラを実行しようとしてるなら、こんな書き方もある <a href="javascript:(onclickの内容

    Re:href=
  • 1