はてなブックマーク

• あとで読む

  「オブジェクトベースUIの基礎と事例」に参加しました | セミナー | mkasumi.com

  7 users

  mkasumi.com

  3月25日（月）に大阪で開催された、オブジェクトベースUIの基礎と事例【大阪開催】 | Peatixに参加しました。 講師はソシオメディア 上野学さんです。ソシオメディアさんのブログでは有益なことを発信されていて以前から読んでいたのですが、ふわふわとしている知識に確信を得るため今回はセミナーに参加しました。 オブジェクトベースUIとはなにか オブジェクトを元に設計されたユーザーインターフェースのこと。OOUI（Object-Oriented User Interfacesの略）と呼ばれたりすることもあります。 「オブジェクト指向」といえば聞いたことがある方もいるかもしれませんが、最近では多くのプログラミング言語で取り入れられている概念です。オブジェクトベースUIを簡単にいえば、オブジェクトを選んでからアクションすることができます。 オブジェクトベースUI と タスクベースUIの例 例えばi

  • テクノロジー
  • 2019/04/03 00:20

  • OOUI
  • オブジェクト指向
  • UI
  • GUI
• あとで読む

  色に頼らないビジュアル表現を考える | mkasumi.com

  114 users

  mkasumi.com

  実はこのテキストの中には、どこかがリンクになっています。どこのテキストにリンクが指定されているかビジュアルだけでわかりますか？ 少し意地悪な問題ですが、本題ではないので早速答えを述べます。実は、「このテキスト」という部分にリンクが指定されています（リンクには「#」が設定されているので、クリックするとこのページのトップに移動します）。 皆さんはどの段階で「このテキスト」という部分が少し青色であることに気づけましたか？もしかしたら、普段色を使うお仕事をされている方（デザイナーなど）はすぐに違和感に気づけたかもしれませんが、全てのテキストを読んでから青色になっている部分を探して見つけた方もいらっしゃるのではないでしょうか。 このように、本文が黒文字でリンク色に暗めの青を使った場合はリンクだと気づけないことがあリます。 では、どのようなスタイルにすれば良かったのか考えると以下のようなパターンが挙げ

  • テクノロジー
  • 2018/07/01 23:10

  • ui
  • アクセシビリティ
  • Web Accessibility
  • design
  • accessibility
  • ux
  • 色
  • あとで読む
  • Color
  • techfeed
• あとで読む

  Coder's Mind 〜 コーディングするときに大事にしている心がけ 〜 | セミナー | mkasumi.com

  18 users

  mkasumi.com

  この記事は「Coder's Mind 〜 コーディングするときに大事にしている心がけ 〜」というタイトルで、5月26日（土）に開催されたWordBench三重 第1回勉強会「WordPress15周年を祝う会＆Web制作関連のおはなし」でお話しした内容を改めてブログにまとめます。 この記事では具体的なソースコードの実装方法や例などは出しません。今までの5年間マークアップエンジニアとして働いてきて、納得いくコーディングができるようになった考え方の軸を紹介します。勉強会の参加者は初めてお会いする方が多く、どんな話が適しているか判断が難しかったため、少しコードを書いたことがある方なら理解できる・知って欲しい内容にしています。 ちなみに、私が思う納得のいくソースコードの条件は以下です。 反省しやすい・修正しやすい 人から問われたときにスムースに説明できる設計・仕様になっていること 利用者がスムース

  • テクノロジー
  • 2018/06/04 10:11

  • コーディング
  • HTML
  • development
  • あとで読む
• あとで読む

  コピペを通してマークアップに感動した話 | mkasumi.com

  9 users

  mkasumi.com

  この記事では、私がコピペを通してマークアップに感動した話でもしようと思います。 正直この記事の内容はすごく地味ですし、普段みなさん当たり前の感覚で体験してると思います。それでも、このことがきっかけで私はマークアップを心がけようと思えたので、ちょっとブログにまとめておこうと思いました。 目次 代替テキストはコピペできる table要素は構造を保ったままスプレッドシートにコピペできる ページを用途を考えて、ちょっとマークアップを工夫する まとめ 何気なく、サンプルデータとしてFind Job！の求人情報をコピペしたときに代替テキストもコピーされることに初めて気づきました。この事実を知ってからは、img要素は視覚的には画像だけれど、データとしてはテキストとして扱うようにしています。img要素をp要素でマークアップする人がいて、「なぜ？」と思っていた時期があったのですが、この経験からimg要素に対

  • テクノロジー
  • 2018/02/19 09:14

  • html
• あとで読む

  CSS内に記述したパスにCache Busting対応する | mkasumi.com

  3 users

  mkasumi.com

  .image { background-image: url(/image/to/path/example.jpg); } @font-face { font-family: "acms-fonts"; src: url(../fonts//acms-fonts.eot); src: url(../fonts//acms-fonts.eot) format("embedded-opentype"), url(../fonts//acms-fonts.ttf) format("truetype"), url(../fonts//acms-fonts.woff) format("woff"), url(../fonts//acms-fonts.svg) format("svg"); } .image { background-image: url(/image/to/path/example.

  • テクノロジー
  • 2017/10/27 14:57

  • CSS
• あとで読む

  SaCSS Special 13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTEND に登壇しました | 活動 | mkasumi.com

  11 users

  mkasumi.com

  8月5日に開催された SaCSS Special 13 : SaCSS SUMMER FESTIVAL 第2弾 FRONTENDに登壇しました。まさかSaCSSのSpecialでお話ができる日がくるとは思いもしていなかったので、当日がとても楽しみでした！ 主催者のハムさんからお話をいただいたときに、「ゆるふわで」とせっかく言っていただいたので、いつもとは違った感じにしようと思い、私が現在持ってる「ゆるふわ」を全力投球しました（普段（特にa-blog cms や、一度も行ったことがない地域で）はもう少し真面目なスライドを作っています）。 さて、今回は主に2つの方に向けてお話しました。 デザインルールの存在を知らなかった方 もう少し発展したスタイルガイドを作りたい方 スライドではデザインルールの存在を知らなかった方を中心にお話ししました。そもそもドキュメントを作る理由がわからなければお話を理解

  • テクノロジー
  • 2017/08/22 20:36

  • library
  • CSS
  • デザイン
  • html
  • GitHub
• あとで読む

  コンポーネント間の無意識の余白ルールについて | mkasumi.com

  6 users

  mkasumi.com

  ブログに書くほどのことなんだろうかと思ったけれど、誰かに聞いてみたいという思いがあって書いてみます。 先日私はデザイナーさんに余白の意味を確認していて、デザイナーが意識していなかったグリッドシステムの余白ルールに気がつきました。（でも、もしかしたらこのルールは社内だけなのかもしれない...。多くの人たちに確認したわけでもないので、多様な環境でも耐えうるという絶対的な自信がある訳ではないのでその辺りはご容赦ください） 例えばカードのコンポーネントのときや、写真をグリッドに合わせて並べるときに個人的な感覚では、このルールはよく見られます。 例えばガターの幅が30pxだったとします。その場合、ガターの半分の値である15pxを親の要素にmargin: 0 -15px、子要素にpadding: 0 15px;を指定します。 そうすると、私がもらうデザインカンプでは子要素の下マージンの値はガターの幅3

  • テクノロジー
  • 2017/07/01 18:30

  • CSS
• あとで読む

  ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com

  255 users

  mkasumi.com

  受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ

  • テクノロジー
  • 2017/06/15 10:09

  • css
  • レスポンシブ
  • web制作
  • テーブル
  • あとで読む
  • UI
  • design
  • table
  • スクロール
  • テクニック
• あとで読む

  Frontend Conference 2017に行ってきました | セミナー | mkasumi.com

  3 users

  mkasumi.com

  私の今回の参加目的は、「現状のガイドラインの作成や社内ツールを見直すこと」でした。セッション選択にはすごく迷ったのですが、すこしでも現在の全体のワークフローを改善していくヒントが欲しかったため、私が業務では経験できないデザイン系のセッションをめずらしく受講していたりしています。 今回受講したセッション 新ツールやサービスから考える、明日からのデザインフロー UIデザインから知る「持続可能なデザイン」 ウェブを構成するUIの品質とHTML スタンドアロンAMPのススメ CSSフレームワークをつくろう！ フロントエンドの制作現場をレガシー化させないために 新ツールやサービスから考える、明日からのデザインフロー 感想 Sketchの新機能のシンボルのネスト化とオーバーライドを使われていたり、Atomic Designが紹介されていたり、デザイン界隈でもコンポーネント思考がやってきたんだなあと感じ

  • 世の中
  • 2017/03/20 18:15

  • *あとで読む
• あとで読む

  「数が増えてもこわくない！Quantity Queriesの紹介」というセッションでCSS Talk Vol2 で登壇しました | 活動 | mkasumi.com

  10 users

  mkasumi.com

  CSS Talk vol.2に登壇しました。とても雰囲気のいい勉強会で、話す側としてもとても楽しい時間を過ごせました。 今回は、CSSネタということで、私自身がCMSを作っている会社に所属しているので、自己紹介ついでに動的コンテンツに対応したレイアウトを提供できる「Quantity Queries」についてご紹介しました。 ざっくりどんなことができるのかというと、たとえば、li要素の幅を25%幅にしていて、要素が4つしか入らないCSSの設計になっていたとします。そんな場合にCMSからお客さんが5つめのコンテンツを投入すれば普段であれば当然レイアウトが崩れてしまいますが、Quantity Queriesは解決することができます。どうやって解決できるのかというと、たとえば要素が5つ以上になったときにli要素の幅をautoにして、さらにdisplay:inline-block;を追加し、レイアウ

  • テクノロジー
  • 2017/01/31 13:01

  • CSS
  • Web制作
  • Webデザイン
  • あとで読む
• あとで読む

  「マークアップの最適解を見つけ出す方法」というセッションをDevLOVEにて発表しました | 活動 | mkasumi.com

  27 users

  mkasumi.com

  2016年9月23日（金）に、DevLOVEという勉強会に話し手として参加しました。今回は東京でしたが、DevLOVEは仙台や関西でも開催している勉強会です。なんと今回が198回目だそうです。 今回お話しした理由 今回の勉強会では、「マークアップの最適解を見つけ出す方法」というタイトルでお話ししてきました。もともとアップルップルの社内勉強会で、後輩に向けて話した内容だったので基本よりももっと根っこになる考え方の部分についてお話ししました。 私がこの内容を話そうと思った理由は、これから勉強する人たちに私みたいにマークアップで悩まないで欲しかったからです。私はとても長い間マークアップに悩んでいました。今はたくさん学ばなければいけないことがたくさんあるので（開発環境、作業効率、メンテナンス性などなど）、なかなかじっくり悩むということが難しいかもしれません。ですが、マークアップはまだまだ重要ですし

  • テクノロジー
  • 2016/09/27 05:19

  • html
  • DevLOVE
  • コーディング
  • css
  • あとで読む
• あとで読む

  SVGのclipPath要素を使ってモーフィングアニメーションする | mkasumi.com

  5 users

  mkasumi.com

  もしかしたら中には難しいことをせずに、画像でマスクしてトリミングしている方もいるかもしれませんが、今回は以下の理由があり、SVGのclipPath要素を使うことにしました。 デザイナーさんから手書き風に画像をトリミングしたいという要望があった クライアントがCMSから画像を更新するとき、画像を加工する手間を省きたい パスをモーフィングアニメーションさせたい 実装方法 まずはざっくり大まかな手順をご紹介すると、以下の通りに実装します。 Illustratorのファイルでトリミングしたい形のパスを2種類作る そのパスの1つをコピペしてclipPath内のpath要素のd属性に挿入する 2つめのパスは上記と同じpath要素にdata-to属性に挿入する JSで動かす Illustratorのファイルでトリミングしたい形のパスを2種類作る このとき、パスはアニメーション元を複製してアニメーション後

  • テクノロジー
  • 2016/09/21 14:16
• あとで読む

  Webアクセシビリティについて勉強してみて知ったことや感じたこと | mkasumi.com

  16 users

  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

  • テクノロジー
  • 2016/05/08 16:02

  • accessibility
  • アクセシビリティ
  • あとで読む
• あとで読む

  CMSMix Sapporo でa-blog cmsセッションのスピーカーとして登壇しました | セミナー | mkasumi.com

  7 users

  mkasumi.com

  先日、2月27日（土）に行われた、CMSMix Sapporo 〜Web制作の幅が広がる！プロジェクトの傾向から考える、2つ目・3つ目のCMS選び〜 という5つのCMSのセッションが聞ける勉強会で、a-blog cms のセッションのスピーカーとして登壇しました。 CMSMix Sapporo について CMSMix Sapporoは、株式会社ジャクスタポジションの西山さんが主催しているセミナーで、WCAN で登壇された Webbing Studio 口田聖子さん のスライドを主催者の西山さんが見たことが開催のきっかけになったそうです。 a-blog cms のセッションについて サブタイトルが「2つめ・3つめのCMS選び」ということだったのですが、私は実際 a-blog cms しか制作案件で使うことがないので初めはどうしようかと思いました。今回は、その部分は基調講演の口田さんに任せて、

  • テクノロジー
  • 2016/02/29 20:26

  • ablogcms
• あとで読む

  CSSセレクタで最後の要素が奇数だったときを指定する | メモ | mkasumi.com

  18 users

  mkasumi.com

  デザイナーさんから、2カラムの要素が3つあったとき、最後の3つめは1カラムにしたいという要望があり、思いついた実装方法です。あまり更新しないコンテンツでしたが、要素が増えたときにCSSを書き直しが発生するのが嫌で、この書き方にたどり着きました。 HTML

  • テクノロジー
  • 2016/02/25 11:17

  • css
  • 検索
  • 参考
  • あとで読む
• あとで読む

  コーダー目線で考えるa-blog cmsで行うCMSプロトタイピングについて | mkasumi.com

  4 users

  mkasumi.com

  これは、 a-blog cms Advent Calendar 2015 の1日目の記事です。 最近、CMSプロトタイピングの手法を使ってで案件を進めることが多くなってきています。そのCMSプロトタイピングを実際やってみて、コーダー(実装側)の作業がどう変わったのかご紹介したいと思います。 CMSプロトタイピングとは CMSプロトタイピングとは、先にCMSを実装し、コンテンツを流し込み、コンテンツ量を見ながら、最適なデザインや提案をしていく考え方のことです。例えば、「思っていたよりコンテンツ量が少なくてこのデザインは使えないので修正してください」なんてことを少なくすることができます。 コーディング側のメリット 上記のCMSプロトタイピングの説明では、コーダーにメリットが無いように感じますが、デザインの出戻りが少なければ、コーディング側の修正も少なくなりますし、制作ワークフローが変わるところ

  • テクノロジー
  • 2015/12/01 23:11

  • ablogcms
  • web制作
• あとで読む

  mkasumi.com

  4 users

  mkasumi.com

  これは a-blog cms Advent Calendar 2022  1日目の記事です。 今回は公式ドキュメントには書かれていない応用Tipsを含めて、a-blog cms のさまざまな条件分岐方法をご紹介します。 タッチモジュール、インク... 続きを読む

  • テクノロジー
  • 2015/11/20 13:06
• あとで読む

  「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加しました | セミナー | mkasumi.com

  8 users

  mkasumi.com

  10月24日（土）に名古屋で開催された「アクセシビリティからはじめる、WebサイトのUXデザイン」に参加しました。講師は BA 太田良典さん、株式会社Gaji-Labo 山岸ひとみさんでした。 株式会社ボーンデジタルさんが出版している「コーディング Webアクセシビリティ」と「デザイニングWebアクセシビリティ」の出版イベントでした。勉強会＆ワークショップということでちょっとドキドキしながらの参加でした。 全体的な流れとしては、まず、太田さんが講演してから太田さんのセッションのまとめを振り返るワークショップを山岸さんがされるという形でした。 スライドも後で公開されるそうで、「あまりメモはとらないで参加してください」と事前に山岸さんがおっしゃってたことが印象的でした。それなら、ということで、今回はメモ少なめです。 太田さんの講演は「コーディング」→「デザイン」→「アクセシビリティ方針について

  • テクノロジー
  • 2015/10/27 09:59

  • ***
  • report
  • webdesign
  • work
  • event
  • web
  • あとで読む
• あとで読む

  SVGのアニメーション | mkasumi.com

  22 users

  mkasumi.com

  CSSのアニメーションやSVGを勉強している間に、SVGもアニメーションできることを知ったので触ってみました。 SVGでアニメーションさせるには3つの方法があります。 SMILアニメーション Javascript CSSアニメーション どんなことができる？ Shape Hover Effect with SVG jQuery Rain | Border Animation Effect with SVG jQuery Rain | Circular Progress Button with SVG How to style SVG with CSS - part 2/3 | Le blog de Studio.gd hoverしたときの動きとか、SVGのパスで特殊な表現ができるようになる。 普段使っているCSSでもアニメーション事態は可能なので学習のハードルが低い。 実際に作ってみる 今回

  • テクノロジー
  • 2014/12/17 12:38

  • SVG
  • css
  • animation
  • アニメーション
  • webデザイン
• あとで読む

  入社2年目マークアップエンジニアの情報の集め方 | 活動 | mkasumi.com

  4 users

  mkasumi.com

  2014.10.22 | 活動 入社2年目マークアップエンジニアの情報の集め方 アップルップル公開社内勉強会で「入社2年目　マークアップエンジニアの情報の集め方」というタイトルで発表しました。 今回は初めてGoogleスライドを使ってみました。 入社2年目 マークアップエンジニアの情報の集め方 SlideShareにもアップしてみました。お好きなほうでご覧ください。 情報収集はWeb制作者には欠かせないスキル 入社1年目のとき、新人の入る隙は情報収集だと思ってがんばっていたのですが、入社2年目にして先輩が退職されるというまさかの展開にまた情報収集をがんばることになりました。 どの立場にしろ、情報収集は大事だなあと実感した今、公開社内勉強会という場を借りて新人さん2人に向けてお話ししてきました。 お話の内容 情報収集の大切さ 新しい情報を収集する すでに浸透している情報を収集する 情報を発信

  • 学び
  • 2014/10/22 09:29

  • CSS
  • まとめ
• あとで読む

  お探しのページは見つかりませんでした | mkasumi.com

  6 users

  mkasumi.com

  普段はWebプロダクト周りのデザインをしている森田かすみの技術ブログです。Webプロダクトを改善していくにあたり、学んだことや体験したことを記録しています。

  • テクノロジー
  • 2014/09/17 10:48

  • 命名規則
  • CSS
  • 解説
  • Performance
  • Architecture
  • Web制作
  • amcss
• あとで読む

  SVGのアニメーション | mkasumi.com

  8 users

  mkasumi.com

  CSSのアニメーションやSVGを勉強している間に、SVGもアニメーションできることを知ったので触ってみました。 SVGでアニメーションさせるには3つの方法があります。 SMILアニメーション Javascript CSSアニメーション どんなことができる？ Shape Hover Effect with SVG jQuery Rain | Border Animation Effect with SVG jQuery Rain | Circular Progress Button with SVG How to style SVG with CSS - part 2/3 | Le blog de Studio.gd hoverしたときの動きとか、SVGのパスで特殊な表現ができるようになる。 普段使っているCSSでもアニメーション事態は可能なので学習のハードルが低い。 「SVGのアニメーショ

  • 学び
  • 2014/06/18 13:37

  • svg
  • css
  • animation
• あとで読む

  入社8ヶ月 なんだか最近コーディングが早くなってきた気がする | サイト制作 | mkasumi.com

  3 users

  mkasumi.com

  ○○にはコンテンツの内容を見て他とクラス名がかぶらないように判断します。 普段から知識をつけることによって検索する時間を削減する はじめはどうしても検索することに時間がかかってしまいます。専門用語をしっていると結構早く見つけることができるので、日々わからないことでも軽く用語を覚える程度に勉強しておくことをおすすめします。 人がタイピングしているところを観察する たとえば、 .style { background: #CCC; } と打ったときに{}を先に打ってから中身を書いた方が早いと感じます。私は人がタイピングしているのを見てそのコツに気がつきました。教えてもらえないなら、見て盗むことも手です。 ショートカットキーも他人がやってるのを見て、「どうやってやってるんだろう？」と思って調べて覚えることが多いです。 ただ、これには周りに同じようにコーディングしている人がいる環境にいることが条

  • 暮らし
  • 2013/11/18 21:50
• あとで読む

  正式版のBootstrap3で個人的に覚えておきたいところ | メモ | mkasumi.com

  4 users

  mkasumi.com

  数ヶ月前にBootstrap3が正式にリリースされました。RCから正式リリースまで早かった気がしましたが、Bootstrapの2歳の誕生日に合わせてたんですね。 Bootstrap 3 released · Bootstrap Blog それでは今回は前回ご紹介したBootstrap3 RC1 変更点まとめには書いていなかった、Getting started · Bootstrapのページで私が覚えておきたいところをメモしていきます。 また英語の勉強も兼ねての記事になりますので、間違っているところがあれば教えていただけると嬉しいです。 気になる新しいテーマ Grids Non-responsive Bootstrap Bootstrap theme Grids Bootstrap3ではグリッドシステムが大きく変更しました。 クラスの書き方もそうですし、2.3.2のときはスマートフォンのとき

  • 世の中
  • 2013/10/13 12:18

  • Bootstrap
• あとで読む

  SublimeText2のSFTPの設定のメモ | メモ | mkasumi.com

  7 users

  mkasumi.com

  SublimeText2をお仕事で使っているのですが、やっとSFTPの設定ができるようになったのでメモします。 SFTPを使うととっても便利です。1回保存するだけでサーバーとローカル環境に同時に変更を加えることができます。ローカル環境が常に新しい物と同じ物になるので、安心できます。そのため、弊社ではSFTPの設定をするようにしています。 こちらからインストール・購入できますよー Sublime SFTP – an FTP, FTPS & SFTP Package for Sublime Text by wbond 今回、参考にした記事はこちらの2つです。 Sublime Text 2 の SFTP パッケージでファイルの自動アップロード＆モニタリング機能を試してみた | memobits Sublime Text 2のプロジェクトを設定してみよう｜WEB Drawer SFTPを使い始めた

  • 学び
  • 2013/10/02 11:32
• あとで読む

  Bootstrap3 RC1 変更点まとめ | mkasumi.com

  8 users

  mkasumi.com

  先日、a-blog cmsのBootstrapテーマを配布した(Bootstrapテーマの配布について)にも関わらず、Bootstrap3 RC1が公開されました。 そこで、Bootstrap3 RC1で何が変わったのかを調査したいと思います！ RC1ってなに？ 販売(Release)の候補(Candidate)となる完成により近い開発バージョンのことで、以降完成度が上がるに従ってRC1、RC2、RC3……と数字が大きくなっていく。この最終バージョンをRTMと呼ぶ。 デジタル用語辞典 より 進化する可能性があるってことですね。β版みたいな感じでしょうか。ちなみに、CustomizeのページはRC2になるまで公開されないようです。 変更点 大きなところ モバイルファースト モバイルでも1カラム以上にすることができる iconのフォルダがデフォルトで入ってない（Glyphiconsから入手

  • 学び
  • 2013/07/30 20:42

  • Bootstrap
• あとで読む

  Webアクセシビリティの学校　基礎から学ぶ初級講座に参加しました | セミナー | mkasumi.com

  3 users

  mkasumi.com

  植木 真さんによる「Webアクセシビリティの学校　基礎から学ぶ初級講座」に参加しました。 マークアップのセミナーに参加する機会があんまりなかったので今日は特に楽しみにしていました。 ウェブに置けるアクセシビリティとは？ さまざまなユーザーの利用特性 アクセシビリティの基本テクニック：初級編 についてのお話でした。 ウェブに置けるアクセシビリティとは？ より多くのユーザーがより多くの場面でより多くの使い方をえらべるようにすること より多くの利用環境をサポートして、より多くのユーザーにリーチできるようにすること 「ウェブに置けるアクセシビリティとは？」ではアクセシビリティとはなんぞや、といった基礎的なことから丁寧に教えてくださいました。 お話の中では障害がある方や高齢の方だけではなく、一時的な制約があってアクセスできない理由があることを知りました。（例えばマウスの調子が悪い、眼鏡が壊れた、モ

  • 暮らし
  • 2013/07/29 10:13

  • accessibility
  • ***
  • report
  • html
  • mac
  • web
• あとで読む

  ソーシャルボタンの設置~はてブ、Pocket編~ | サイト制作 | mkasumi.com

  4 users

  mkasumi.com

  最近はてブとPocketのソーシャルボタンをわたしのブログにつけたので、設置の仕方をご紹介します。 はてブのソーシャルボタンの設置のしかた はてなブックマーク本家サイト はてなブックマークボタンの作成・設置について - はてなブックマーク はてなブックマークの本家サイトに行き、ボタンを選んで、必要な事をフォームに記入してコピペするだけです。 <a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-butto

  • 世の中
  • 2013/06/26 13:06

  • webデザイン

次のページ