HTMLの記事
-
OnScreen Typography Day 2019 登壇と ost.today の実装 #ostd2019
オンスクリーン上のタイポグラフィを扱うイベント「On-Screen Typography Day 2019」で登壇し、特設ウェブページの実装も担当しました。登壇はライブを意識して準備しました。特設ウェブページの実装の時に考えていたことや、準備の時に聴いていた曲も紹介しています。
-
aria-expandedのよくある間違い
WAI-ARIAで制御するコンテンツが展開されているかどうかのステートを表すaria-expanded の使用にあたり、よくありそうな間違いである「展開されうるコンテンツ側にaria-expandedを指定してしまう」「制御するコンテンツを明示していない」の2つと正しい使用方法をまとめました。
-
FRONTEND CONFERENCE 2017 で登壇します #frontkansai
2017年3月18日(土)に関西フロントエンドUGさん主催の FRONTEND CONFERENCE 2017 にて「ウェブを構成するUIの品質とHTML」という題で登壇します。ウェブ上のUIの品質についてのポエムと、UIの品質の基礎的な部分を担うHTMLについて主に実装面からお話する予定ですので、お時間のあるかたはぜひご来場ください。
-
WP-D week 土曜日の「HTMLについてLevel Up!」でお話しました #wpdweek
WP-D が主催する1週間通しの勉強会イベント WP-D の最終日の「HTMLについてLebel Up! 〜 div? article? section？ ココがわからない！ HTMLのマークアップ。どうしたらいいの？」でお話してきました。
-
WAI-ARIAの実装をデバッグ・検証する
この記事はWeb Accessibility Advent Calendar 2015の5日目の記事です。WAI-ARIA の検証方法についてご紹介します。決して厳密な検証ができる方法ではありませんが、特別なツールなどを用意しなくとも簡単に検証することができる方法で簡単に検証できる方法が増えれば、WAI-ARIAに取り組みやすくなるかと考えています。
-
schema.org - 営業時間 openingHoursプロパティのマークアップ
schema.org の openingHours のマークアップを試行錯誤し、time、data、metaの中からmetaを選びました。その経緯や考え方について紹介します。
-
AMP(Accelerated Mobile Pages) HTMLしてみたという話
Google などが発表したAMP HTMLにさっそく対応してみたお話です。コンポーネントの使い方などをご紹介していますが、ちゃんと運用するとなると大変そうです。
-
記事のマークアップをGoogleのRich Snippets for Articlesに対応させた話
記事のマークアップをGoogleのRich Snippets for Articlesに対応させました。元より構造化データとしてマークアップしていたので少しのプロパティの変更だけで対応できました。加えてJSON-LDで対応する場合の注意点や、Movable Typeによる出力テンプレート、JSON-LDの再利用についても述べています。
-
JSON-LDをWebComponentsで表示する
WebComponentsの練習にサイトに静的に設置されたJSON-LDを読み取るWeb Componentsを作ってみました。ライブラリ使わずにやってみましたので、備忘録がてら順を追って解説します。
-
illustratorで日本地図の各都道府県のイメージマップを出力する
Adobe illustrator を使用して、各都道府県に対応したイメージマップを出力する方法です。
-
Sublime Text 3 + Emmetでid,class名コメントをHTML閉じタグの前に入れる
Sublime Text 3 + Emmet で、id,class属性を持つ要素を展開した時にid, class属性の名前のコメントを自動的に挿入されるようにしてみました。閉じタグの前に入れるのに苦労しました。
-
アイコンフォントの代替テキスト
装飾以外の意味を持つアイコンフォント(Font Awesome)への代替テキストを考えてみました。少し無理矢理なやり方のように思えます。
-
Movabletypeでテンプレート毎にOGPの設定
MovabletypeでOGPをテンプレート毎に設定するコードを紹介します。
-
国内主要ブログサービスのOGPタイプ(og:type)
国内の主要ブログサービスでOGPのタイプ(og:type)がどのように設定されているかをまとめてみました。
-
WEB+DB PRESS vol.81 イマドキHTML/CSS開発を読んだ
-
noscript使わずにスタイル無効の時のスタイル
-
空要素の閉じタグ忘れを一括置換