HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
私はWeb制作が初めての方向け講座だけでなく現役の制作者の方向けに様々なWeb講座をしていますが、現役のWeb制作者の方でもHTMLに関して意外と知られていないんだなと思うことがいくつかあります。 特に、HTML5以前の古いHTMLの使い方のまま覚えている方が多いように思われますので、この記事ではそれを中心に取り上げてみました。 なお、この記事はHTML 5.1およびWHATWG HTML Standardの仕様書を参考に書いています。 width=”100%” のように数値以外の文字列を “” に入れるのはNG たとえばimg要素などで、ブラウザの幅いっぱいに画像を表示したいという場合、昔はimg要素に width=”100%” のような属性をつけることがありましたが、HTML5からはwidthなどの属性値に数値以外を含めることができなくなっています。（つまり%などの単位を含めることがで
2017年4月19日 著 著者の安田さんには別途、Facebookの方でコメント付けておきましたが（これを書いている時点では反応は頂けておりません）、プロの編集者が意識する「ドキュメント構造」――HTML仕様の欠点にひきずられちゃダメ！を読んで感じた違和感を記録の意味で覚え書きしておきます。一言で言えば、この記事が指摘している所の「HTML仕様の欠点」とは何か、が自分には理解できませんでした。 HTMLは、見出しは指定できるものの、「章（または節や項）がここからここまで」というのを必ず示す仕様にはなっていません（HTML5のsectionもあまりそうした利用はされていません）。そのため、マークアップの段階で「あ、ここの段落は浮いてるな」というように気づきにくいのです（docbookなど他の文書マークアップ言語では、セクションの範囲を示すものがあります）。 あまりそうした利用はされていません
2016年9月3日、HTML5 CONFERENCE 2016で講演した発表資料
2016年12月21日 著 忙しさにかまけているうち、すっかり投稿のタイミングを逃してしまって、既に旧聞に属する話ではあるけれど、少し前に話題になったh1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い - Togetterまとめについて、アクセシビリティおじさんとして反応しておきたい。 各所で指摘されている通り、h1要素を複数回使うことについて、是か非かでいえば明確に「是」ですね。W3Cの策定する「HTML5」を使おうと、WHATWGの策定する「HTML Standard」を使おうと。ちなみにSEO上でも問題ないらしい。従い、この話題で論じられるべきは、アウトラインアルゴリズムを前提として見出し要素をマークアップすべきか否かでしょう。HTML 5.1の4.3.10.1. Creating an outlineには、以下の注記があります： There
2016年5月9日 著 大藤さんのKindle版リフロー型電子書籍の第2弾、『わかりやすい「HTML5」仕様解説書』は、今年3月18日16時頃から3月19日16時頃まで、Amazonのサイトにおいて誰でも無料でダウンロードできたタイミングで入手していました。仕様の解説、という題名に偽りは無いのですけど、大藤さんと言えばかつて個人的に大変お世話になった『HTML&XHTML&CSS辞典』のイメージが強いこともあって、本書もその類書というか、タグ辞典と呼んだ方が相応わしく思える内容・構成でした。実際、それは第1章「HTML5の基礎知識」で 2014年10月28日にW3C勧告として公開されたHTML5の仕様書における「HTML構文（MIMEタイプ「text/html」で配信するHTML文書）」での要素と属性の使い方について解説しています。 と明記されている通り。しかし、HTML 5.1が今年9月
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View. What are HTML5 semantics and why should we use them? What is divitis and why shouldn’t we use it? This post is meant to answer all these questions,
Use web workers to run JavaScript off the browser's main thread Stay organized with collections Save and categorize content based on your preferences. An off-main-thread architecture can significantly improve your app's reliability and user experience. In the past 20 years, the web has evolved dramatically from static documents with a few styles and images to complex, dynamic applications. However
HTML5test how well does your browser support HTML5? Your browser Other browsers Compare News Device Lab About the test The HTML5 test score is an indication of how well your browser supports the HTML5 standard and related specifications. Find out which parts of HTML5 are supported by your browser today and compare the results with other browsers. The HTML5 test does not try to test all of the new
どうも、まさとらん（@0310lan）です。 みなさんは、「JavaScriptライブラリ」を活用しているでしょうか？ Webサイト制作はもちろんのこと、さまざまなWebアプリやサービスなどを開発する時に、大幅な時間短縮やクオリティを飛躍的にアップすることが出来るようになります。 そこで今回は、国内外で人気が高くて誰でも簡単に扱える「JavaScriptライブラリ」を厳選してご紹介しようと思います！ ■多機能な「写真ギャラリー」を組み込めるライブラリ！ ◆1.Viewer.js 複数の画像を表示する際に、オシャレな「ギャラリー風」に変換してくれるライブラリです。 類似のライブラリはいくつか存在しますが、「Viewer.js」は使い方が非常にシンプルで扱いやすいのに、多機能性も備えているスグレモノとなっています。 基本的な使い方としては、HTMLファイルに表示させたい画像を「リスト要素」で指
2016年2月8日 著 先週末、自分が京都プチ観光を楽しんでいるその最中、Webアクセシビリティの学校 in 福岡が催されていました。connpassのページを見る限り、残念ながら満席には至らなかったようですが、しかし懇親会含めそれなりに盛り上がったようで何より。関連するつぶやきがWebアクセシビリティの学校 in 福岡（2016/2/6）のつぶやき #a11y福岡 - Togetterまとめにまとまっていたので拝見していたところ、気になるつぶやきを発見しました： ヘッドラインのマークアップ、これ止める！ <dl> <dt>2015年1月1日</dt> <dd>記事タイトル</dd> </dl> は『用語「(dtの内容)」、説明「(ddの内容)」で読み上げるスクリーンリーダーもあるとのことなので。 具体的にどの製品のどのバージョンのスクリーンリーダーでのことかは分からないのですが、そういう
※ 適時休憩を挟みます。 ※ 内容は変更される恐れがあります。 セッション Microsoft Edge Deep dive 日本マイクロソフト株式会社 デベロッパーエバンジェリズム統括本部 物江 修 Windows 10 には Internet Explorer とともに新しく開発された Edgeという 2 つの Web ブラウザーが搭載されています。 このセッションでは Edge に焦点をあて、開発の経緯、新機能、これからのロードマップや情報の入手方法など、深く掘り下げて紹介します。 Mozillaとブラウザゲーム Mozilla Japan 清水智公 いまさらブラウザゲー？いやいや最近は、ブラウザでも重厚なゲームを作れるようになってきてますよ。WebGLやWeb Audio、各種の Workers、そしてasm.js と Web Assembly。これらの技術が重厚なゲームの実現を可
2023-04-11 不景気っぽいので急いで起業することにしました #退職エントリ ビジネス 1年半ほど務めたメディアドゥを卒業することになりました。NTTグループで6年半、ピクシブで6年半と、比較的長期間に渡って会社に所属していたため、今回ももう少し長く在籍しようと考えていましたが、様々なタイミングが重なり、短期間で退職することに決め… 2021-12-13 エンジニア採用とマーケティング - カンファレンスやオウンドメディアを科学的に改善する マネジメント インターネット事業を扱うIT業界では、皆がエンジニアの採用に頭を抱えているようですね。その気持、僕もわかります…！新卒採用では鉄板だった逆求人イベントも競争が激化していたり、中途採用も分野によっては壊滅的に人が見つからなかったり。どこの担当者… 2021-11-18 ピクシブを退職します - 創業期から成長期への転換を越えて理解した
PCで我々がWebアプリを多く利用するが、モバイルにおいてアプリは全てだ。今ではモバイルを使っている時間の90%はアプリの利用に費やされている。 ここでいうアプリとはネイティブアプリの事だ。 マーク・ザッカーバーグがネイティブではなくHTML5に投資したのは最大の失敗だったと宣言して以来、モバイルWebは着実に勢いを失ってきている。 しかし皮肉なことに、フェイスブックのエンジニアたちのおかげでそれも過去の事になる。 どういうことか説明しよう。 モバイルWebをReactするザッカーバーグがHTML5は終わったと宣言した翌年、フェイスブックのエンジニアの一人であるジョーダン・ウォークがWeb開発の新しいアプローチであるReactJSを生み出した。 ReactJSは開発者がJavaScriptのスキルを活用し、アプリ開発をシンプルにできるようになった。しかし他にも多くあるイノベーションのうち、
『Instagram』は日常を瞬間をとらえた写真や動画をアートにして友達や家族と簡単にシェアできるサービス。現在、Instagramの月間アクティブユーザー数(Monthly Active Users/MAU)は3億以上で米国国外からの利用が70%以上を占め、累計写真投稿数は300億以上、1日あたりのLike数は25億、1日あたりの平均写真投稿数は7,000万にも及ぶ。そこで、今回は、世界中で愛される『Instagram』がどのような軌跡を辿り成長し続けているのかを追う。 『Instagram』の誕生は2009年に遡る。初めてのプログラミング当時、CEO/co-FounderのKevin Systom氏(以下、Systom氏)は、世界中の写真、位置情報などを用いてリコメンドサービスを提供するNextStop社でマーケティング担当者として働いていた。Systom氏は、コンピューターサイエンス
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！（後編）─技術の進化は必要か？ 白石 俊平（HTML5 Experts.jp編集長） 本対談記事は、Extensible Webが誕生してから2年で何が変わったのか、そしてこれからWebはどうなっていくのかを、有識者の方々にそれぞれの立場から語っていただこうという企画です。 後編である今回は、Extensible Webの現在、そしてWeb技術の未来にフォーカスしたお話になります。Extensible Webの概要や、Extensible Web以前からあるWebの問題点について知りたい方は、前編をご覧ください。 HTML5は（ついに）モジュール化される 白石 では、Extensible Webの考え方が提唱されてから2年が過ぎたわけですが、どのような変化が起きつつありますか？まずは皆さん、思いついたもの
【エキスパートガチトーク】Web技術の未来を「Extensible Web」から探る！ (前編)─HTML5は問題だらけ？ 白石 俊平（HTML5 Experts.jp編集長） 読者の皆様は、「Extensible Web」というキーワードについてご存知でしょうか。 Extensible Webは、現在のWebが抱える大きな問題点を解決しようとする考え方であり、ムーブメントです。 その問題点とは、誤解を恐れず言うなら、「HTML5の流れで生み出された様々なAPIが実際にはあまり使われておらず、役に立っていない」という点に尽きると思います。 Extensible Webはそうした問題を解決するために、「開発者によって拡張可能なWebを目指そう」と呼びかけます。そのために必要なのは、特定のユースケースを想定した粒度の粗いAPIではなく、粒度が細かく、より基本的な機能を提供する低レベルなAPIを
http://eventdots.jp/event/496476 ■概要説明 日本を代表するHTML5エンジニアが一同に集結し、HTML5エンジニアのためのHTML5勉強会を開催します！ 大手企業からフリーランスまで各々の取り組み事例や開発の中でのTipsをお話します。 ■Twitterハッシュタグ #dotshtml5 ■タイムスケジュール 時間 講演内容 13:00 - 受付開始 13:30 - 13:40 本日の流れの説明 13:40 - 14:40 『最近のWeb標準動向（仮）』 矢倉 眞隆氏（@myakura） 『いつになっても議論が終わらないパフォーマンス関連のWeb標準たち』 川田 寛氏（@_furoshiki） 『まだまだ ServiceWorker のはなし。Background Sync も来るよ！』 安田 絹子氏（@kinu） 14:40 - 14:45
2015年はIoT元年と言われるくらい、IoTやWoTという単語がバズワード化してきました。2014年頃からArduinoやRaspberryPi、Galileo、Edisonといったマイコンボードが急激に人気になってきましたね。Web開発者がハードウェア領域に進出しやすくなりました。ただ、センサーの利用など応用的なことをしようとすると、GPIOや電流などの知識をある程度は知っておく必要があります。 今回は、Webの知識だけでほぼ操作でき、初心者向けのTesselというマイコンボードを紹介します。具体的には、Tesselの開発環境整備から環境センサを扱うところまでを紹介したいと思います。Webエンジニア向けに説明を書きましたが、Webデザイナーやディレクターなど、非エンジニアの方でもチャレンジしていただけたら幸いです。 Web制作者向けマイコンボードTesselとは 参考リンク 次世代マイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
