masuP.net

アーカイブ - 全ての記事

富士そば

富士そば Advent Calendar 2017の1日目の記事です。なぜ富士そばに入ってしまうのかを少し考えてみました。

AccSell Podcast Vol.126に出演しました

 / Accessibility, Work

アクセルというアクセシビリティの情報サイトが月に2回配信しているポッドキャストにゲストとして参加しました。勤務先でのアクセシビリティに関する取り組みや、今後のイベントについてお話しました。また話をし忘れたことについても記載しています。

ふだんの代替テキスト

 / Accessibility

最近はTwitterにアップする画像とかにもできるだけ代替テキストをいれるようにしています。自分のコンテンツですし、できるところからやっていきたいからです。

WCAGもくもく会第二回を開催しました #a11ymoku2

 / Accessibility

第二回WCAGもくもく会の開催レポートです。デザイナーさんの参加が増えたこととガイドラインに関連する当事者の方のお話が聞けたことが良かったです。次回はもう少しWCAGの読み方について詳しく解説しようかと考えています。また当日のつぶやきまとめも掲載しています。

WCAGもくもく会を開催しました #a11ymoku2

 / Accessibility

2017年7月11日に開催したWCAGもくもく会の開催報告です。リモート参加の準備不足や開始時間が早かったなど反省点はありますが、概ね良かったです。次回は8月30日(水)を予定しています。ご参加お待ちしています。

高さが低い要素に高さを揃える

 / CSS

2017年になっても高さ揃えの話です。高さが低い要素に合わせるには高さを合わせる要素にインナー要素を設置し、そのインナー要素の高さを計算外にしてから各要素の高さを揃る方法で実装しました。その実装方法の詳細と、少しの問題点について解説しています。

FRONTEND CONFERENCE 2017 で登壇します #frontkansai

 / HTML, Work

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

text-decoration の子要素への適用のされかた

 / CSS

第11回 W3C CSS Module 仕様書もくもく会@東京に参加して、text-decoration プロパティを中心にCSSの仕様書を読みました。継承はしないけど、子要素のテキストも自分の要素の色で装飾する。インラインブロックには装飾は適用されないなどを学びました。

display-wai-aria.css v0.3.0

 / Accessibility, CSS

display-wai-aria.css に aria-keyshortcuts の追加と aria-describedat の削除を反映し、v0.3.0 として公開しました。プロパティの削除について悩んでいます。

AccHop!! vol.4 に参加してきました

 / Accessibility

2015年11月のAccHop!! vol.4 に参加してきた感想です。制作者としての姿勢を見なおしたり、ワークショップに素で参加できたことにびっくりしたりしました。

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

 / Accessibility, HTML

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

Github Pagesからリダイレクト

プロジェクトのGithub Pages のURLが変わってしまったので、リダイレクトの設定を行いました。Jekyll Redirect From pluginの設定をするだけですが、簡単に解説します。

display-wai-aria.css v0.1.0

 / Accessibility, CSS

勢いで作ったわりに、たまに使っていたdisplay-wai-aria.cssをWAI-ARIA 1.1 Working Draftに対応させて v0.1.0 としました。CSSだと複雑な実装をしなくても値の変化に追従できるので、案外使えるかもなって思ってます。

線を上手く使ったデザイン

 / CSS, Design

良いデザイナーの方は単純な図形、特に線(ボーダー)の使い方が上手いなあと思っていたので、ボーダーをデザインに取り入れてみました。グラーデーションにするとコントラストをそこまで落とさずに柔らかい感じにできて良いですし、アニメーションも映えるので気に入っています。

すごいシンプルなニュースティッカー。role="marquee"を添えて

 / Accessibility, CSS, JavaScript

シンプルなニュースティッカーの実装の過程をご紹介します。HTMLは普通にマークアップして、javascriptで状態を変更し、CSSで状態に応じたスタイルとアニメーションを付与する、という何も変わったところのない感じです。状態を表すのにはWAI-ARIAを使用しました。これぐらいのものをサッと実装できる実装力を高めていきたいですね。

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

 / HTML

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

#AccSell Meetup 009 『デザイニング Webアクセシビリティ』ディレクターズカット版の感想

 / Accessibility

AccSell Meetup 009 『デザイニング Webアクセシビリティ』ディレクターズカット版に参加しての感想です。特定のユーザーにとっての利便性と広いアクセシビリティのトレードオフについて考えさせれました。今後も何のために、アクセシビリティをやるのか?を常に自分に問いながら精進していきたいと思いました。

JSON-LDをWebComponentsで表示する

 / HTML, JavaScript

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

選択範囲の背景がはみ出す問題を調べてみた

 / CSS

テキストを選択した時に選択範囲の色が変わって選択範囲が明示されますが、その選択範囲の背景が該当する要素をはみ出して表示されることが気になっていましたので調べてみました。

Web制作者のためのCSS設計の教科書を読んだ

 / CSS

今までは趣味で書いていたアマコーダーにとって、最初の壁が設計で、それはCMS, HTMLに限らず(と言うよりは一番)CSSの設計の重要だと痛感してる。そんな中、CSSの設計に関する情報や書籍も増えてきてて大変ありがたい限り。 第1章「CSSにおける設計とは」の2節「破綻しやすい...

ブログのデザイン

 / Design

ある程度の体裁は出来たので一旦記事に。先月から始めたこのブログ、デザインも自分でやってみています。シンプルなデザインが好きなんですが、それが一番むずかしいと痛感しています。 (書くハードル下げるために)自分のための備忘録も兼ねているので、本文が読みやすければいいかなと思っているの...

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

 / CSS, HTML

いろんなデバイスが増えて、検証コストが増大していく中、最先端な方々が検証コストを下げるための色々な手法を考えててるんだけど、実際どうやって自分の業務に組み込んでいくか、ってのが中々難しいなーと感じてた。 この特集の第1章〜3章では、最新技術動向の解説っていうよりは「イマドキの開...

extendでSassから出力されるCSSをスッキリさせる

 / CSS

Sassのeachとかforの繰り返しって便利ですよね。色んな方がご紹介されているのですが、繰り返しのソースサンプルって下記のような物が多くて自分も見よう見まねでなんとなくそうしてました。(メニューとかで現在地だけ表示を変えるみたいなスタイル) SCSS $gHeaderMenu...

勉強会資料 Webサイトの中の色について

 / CSS

会社の事務の方が色彩検定の勉強を始めるってことで、デザイナーさんも巻き込んで色の勉強会を開催しました。その資料を少し改変してアップします。 Webサイトの中の色について mdpress使ってHTMLスライドを作成したので、そのうち記事にするかも... 参考 CSS カラーモジュー...

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

 / HTML, JavaScript

アイキャッチにJavaScriptで動くスライドショーを使ったときに、JavaScript無効の時には一枚目だけ表示させてコントローラー的なものは表示させないとかしたかったので、noscript使って HTML <noscript> <link rel="s...

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

 / HTML

HTML5にからは空要素(void elements)に閉じタグを意味する/が必須では無くなったとはいえ、混在させたりしているのはよろしくないうえにXHTMLに変換する際にややこしいので閉じタグする方向で見様見真似で一括置換した。正規表現も使えるようにならんとなあ。 HTML5の...

サンプルエントリー及びスタイルガイド

 / CSS, HTML

スタイル確認用のエントリーです。性質上、スタイルガイドを兼ねていますが全てのエントリーが、以下のとおりマークアップされているわけではありません。 なお、文中の例文は太宰治の作品から引用しています。 段落 ほとんど裁判官の如く、もったいぶって尋ねるのでした。彼は、自分を子供とあなど...