HTMLの記事

• OnScreen Typography Day 2019 登壇と ost.today の実装 #ostd2019

  オンスクリーン上のタイポグラフィを扱うイベント「On-Screen Typography Day 2019」で登壇し、特設ウェブページの実装も担当しました。登壇はライブを意識して準備しました。特設ウェブページの実装の時に考えていたことや、準備の時に聴いていた曲も紹介しています。

  2019.06.10  /  Design HTML Work

• aria-expandedのよくある間違い

  WAI-ARIAで制御するコンテンツが展開されているかどうかのステートを表すaria-expanded の使用にあたり、よくありそうな間違いである「展開されうるコンテンツ側にaria-expandedを指定してしまう」「制御するコンテンツを明示していない」の2つと正しい使用方法をまとめました。

  2018.10.24  /  Accessibility HTML

• FRONTEND CONFERENCE 2017 で登壇します #frontkansai

  2017年3月18日(土)に関西フロントエンドUGさん主催の FRONTEND CONFERENCE 2017 にて「ウェブを構成するUIの品質とHTML」という題で登壇します。ウェブ上のUIの品質についてのポエムと、UIの品質の基礎的な部分を担うHTMLについて主に実装面からお話する予定ですので、お時間のあるかたはぜひご来場ください。

  2017.03.05  /  HTML Work

• WP-D week 土曜日の「HTMLについてLevel Up!」でお話しました #wpdweek

  WP-D が主催する1週間通しの勉強会イベント WP-D の最終日の「HTMLについてLebel Up! 〜 div? article? section？ ココがわからない！ HTMLのマークアップ。どうしたらいいの？」でお話してきました。

  2016.04.20  /  HTML

• WAI-ARIAの実装をデバッグ・検証する

  この記事はWeb Accessibility Advent Calendar 2015の5日目の記事です。WAI-ARIA の検証方法についてご紹介します。決して厳密な検証ができる方法ではありませんが、特別なツールなどを用意しなくとも簡単に検証することができる方法で簡単に検証できる方法が増えれば、WAI-ARIAに取り組みやすくなるかと考えています。

  2015.12.05  /  Accessibility HTML

• schema.org - 営業時間 openingHoursプロパティのマークアップ

  schema.org の openingHours のマークアップを試行錯誤し、time、data、metaの中からmetaを選びました。その経緯や考え方について紹介します。

  2015.11.06  /  HTML

• AMP(Accelerated Mobile Pages) HTMLしてみたという話

  Google などが発表したAMP HTMLにさっそく対応してみたお話です。コンポーネントの使い方などをご紹介していますが、ちゃんと運用するとなると大変そうです。

  2015.10.20  /  HTML

• 記事のマークアップをGoogleのRich Snippets for Articlesに対応させた話

  記事のマークアップをGoogleのRich Snippets for Articlesに対応させました。元より構造化データとしてマークアップしていたので少しのプロパティの変更だけで対応できました。加えてJSON-LDで対応する場合の注意点や、Movable Typeによる出力テンプレート、JSON-LDの再利用についても述べています。

  2015.08.20  /  HTML

• JSON-LDをWebComponentsで表示する

  WebComponentsの練習にサイトに静的に設置されたJSON-LDを読み取るWeb Componentsを作ってみました。ライブラリ使わずにやってみましたので、備忘録がてら順を追って解説します。

  2015.04.14  /  HTML JavaScript

• illustratorで日本地図の各都道府県のイメージマップを出力する

  Adobe illustrator を使用して、各都道府県に対応したイメージマップを出力する方法です。

  2014.09.30  /  HTML

• Sublime Text 3 + Emmetでid,class名コメントをHTML閉じタグの前に入れる

  Sublime Text 3 + Emmet で、id,class属性を持つ要素を展開した時にid, class属性の名前のコメントを自動的に挿入されるようにしてみました。閉じタグの前に入れるのに苦労しました。

  2014.08.25  /  HTML

• アイコンフォントの代替テキスト

  装飾以外の意味を持つアイコンフォント(Font Awesome)への代替テキストを考えてみました。少し無理矢理なやり方のように思えます。

  2014.08.20  /  Accessibility HTML

• Movabletypeでテンプレート毎にOGPの設定

  MovabletypeでOGPをテンプレート毎に設定するコードを紹介します。

  2014.07.30  /  HTML

• 国内主要ブログサービスのOGPタイプ(og:type)

  国内の主要ブログサービスでOGPのタイプ(og:type)がどのように設定されているかをまとめてみました。

  2014.07.30  /  HTML

• WEB+DB PRESS vol.81 イマドキHTML/CSS開発を読んだ

  2014.07.25  /  HTML CSS

• noscript使わずにスタイル無効の時のスタイル

  2014.06.10  /  HTML JavaScript

• 空要素の閉じタグ忘れを一括置換

  2014.06.06  /  HTML