HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利
HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 HTML5やCSS3のブラウザサポート状況が確認できるcaniuse.comのベータ版が2014年6月に公開され、デザインが刷新されました。 このベータ版のデザインの良さにも驚きましたが、なにより驚いたのはGoogleアナリティクスとの連携機能でした。ベータ版の「Settings」から設定を行うと、Googleアナリティクスのデータを読み込むことができ、自分のサイトに訪れるユーザが使うブラウザで、ある特定のHTML5やCSS3の機能が、どのくらいサポートされているかがわかります。世の中便利になりましたね〜。 実は現行版でも同じ機能が使えるのですが、残念ながらぜんぜん気づきませんでした。 ※ちなみに、このベータ版は数週間テストを行いフィードバックを得てから、本番サイトに
入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
ブラウザのしくみ: 最新ウェブブラウザの内部構造 - HTML5 Rocks
How browsers work Stay organized with collections Save and categorize content based on your preferences. Preface This comprehensive primer on the internal operations of WebKit and Gecko is the result of much research done by Israeli developer Tali Garsiel. Over a few years, she reviewed all the published data about browser internals and spent a lot of time reading web browser source code. She wrot
Picturefill
The picture element, srcset and sizes attributes, and associated features allow web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill enables support for the picture element and associated features in browsers that do not yet support them, so you can start using them today! Picture
Componentによるフロントエンドのパッケージ管理
直近で、新規案件に関わることになりそうなので、ライブラリ選定やタスクランナー、そして今回の依存管理のようにベーシックな話が続いてます。次第に、具体的な実装やコード設計のポストが多くなる･･･はず。 今回はVue.jsでも触れましたが、改めてcomponent - modular javascript frameworkについて。 概要 Componentはパッケージマネージャー兼、依存解決込みのビルドツールです。クライアントサイドについて、JSのパッケージマネージャーやビルダーは既にありますが、Componentは HTML/CSS/JSをセットにして扱うことができます。 npmでいうpackage.jsonと同様に、component.jsonという定義ファイルによって、パッケージの依存関係やリポジトリなどの各種情報を示します。 component/component コア部分のリポジト
CSS の white-space: nowrap; + HTML の wbr 要素 + 日本語コンテンツの組み合わせで起きる問題を回避する
CSS の white-space: nowrap; + HTML の wbr 要素 + 日本語コンテンツの組み合わせで起きる問題を回避する 2013年09月03日 16:48HTML / CSS CSS の white-space: nowrap; と HTML の <wbr> 要素の組み合わせによる挙動が Firefox と Google Chrome で違ってて、 特に日本語コンテンツの表示を統一しようとすると何かとややこしいので その回避方法を書いてみます。 その前にちょっと前提のお話を。 white-space: nowrap; のおさらい CSS を書く人には説明の必要もないと思うんだけど、 white-space というのは HTML の要素内で ホワイトスペース（スペース文字や改行コードなど）がどのように扱われるかを指示するための CSS のプロパティですね。 W3C によ
HTML5 勧告候補が更新、template 要素が追加など
HTML5 勧告候補が 2月 4日付けで更新されました。勧告候補としての更新は今回で 2回目 （去年の 8月 6日付けで更新されています） ですが、今回は新たに template 要素などが追加されたようです。 Five Documents Published by the HTML Working Group ： W3C News HTML5 - W3C Candidate Recommendation 04 February 2014 template 要素とは？ template 要素は HTML5 extension （HTML5 拡張仕様） として策定されていた要素で、所謂 Web Components 仕様の 1つ。 JavaScript によって文書に挿入する HTML の断片 （パーツ） をテンプレートとして定義します。この要素でマークアップされた部分は通常状態ではレンダリ
EmmetのBEMフィルターでBEMるときのHTMLをサクッと書く
BEM Advent Calendar 2013の3日目です。 BEM、良さげだけどHTML書くのが面倒になるじゃん、class長いし、多いし。などと思ってBEMを敬遠されている方がいらっしゃったらEmmetのBEMフィルターを利用すれば良いと思います。 Emmetって？ Zen-Codingをさらにすごくしたやつです。以下あたりが分かりやすいと思います。 Zen-Codingの次期バージョン、Emmet について｜Web Design KOJIKA17 EmmetのBEMフィルターを使ってサクッとHTMLを書いてみる BEMろうかなと思ってはみたものの、いざやってみると毎回「ブロック名-エレメント名」なんてclassを書いてらんねーよとなって途中で投げ出してしまうということがあります。僕は結構あります。 まぁ、それでもBEM + 自分ルールの良い感じの HTML / CSS にはなるので
ID使っても別に問題ない
CSSでID使うの良くない……どころか、ID使うのはゴミクズカスみたいな風潮で辛い。その根拠はいくつかあり、それらはCSSだけをただそのまま書く場合には納得出来ないこともないかなーと思うので余計に辛い。特にOOCSSのようなアプローチではIDは混ぜるな危険。だからといってIDを使わないのがベスト・プラクティスなわけじゃない。 CSS Lintの利用が広まり、これがID使うなって怒るのも原因の一端な気がする。Disallow IDs in selectorsではIDの問題点として以下のようなものを取り上げている。 However, IDs have a downside: they are completely unique and therefore cannot be reused. つまりユニークなため再利用できないというマイナスの面がある、と。確かに再利用できない。でもこれはマイナス
IDを使わないCSSの設計 - kojika17
CSSのスタイリングではIDを使用しない、という話をよく聞くようになりました。 私も最近は、IDを使わずにコーディングしているので所感を書きます。 CSSでIDを使わない 「IDを使わない」ということをHTMLの変化で示すと、以下のようになります。 <div id="header" class="clearfix"> <h1 id="logo"><a href="">logo</a></h1> <ul id="heaeder-info"> <li class="about"><a href="">about</a></li> <li class="sitemap"><a href="">sitemap</a></li> </ul> </div> ↓↓↓↓ <div class="header clearfix"> <h1 class="logo"><a href="">logo</a></
Easy for editors, and a developer's dream cms
Symfony 5 extensions There’s no limit to the functionality you can incorporate in your Bolt project. At its core, Bolt is a Symfony application, so you can use the tools provided by the framework. Twig templates There's a reason why Twig is the de-facto standard across the PHP community. It is flexible, fast and secure. Take a look how easy it is to generate the HTML for your pages. Built-in inter
レスポンシブWebデザインにおけるコーダーの役割 World of granshe.
先日、Twitterで 『レスポンシブWebデザインをする際に、ナビゲーションなどをPC用とSP用の2種類、HTML内に書いて、出し分けることがあるようだ』 というようなことをつぶやいたのですが、自分では思ってもいないところでリツイートされました。 自分はちょっとした愚痴のつもりで書いたのですが、これはもうちょっと深く考えるべき問題なのかもしれない。と感じ、 自分なりにもうちょっと考察して、人と話して、自分なりの答えが見つかったので書いてみます。 私の周辺では、レスポンシブWebデザイン（以下、RWD）の案件をやるとき、「PC用」「スマホ用」2種類のデザインをお客さんに提出し、それをベースにコーディングすることが多いです。 PCサイトとスマートフォン最適化サイトを両方作るのと同じような手法です。 いわゆる「スマートフォン最適化」では、PCとスマホ用のHTMLは別で作れますので、デザイン上の
CSSだけで簡単に吹き出しを作成する方法4つ！
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <style type="text/css"> * { box-sizing: border-box; } .wrapper { padding: 30px; position: relative; } .box { position: relative; background: #ccc; height: 50px; width: 100px; margin-bottom: 20px; } .box:after { content: ''; position: absolute; border-top: 10px solid #ccc; border-right: 5px solid transparent; border-left: 5px solid tran
[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました
本日HTML5の各タグを遊びながら覚えられる「HTML5KARUTA」を公開しました。これがどういうモノかを紹介します！ 9月くらいから構想していた、ゲームを通してHTML5を覚えるというコンセプトから作られたHTML5KARUTAを作成、公開しました。まだイメージしていたものの80％程度の出来ですが、どうぞご覧ください★ http://roadstohtml5.com/html5karuta/ HTML5KARUTAは、日本の遊びカルタというゲームを通してHTML5のタグを覚えようという主旨のゲームです。 読み札にはHTML5の各タグの説明が書いてあります。絵札にはタグの名前自体があるだけです。タグの説明を聞いて、それが何のことかわかったら札を取る。日本人にはおなじみのルールですね！最近の若い人が知っているのかは知りませんけど…ｗ HTML5KARUTAを作った動機 まずなぜこれを作った
![[HTML5]遊びながらタグを覚える「HTML5KARUTA」を作りました](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed4b0ae9d3cd3869de4fb9a3f429e329064fe56b/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2012%2F12%2Flaunch-html5-karuta-04-150x150.png)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Roots | Modern WordPress Development
CodePen - Front End Developer Playground & Code Editor in the Browser
Bumberboom.net