https://internetingishard.com/html-and-css/
スタイル・ガイド・ジェネレーターについて
僕は以前からJavadocを踏襲した形のスタイル・ガイド・ジェネレーターには構造的な欠点と思想的な欠点を持っていると考えている。実際にはスタイル・ガイドを中心としたウェブ制作体制をよく利用すること、そしてその中での作業を自動化してくれるであろうジェネレーターには期待していること、はあらかじめ断っておきたい。 構造的な欠点は、コメントとして埋め込まれることになるであろうHTML断片が重複しやすいこと、だ。コンポーネントという単位ではまず重複することはないが、コンポーネント間で共有するクラスでは必ず重複することになる。もちろんコメントに埋め込むコードは短いもので、場合によっては軽量マークアップ言語を利用できるため、コストとしては微々たるものだ。しかし単純な繰り返し作業を省力化するための自動化ツール(ジェネレーター)が、そういったまた別の単純な繰り返しを強いるというのはどこかがおかしいと感じる。
HTML 属性リファレンス - HTML: ハイパーテキストマークアップ言語 | MDN
HTMLチュートリアル初めてのウェブサイト: コンテンツの作成HTML によるコンテンツの構造化基本的な HTML の構文ヘッド部には何が入る? ウェブページのメタデータHTML の見出しと段落強調と重要性リスト文書とウェブサイトの構造高度なテキスト装飾リンクの作成課題: 手紙のマークアップ課題: コンテンツのページの構造化HTML の画像動画と音声のコンテンツMozilla のスプラッシュページHTML の表の基本HTML 表のアクセシビリティ課題: 惑星データの構造化HTML におけるフォームとボタンHTML のデバッグガイドコンテンツカテゴリーブロックレベル要素インライン要素互換モードと標準モードHTML で使用される日付と時刻の形式制約検証MicrodataMicroformatsビューポートメタタグ別オリジンの画像とキャンバスを利用可能にするリファレンスHTML 要素<a><ab
role 属性を正しく設定してアクセシビリティを高める
role 属性は、要素が示す役割を明確にするための属性です。 例えば、header 要素はコンテンツの header か、あるいはサイト全体の header を示すことなどができますが、 どちらの header であるかを明確に区別する手段はありません。 しかしながら、role 属性の値 banner によって、コンテンツ固有の header ではなく、サイトの持つ header であることを示すことができます。 HTML5 以降の HTML は、ある役割を示す要素が多く存在しますが、role 属性はより強く役割を示します。 role によって役割を明確にする意味 role 属性は HTML などで使いますが、role 属性に与える値や役割は HTML とは切り離された ARIA と表記される区分に定義されています。 Accessible Rich Internet Application
HTML Elements and Attributes
<html manifest> <head> <title> <base href target> <link href rel media hreflang type sizes> <meta name http-equiv content charset> <style media type scoped> <script src async defer type charset> <noscript> <body onafterprint onbeforeprint onbeforeunload onblur onerror onfocus onhashchange onload onmessage onoffline ononline onpagehide onpageshow onpopstate onresize onscroll onstorage onunload> <se
HTML5/CSS3 モダンコーディング を執筆しました - エンジニアをリングする
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 (WEB Engineer’s Books) 作者: 吉田真麻出版社/メーカー: 翔泳社発売日: 2015/11/03メディア: 大型本この商品を含むブログを見る どんな本なの？ HTMLとCSSの初心者〜中級者向けの本です。HTML・CSSの基本的な文法と一般的なタグ・プロパティ（a要素とかmarginプロパティとか）を多少知っている方であれば読めます。 イメージ的には、超初心者本の次に読むような感じ。既にHTML/CSSの最低限の知識はあって既存コードの修正やコピペはできる、けどまだいちから何か作るようなコーディングは難しい・・・というようなレベル感の方が、いちからサイトを作る経験をしながらもっと知識や理解を深めていく、というような内容
schema.org構造化データマークアップのシンタックスにJSON-LDという選択
schema.org構造化データマークアップのシンタックスにJSON-LDという選択 高見和也（株式会社アラタナ） 2014年10月28日にHTML5が勧告され、もうすぐ1年が経とうとしています。HTML5やその他のAPI、たとえばWeb StorageやService Workerを始め、WebではJavaScriptで操作するようなAPI技術が話題に上がることが多いように思えます。しかし忘れてはいけないのは、HTML5では検索エンジンなどのプログラムにサイトの情報を正しく理解してもらうことを可能とするマークアップができることです。 <header>や<article>といったタグレベルでの情報はたくさんあり、一般的になりつつあります。代表的なCMSのテンプレートでも実際に組み込まれているものがほとんどです。そこで今回は、Webサイトのコンテンツ情報をよりプログラムで構造的に取得できるよ
すこし開かれたWHATWG HTML - fragmentary
8月末のことなんだけれど、WHATWG HTMLの仕様書がGitHubに移った。 [whatwg] HTML spec now on GitHub (from Ian Hickson on 2015-08-27) 体制も少し変わって、HixieがひとりでやっていたHTML仕様の作業にAnneやDomenicなども直接関わるようになった。Issuesでの議論やPull Requestの受け付けも始まり、だいぶモダンな策定環境になった。 これまでのWHATWG HTMLとHTML5仕様書 これまでのWHATWG HTMLは長らくSubversionサーバで運用されていた（もしかするとCVS時代もあったかも）。 HTML仕様書は基本的に1枚のHTMLファイルに書かれていて、それをツールで切り出しmultipage版やPDF版、Web Developer Editionなどを生成していた（あ、<p
Electronでデスクトップアプリを簡単構築
アジャイル開発に取り組むチーム向けのコーチングや、技術顧問、認定スクラムマスター研修などの各種トレーニングを提供しています。ぜひお気軽にご相談ください（初回相談無料） 全国5000人のエンジニアをやめて寿司職人になろうと思っているみなさんこんばんは。 前回までスライド共有用のアプリケーションを趣味(リハビリ)で作っていたのですが、折角なのでデスクトップクライアントも作ってみました。 構築にはElectronを使ったのですが、結構簡単にできたので記録としてまとめておきます。 Electronって何？GitHubが開発するクロスプラットフォームで動作するアプリケーションを開発するためのフレームワーク。コードの記述はHTML5とNode.js。その範囲であれば既存のWeb開発技術が使いまわせる。例えばjQueryとかAngularなんかを使うのも可能Chromeブラウザのオープンソース版のChr
Google Structured Data Testing Tool
SEO fundamentals Introduction Search Essentials SEO Starter Guide How Google Search Works Do you need an SEO? Crawling and indexing Sitemaps robots.txt Meta tags Crawler management Removals Canonicalization Redirects JavaScript SEO Ranking and search appearance Visual Elements gallery Title links Snippets Images Videos Structured data Favicons Site-specific guides Ecommerce International and multi
HTML5 Japanese Community Group
The mission of the HTML5 Japanese Community Group includes the following: * to facilitate focused discussion in Japanese of the HTML5 specification and of related specifications * to gather comments and questions in Japanese about those specifications * to collect information about specific use cases in Japan for technologies defined in those specifications * to report the results of its activitie
“マークアップ”するということ ～ HTML5勧告に寄せて ～
HTMLを適切な要素を使って書いていくことは実はそれほど難しくはない。しかし過剰に要素を使わずに、かつスタイリングすることも意識して、と適切に“マークアップ”するのはなかなかの修練を必要とする。いったい“マークアップ”するということはどういうことなのだろうか、そしてどのような思考の元に行えば良いのだろうか。 HTML5での変化 著作権表示のマークアップ small要素 footer要素とsmall要素 p要素とdiv要素 footer要素とp要素 スタイリングとの兼ね合い マークアップするということ HTML5での変化 コンテンツに則した素直な形でマークアップできること。 HTML5で変わることや変わったことは多くあるが、それらをおおまかに俯瞰するとこのような言葉に集約できる。そのために様々な要素や属性が追加され、既存の実装をなるべく壊さない形で要素の意味に変更が加えられた。これらの変化は
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
Opera News
Desktop Opera introduces Opera Air – a new browser built to make you feel better February 4th, 2025 Today we’re introducing Opera Air, the first web browser built around the concept of mindfulness. Desktop Opera invites you to browse from hygge desks in the most epic locations in Norway January 21st, 2025 Opera is looking for 10 people to browse the web from a hygge desk in one of Norway’s most sc
HTML5Rocks の日本語記事まとめ
.app 1 .dev 1 #11WeeksOfAndroid 13 #11WeeksOfAndroid Android TV 1 #Android11 3 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #DevFest20 1 #DevFest21 1 #DevFest22 1 #DevFest23 1 #hack4jp 3 11 weeks of Android 2 A MESSAGE FROM OUR CEO 1 A/B Testing 1 A4A 4 Accelerator 6 Accessibility 1 accuracy 1 Actions on Google 16 Activation Atlas 1 address validation API 1 Addy Osmani 1 ADK 2 AdMob 32 Ads
URLの&を実体参照してない時の注意
URLの&を実体参照してない時の注意 HTMLの文字参照は<や<のように「&」で始めて「;」で終わらせるものだと思っていたら、どのブラウザも最後の「;」がなくても文字参照として扱うらしい。 問題になるのはURLのリンクに「&」がある場合。 <a href="foo?foo=1&bar=2"> 本来&bar=とすべき所をサボると、&以降=までの文字が文字参照に該当する場合に変換される。例えば <a href="http://example.com/foo?foo=1©=2"> は©として扱われ http://example.com/foo?foo=1©=2 に飛ぶ（Chromeを除く。Chromeは文字実体参照では問題ないが、©のような数値文字参照で同様の問題が起こる（Mac版9.0.597.102で確認））。 <のような結果がURLエンコード出来る文字については、Firefoxはそのまま「
The HTML5 test - How well does your browser support HTML5?
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
The Web Platform: Browser technologies
Include single-engine specifications • To re-sort, click on any heading. SpecificationRepoDocsTestsEnginesCategory
Ratchet
Build mobile apps with simple HTML‚ CSS‚ and JS components. Download Ratchet Currently v2.0.2 Tweet Follow @GoRatchet Code licensed under the MIT License and the docs are licensed under CC BY 3.0. Ratchet was lovingly crafted by Connor Sears. Currently v2.0.2 · Issues · Releases · Legacy v1.0.2 Docs
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5 Please - Use the new and shiny responsibly