はてなブックマーク

概要 img要素の中のalt属性＝画像の代替テキストの書き方にもう悩みたくなかったのでウェブアクセシビリティイニシアチブ（WAI）のサイトよりAn alt Decision Tree （「alt属性決定木」）を翻訳しました。 このような技術的なテキストを翻訳した場合、いかにも翻訳調のかたい文章になりがちなので、あえて意訳をした部分もある点をご了承ください。 とはいえ、明らかな誤訳があった際にはコメントでご教示いただけると助かります。随時修正します。 Alt属性決定木 その画像は文字を含んでいますか？

<dl>要素の新しい定義と配置のルールについて誤解していた点があったので備忘録として書きます。 <dl>要素は2014年10月28日のHTML5.0勧告でその定義が、2017年12月14日にW3C勧告となったHTML5.2でその配置のルールが変わりました。 <dl>要素の定義変更について HTML4までの<dl>要素の定義 definition list 日本語訳: 定義リスト HTML5からの<dl>要素の定義 term-description groups (W3C) / Name-value groups (WHATWG) 日本語訳: 説明リスト(MDN) 「説明リスト」ってなんだよみたいな。 よくわからないので原文を見ます。 W3CとWHATWGの説明をそれぞれ翻訳すると、呼称=説明が対になったグループ、名前=値が対になったグループとなります。直訳するとなんとなく理解できますね。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

昨年(2018年)12月11日にめでたくGulp v4.0が正式リリースされたので、webサイト制作用gulpfile.jsの設定を見直してみました。 公式ドキュメント 迷ったらこちらを見直します。英語です。 入門ガイド APIドキュメント Gulp4新機能おさらい では新機能を確認します。 タスクを直列処理するseries()と並列処理するparallel()メソッドが追加。run-sequenceプラグインはもう必要ない watch()タスクはchokidarを使用したものに変更。gulp-watchプラグインはもう必要ない lastRun()を使用して差分ビルドが簡単に。gulp-changedプラグインはもう必要ない symlink()でシンボリックリンクを作成しpackage.jsonとnode_modulesを使いまわすことが可能に ソースマップ組み込みサポートが追加。gulp

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日会社で株式会社アトラクタのみなさんを講師に迎えたアジャイル開発研修を受ける機会に恵まれました。 質疑応答ではかなり素朴な疑問をぶつけてしまいましたが、講師の先生方に快く教えていただきました。以下、個人的に印象に残った質問と回答を紹介します。 Q. プロダクトオーナーとスクラムマスターは既成概念であるディレクターやプロジェクトマネージャーと何が違うか A. 責任範囲の違いがある。ざっくり言うとスクラムマスターは開発プロジェクトの円滑な進行に責任を持ち、プロダクトオーナーはビジネス上の成果に責任を持つ。ここがはっきりと分業される。 既成

概要 2018年4月にnpm v6.0.0がリリースされ、セキュリティチェックができるコマンドnpm auditが追加されました。 さらに2018年5月にはnpm6.1.0がリリースされ、セキュリティチェックに追加して脆弱性のある箇所を自動修正してくれるサブコマンドnpm audit fixが追加されました。 この機能は非常に便利で、node_modulesに存在する大抵の脆弱性を自動修正してくれます。しかし、パッケージの依存関係によって自動で直しきれない脆弱性が残ってしまうことがあり、現時点ではこれを手動で解消しなくてはいけません。その方法を共有します。 実践 まずは$npm audit まずは任意のプロジェクトでnpm auditをポチッと実行します。 $ npm audit //中略。ここに脆弱性のあるパッケージ一覧が表示されます found 25 vulnerabilities (

特定のSVGファイルがChrome（少なくともv51.0.2704.84 から、2017年12月26日現在の最新バージョンである v63.0.3239.108まで）で表示されない現象があるようです。 特定のSVGファイルとは、image要素のxlink：href 属性が xlink：href = "data：img/png; と記述されているものです。 IE,　Edge,　FireFox,　Safariのそれぞれ最新版ではこの現象は確認できませんでした。 解決法 テキストエディタでSVGファイルを開き、xlink：href = "data：img/png;　(画像赤罫線で囲った箇所)　をxlink：href = "data：image/png;と書き換えてやると正しく表示されます。 Photoshop, Illustratorの現行バージョンで書き出しを行うと、Chromeで表示されないx

アイレット株式会社デザインセクションでマークアップエンジニアとして働いているくどうです。CSS Advent Calendarに参加するのは初めてですがどうぞよろしくお願いします。 概要 CSS Grid Layoutを使っていますか？ たしかに最初はとっつきにくいし、1frってなんだよ…と言いたくなる気持ちもわかります。 しかし、こういった新機能は我々の新しい武器です。少々癖が強い武器ですが、忍者の手裏剣、ブルース・リーのヌンチャク、あるいは宮本武蔵の二刀流よろしく使いこなすことができれば強力でしかも超cool。超wavyでごめんね。ならばマスターするしかないですね！ というわけで本日はレスポンシブな表組みレイアウトを3パターン紹介します。 実践 PC時は横、スマホ時は縦に行方向が変化する表組みレイアウト まずはディスプレイ幅の広いPCの時には行方向を横に、ディスプレイ幅の狭いスマホ時に

webkit系のSafariとChrome限定ですが、CSSプロパティ::-webkit-scrollbarでブラウザのスクロールバーをカスタマイズできます。 #####Mac OSのオシャレUI… OS X以降のMacOSではスクローラブルな要素に対してもスクロールバーは非表示で、スクロールが始まったタイミングで初めてふわりと表示させる仕様になっています。 お洒落な演出ですが、この演出のせいでスクロールバー非表示のMacとスクロールバー常時表示のWinでレイアウトがずれてしまうという困った現象が起きます。 OSが違うだけで全く同じブラウザ相手なのでブラウザハックも使えません。 でも::-webkit-scrollbarを覚えておけばもう安心！ #####応用 ::-webkit-scrollbarを特定のクラスの中（下記の例なら.container内）に書けば、そのクラスの中だけでスクロ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Google Chrome拡張機能のアクセシビリティチェックツールAlixが簡単便利でかなり使えたので紹介します。 概要 Alixはa11y.cssを元にしたChrome拡張HTML lintツールで、閲覧中のHTMLコードにチェック用のCSSを当てることによってアクセシビリティ上のエラーを検証し、マークアップに関するアドバイスをしてくれます。 Alix Chrome ウェブストア GitHub ##使い方 Chromeを立ち上げ、Chrome ウェブストアよりインストールします。 Chromeの右上に><という形をしたAlixのアイコ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

困ったこと 「ホームページの更新分だけ階層構造を保ったままZipファイルにして先方にメールしといて」...などと偉い人に言われて困ったことはありませんでしょうか？ ...私はあります。 Gitがあまねく普及している2016年に必要なテクニックなのかはいまいちよくわからないところではありますが、上記のような場合に手作業でコピペをしてミスをしないために、コマンドプロンプトを使って更新分（差分）だけ階層構造を保ったままフォルダごとファイルを一括コピペする方法を書き残しておきますね。 フリーソフト等もあるようですが、このやり方が一番楽だと私は感じました。 xcopyを使う コマンドプロンプトを開き xcopy コピー元フォルダまたはファイル コピー先フォルダまたはファイル /D:MM/DD/YYYY /S /Y と記入してエンターキーを押下すればOKです。 例：2016年6月6日以降に更新したファ

iOSでの:hover問題 iOSデバイス（iPhone / iPad）ではCSSの:hoverがうまく働かず、ダブルタップしないとリンクが飛ばないことがあります。 結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari iOS 8.4.1の:hover問題 上記の情報によるとiOS 8.4.1で発見され、9.0以上では解決しているとのことですが、私は2016年11月現在の最新10.1.1の環境でこの不具合が出ました…（辛）不具合っていうか謎仕様…でもまあ不具合と言って差し支えないですよね…。 iOSでHoverが効かない問題でも9系でのバグ報告があるように、hoverで画像切り替えのような凝った実装をするとまだこの不具合が出ることがあるようですね。厄介です。 ちなみに私にこの不具合が出た時の実装はこう。 <div id="link">

CSSの面倒くさいところ CSSは簡単に書けることが良さでもありますが、ある時は試行錯誤を繰り返すうちに、またある時は運用を続けるうちに、記述がもりもりと肥大化してしまいがちです。 （CSSのスパゲッティコード…とはあまり言わないけどそんな感じ）これはCSSの面倒くさいところですよねー。 特に近年Bootstrapなど重量級CSSフレームワークを使用する機会も増えてきていますので、表示を高速化させるために、あるいは保守性を高めていくために可能な限りシンプルに記述していきたい。 …そんなこともありCSSをあの手この手でわちゃわちゃするわけですが、 未使用CSSを見つけ出してリムーブ プロパティ指定の重複を見つけ出して整理 OOCSSやSMACSSやBEMといったCSS設計を採用する SASSなどCSSプリプロセッサ(CSSメタ言語)を使用する .minファイル化やgzipで圧縮する CDN配

昨今Retinaディスプレイ対応などを目的として画像・アイコン・見出しのテキスト等にSVGを使うことが増えています。 SVGを作成する際はIllustratorを使うことが多いですが、PSDで作成されたデザインカンプをSVG出力したいこともありますよね。 今回はPhotoshopからPSDファイルを操作してSVG書き出しを行った際にハマったので、注意点を共有します。 実例 Photoshopでこんな見出しをSVGで書き出すときに… カラーオーバーレイに注意 文字色を赤から白に変更しようと、「レイヤースタイル」→「カラーオーバーレイ」機能で白く塗りつぶしました。 すると、スクショでは分かりにくいですが、微妙に元々の赤い色が外側にはみ出してるように見えます。 書き出し方法に注意 それに普通に.jpgや.pngを書き出すときと同じように「書き出し」→「書き出し形式」で保存しようとすると右上に「フ

###アイコンフォントis便利 FontawesomeやIcoMoonといったアイコンフォントは、ベクターデータをフォントとして扱えるためとても便利です。 アクセシビリティ問題 しかし、アイコンフォントをそのまま使ってしまうとアクセシビリティ的にはよろしくない。 具体的にはスクリーンリーダーでサイトを読み上げながら閲覧しているユーザーにとっては、アイコンが登場する度に意味不明な情報を聞かされることになってしまいます。 もしアイコンがいくつも並ぶようなページでそのようなことになったら、ユーザーにとっては苦痛でしかないですよね。 コーディングによるソリューション ではどうするか。例えば上記画像の「Download」ボタンのアイコンをFontawesomeを使用し実装するとき、以下のようにHTMLコードに一手間加えることで問題を解決出来ます。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

<button onclick="history.back()">戻る</button> <button type="submit" id="submit">登録</button> 「登録」ボタンで次画面に遷移するのはいいのですが、なぜか「戻る」ボタンを押してもsubmit判定されて次画面に遷移しまいました。 この理由は MDNによるbutton 要素に使える属性の解説に書いてありました。 type submit: 自身が属するフォームのデータをサーバーに送信するボタンとなります。これは type 属性が指定されていない場合、もしくは属性値が動的に空にされたり不正な値にされた場合のデフォルトの動作です。 なるほど。button要素にtype属性を指定しないと、type="submit"の扱いになるHTMLの仕様なんですね。 リセットボタンとかを作る時も同様の注意が必要ですな。 というわけで