input[type=file]で選択するファイルを画像のみに制限する方法
簡易的な方法ではあるが制限してみる。 HTML5 の accept属性 を使う 大まかに許可する場合<input type="file" name="example" accept="image/*"> 以下のような指定で、それぞれ画像・音声・映像を許可することができる。 accept="image/*" accept="audio/*" accept="video/*" 許可される拡張子は以下の通りimage.jpe, .jpg, .jpeg, .gif, .png, .bmp, .ico, .svg, .svgz, .tif, .tiff, .ai, .drw, .pct, .psp, .xcf, .psd, .raw audio.aac, .aif, .flac, .iff, .m4a, .m4b, .mid, .midi, .mp3, .mpa, .mpc, .oga, .ogg,
![input[type=file]で選択するファイルを画像のみに制限する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/da55b514e5264385dcb6985f2226798c10478b60/height=288;version=1;width=512/https%3A%2F%2Fb.0218.jp%2Fimages%2Fogp%2F20150119133328.png%3Fts%3Dfadf56c63a40be7d2e3e8fd18617505d36657996)
How to Use The HTML5 Sectioning Elements [Article] | Treehouse Blog
HTML5 has seen the introduction of a number of sectioning elements that can be used to mark up your web pages. Using these elements gives more semantic meaning to your pages, allowing computer programs to better understand your content. In this post you’ll learn how to use these sectioning elements in your own web sites. I’ll be explaining when you should use certain elements over others, as well
![How to Use The HTML5 Sectioning Elements [Article] | Treehouse Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc38c19f72a30e241f67a40716efbe387ad7ee1d/height=288;version=1;width=512/https%3A%2F%2Fblog.teamtreehouse.com%2Fwp-content%2Fuploads%2F2013%2F02%2Fjquerynav.jpg)
結局どうすればいいの？ - Dive Into HTML5
Translation of: What Does It All Mean? - Dive Into HTML5 Diving In The Doctype The Root Element The <head> Element Character Encoding Friends & (Link) Relations rel = stylesheet rel = alternate Other Link Relations in HTML5 New Semantic Elements in HTML5 A long digression into how browsers handle unknown elements Headers Articles Dates and Times Navigation Footers Further Reading 訳注 Diving In この章で
WordPress 3.9 でキャプションとギャラリーが HTML5 に対応、テーマ作ってる人は要チェック。
title: WordPress 3.9 でキャプションとギャラリーが HTML5 に対応、テーマ作ってる人は要チェック。 そろそろ WordPress 3.9 が来そうですね！ TinyMCE のメジャーバージョンが上がったり、その他細かく変わっている3.9、一応追えるだけ追ってます。 今回は WordPress 3.9 から実装される、キャプションとギャラリーの HTML5 対応について。 HTML5 対応とは WordPress 3.6 から追加されました HTML5 対応。 3.6 から使えたのは、 コメントリスト コメントフォーム 検索フォーム の3つでした。 3.9 からは新たにここへ、ギャラリーとキャプションが追加されるというわけです。 キャプションの HTML5 対応での変化 キャプション、HTML5 でない通常の出力コードは <div class="wp-caption"
HTML5 × CSS3 × jQueryを真面目に勉強 – #12 Pinterest風グリッドレイアウトを作ってみた | DevelopersIO
そんな訳で、写真共有SNSの一つであるPinterest(ぴんたれすと)。従来のグリッド式レイアウトのように高さが均一のグリッドが整然と並べられているのと違い、異なる高さのグリッドが画面いっぱいに敷き詰められているレイアウトが特徴的でオサレです。（※こういったレイアウトはピンボード風と呼べば良いのでしょうか…？） Pinterest とはピンボード風の写真共有のソーシャル・ネットワーキング・サービス。特に女性に人気がある。ウェブサイトとアプリはテーマに基づいて写真のコレクションを作ることが出来る。サイトのミッションステートメントは「面白いと感じるものを通じて世界全員をつなぐ」。アメリカ Palo Alto にある Cold Brew Labs によって運営されている。 Wikipediaより引用(http://ja.wikipedia.org/wiki/Pinterest) そんな女子力の
知らないといつまでたってもHTMLとCSSが理解できない暗黙の仕様4つ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。
HTML5 Bones: The template that goes back to basics
Back to basics About HTML5 Bones is a template that goes back to basics and provides you with the bare minimum required to get going with HTML5. Inline comments explain how and when to use some of the most common HTML5 elements. Can also be used as a guide when building your own pages from scratch. No JavaScript libraries such as jQuery or Modernizr are included, as they may be completely unnecess
Workless | An open source HTML, CSS & JS framework for developing front-end web applications faster.
Getting started. Start by downloading the latest version from Github. You can download the .zip directly, or alternatively, clone the repo. // clone github repo to your locally directory git clone https://github.com/iKreativ/Workless.git This will download the entire source for the framework including this sites HTML file as an example. Next, either start with the base HTML file included with the
HTML＋JavaScriptだけでブラウザに図形描画 - Canvas API -
TIPS 007：キャンバスを準備する Canvas APIを利用するには、まず図形の描画先（＝キャンバス）を準備しておく必要があります。 ［リスト1］キャンバスを準備するコード（canvas.html） <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>HTML5 TIPS</title> <!--キャンバスの背景色／枠線を指定（3）--> <style> #cv { background-color: #FFF; border: 1px solid black; } </style> <script> ...中略... </script> </head> <body> <!--キャンバスの準備（1）--> <canvas id="cv" width="400" height="300"> <!--Canvas機能
MdN Design｜総合情報サイト
まずはCANVAS タグで描画するスペースのサイズを決める【1-1】。そのスペースにグラフを描画するための筆にあたるのがJavaScriptだ。getElementByIdメソッドを使いCANVASのidを取得、getContextメソッドで描画用のコンテキストを取得する。取得したコンテキストはctxというオブジェクトに格納（オブジェクト名は何でもかまわない）。このctxオブジェクトにグラフを描画していくことになる【1-2】。 【1-1】CANVASタグには、幅（width属性）と高さ（height属性）、範囲（描画領域）を指定する。またJavaScriptで使用するid属性も設定する。タグの間には非対応ブラウザ用の注意書きを入れておこう 【1-2】CANVASタグのidをgetElementByIdの引数に指定する。なお、getContext()の引数は現在では「2D」しか選択できないよ
jQueryをロードする際のナイス！と思った書き方
概要 ▶ 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典：Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目
『SPピグで見るCSS3活用事例』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、森と申します。 スマートフォン版アメーバピグのWebアプリを担当しています。 「HTML5 Web Applicationのつくりかた」という記事が詳しいので、 この記事ではスマホ版ピグのCSSについてマイページを例にご紹介します。 とても長い記事になってしまいましたが、最後までご覧頂けると嬉しいです。 スクリーンショットで見るCSSプロパティやセレクタ2012年4月現在、SPピグ内のレイアウトはどのページも大体同じなので、マイページとフォーム要素を抜粋して使っているプロパティやセレクタの中から主要なものをざっと並べてみました。 HTML
HTML5のmenuタグでコンテキストメニューに共有メニューを表示するデモ
前回の記事では、Firefox8で対応したMenuタグを使っていろいろ遊んでみたのですが、今回の記事では引き続き、このMenuタグを使って、実用的な例として、右クリックメニューにFacebookとかの共有メニューを表示してみたいと思います。 とりあえずデモを作ってみました。Firefox8で開いて、右クリックしてみてください。Facebookのいいねボタンをクリックするポップアップが開くところがダサイですが仕方ないです。 ソースコード たいしたコードではないのですが、以下のようなソースコードです。コピペで使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>共有メニューのデモ</title> </head> <body> <div id="container" contextmenu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jekor/minform: A Minimalist JavaScript Form Enhancer
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
Chart.js
http://www.splashnology.com/article/15-awesome-free-javascript-charts/325/
Wave - an experiment with wave motion and tweets in HTML5.
これは便利！html5・CSS3で作られたGifアニメーション作成サービス ｜https://wp.yat-net.com/name
https://csswarp.eleqtriq.com/