レスポンシブイメージのネイティブサポート - 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
ポリフィルとは？ - Web/DB プログラミング徹底解説
HTML5 は主要なブラウザーの新しいバージョンで実装が進んできている新しいテクノロジーです。 最新のブラウザでも全て実装できている訳でも無いのですから、古いブラウザーでは当然ながら実装されていない機能、認識されない要素、属性などが多数あります。 古いブラウザーに欠けている部分、新しいブラウザーでも足りない機能の穴を埋めることを、ポリフィル (polyfill) という風に呼ばれています。 もともと、壁の穴を埋めるための有名な商品で Polyfilla (ポリフィラ) というのがあり、ブラウザの穴を埋めるという行為も名前からポリフィルという言葉を動詞として使ったということです。 ちなみに少し脱線ですが、こうした「商品名からの命名」として思い出すのは "Raid" (レイド) でしょうか。 Raid というのはアメリカで有名な殺虫剤で、日本で言えば「キンチョール」という感じになります。 その
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
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 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など
HTMLドキュメントのhead内に記述するmeta要素やlink要素、ソーシャルサービス用の要素、ブラウザ用の要素、スマホアプリ用の要素などをまとめた「HEAD」を紹介します。 HEAD -GitHub 翻訳するにあたりいくつか尋ねたところ、著者様はとてもいい人でした。 公開当初から内容がアップデートされ、ライセンスもCC0に変更されています。 オススメの最小限の構成 要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 スマホアプリ関連のhead内の要素 メモ オススメの最小限の構成 下記は、head内に記述する最小限のタグです。
よこ並びのCSS。
スマホサイトが優勢な昨今、要素をよこ並びにする機会は減ってきているのかもしれないけれど、大きい画面で見るサイトでは、ナビゲーションやタブや、商品一覧など、よこ並びにレイアウトする機会はまだまだあるんじゃないでしょうか。そんな「よこ並びにするためのCSS」も、やり方はさまざま。お馴染みのやつから、新参者まで、順番に見ていくことにします:)。 よこ並び？ そう、よこ並び。 例えばボタンを横一列に並べたり。商品の情報なんかだと、横に3つずつ並べて改行して、多段に並べる場合もありますね。偏（ひとえ）に「よこ並び」と言えど、CSSにはそのやり方がたくさんあるんです:o。 導入 この記事で紹介するよこ並びの方法は以下の通り。 CSSの歴史的な背景から、最初はfloatプロパティを使った方法を紹介します。 float（フロート） 要素を左右へ寄せるためのプロパティ。 後続する文章（テキスト）などのインラ
HTMLテンプレートの基本ファイル一式、Webページを実装するための必要最小限をまとめたHTML
HTMLで、Webページやアプリを作成する時に役立つ、フロントエンド用に必要最小限をまとめたシンプルなHTMLの基本テンプレートのファイル一式を紹介します。 v.8.0.0がリリースされ、現在の環境に合わせた設計にアップデートされました。 IE11を含む、すべてのモダンブラウザをサポートしています。 HTML5 Boilerplate -GitHub HTML5 Boilerplateの特徴 HTMLの基本テンプレート HTML5 Boilerplateの使い方 HTML5 Boilerplateの特徴 HTML5 Boilerplateは、Webサイトやアプリを実装するためのプロフェッショナルなフロントエンド用のHTMLの基本テンプレートです。 実践的な基本のテンプレート 200人を超える貢献者による分析・研究・実験をもとにしています。 ブラウザの見え方を最適化 プログレッシブエンハンス
Projects • Lea Verou
Ordered mostly by release date, with those with the most impact featured first. Please note that this mainly contains open source tools I’ve developed, and is only a subset of my work. It does not contain any of my work designing web technologies, documenting web platform design principles or doing design reviews for proposed web technologies as a W3C TAG member, or any of my early entrepreneurial
schema.org 日本語訳 - 始めましょう！
ウェブサイトを作っているほとんどの人がHTMLタグについてご存じでしょう。一般的に、HTMLタグはブラウザーに対してタグ内の情報をどのように提示するかを指示します。例えば、<h1>Avatar<h1>とすれば、ブラウザーは文字列Avatarを大見出しとして表示します。しかし、HTMLタグはこの文字列が何を意味するかについての情報は与えられません。Avatarは大ヒットした映画のことかもしれませんし、インターネット上のプロフィール画像のことを指すかもしれません。このために、検索エンジンが関連した内容を見つけるのが難しくなってしまうのです。 Schema.orgは、ウェブサイトを、Google、Microsoft、Yahoo!などの巨大な検索エンジンでヒットさせるために使える用語集を提供するものです。 Schema.orgの用語集とmicrodata formatを使用すれば、HTMLに情報を
WAI-ARIA の基礎知識 | Accessible & Usable
公開日 : 2014年4月15日 (2018年1月20日 更新) カテゴリー : アクセシビリティ / 情報設計 (IA) WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリー
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
PatternBolt
Patternbolt is a fine selection of SVG pattern backgrounds, packed in a single or SCSS (or CSS) file. The pattern is added in the ::after element and your original DOM's element still be inalterate and ready for manipulations. As .svg they weigh much less than .png or .jpg and they are also really easy to manipulate by CSS rules. As they are vectors they never pixelate, not even on a 4k display. T
パララックスエフェクトの基本
Sample #7 | jQuery × CSSの合わせ技 最後に今回の集大成を作りましょう。先ほど作ったCSSのみのサンプルに、jQueryを駆使してよりリッチな動きを加えていきます。 まずはjQueryで各要素を操作しやすくするために、Sample #6のHTMLに以下のように追記していきます。 <section id="first" class="content"> <p class="logo sprite" data-speed="-1.5" data-offsety="100">jQUery x HTML5 x CSS3</p> <article> <h1>Parallax sample.</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p> </article> </section
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Online Markdown Editor - Dillinger, the Last Markdown Editor ever.
Web資格なら「HTML5プロフェッショナル認定試験」公式サイト
itemtype - HTML: ハイパーテキストマークアップ言語 | MDN
#noscript
ja · Beginners · WPD · WebPlatform.org
coolwebwindow.com