初心者でも安心! ホームページの作り方を学ぶことができる「さきちんWEB」です。 作って覚える形式なので、すぐに上達。基礎から応用まで、全部おまかせ!
初心者でも安心! ホームページの作り方を学ぶことができる「さきちんWEB」です。 作って覚える形式なので、すぐに上達。基礎から応用まで、全部おまかせ!
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
HTML5の仕様が策定され各ブラウザがHTML5の対応を進めています。しかしブラウザはそれぞれの団体が各自に実装をしているため、HTML5の実装状況はまちまちです。 今回はそんなHTML5の各ブラウザでの実装状況をチェックできるサイトをまとめます。 HTML5 & CSS3 Support http://fmbip.com/litmus/ HTML5とCSS3の対応状況を各ブラウザのアイコンとともにマトリックス上に表示しています。 細かく網羅されており、それぞれの対応状況がよくわかります。ただ、細かいがゆえに、必要な情報にたどり着くのが大変かもしれません。 Can I Use... http://caniuse.com/ これも英語のサイトですが、特徴的な機能として検索の機能があります。 Can I Useのあとに使いたいHTML5の機能を入力することにより、その機能がどのブラウザで使える
Table of contents 1 Introduction2 Common infrastructure3 Semantics, structure, and APIs of HTML documents4 The elements of HTML5 Microdata6 User interaction7 Loading web pages8 Web application APIs9 Communication10 Web workers11 Worklets12 Web storage13 The HTML syntax14 The XML syntax15 Rendering16 Obsolete features17 IANA considerationsIndexReferencesAcknowledgmentsIntellectual property rights F
■Geolocation APIとは Geolocation APIは、ユーザーの位置情報を扱うためのAPIです。 Geolocation APIの登場以前にも携帯端末などで位置情報を扱うことは出来ましたが、 各携帯キャリア独自の規格であったためキャリアごとの仕様に合わせて開発する必要がありました。 Geolocation APIは、ウェブの標準化団体であるW3Cが仕様策定を進める規格であり、JavaScriptで位置情報を取得できるように標準化されています。 すでに、Firefox・Google Chrome・Safariなどの一般的なブラウザでサポートされており、 スマートフォンのようなGPS対応の携帯端末向けのウェブサイトだけではなく、 一般的なブラウザで閲覧するいわゆるPCサイトでもユーザーの位置情報を利用したコンテンツを提供することが可能になっています。 ■どんなしくみ? Geo
ブラウザ上で編集する「Webテキストエディタ」を作るという案件がありまして。 まず【既存のテキストファイルを読み込む】というところで引っかかったので覚書しとく。 テキストファイルといっても、文字コードがshift-jisだけならまだいいんだけど、 中にはUTF-8だったりEUCだったり、UTF-16とかもうね・・・ そういう様々な文字コードのファイルでも、正しく読み込んで表示しなくては お話にならないのだ。 そこでググりながら作ったよ、もう。 1 File APIを使ってみる HTML5になって、ローカルファイルを手軽に扱えるようになったね。 そう、File APIっていうのを使ってみようよ。 www.html5rocks.com このページに書いてある、ファイル読み込み時のオプション。 これが大切です。以下、そのまま引用。 File 参照を取得したら、FileReader オブジェクトを
久々に書くけどちょっと真面目にこれはハマったんでメモ ファイルとかアップロードに使うinput type="file"だけど、 ぶっちゃけデザインがダサいので裏側に隠していい感じの画像をクリックするとダイアログが開いて選択できるといいとおもったんでやってみた。下記のやつを参照してみた。 input:file 要素を表示しないで、ファイルをアップロード PCやiPhoneだとうまくいったんだけどAndroidのデフォルトブラウザでやってみたらダイアログが開かれない。なぜだ… alertデバッギングをしてみるとclickイベント自体はちゃんと動いているっぽい いろいろ悩んでいたところjsdo.itにいい感じのテスト用のやつがあったんでここでいろいろ試してみた。 input type="file"のダイアログを、JavaScriptから開けるかのテスト 検証した結果、表示されてない(style=
こんにちは、技術研究所の ton です。 今回は、以前ご紹介した社内イベント「クレスコフェア」の出展作品開発時に、びみょーに苦戦した<input type=”file”>について語ります。 HTML5+JavaScript+PHPで<input type=”file”>を使ってファイルアップロード機能をつくります。 途中のサンプルコードはそれだけで(たぶん)動くようになっているので、よろしければお試しください。
readAsDataURL メソッドは、指定されたBlob または File の内容を読み込むために使用されます。読み込み操作が終了すると、readyState が DONE となり、loadend が発生します。このとき、result 属性には、ファイルのデータを表す、base64 エンコーディングされた data: URL の文字列が格納されます。 メモ: blob の result は、先に Base64 でエンコードされたデータの前にある Data-URL の宣言を削除しておかないと、直接 Base64 としてデコードすることができません。 Base64 でエンコードされた文字列のみを受け取る場合は、先に結果から data:*/*;base64, を削除しておく必要があります。
「Upload image...」と書かれたボタンをクリックすると、ファイル選択のダイアログが表示されるはずだ。 そこで .png や .jpg 等、適当な画像ファイルを選択してOKすると、即アップロードが始まる。 アップロードが完了すると、そのアップロードした画像をそのままページ上に表示する、そういうアプリになっている。 ※画像以外のファイルもアップロードできてしまうが、あくまでサンプルなので、画像以外がUpされた場合の対処とかは行っていない。ご勘弁を。 ※アップロードした画像はどこにも保存はしていない。そのアップロード結果のページを生成するときに img 要素の data uri を生成しているだけである。 この Web サイトのポイントは、Adobe Flash や Microsoft Silverlight、Java などのプラグインを使うことなく、ごくごく単純な input ty
2015年2月21日に開講された、株式会社LIG フロントエンドエンジニア 堀口 誠人先生による授業の中で、お届けできなかった14番目のテクニックをご紹介いたします。 ■先生より 授業中にご紹介できなくて本当にすみませんでした。 いかに授業を面白くしようか、どんなボケを入れようか、などと試行錯誤していたら肝心のソースコードが機能しないという本末転倒な自体になってしまったようです。猛省しております。 この場を借りて改めて解説させていただきます。。。! ■使用するツールのURL http://codepen.io/seito2014/pen/VYxZKw ■対応ブラウザ IE9~ safari(最新) chrome(最新) firefox(最新) Android 4.1~ iOS 7.1~ 内容はCSSとJavascriptを使って「input[type=“file”]要素をデザインできるよう
デモ HTML <div class="file"> ファイルを選択 <input type="file"/> </div> CSS .file { display: inline-block; overflow: hidden; position: relative; padding: .5em; border: 1px solid #999; background-color: #eee; } .file input[type="file"] { opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); position: absolute; right: 0; top: 0; margin: 0; font-size: 100px; cursor: pointer; } 対応ブラウザ 以下のブラウザ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く