2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ
本日Chromeのバージョン21がリリースされ、getUserMediaが実装されたようです。 getUserMediaを使うと、javascriptを使ってカメラにアクセスできるようなので、やってみました。 参考にしたページは以下 getUserMedia API <body> <video autoplay width="640" height="480"></video> <img src="" width="640" height="480" > <canvas style="display:none;" width="640" height="480"></canvas> <div id="wrapper"> <button id="capture">capture</button> <button id="stop">stop</button> </div> </body> <
![[HTML5]getUserMedia APIを使ってカメラを表示させてみる – o24ブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/8d71ff5111e05619a10d29bb40d7aebaa75c8fbc/height=288;version=1;width=512/https%3A%2F%2Fs0.wp.com%2Fi%2Fblank.jpg)
Brick
What is Brick? Brick is a bundle of reusable UI components created to enable rapid development of HTML5 apps. Brick adds new HTML tags- allowing developers to express the structure of an application in a clearer, more concise manner. What are Web Components? Web Components is a series of emerging W3C standards that allow developers to define custom HTML elements, and interact with them using the n
Dynatable.js - jQuery plugin for HTML5+JSON interactive tables and more
To get started, simply install jquery.dynatable.js (along with jQuery), and add the following in the document.ready or after the table: Read / Normalize The HTML table is scanned and normalized into an array of JSON objects (or collection) where each JSON object (or record) corresponds to a row in the table. Operate The JSON collection can be sorted, searched/filtered, and paginated/sliced. Write
WebRTCで注目された海外企業のサービス19本一挙公開
「WebRTC Conference and Expo 2013 Atlanta」のレポート。日本ではまだまだ様子見の雰囲気が強いWebRTCですが、特にアメリカでは様々なサービスや取り組みが始まっています。日本からもどんどんWebRTCを活用したアクティビティを発信して行きたいですね！海外動向が気になる人は要チェック！ 世界中で注目されるWebRTC HTML5 Experts.jp編集部による執筆記事第一弾とりなす。2013年6月25日から27日の3日間、アメリカのアトランタにて「WebRTC Conference and Expo 2013 Atlanta」が開催されました。カンファレンスでは、Developer、Business、Enterprise、Telecom、Mobileそれぞれの分野についてのパネルセッションやワークショップなど計39セッションに加え、参加企業50社以上の
ユーザーの体感速度を高めるためのJavaScriptチューニング（前編）
連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ
これは凶悪……コーディングのヤバいバグ＆仕様 Best5 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいとです。 コーディング中にバグやブラウザ仕様のせいで、「なんじゃこりゃアア」ってなること、皆さんありませんでしょうか。 今回は、その中でもとりわけ「なんじゃこりゃアア具合」が激しいトラブルを、僕の独断と偏見のランキング形式でお話しさせていただきます。 なんでランキング形式にしたかというと、そっちの方が面白いと思ったからです。面白くなかったらごめんなさい。 第5位 IE9.jsを入れると、IE7で謎の隙間が発生しまくる IE9.jsを採用したサイトをIE7,8で見ると、 <class="ie7_anon ie7_class6" id="ie7_pseudo2" style="overflow: hidden; display: block;"/> こんなものが追記されていたりします。 こいつに高さがあるせいで、隙間が生まれてしまいます。が、こいつがな
CSS Hat translates layer styles to CSS3 code
Goodbyes aren't our thing, but exciting new tools are! 🙌 “Avocode” was sunset on October 1st, 2023 Here at Ceros, we're no good at goodbyes. But one thing we've always excelled at? Embracing new beginnings and creating awesome new solutions. That's why we're kicking off a new era of tools crafted just for you: This transition means we’ve bid a fond farewell to all products offered by the Avocode
wpe no log
Das Site rekord mein Leben. web / design / シュール / idea / 音楽 / ドイツ語 のブログSVGとRaphaël.jsとスマートフォンの動作実験 2010.09.08 22:13 この実験が果たして何の役に立つかはわかりませんが、SVGてそういやよく知らなかったので色々調べてみた。わかった事はSVGはxmlで書かれたベクターパス情報で、Adobe Illustrator CS2以降で書き出せるらしいということ。FireFoxにChrome、SafariにOperaなどのブラウザはHTML5でsvg要素… HTML5 videoのエンコード用ツール「Miro Video Converter」 2010.09.06 16:42 HTML5のvideo要素はご存知の通りブラウザによってサポートしているコーデックに違いがあります。すでにOgg/T
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者のためのWeb標準技術
HTML5 UP! Responsive HTML5 and CSS3 Site Templates
HTML5 Boilerplate: The web’s most popular front-end template
Ionic Framework - The Cross-Platform App Development Leader
Snap.svg - Getting Started
新しいCSSの仕様を色々調べてみた
Seneste nyt
Kern Type, the kerning game
Responsive web design tool, CMS, and hosting platform | Webflow
