SVGの画像サイズ指定でわかったこと - Qiita
せっかくHTML5なんで、SVGタグを使って画像をきれいに表示させることを検討してもらったのですが、 それを利用しようとしてわからなかったことが、サイズ指定でした。 imgタグだと、widthとheight属性を設定するかCSSで同様の指定をすればいいだけです。 さくっとできます。 しかし、SVGだとキャンパス制御になるためちょっとだけ面倒なようです。その面倒な面がわかったため取りまとめします。 svgタグは、HTML5で追加された新しいタグのようで「キャンパス」という表現が使われていることから、 ブラウザをキャンパス用に自由に自在に位置指定でオブジェクトを配置できる。 けれど、その自由さ故の分かりにくさがあります。 今回、サイトのロゴファイルをSVGファイル形式で保存した、logo.svgというファイルを作成した前提で説明です。 logo.svgで表示される大きさは幅450px高さ114
無料で商用利用も可能なパーティクル表現が作れるHTML5製のデザインツール「Particle Develop」
炎・雪・煙・光など、パーティクル・システムを使って表現するようなものをウェブサイト上で無料で簡単に作成し、そのまま商用利用してしまってもOKなデザインツール「Particle Develop」が公開されています。一体どんなことができるのか使ってみました。 HTML5製のデザインツール Particle Develop - ICS http://ics-web.jp/projects/particle-develop/ これが「Particle Develop」。画面左側には自身が作成したパーティクル表現がプレビュー表示され、右にはパーティクルのテンプレートが並んでいます。記事作成時点でテンプレートは12種類あります。 試しに「Fire」というテンプレートをクリックするとこんな感じ。自身の求めるテンプレートをまず選択すればOK。 プレビュー画面の赤枠部分にある四角いアイコンは、ドラッグ＆ドロ
CSSだけでアスペクト比を固定するテク - Qiita
Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。 レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こういうテクニックを使ってアスペクト比を固定してやります。 imgの場合 HTML
Webフロントエンド表示速度、最速化手法まとめ - Qiita
やりすぎても無駄になることがあるので、必要十分なバランスを見極めて実施する。主に社内のプログラマ向けのまとめ資料。他にもあれば追記していく予定。 ページの状態を調べる まず対象のページが、どういった状態なのかを調べる。 Google PageSpeed Insights これを100点満点にする必要はないが、赤くなっている項目に関しては、なるべく対応したほうが良い。モバイルサイトにも対応しているので便利。 https://developers.google.com/speed/pagespeed/insights/?hl=ja pingdom 実際にページにアクセスしてスピードを計測できる。海外サーバなので、けっこう遅い…。最適化前と最適化後で比較するのに使うといい。 http://tools.pingdom.com/fpt/ Chromeデベロッパーツール コンテンツの読み込み順序／速度
ときどきWEB | HTML5のFile APIでローカルファイル情報取得してやんよ!!!
そろそろHTML5 APIのひとつでもリファレンスしていこうかな・・・ かといって今さらcanvasとかやってもしょうがないし、MathMLみたいなマニアックなものは覚えても使う機会があるかどうか・・・という事で 『File API』というヤツを手始めに覚えようかと思います。 『File API』について HTML5以前はブラウザ(またはWebアプリ)からローカルファイルを扱うには<input type="file">タグを利用してユーザーがファイルをアップロードする必要がありましたが、 File APIの登場でJavaScriptからローカルファイルを直接読み取ることができる様になりました。 このAPIはユーザーが指定したローカルファイル(Webブラウザが動作するパソコンのHDDやSSDといったストレージに置かれたファイル)の情報やデータを取得できます。 主なAPIの種類 File AP
placeholder のブラウザごとの違い＆その対処法など - Qiita
HTML5で追加されたフォーム部品（しかしXHTMLでもみんな平気で使っていたりする）の placeholder について、少しだけ細かい話をまとめます。 未対応ブラウザ おそらく現状で気にする必要がある未対応ブラウザは、IE8・9くらいだと思います。もしバージョン4未満の Android に対応する必要がある場合はさらに色々と細かい話がありますが、長くなるのでここでは省きます。 placeholder 属性をIE8・9でも有効にするためのプラグインはいくつかあるので、適当なものをIE9以下の場合だけ使用するように記述すると良いです。たとえば筆者は以下の jQuery プラグインを使っています。 https://github.com/mathiasbynens/jquery-placeholder このプラグインの使い方は簡単で、jquery.placeholder.min.js を配置し
今どきの入力フォームはこう書く！ HTMLコーダーがおさえるべきinputタグの書き方まとめ - ICS MEDIA
みなさん、入力フォームを制作する際、どのような施策をおこなっていますか？ 入力項目を見直したり、入力ステップを明確にしたりなど、入力フォーム最適化をおこなっていると思います。そのことで、コンバージョン率があがったり、ユーザーがストレスを感じないようになるでしょう。入力フォーム最適化はEFO対策 = Entry Form Optimizationとも呼ばれます。 サイトの設計段階で検討すべきことが多いですが、コーディングでも考慮すべき事が多々あります。今回はHTMLコーダーがエントリーフォームを制作する際に考慮すべき点について紹介します。 ※本記事では最近のブラウザに適したHTMLコーディング方法の紹介を目的としています。そのため、デザインとアクシビリティーでのベストプラクティスを紹介したものではありませんのでご了承ください。 自動入力機能に対応しよう Google Chrome（デスクトッ
DOCTYPE宣言、IE対応、デザインカンプの解像度などのアンケート結果
Web制作で以前から気になっていたことについて、Twitter のアンケート機能でアンケートを取ってみました。 アンケートの実施期間は2016年1月〜2月です。 回答者の属性について Twitter のアンケート機能では「誰が回答したか」は質問者でも見ることかできません。 それぞれの質問の回答件数は100件以上で、普通に考えれば私のフォロワーの方が多いと思われます。 （ご回答いただき、ありがとうございます。） 私のフォロワーの方は東京の方が多いですが、Twitter アナリティクス によると、近畿、大阪、中部、福岡、東北など日本全国様々な地域の方がいます。 98% が日本在住の方です。 フォロワーの方の興味関心としては、モバイル、テクノロジー、Webデザイン、コンピュータープログラミングなどとなっています。 性別（推定）は 73% が男性、27% が女性となっています。 DOCTYPE宣言
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015
誰でもハイパフォーマンス！OnsenUIが変えるハイブリッドアプリ開発の常識ーng-japan 2015 佐川 夫美雄（Ashiras, inc.） この記事は、Angularをテーマとした日本初のカンファレンス 「ng-japan」のイベントレポート（第2回目）です。 はじめに HTML5ハイブリッドアプリケーションとは、内部の実装にHTML5が利用されているモバイルアプリケーションです。アプリの内部実装にHTML5を使うことでクロスプラットフォーム対応が可能になりますが、その代わり問題となるのがUIとパフォーマンスです。このセッションでは、Angularの上に構築されたUIフレームワークであるOnsen UIを紹介しながら、Angularでどうすれば高速かつ快適なUIを持つモバイルアプリを作れるかについて話します。 AngularとOnsen UIで作る最高のHTML5ハイブリッドアプ
divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ
HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Content in HTML5 -Div or Section or Article 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 divとsectionとarticle、それぞれの特徴 divとsectionとarticle、どれを使う？ sectionとarticleの組み合わせ方 divとsectionとarticle、それぞれの特徴 d
HTML5とCSS3で何ができるかを実際に動かして学べる「The Expressive Web」
「HTML5」や「CSS3」を導入することで、ウェブサイトの作成やウェブデザインがさらに便利になります。そんなHTML5とCSS3で追加されている新しい要素で「何ができるのか？」ということが、実際に試したり動かしたりしつつ学べるAdobeの「The Expressive Web」です。 HTML5 and CSS3 - Adobe - The Expressive Web - Beta http://beta.theexpressiveweb.com/ 「The Expressive Web」は左側に各コンテンツのメニューがあり、1つずつ見ていくことでCSSやHTML5の動作が分かっていくというウェブサイト。一番上の「CSS3 Animations」をクリックすると、青いキャラクターと背景がCSS3アニメーションで動いている様子を見ることができます。CSS3アニメーションはHTMLにキーフ
HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
2015年2月10日（火）、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。本記事では口頭で発表した内容もできる限り記載しました。 なお、前編（CanvasとWebGLの比較）と後編(WebGLの最適化)の二部構成にしています。前編となる本記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト）は従
レスポンシブイメージのネイティブサポート - HTML5 Rocks
The picture element Stay organized with collections Save and categorize content based on your preferences. The previous module demonstrated how the srcset attribute allows you to provide different-sized versions of the same image. The browser can then decide which is the right version to use. If you want to change the image completely, you'll need the picture element. In the same way that srcset b
androidでHTML5 audio使ったHLS形式のストリーミング再生が上手くいかない - lxyuma BLOG
スマホのブラウザ上で、音声のstreaming配信がしたい。 そこでhtml5 audioでHLS形式のURL(*.m3u8)指定して再生した時に 動かないandroid端末が一部あった。その対応した話。 結論は、単に、audio.type指定すれば良かったというだけの話だけど、 せっかくなので、スマホのストリーミング配信の話から、まとめる。 目次 flashとスマホ hlsとは html5 audio androidで再生できない話 その対応どうしたか？ flashとスマホ ストリーミング配信というと、PCは未だ、flash使う事が多いと思われる。 試しに、amazonの視聴見てみると、やっぱりflash。 スマホでflashは、どうかというと、 iphoneでflashは入らない。 iOS8でflash対応という記事が少し前にあったが、日付の通り、エイプリルフールのネタなので、注意。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2011/03/waiariahtml5inputrequiredwcag.html
Downloads - html5resetcss - Project Hosting on Google Code
https://qiita.com/hp0me/items/1c8d099bacbb5e068081
ブラウザ上でストーリー分岐型HTML5小説が制作できるオープンソースツール「Twine」 | HON.jp News Blog
HTML5でアニメーションを書き出してくれる「html5maker」 - Webクリエイターズニュース
Ionic Framework - The Cross-Platform App Development Leader
