mkasumi.com


受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。

テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。

今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。

「ユーザーにスクロールを予測させるCSSの書き方について」のつづきを読む


Tag:CSS レスポンシブ 

Posted by 森田かすみ at 09:55  Permalink

4月28日(金)に開催された、「Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホン」で登壇しました。

「マークアップの最適解を見つけ出す方法」を各地でお話しして、5回目となりました。いままで大幅にお話を変えていなかったのですが、具体的な例が知りたいという意見も中にはあったため、今回は大幅に構成を変えてみました。

答えがたくさんあるってことはわかったけど、答えの導き出し方がわからない...という状態は私も経験していました。「大体はこんなことを考えて私はマークアップしていますよ」ということをセッションを通して誰かのヒントになれば、と思い発表しました。


(写真)セミナー風景

「Frontrend Vol.9 - 春の新人歓迎 マークアップ/アクセシビリティのキホン で登壇しました」のつづきを読む


Tag:セミナー 

Posted by 森田かすみ at 18:10  Permalink

2017年3月18日(土)に開催されたFrontend Conference 2017に行ってきました。


(写真)

当日配布されたパンフレットとマグカップ


私の今回の参加目的は、「現状のガイドラインの作成や社内ツールを見直すこと」でした。セッション選択にはすごく迷ったのですが、すこしでも現在の全体のワークフローを改善していくヒントが欲しかったため、私が業務では経験できないデザイン系のセッションをめずらしく受講していたりしています。

今回受講したセッション

  • 新ツールやサービスから考える、明日からのデザインフロー
  • UIデザインから知る「持続可能なデザイン」
  • ウェブを構成するUIの品質とHTML
  • スタンドアロンAMPのススメ
  • CSSフレームワークをつくろう!
  • フロントエンドの制作現場をレガシー化させないために

「Frontend Conference 2017に行ってきました」のつづきを読む


Tag:セミナー 

Posted by 森田かすみ at 15:39  Permalink

周りのみなさんに温かく見守られて無事に24歳を迎えることができました。23歳で学んだこと、やってきたことをまとめたいと思います。

エンジニアとしてのお仕事

23歳になったころの私は、4年もマークアップエンジアとして働いていると、意識しないと同じ仕事をただ繰り返して過ごしてしまいそうな危険を感じていました。

エンジニアとしてスキルや知識が停滞しないように、これまで扱ってきた技術や知識をより深く勉強することを意識した1年でした。主にマークアップ、Webアクセシビリティ、SVG、jQueryの勉強に力を入れた年でした。細かい学習内容についてはブログをみていただければ、と思います。

「24歳になったので1年間をまとめてみる」のつづきを読む


Posted by 森田かすみ at 13:13  Permalink


この記事でご紹介するのは CSS Talk vol.2 で会場を少しざわつかせることができたテクニックです。JSをつかわずに、HTMLとCSSのみでブラウザ上からスタイルをダイレクトに修正する方法をご紹介します。決して実務で使えそうな技ではないので、楽しんで読んでいただければ、と思います。

「ちょっとしたデモに使える!JSを使わずにブラウザ上からスタイルをダイレクトに修正する方法」のつづきを読む


Tag:CSS HTML 

Posted by 森田かすみ at 12:42  Permalink

プロフィール

森田かすみ

名古屋のWeb制作会社でマークアップエンジニアとして働いています。マークアップ勉強会名古屋という勉強会の主催もやっています。

  • はてなブックマーク

カテゴリー