●仕組み 「uploadButton」の箱をボタンの枠とし、 input[type=file]にabsoluteをかけopacity:0で透明にし縦横100%に引き伸ばす。 input[type=file]を透明にすると選択したファイル名も表示されずUI上問題あるので、 input[type=text]を用意しそちらに値を収めて表示させている。 <div class="position"> <div class="uploadButton"> ファイルを選択 <input type="file" onchange="uv.style.display='inline-block'; uv.value = this.value;" /> <input type="text" id="uv" class="uploadValue" disabled /> </div> </div> * { ma
![input[type=file]をCSSで加工する - jsdo.it - Share JavaScript, HTML5 and CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/0eab0ba5b8a6f246b8481426bb2d21d9885ca70b/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttp%2Fjsdo-static-contents.s3.amazonaws.com%2Fimages%2Fcapture%2Fr%2FW%2Fc%2FrWcL.jpg%3Ft%3D1393206860)
$(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; // 画像以外は処理を停止 if (! file.type.match('image.*')) { // クリア $(this).val(''); $('span').html(''); return; } // 画像表示 var reader = new FileReader(); reader.onload = function() { var img_src = $('<img>').attr('src', reader.result); $('span').html(i
プレースホルダとHTML5のplaceholder属性 HTML5で導入されたplaceholder属性によって、フォームの入力欄にプレースホルダを設定できるようになりました。さて、この「プレースホルダ」とはそもそもなんなのでしょうか。また、プレースホルダにはどのようなテキストを書けばよいのでしょうか。 プレースホルダってなに? フォームの入力欄に、薄い灰色のテキストが表示されているものを見かけます。あのテキストや、テキストを提供する仕組みは、プレースホルダと呼ばれています。 Safariではアドレスバーに“Go to this address”、検索バーに“Google”というプレースホルダが設定されている。 「プレースホルダ (“placeholder”)」 とは、「実際のものに代わって現れるもの」を意味します。たとえば、Webサイトのテンプレートを作る際に、実際のページにはないテキス
この文書は「HTML5 differences from HTML4 (W3C Working Draft 25 May 2011)」の日本語訳です。 原文の最新版 は、この日本語訳が参照した版から更新されている可能性があります。 この日本語訳は参考情報であり、正式な文書ではないことにご注意ください。また、翻訳において生じた誤りが含まれる可能性があります。他の仕様の訳については Web 標準仕様 日本語訳一覧 を参照してください。 更新日: 2011-09-15 公開日: 2011-05-26 翻訳者: 矢倉 眞隆 <yakura-masataka@mitsue.co.jp> HTML5 における HTML4 からの変更点 2011年5月25日付 W3C 草案 (Working Draft) この版: http://www.w3.org/TR/2011/WD-html5-diff-2011
HTML5では、「html」や「head」、「body」タグは省略できるらしい。 で、「終了タグを書かない」、「終了タグを省く」、「タグ自体を省く」の 3パターンがある。ということ。・終了タグを書かない area、base、br、col、command、embed、hr、img、input、keygen link、meta、param、source、track、wbrここらへんのタグは、今までも終了タグは書いていない。・終了タグを省く li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead tbody、tfoot、tr、td、th次に、省略できるタグ・タグ自体を省く html、head、body、colgroup、tbodyこんなに省くことができるんだ。 前回の記事「基本コーディング」には、無駄が色々あったということで もう一度挑戦です、html5
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
