HTML5の新要素をinnerHTMLで生成できないバグを回避する - latest log
IE6〜IE8のinnerHTMLには問題が多く、そのひとつに、HTML5の新要素を食わせると悪夢のようなDOMツリーを生成するというものがあります。 var div = document.createElement("div"); div.innerHTML = "<section>section</section>"; document.body.appendChild(div); 上記のコードを実行すると、body以下にはこのような構造ができてしまいます。 <body> <div> section </SECTION> </div> </body> どうやら、innerHTML に与える文字列を div でラップし、div要素の前に何か一つ以上のダミーの文字列を設定しておき、あとでアンラップすれば上手くいくようです。 http://jsdo.it/uupaa/IEInnerHTMLB
コーディングスピードはまだ上がる！！ <br>Zen-Coding カスタマイズ
コーディングスピードはまだ上がる！！ Zen-Coding カスタマイズ 2011-01-20 コーディング速度が"3倍！10倍！上がる"と言われてる Dreamweaver Documents and Settings/[ユーザー名]/Application Data/Adobe/Dreamweaver "バージョン"/ja_JP/ Configuration/Commands/ZenCoding/zen_settings.js Aptana [任意で保存したZen-Codingの場所]/zencoding.js(過去バージョンのファイル名は"zen_settings.js") Notepad++ [Notepad+の場所]/plugins/NppScripting/include/Zen Coding.js HTMLの言語を修正する(ついでにインデントも) 例えばhtml:xsで展開す
マークアップ効率化 - zen-codingでコーディングを倍速に
HTMLの記法について 基本的には「div」の様に要素を省略せずに記述して、それを展開すると「<div></div>」という形に展開されます。 このときに展開できる要素は以下の公式ドキュメントに明記されていますのでそちらを見るとよいです。 Zen HTML Elements Zen HTML Selectors Zen CheatSheets 基本的な記法 ひとつずつ順番に記述して説明していきます。しばらく初歩的な説明になるのである程度知っている方は飛ばしていただいて良いかと思います。 まずものすごく基本的な記法である、単独タグの記法について説明を行います。 cssのセレクタをイメージしながら見ていくと納得しやすいと思います。 タグだけ変換 変換前 div 変換後 <div></div> デモ 文末でtabを押してください div 変換後、div要素の間にカーソルが移動するので、すぐにテキ
iPhoneやiPadでHTMLのソースを見るのつくった - Webtech Walker
i-sourceviewというのをGAE/Pythonでつくってみました。 i-sourceview hokaccha’s i-sourceview at master - GitHub 同じようなことはアプリとかJS(Bookmarklet)でできるんですけど、アプリだと別途立ち上げが必要だったり、JSだとDOCTYPEが取れなかったりシンタックスハイライトがなかったりします。なのでサーバー側からリクエストしてHTML取得してシンタックスハイライトしたり行番号もつけてみたりしました。 それでつくってみたものの、認証がかかってるページがとれなかったり、JSで書き換えた後のソースが見たい場合もあるなあと思って結局JSで取得するのも用意しました。この二つを併用すれば大体ことたりるかなと。 シンタックスとかはchromeのソースビューに合わせてみました。 こんな感じになります。
ケータイサイト制作前にコーダーが確認しておきたいところ │ これからゆっくり考L +α
モバイルサイトの制作前に、もしくは打ち合わせに行った場合は必ずチェックしておきたいところをまとめてみました。 こちらから積極的に確認しないと、何も詳細が分からないままデザインだけぽーんと渡されてしまうことがあるので、自ら前のめりでチェックしておきたいところです。 個人的に「ここだけは外せない！」という項目は以下の6つ ・xhtml？html？ ・文字コードは？ ・tableは使ってOK？ ・絵文字は？ ・カタカナの扱いは？半角？全角？ ・VGA対応は？ xhtml？html？ 最近は基本xhtmlで作成という流れに（私の場合は）なってますが、それでも念のために一応聞いておきたいところ。 昔、xhtmlで作成してほぼほぼ終わった段階で「アップするサーバーでxhtmlが使えないのでhtmlに変更してください！」と言われてやり直したことがあります...。 文字コードは？ 携帯サイトといったらSh
Firebugの使い方 | THE HAM MEDIA
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会（SaCSS）にて発覚！使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ！」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない！という人も勉強会の時に多かったように、実際にも多いはず！ Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ！と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
より早くcssやhtmlのコーディングが行えそうな情報いろいろ - かちびと.net
Web制作を少しでも効率化しよう と思って（今更）いろいろ便利そう な情報を探しました。既に使って いる情報の方が多かったのです が、折角調べたのでシェアしたい と思ってエントリーです。 コーディングをもっと円滑に、という旨の情報です。順不同。あんまり多いと逆効果なので量は絞りました。一応これでも絞りました。絞ったつもり。 zen-coding 話題になったzen-coding。だいぶ慣れて来た方もいらっしゃるのでは。 zen-coding（本家） HTMLコーディングが3倍速くなる？「Zen-Coding」 秀丸Zen- Codingマクロ コーディングの効率化を図るZen codingをDreamweaver cs4に入れる方法 WP Zen-Codingが凄く便利 初期設定とかTipsとか 制作前に知っておくと便利なコードとかTipsいろいろ。 css書く前にチェック。 もう、cla
簡単！たった１３行のコードでHTML取得＆解析をするPerlスクリプト - DQNEO起業日記
１３行のコードで、Yahoo!Japanのトピックス一覧を取得する！ PerlでHTML取得・解析したいときはLWP::UserAgentとHTML::TreeBuilderというのを使うと簡単にできます。 LWP::UserAgentを使うと、Webページの取得ができます。 HTML::TreeBuilderを使うと、HTMLのDOM解析ができます。 この２つのモジュールを使って、Yahoo!Japanのトピックス一覧を取得してみましょう。 コメント行と空行を除くとたったの１３行です。 use strict; use warnings; use LWP::UserAgent; use HTML::TreeBuilder; # urlを指定する my $url = 'http://www.yahoo.co.jp'; # IE8のフリをする my $user_agent = "Mozilla
perl html パース hPod: use HTML::TreeBuilder
Excite ブログから Seesaa ブログへの移行：その２ 次に、 Excite ブログのドキュメント構造を調べる。ドキュメント構造なんて言うと小難しいことをやりそうだけれど、単に HTML を、目で、パースしてみたにすぎない。この HTML から、各要素を抜き出して、 Seesaa ブログの（エクスポートしたデータの）書式に合わせて整えればよいのだけれど、 Excite ブログのそれは、ちょっと酷い内容。あまり長く眺めていると、気絶しそう。 一見、たくさんのスタイルの指定がしてあるので、データもそれなりに括られているのかと思われど、要素としては意識されておらず、 HTML デザインの延長として（だけに）スタイルを作っているように思われる。でも、ほかに手がかりもないのでそれを頼りにするしかない。 DIV タグと、その要素 class の値。でもそれらを取り出せば、記事の構成要素を抽出し
私にとってテクニカルアートディレクターの意味
Twitterでは、自分の趣向に合ったサイトをリンクしているだけということが多いですが、たまに仕事に関係したことを書いていることがあります。先週ですが、以下のようなことを書きました。 優れたマークアップをする方はテクニカルアートディレクターみたいな存在になっていくのかな。既にそんな方いるけど。 — Yasuhisa🗯 (@yhassy) November 12, 2009 Twitterの文字数ではどうも説明しきれない部分があるので、この場で少し補足しておきます。 マークアップする方は印刷機？ 単価数百円のマークアップサービスがあるように、見た目のデザインを再現するという意味でのマークアップの価値は下がっていく一方です。もし見た目を形作るだけでマークアップがあるのであれば、それは当然のことです。紙の印刷業も同様で、見た目の再現の水準が同等であれば、あとは価格しか残りません。Dreamwe
XML (HTML) の特殊文字をエスケープするVimスクリプトを書いた / LiosK-free Blog
2009-09-29 カテゴリ: Client Side タグ: Vim Tips XMLやHTMLの5つの特殊文字 (&, <, >, ', ") を定義済みのエンティティ (&, <, >, ', ") に変換するVimスクリプトを書いてみた。 5つの文字を置換するだけだから簡単そうに思えるけど、選択範囲だけを対象にしようとするとなかなか難しくて、今まで納得のいくものを作れずにいた。それが、たまたま今日挑戦してみたら、そこそこいい感じのスクリプトが書けたので、記念にブログポストしてみる。 vnoremap <Leader>e "xx:call <SID>EscapeXml('x')<CR>"xP function s:EscapeXml(regname) let x = getreg(a:regname) let x = substitute(x
IBMがWebアプリケーションのUIガイドラインとHTML/CSSのソースコードを公開
業務アプリケーションがWebアプリケーションとして開発されるのは現在の大きなトレンドです。それに伴ってHTMLとCSSによって業務アプリケーションの複雑なユーザーインターフェイスを構築する必要性が生じます。 しかし機能が豊富な業務アプリケーションのユーザーインターフェイスをHTMLとCSSで構築するのはそれほど簡単ではなく、しかもそれをアプリケーション全体で統一し、優れたユーザビリティを実現するのはさらに手間のかかる作業です。 そうした業務用のWebアプリケーションのユーザーインターフェイスを構築するためのサンプルが豊富に含まれたガイドライン「IBM Lotus User Interface Developer Documentation」が、IBMから公開されました。 今回公開されたIBMのガイドラインは、同社のLotus製品群のユーザビリティを統一するための社内プロジェクト「One U
Pure CSSな吹き出し
Twitterで「CSSで吹き出し作るのブクマし忘れててどこにあったか忘れた……」とかつぶやいたらe_luckさんがImage-free CSS Tooltip Pointers - A Use for Polygonal CSS?を探してきてくれた。このエントリでは枠線をつけるために入れ子になっていたりちょっとわかりづらかったので、ものすごく単純化して解説してみようとかなんとか。 Pure CSSな吹き出しのサンプル: Speech Bubbles とりあえず、吹き出しの尻尾を左下に出すもの(サンプル内では4つめのサンプル)を例にして説明していく。HTMLコードは以下のようなもので、bubbleというクラス名を振ったdiv要素がコンテナ、bodyというクラス名を振ったp要素が吹き出しのベース、tailというクラス名を振った空のdiv要素が尻尾になる。 <div class="bubble
.htaccessで、拡張子.htmlのままPHPを実行する方法
読者の方から、こんな質問をいただきました。 自分のサイトの全ページの拡張子を、「.htmlから.php」に変更したのですが、index.htmlからindex.phpにリダイレクトさせたほうがいいのでしょうか？ それとも特に何もしなくてよいのでしょうか？ 自分は.htmlのページは全て消して、.phpのページをアップロードしました。 ページランクなど長年培って獲得した情報がリセットされるのは困ります。 最初に思ったのが、「変更する前に質問してほしかった」です。 拡張子と言えど、URLが変更されることに変わりはありません。 「URLが変わる ＝ 別ページ」です。 www.suzukikenichi.com/abc.html と www.suzukikenichi.com/abc.php は、 たとえコンテンツが100％同じでも、サーチエンジンにしてみたら別ページなのです。 つまり、それまで蓄
Web開発周りのVimの設定
HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType html :compiler tidy autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\" tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。 HTMLファイルのインデントをやり直す gg=G ノーマルモードではggでファイ
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[開発] Flash to HTML5 変換サービスを開発成功 | blog.progression.jp
フォームのテキストエリアをより使いやすくするテクニック集
https://css-tricks.com/examples/CleanCode/Beautiful-HTML.png
お探しのページは見つかりませんでした - ma-san web design- 千葉県（四街道市・千葉市・佐倉市）でホームページ制作
