【最新のHTML仕様まとめ】「HTML Living Standard」がマークアップにとってなぜ大切なのか？ - Qiita

2023/07/06 87 users Qiita 戦意 HTML Living Standard

本記事の結論は、「とりあえずHTML Living Standardを読め」です。 正直明日からHTMLを勉強したいです！って人には全くオススメできません。 おそらく開始5秒で戦意を喪失することになると思います。 とはいえHTMLの仕様全てが記述されているので「セマンティックにマークアップしたい」って時は「HTML Living Standard... 続きを読む

海外のガチHTMLコーダーに阿部寛のホームページを見てもらった - Qiita

2022/04/22 5 users Qiita シーラカンス 忌憚 medium 阿部寛

先日投稿した「「阿部寛のホームページ」はHTML界のシーラカンスである」の続編として、MediumのHTML関連の記事でセマンティックではないHTML・CSS（特にTailwind CSS）に対し舌鋒鋭い批判をしていらっしゃるJason Knightさんに、英語版の記事を見ていただいた。しっかりコードを分析されているようで恐縮である。忌憚・... 続きを読む

WAI-ARIA 準拠には CSS Modules が最適という話

2021/06/18 11 users WAI-ARIA 準拠 CSS Modules 注釈 手がかり

CSS と WAI-ARIA 「WAI-ARIA」はブラウザー・支援技術が認識できる「意味」を注釈することで、ユーザーの理解を助ける技術です。この与えられた注釈は CSS にも共有され、意味をたよりに装飾の手がかりとすることができます。 セマンティックな「状態」表現 特別な理由があり「セマンティックではない」以下の様なマーク... 続きを読む

翻訳：CSSユーティリティクラスと「関心の分離」（いかにしてユーティリティファーストにたどり着いたか） - yuhei blog

2020/05/24 17 users ユーティリティファースト yuhei blog 分離 翻訳

Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 ここ数年の間に私のCSSの書き方は、非常に「セマンティックな」アプローチから「機能本位の（functional）CSS」と呼ばれるものへと移行してきました。 このやり方... 続きを読む

セマンティック・バージョニング、チームの依存関係のメモ: プログラマの思索

2017/08/20 12 users バージョニング 思索 プログラマ 主張 メモ

セマンティック バージョニングのルールについて、改めてメモ。 主張のないラフなメモ書き。 【参考】 セマンティック バージョニング 2.0.0 | Semantic Versioning 「セマンティック バージョニング」を読んだのでバージョニングについてまとめた - Qiita t32k、怒られる！セマンティック バージョニングしてますか？ | HTML5Experts.jp Ruby 2.1.... 続きを読む

[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS | コリス

2017/03/14 95 users セレクタ コリス アクセシブル valid CSS

HTMLは間違って記述されても、重大なエラーになることはあまりありません。 そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです... 続きを読む

divとsectionとarticle要素それぞれの特徴、使い分けと組み合わせ方 -HTML5のセクショニング コンテンツ | コリス

2015/10/13 436 users ユーザエージェント セクショニング section コリス

HTML5は、ドキュメントを構造化する際に用いるセマンティックなコードです。あなたがどんなタグを使うかによって、ユーザエージェントにその意味を伝えます。 HTML5のタグにはさまざまなものがあり、中でもsectionとarticle要素は、div要素より有意義な方法でコンテンツを区分する手段として導入されました。これら3つをどのように使い分けるか確認しておきましょう。 Sectioning Con... 続きを読む

Webアクセシビリティが今熱い！基本からしっかりと学びたい、より深く身につけたい人にオススメできる本 | コリス

2015/03/27 33 users コリス WAI-ARIA Webアクセシビリティ 本書 実務

Webサイトやアプリにおけるアクセシビリティについて学んでみたい、そして身につけたい、と考えている人は多いと思います。 「WAI-ARIA」「Web標準」「セマンティック」など、アクセシビリティに関する用語の解説レベルだけでなく、実務ですぐに使える具体的な方法も数多く掲載されたオススメの本を紹介します。 アクセシビリティってこういうことだったんだ！と分かる一冊です。 本書はSmashing Mag... 続きを読む

シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret | コリス

2015/02/10 388 users アクセシブル コリス フレームワーク 商用 HTML

シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークで... 続きを読む

t32k、怒られる！セマンティック バージョニングしてますか？ | HTML5Experts.jp

2014/12/09 65 users バージョニング バンクーバー ライブラリ OSS活動 t32k

どうも、バンクーバーでぶらぶらしている@t32kです。最近は暇なのでもっぱらOSS活動に勤しんでおります。そんなわけで日々のアプリケーション開発において重要になってくるのがバージョニングです。 今日はセマンティック バージョニングについて解説します。自身が公開しているライブラリやパッケージのコードを何かしら修正したら、それに伴いバージョンを上げるのが一般的だと思うのですが、実はどのようにバージョン... 続きを読む

セマンティックウェブで検索エンジンはアンサーエンジンへと進化する at #SemTechBiz 2014 | 海外SEO情報ブログ

2014/11/09 37 users セマンティックウェブ SemTechBiz 米サンディエゴ

[対象: 上級]今年の8月19日〜21日に米サンディエゴで開催された Semantic Technology & Business Conference (SemTechBiz) 2014 に参加しました。この記事では、検索におけるセマンティックをテーマにしたセッションをレポートします。 スピーカーは、セマンティックウェブの世界では著名なBarbara Starr（バーバラ・スター）氏と、検索エン... 続きを読む

[構造化データ初級者向け] schema.orgとMicrodata、RDFaって何が違うの？ | 海外SEO情報ブログ

2014/04/21 49 users Microdata Schema.org ふん 僕たち 中級

[対象: 中級]この記事では、構造化データを実装するときに利用する、schema.orgやMicrodata、RDFaなどの役割とその違いについて、構造化データの初級者にわかりやすいように簡潔に説明します。セマンティックの専門化が読むと「正しくは〜だ」とツッコミが入るかもしれませんが、僕たちは専門化ではありません。 SEOのために構造化データを利用するぶんには十分な理解が得られるはずです。まず次の... 続きを読む

Accessible Technology Trends: アクセシブルなWeb制作者チェックリスト

2014/04/13 15 users アクセシビリティ Webアクセシビリティ 共通 Web標準

2014年4月13日 アクセシブルなWeb制作者チェックリスト このチェックリストは、Webアクセシビリティを実装する人がアクセシビリティを正しく理解しているかどうかを判定するためのチェックリスト試案です。これだけのことにYesと言えるかどうかで、Webアクセシビリティのかなりの部分をカバーできるのではと思うのですが、どうでしょうか。 共通 1. Web標準を理解している。 2. セマンティックな... 続きを読む

フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法 | コリス

2013/06/18 92 users placeholder コリス title属性 スクリプト

フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベ... 続きを読む

正しいHTMLを書く目的はただ一つ - ネコメシCEOブログ

2013/03/21 153 users ネコメシCEOブログ 正しいHTML 目的 Facebook

2013-03-21 正しいHTMLを書く目的はただ一つ [HTML]セマンティックで正しいコードを書く目的 ― 二人の主を戴く技術者 - WEBCRE8.jp という記事がFacebookのフィードに流れてきたので読んでみました。 1がいきなり理由（目的）じゃないですし、2と5は同じことを言ってますし（SEOに強いなんて事実はもはや有って無きに等しいのが実態ですが、いずれにしても機械が読んで嬉し... 続きを読む

セマンティック技術と検索エンジンの進化、SEOへの影響 | SEO Japan

2013/01/29 18 users SEO 進化 SEO Japan 検索エンジン 影響

ウェブの進化と共に注目されてきたセマンティックの概念ですが、それが検索エンジンに与える影響については余りわかっていない検索マーケッターも実は多いのではないでしょうか。ということで、今回はそんなセマンティック技術と検索エンジンの関係について解説した記事をサーチエンジンランドから。セマンティック検索の歴史はもちろん、最近の検索エンジンの進化を理解したいという人にも最適な内容になっています。 — SEO... 続きを読む

[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション | コリス

2012/04/05 152 users NAV Button コリス チュートリアル ナビゲーション

デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li>... 続きを読む

Googleの来たるべき検索改革に備えるには？ | SEO Japan

2012/03/26 26 users Google SEO Japan ユニバーサル 前述 対決

Google検索が大きく変わる噂を検証する記事を紹介し、「あまり気にする必要はない」ような話をしてしまいましたが、そうはいっても検索の世界が今後ソーシャル、ユニバーサル、セマンティック等と関連しながら大きく変化していくであろうこともまた事実。前述の記事でも少し触れていましたが、現時点での検索の王者であるGoogleにとっても中長期的にAppleとの検索における対決は不可避ともいえ、Googleがこ... 続きを読む

[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js | コリス

2012/02/20 143 users パララックス コリス jQuery スライダー スラ

普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスラ... 続きを読む

クリック可能な箇所でa要素を使用しない時に気をつけたい3つのポイント | コリス

2011/08/25 72 users コリス a要素 箇所 定義 アンカーリンク

リンクではない、例えばJavaScriptを埋め込むなどのクリッカブルな箇所でアンカーリンクを使用しない時に気をつけたい3つのポイントを紹介します。 下記は各ポイントを意訳したものです。 a要素は、いつ使うべきでしょうか。 私はそれがクリック可能である時に、a要素を気前よく使用していました。しかし、a要素の定義を考えてみると、セマンティックではない使い方をしている場合があるのではないかと思いました... 続きを読む

Googleの意味解析能力の向上によってライティング能力がますます重要になる | 海外SEO情報ブログ

2011/06/22 57 users ライティング能力 Google 向上 海外SEO情報ブログ

言葉だけを単に認識するのではなくその言語が表す「意味」を理解する、Googleの言語解析能力が年々向上しているのは間違いありません。専門用語で言うところの“Smantic”(セマンティック)で、このセマンティックを処理する力が特に最近飛躍的に伸びてきていることを、WebmasterWorldの管理者が次のような現象によって確信しています。検索キーワード（キーフレーズ）に入っているキーワードの同意語... 続きを読む

ちょっとしたメモ - SPARQL: セマンティック・ウェブとWeb 2.0が出会うところ

2006/01/08 80 users SPARQL RDBMS RDF SQL クエリ言語

RDBMSとRDFをマップすれば、両者の特徴を生かした「セマンティック・ウェブ的な応用」への道が開ける。しかし、RDFの背後にあるデータベースには、外部から直接SQLで問い合わせを行うことができない。ここをカバーするのがRDFのクエリ言語であるSPARQLだ。これは、"Web 2.0アプリケーション"にとってもキーになる可能性がある。少し古い記事だが、Kendall ClarkによるSPARQL:... 続きを読む

RDFとセマンティック･ウェブの現在

2005/06/16 113 users RDF オントロジー unicode URI 推論

セマンティック・ウェブのレイヤーケーキ URI, Unicode, XMLを基盤に ウェブの蓄積をベースにグローバルなデータ（OpenWorld）を扱う マシンが読める形でデータや知識を共有 RDFによるシンプルで柔軟なデータ形式 RDFS 、オントロジーによる語彙と知識の記述 推論規則と論理フレームワーク 述語論理、記述論理を用いた推論、高度な検索 検索結果をエージェントが判断してさらに処理を継... 続きを読む