知っておくと便利なHTML5の機能、要素や属性のまとめ
今まであまり使用されていなかったけど、現在の環境では有用であるHTML5の便利な機能、要素や属性を紹介します。 10 useful HTML5 features, you may not be using by Tapas Adhikary 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに details要素 contenteditable属性 map要素 mark要素 data属性 output要素 datalist要素 値range meter要素 input要素 次に学ぶべきこと はじめに HTML5は、新しいものではありません。すでにわたし達は最初のリリース（2008年1月）からいくつかの機能を使用してきました。#100DaysOfCodeの取り組みの一環として、HTML5の機能リストを詳しく調べました。私が見つ
HTML5 Conference 2018 登壇資料まとめ - Qiita
HTML5 Conference 2018 の登壇資料のまとめです。 資料を発見次第随時アップデートしていきます。 https://events.html5j.org/conference/2018/11/ 2018年11月25日（日） 東京電機大学 千住キャンパス 1号館 タイムテーブル https://events.html5j.org/conference/2018/11/session/ ハッシュタグ 総合: #html5j ホール（2階）: #html5j_h 各ルーム（1階:A-C/2階:D,E）: #html5j_a #html5j_b #html5j_c #html5j_d #html5j_e セッション ZOZOのグローバルECのフロントエンドアーキテクチャ設計 （権守健嗣さん） 光を超えるためのフロントエンドアーキテクチャ （mizchiさん） TypeScript E
<fieldset>－HTML5タグリファレンス
<fieldset>タグは、フォームの入力項目をグループ化する際に使用します。 <fieldset>～</fieldset>の中に配置された <input>・ <select>・ <textarea>等のフォーム部品がグループ化され、一般的なブラウザではボーダーで囲まれて表示されます。 フォーム部品のグループにキャプション（タイトルや説明）を付ける場合には、<fieldset>～</fieldset>の中の 最初の<legend>で指定します。 disabled属性は、グループ内のフォーム部品を無効にする際に使用します。 <legend>でグループ名を指定している場合には、 <legend>～</legend>の内容を除く、それ以外のフォーム部品が無効となります。 disabled属性は、まだサポートしているブラウザが少ない（無い？）ようです。 form属性は、どのフォームと関連付けるかを
いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ
HTML5のマークアップ仕様で追加された「カスタムデータ属性」。でも何のためにあるのか、どう使うのか、説明できますか？ この記事ではHTML5カスタムデータ属性の使い方を説明します。また、Web開発者の仕事に役立つユースケースも紹介します。 なぜカスタムデータ属性か？ 多くの場合、DOM要素が異なれば、それに応じた情報を格納する必要がでてきます。そういった情報は読者にとっては不必要かもしれませんが、開発者にとっては簡単にアクセスできれば仕事がずっと楽になります。 たとえば、Webページにいろいろなレストランを載せたリストがあるとします。レストランで出される食事のタイプやレストランまでの距離についての情報を格納する場合、HTML5が登場する前は、 HTMLのclass属性を使っていたと思います。もし、ユーザーが特定のレストランについて知るために、レストランのidも格納する必要が出てきたらどう
HTML 5.2の新機能・削除された機能、変更された記述ルールのまとめ
HTML 5.2は2017年12月14日に勧告（Recommendation）され、仕様がRECステージに達しました。これはW3Cメンバーとディレクターの正式な承認を受けたことを意味し、Web制作者として、新しい機能の実装を開始するのに最適な時期になります。 HTML 5.2ではいくつかの新機能と削除された機能があり、記述ルールもいくつか変更され、今までinvalidだったものがvalidになり、新しくinvalidになったものもあります。 すべての変更点はHTML 5.2: Changesで確認することができます。 Web制作に最も影響を与えると思われるいくつかの変更点について説明します。 What's New in HTML 5.2? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 HTML 5.2の新機能 HTML 5.2
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた
Webアプリのアクセシビリティを追求せよ！「インクルーシブ」なマークアップを議論しながら学んでみた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、freeeの伊原力也さんと、ビジネス・アーキテクツの太田良典さんです。 お二人のセッション「多様なユーザーニーズに応えるフロントエンドデザインパターン〜書籍「インクルーシブ HTML + CSS & JavaScript」より」に関するスライド資料は、こちらで公開されています。 「インクルーシブ」に込
"地味にスゴい"ってホント!? わかりやすくHTML5.1の追加された新機能を紹介
HTML5がリリースされて早2年。 HTML5のリリースによって、Webの世界も大きく前進しました。 シンプルなタグで書ける便利な機能がいくつも実装されただけではなく、1999年以来ずっとWebの技術を支えてきたHTML4.01が初めてメジャーアップデートを迎えたからで、あえてHTML5が登場してからは、「このサイトはHTML5で書かれています」と明示するホームページまで存在します。 そこで今回は、HTML5.1で採用された機能の中で特に注目すべき新機能をピックアップしてご紹介します。 補足 ありがたいことに次のHTMLのアップデートまで10年以上も待たなくてもいいようです。2010年10月、Webで使用される各種技術の標準化を推進する為に設立された標準化団体であるW3Cは、HTML5に残された課題を解決するためにHTML5.1の構想を組み立て始めました。最終的には、HTML5.1は、20
HTML5プロフェッショナル認定資格がIT技術者・非技術者を問わず就職・転職に効く理由と背景とは
登場から2年が過ぎ、業務システムの世界でも、HTML5の活用の場が急速に拡がりつつある。本稿では、HTML5に関する技術力と知識を認定する「HTML5プロフェッショナル認定資格」を運営するLPI-Japanでテクノロジ－・ディレクターを務める和田真輝氏に、業務システムにおけるHTML5の導入・活用状況や、HTML5プロフェッショナル認定資格の狙い、そして技術者のスキルアップ＆キャリアパス設計における意義とメリットなどをうかがった。 なぜ、業務システム開発でHTML5の利用が急増しているのか ――2014年10月のW3Cによる勧告から2年が過ぎて、HTML5そのものは私たちの周りに普及してきた印象がありますが、肝心のそれを生かせる仕事というと、まだおぼろげなイメージしかありません。具体的には、どのようなものがあるのでしょうか。 和田真輝氏（以下、和田）：HTML5はすでに多くの分野で利用され
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
HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説
2016年11月1日に、HTML 5.1が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。 その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。 Document Outlines in HTML 5.1 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は以前、HTMLのページにvalidなアウトラインを持つ重要性について説明しました。 先日、HTML 5.1が公式にリリースされました。 興味深い変更が数多くあり、そのうちの2つはvalidなアウトラインに関係しています。 削除 アウトラインを作成するh1要素を入れ、ネストされたsection要素の使用。 変更 hea
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のみでレスポンシブな画像を取り
最新版！あらゆるWebページを作成する時に使える、必要最小限をまとめたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 HTML5 Boilerplate -GitHub イラスト: Girls Design Materials HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title
W3C、「HTML5.1」を今年9月に勧告とする計画。仕様はGitHubで公開
W3CでHTML5仕様の策定を行っているWeb Platform Working Groupは、W3Cのブログにて「WORKING ON HTML5.1」という記事を公開し、2016年9月にHTML5.1仕様を勧告にする計画を明らかにしました。 6月中旬までにHTML5.1の勧告候補を公開し、9月に勧告にするとのこと。 The plan is to ship an HTML5.1 Recommendation in September 2016. This means we will need to have a Candidate Recommendation by the middle of June, following a Call For Consensus based on the most recent Working Draft. 計画ではHTML5.1の勧告を2016年9
Web制作者は要チェックです！新バージョンのnormalize.css V4はモダンブラウザ・スマホ・HTML5に完全対応 | コリス
2016年3月19日に、モダンブラウザ、スマホ、HTML5に完全対応した「normalize.css」の新しいバージョン「normalize.css v4.0.0」がついにリリースされました！ v3から細かい改良が重ねられたv4で定義されている各スタイルが、どのように機能しているか紹介します。 normalize.css normalize.css -GitHub Changes to normalize.css normalize.cssの特徴 html, body, :rootなどの全体系の定義 HTML5の新要素用の定義 リンク系の定義 テキスト系の定義 埋め込みコンテンツ系の定義 グルーピングコンテンツ系の定義 フォーム系の定義 normalize.cssの特徴 normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（後編）
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（後編） 白石 俊平（HTML5 Experts.jp編集長） スゴい人たちに集まってもらって、「Webは死ぬか」について語り合っていただいたスペシャル企画。前半は「Webメディア・コンテンツ」について、それぞれのご意見を伺いました。 メディアビジネスからCookie、ディープラーニングまで──ビジネス面に注目した 前半とは異なり、後半はWebのテクノロジー面にフォーカスして、「死ぬか？」を論じていただきたいと思います。今回は、（含蓄を多量に含んだ）脱線多めで失礼します！ 「ブラウザ」の存在感が薄れていく時代 白石 前半はビジネス面に注目してお話いただいたので、後半はテクノロジー面にフォーカスしていきたいと思います。いわば、「Webテクノロジーは死ぬか？」というお話になるかと思います。
すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった-前編- | HTML5Experts.jp
【及川卓也・清水亮・羽田野太巳・藤村厚夫】すごい人達呼んで「Webは死ぬか？」をマジメに語り合ってもらった（前編） 白石 俊平（HTML5 Experts.jp編集長） 今また、「Webの死」を予言する論調をそこここに見かけます。モバイルやウェアラブルといった新たなコンテキストが、プラットフォームネイティブな技術の優位性を後押ししているだけではなく、Webコンテンツの消費の仕方を大きく変え、Web上で成り立っていたビジネスモデルをも脅かしつつあります。 本当にWebはヤバいのか、気になってしょうがないので、スゴい人たちに集まってもらって、「Webは死ぬか」について語り合っていただきました。Webを取り巻く様々な論点を包括的に議論でき、貴重な場になったのではないかと自負しております。 Webに関わる人にとっては必読の対談だと思います！でもこの記事、長くて濃いので、心してかかってくださいね:-
Web制作者はブックマーク必須！LIGブログ記事を知りたい分野別にまとめてみました。
日本のみなさん、こんにちはぁ！LIGサイトを教科書代わりに使っています、ライターの、のび太です。 今回は、これまでLIGで公開された記事をWeb制作者が見たいもの、学びたい分野別にまとめてみました。ぜひブックマークしておいて、時間があるときに見ておいてくださいね。特にWeb制作者の方は必見だと思います。めっちゃ勉強になること間違いなしっす！ LIGブログ 知りたい分野別リンク集 Sass、Compassを学びたい人 CSSの常識が変わる！「Compass」、基礎から応用まで！ これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) 目指せSassマスター！デザイナーがすぐ実践出来る基本テクニック12連発 Compassの設定ファイル「config.rb」の編集方法 Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた Sass
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5で音を扱う3つの方法
【HTML5 Conference 2015】ウェブが“どこにでもあるもの”になったその先にあるものとは、ウェブ技術者の祭典「HTML5 Conference」 
