「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました | 活動 | mkasumi.com
2016年9月23日（金）に、DevLOVEという勉強会に話し手として参加しました。今回は東京でしたが、DevLOVEは仙台や関西でも開催している勉強会です。なんと今回が198回目だそうです。 今回お話しした理由 今回の勉強会では、「マークアップの最適解を見つけ出す方法」というタイトルでお話ししてきました。もともとアップルップルの社内勉強会で、後輩に向けて話した内容だったので基本よりももっと根っこになる考え方の部分についてお話ししました。 私がこの内容を話そうと思った理由は、これから勉強する人たちに私みたいにマークアップで悩まないで欲しかったからです。私はとても長い間マークアップに悩んでいました。今はたくさん学ばなければいけないことがたくさんあるので（開発環境、作業効率、メンテナンス性などなど）、なかなかじっくり悩むということが難しいかもしれません。ですが、マークアップはまだまだ重要ですし
Coder's Mind 〜 コーディングするときに大事にしている心がけ 〜 | セミナー | mkasumi.com
この記事は「Coder's Mind 〜 コーディングするときに大事にしている心がけ 〜」というタイトルで、5月26日（土）に開催されたWordBench三重 第1回勉強会「WordPress15周年を祝う会＆Web制作関連のおはなし」でお話しした内容を改めてブログにまとめます。 この記事では具体的なソースコードの実装方法や例などは出しません。今までの5年間マークアップエンジニアとして働いてきて、納得いくコーディングができるようになった考え方の軸を紹介します。勉強会の参加者は初めてお会いする方が多く、どんな話が適しているか判断が難しかったため、少しコードを書いたことがある方なら理解できる・知って欲しい内容にしています。 ちなみに、私が思う納得のいくソースコードの条件は以下です。 反省しやすい・修正しやすい 人から問われたときにスムースに説明できる設計・仕様になっていること 利用者がスムース
色に頼らないビジュアル表現を考える | mkasumi.com
実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ
Webアクセシビリティについて勉強してみて知ったことや感じたこと | mkasumi.com
ガイドライン兼国際標準規格であるWCAG2.0をもとに日本工業規格としたのが「JIS X 8341-3：2016」です。2004年、2010年にも改正されていて、2016年4月18日現在、最新版は「JIS X 8341-3：2016」となります。過去のJISを知っている方は最新版との差を知りたいと思いますが、2010年版と違い、2016年版は「等級A」と言われていた適合レベルが「レベルA」となったり、すこし文言が変更されています。2010年と引き続き、WCAG2.0をもとにしているので、項目はWCAGと同じく61項目のままとなっています。 JIS X 8341-3：2016が元に作られている国際標準規格です。JISは日本の規格ですが、こちらは海外にも適用されます。チェックツールなど、海外で配布されているものはWCAGが基準となっています。 基本的に、JIS X 8341-3：2016 はW
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
「数が増えてもこわくない！Quantity Queriesの紹介」というセッションでCSS Talk Vol2 で登壇しました | 活動 | mkasumi.com
CSS Talk vol.2に登壇しました。とても雰囲気のいい勉強会で、話す側としてもとても楽しい時間を過ごせました。 今回は、CSSネタということで、私自身がCMSを作っている会社に所属しているので、自己紹介ついでに動的コンテンツに対応したレイアウトを提供できる「Quantity Queries」についてご紹介しました。 ざっくりどんなことができるのかというと、たとえば、li要素の幅を25%幅にしていて、要素が4つしか入らないCSSの設計になっていたとします。そんな場合にCMSからお客さんが5つめのコンテンツを投入すれば普段であれば当然レイアウトが崩れてしまいますが、Quantity Queriesは解決することができます。どうやって解決できるのかというと、たとえば要素が5つ以上になったときにli要素の幅をautoにして、さらにdisplay:inline-block;を追加し、レイアウ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
