あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 – レスポンシブイメージで画像表示を最適化 - ICS MEDIA
日本のウェブサイトにおけるスマートフォン・タブレットユーザーのシェアは約40%であり、ウェブデザインはレスポンシブ対応しモバイルを意識した設計が必須です（参照「StatCounter」)。 HTMLの「レスポンシブイメージ」を使えば、HTMLのタグだけで表示端末にあわせた画像を配信できます。 本記事では、サンプルを通してレスポンシブイメージの特徴と使い方について解説します。 この記事で学べること img要素のsrcset属性とsizes属性の使い方 picture要素の使い方 レスポンシブイメージとは一体何か？ レスポンシブイメージとは、レスポンシブなウェブサイトにおける画像の取り扱い方を定めたHTMLの技術。2016年勧告のHTML 5.1に追加された仕様です（現在のHTMLの仕様書）。主な特徴は次の通りです。 CSSやJavaScriptを使わず、HTMLのみでレスポンシブな画像を取り
HTML5のcanvas内の複数の画像をドラッグ＆ドロップさせてみる - Qiita
概説 「HTML5のcanvas内に複数の画像を任意の順序で表示する」で描画したcanvas内の画像をドラッグ＆ドロップしたい欲が湧いたので、コードを書いてみました。 ドラッグ＆ドロップは通常のDOMであれば、HTML5のDrag & Drop APIを利用することで簡単に対応可能です。 しかし、canvasに一度描いてしまったオブジェクトは、DOMとして操作することができないため、座標を考慮した地味な実装が必要になります。 以下のようなサイトを参考にしながら、画像の重なり順と当たり判定を考えてやってみたところ、自分が「いかに座標に弱いか」ということがよく分かりました。。。 A Gentle Introduction to Making HTML5 Canvas Interactive dragging and resizing an image on html5 canvas 「Kine
これは使える！rem (root em) 単位を使用したフォントサイズの指定 - IT-Walker on hatena
寡聞につき、rem(root em)なんてフォントサイズの単位があるのを今まで知りませんでした。 ちょっと興味を持って調べてみたところ、結構使えそうなテクニックだったのでご紹介したいと思います。 rem (root em) というのは、「ルート要素（典型的にはhtml要素）に対する相対的なフォントサイズの単位」です。 従来のemは、親要素に対して相対的なフォントサイズの単位でした。そのため、要素の出現位置次第でフォントサイズが変わってしまうことも多く、使いにくい場面も多々ありました。 他にもフォントサイズの指定方法には、ピクセル（px）を用いたものがあります。が、特に今は様々なスクリーンサイズを意識しなくてはならない時代。スクリーンサイズの小さいデバイスでは全体的なフォントサイズを同時に大きくしなければならないこともよくありますが、pxを使用していると、メディアクエリなどを使ってあらゆるフ
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
絶対に覚えておきたいHTML5の『audio要素』超基本を知る!! | HTML5でサイトをつくろう
【HTML】 <audio controls> <source src="audio/sample.mp3" type="audio/mp3"> <source src="audio/sample.ogg" type="audio/ogg"> <source src="audio/sample.wav" type="audio/wav"> <p>※ご利用のブラウザでは再生することができません。</p> </audio> source要素もHTML5からの新要素になります。使い方は上記のようにaudio要素の中に記述しsrc属性に再生するファイルを指定しすることでブラウザは上から順に再生可能かをチェックしていきます。尚、要素に対応していないブラウザでは全て無視され、その後ろに記述された要素が表示されるようになります。 ブラウザの表示確認 今回はFirefoxもちゃんとプレイヤーが表示されまし
【HTML】フォームの文字入力モードを自動的に切り替える方法 ｜ KLUTCHE
メールアドレスを入力するボックスでは、入力モードを自動で半角英数字に変更したい。という場合に使えるコードです。 スマートフォンの場合・ガラケーの場合はどうすれば良いのかもご紹介します。 PCの場合 ime-modeというCSSプロパティを使用します。 <form action=""> <input type="text" style="ime-inactive;" /> </form> これで入力ボックスがアクティブになると入力モードが自動で半角英数字に変更されます。 ime-mode: auto; 状況に応じて自動設定。初期値。 ime-mode: active; 初期値が日本語入力モード。 ime-mode: inactive; 初期値が英数字入力モード。 ime-mode: disabled; 英数字入力モードで固定されます。 デモ ならねえよ 残念ながら、このプロパティは、Wind
入力フォームを数字キーボードに設定するには？ | Webサイト開発
フィーチャーフォンでは、フォームでテキストを入力する際の文字入力モードをHTMLの属性（istyle=”4″など）で指定できる。文字入力モードは「ひらがな」「カタカナ」「英字」「数字」のように文字種を指定できるから、入力モード切替が煩わしい携帯では切り替えの手間が省け、ユーザビリティが良くなる。 ではスマートフォンは入力モードに対応しているか？いや、Androidに搭載されたブラウザは標準HTML準拠だからダメに違いない・・・。そう思ってあきらめていた。 が、調べてみるとAndroidブラウザでも数字モードに設定する方法があった。 関連記事： maxlengthで半角文字数で制限するには？ iPhone向けSafari、HTML拡張属性を使いこなす 画像をピッタリ横並び表示させるテクニック スマートフォンのラジオボタンを使いやすいサイズにするには？ スマホ向けページャデザイン 3選 And
HTML5でiOSアプリAndroidアプリを作ろう 〜HTML5ハイブリッドアプリ開発入門〜
ヒカラボ(ウェブ技術でiOS/Androidアプリ開発！！～HTML5ハイブリッドアプリ開発[実践]入門～)での発表スライドです。 書籍『HTML5ハイブリッドアプリ開発[実践]入門』には、このスライドに載っていないCordovaの使い方、最適化のためのノウハウやテクニック、ジェスチャやviewportなどのモバイル特有の事情への配慮、ハイブリッドアプリで利用できるストレージ、デバッグ手法やセキュリティ、ネイティブとHTML5間のブリッジの仕組み、WebViewの扱い方などのHTML5ハイブリッドアプリ開発を網羅した内容をまとめています。 http://www.amazon.co.jp/dp/4774162116
HTML5アプリのviewportを統一的に設定、monaca.viewport.js
こんにちは、開発者の久保田です。 Monacaではプロジェクトのひな形が一新されて、新しいHelloWorldプロジェクトが用意されました。 そのプロジェクトの中には、異なる解像度の端末でも同じように画面を設定するためのmonaca.viewport.jsが含まれるようになりました。この記事ではmonaca.viewport.jsについて説明します。 なぜviewportを指定するライブラリが必要なのか? monacaでは、HTML5でモバイル用のアプリケーションを作成する必要があります。モバイルデバイスやタブレットには、それぞれ違った解像度を持つiPhone、iPadなどのiOS端末や様々なAndroid端末が存在します。アプリケーションの開発者は、違った解像度を持ったデバイスに対応しなければなりません。そのために、アプリケーションにviewportを設定します。 viewportとは?
｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣ | 気になる、記になる…
｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣ 2013 10/16 TNWによると、ファミコンで人気の｢スーパーマリオブラザーズ｣をHTML5で完全に再現したサイト｢Full Screen Mario｣が公開されたそうです。 著作権的に問題ありですが、実際にキーボード操作でプレイする事が可能で、”1−1”だけかと思いきや”8-4”までの全ての面がプレイ可能となっています。 また、マップジェネレーターも用意されており、自分でマップを作る事も可能で、操作面ではBダッシュはShiftキーを押しながら動かすと可能で、ジャンプは十字キーの上かスペースキーとなっています。 ・Full Screen Mario 【追記】 Google Chromeのみのサポートとなるようです。
全日本＜label＞要素マークアップ検定
Web入力フォームの縁の下の力持ち、Label要素をマスターするための検定試験です。 仲間内の勉強会で、ちょっと遊びすぎましたｗ
意外と便利？PHP製のHTML用問い合わせ言語·htmlSQL MOONGIFT
htmlSQLはHTML構造にSQLを使って検索できるようにするライブラリです。 HTMLを操作する際にはDOMを使ったり、正規表現を使うのが一般的です。しかしもう一つのやり方を提案するのがhtmlSQLです。何とSQL（問い合わせ言語）を使ってHTMLソースを探索できます。 コード例。PHPで操作します。 こんな感じで取得できます（301になってしまっていますが…）。 こちらもコード例。SQLっぽい記述が面白いです。 クラスやIDなどで絞り込んだり、特定のタグだけを抽出することも簡単にできます。そして指定した要素だけ抽出して処理が可能です。今後、LIMITなどにも対応していくとのことです。 htmlSQLはPHP製、New BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る SQLはサーバサイドで使われるプログラミング言語と構造体系が大きく異なるために
html5の File API を使って、アップロード無しで画像プレビュー - 超自己満足プログラミング
画像をプレビューするために、サーバへアップロードする必要がなくなります*1。 html fileのアップロードフォームにonchangeを仕込んでおきます。 あとは、プレビュー表示用の要素だけ準備。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <form> <input type="file" name="file" onchange="preview(this)" /> </form> <hr /> <b>preview:</b><br /> <div id="preview_field"></div> </body> </html> javascript function preview(ele) { if (!ele.files.length) return; // ファイル未選択 var f
ブラウザにファイルをドロップしてはいけない - ぼくはまちちゃん！
こんにちはこんにちは！！ 先日、CROSS 2013っていう、エンジニア向けのビール飲み放題のイベントに行ってきました！ そこの「HTML5×セキュリティ」っていうコーナーで、ちょっと喋ってきたんですが、 その時の小ネタを紹介しておきます。 最近、ブログとかのWebサービスで写真をアップロードする時に、 ファイルをドラッグ＆ドロップするだけでできたりしますよね。 いちいちダイアログから選ばなくていいから便利です。 こんなやつ。 この手の仕掛けって、ドラッグ時にボーダーカラーを変えたりして 「いまドラッグ＆ドロップ状態ですよ〜」ってわかりやすく表示されますが、 それって別に、ブラウザが警告の意味で出してるんじゃなくて、 あくまで、Webサービス側が親切で表示してるだけなんですよね。 ってことは ・ドラッグされても特にボーダーラインなどを表示せず ・画面上のどこでもドロップを受け入れるようにし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
html5-memo.com
IDEA * IDEA
