マークアップをパワーアップするWAI-ARIA
私たち @masuP9(わかり手) 株式会社サイバーエージェント @o_ti(キレ手) 株式会社まぼろし マークアップ生まれ マークアップ育ち フロントエンドエンジニア 受託魔族はだいたい友達 #deisui_html_radio ウェブ制作をこじらせたオレたちが 歩いてきた道は何か、進むべき道はどこかを探る （ただの飲み配信） 目次(role="directory") WAI-ARIAってなに WAI-ARIAでできること WAI-ARIAをどういうときに使うの WAI-ARIAの前に WAI-ARIAってなに <header role="banner"> hogehoge </header> WAI-ARIAは、ウェブコンテンツおよびアプリケーションの アクセシビリティと相互運用性を改良するための フレームワークを提供する技術仕様である。 Accessible Rich Interne
Googleスプレッドシートで作成したファイルリストをVue.jsで表示する：IE11対応編 | バシャログ。
まさかの２週連続台風により週末が終わってしまいそうで、ちょっと悲しい kouraku です。おはこんばんちわ。予定は何も入れていなかったので、それだけが救いですね。。。 さて、前回『Googleスプレッドシートで作成したファイルリストをVue.jsで表示する』というお題にチャレンジしましたが、実は１つだけ問題がありました。それは・・・ IE11だと表示されないよ！！！！ ・・・はい、分かっていたのですが、コーディング中にIEを使うこともあまりないだろう・・・と思い放って置いたんです。 でも、仕事を進め行く内に、「IEでもちゃんとファイルリストが見られないと面倒！！」という場面にチョイチョイ出くわしたので、やっぱり直すことにします。 ということで今回は、このファイルリストをIE11でも表示できるように修正をしたいと思います。 まずはIE11のコンソールでどのようなエラーが起きているかチェック
Vue.jsで構築された、デスクトップでもスマホでも快適に操作できるスライドショーのフレームワーク -Eagle.js | コリス
Vue.jsで構築されたスライドショーのフレームワークを紹介します。 デスクトップ・スマホに完全対応、プレゼンテーションモードも備えており、キーボード・マウス・タッチ操作をサポートしている快適なスライドショーを実装できます。 Vue.jsで構築された、軽快に動作するスライドショーのフレームワーク。 アニメーション、テーマ、インタラクティブウィジェットをサポート。 プレゼンテーション全体でコンポーネント、スライド、スタイルを再利用可能。 ビルトインプレゼンターモードとさまざまな便利なウィジェット。 すべてのAPIが公開されており、カスタマイズ可能。 ライセンスはISC Licenseで、商用でも無料で利用できます。 Eagle.jsのデモ Eagle.jsを使用したさまざまなスライドショーを楽しめます。 まずは、スライドやフェードなどのアニメーションが仕込まれたスライドショーから。 Eagl
JavaScriptフレームワークは、習得しないといけませんか？という質問への回答｜ナユ｜note
2018年9月29日、大崎ブライトコアホールで開催された「CSSNite LP58 Coder's High」というイベントに登壇しました。 ご回答いただいたアンケートに「Vue.jsは、習得しないといけませんか？」という質問が非常に多く書かれていました。 Vue.jsと書かれている理由は「JavaScriptフレームワークに入門したい人におすすめはありますか？」という質問に対して「日本語の情報が充実しているVue.jsから入門してはどうか」という回答をしたためです。 なので、質問の本質は「JavaScriptフレームワークは習得しないといけませんか？」ということだと解釈し、本記事を書きました。 前提条件などこの記事では「技術的に手広い会社ほど、仕事にこまらず、食いっぱぐれない」という前提の元で書いていきます。 また、モデルケースとして、コーダー一本でやってきているというキャリアを想定しま
いつのまにか、新規事業立ち上げが仕事になっていた｜とうどうと、まつせ
こんにちは、東藤です。 2年半くらい在籍したCAMPFIRE を退職して8月からは原宿にあるinfocomで働いています。 infocomの新規事業を担う部門にて、まっさらな状態からの事業化－ひいては収益化をミッションとしています。 気がつけば、うつ病になって会社をやめてからずーっと新規事業立ち上げる事で社会と接点を作ってきました。 今日は最初のnoteなので、これまでどんな事があったのか。これから何をしたいのかを書いてみようと思います。 ** 目次 ブラック企業からのうつ病、そして起業 CAMPFIRE での新サービス立ち上げと社長室 infocomでの新規事業というミッション** ブラック企業からのうつ病、そして起業ここの経緯についてはいろいろとお話したり記事になっています。 いちばん詳しく載っているのはsoarさんかな。 うつ病患者が手を取り合ったら起業もできた。うつ病オンラインコミ
スマートフォン用サイトを制作するデザイナーさんに伝えたいWebブラウザのViewport(表示領域)の話。エンジニアにも役立つかも。 Part1｜Takumi Hasegawa (unshift)
基本的には実装側で見え方に破綻がないようにしますが、実機でみたときにデザイナーさんは自分でデザインしたものとは少なからず違うものがあがってくるはずなので、違和感を感じることはないのかなと、疑問に思いました。 結局はデザイナーさんと実装者との間で、あらゆる画面サイズにどのように対応するかのルールがしっかり共有できればいいですが、口頭や文字だけだったりすると、なかなかわかりにくかったりするものです。 なので、デザインデータに入れてもらったほうが、実機に近い形での見え方がイメージできるのでデザイナーさんもエンジニアも幸せになれるのでは、と思いました。 スマートフォンの画面サイズはさまざまですが、基本的にはiPhoneを基準につくるデザイナーさんが多いかと思うので、少なくとも多くのユーザを占めるiPhoneの見え方は担保できるかな、という感じです。 まぁそんなデザイナーさんの手助けになればと思いま
CSSでのラジオボタン・チェックボックスのカスタマイズを詳しく説明してみた | カルアカはWebが無料で学べる
こんにちは、リードスペースです。 ラジオボタンやチェックボックスってブラウザー依存のデフォルトデザインだと少し味気ないですよね？ 今回は、CSSでラジオボタンやチェックボックスをオリジナルデザインでカスタマイズする方法について根掘り葉掘り説明します。 ズバリ、labelタグを使う ラジオボタンやチェックボックスなどに使用するinputタグはcssで装飾できないという難点があります。 そこでラジオボタンやチェックボックスを装飾するのに役立つのが「label」タグです。 「label」とは、チェックボックス、ラジオボタンなどの構成部品とその項目名を関連付けるためのタグです。 関連付けを行えば、ブラウザでlabelタグをクリックしただけでも、その構成部品をクリックしたものと同じ動きをしてくれます。 指定方法その1・フォームパーツのidとlabelタグのforの値を同じにする 下記のようにidとf
30代から始めるwebフロントエンド入門 - Speaker Deck
Transcript 30代から始めるwebフロントエンド入門 コネヒトマルシェ #2〜webフロントエンド市〜 @itosho 1 ▪ 自己紹介 ・伊藤 翔 / @itosho ・所属：コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。 ・最近のオススメ：sora tob sakana 先日メジャーデビュー ▪ 自己紹介 ・伊藤 翔 / @itosho ・所属：コネヒト株式会社 / Supership株式会社 ・野球とアイドルが好きです。 ・最近のオススメ：sora tob sakana 先日メジャーデビュー ・主にサーバーサイドエンジニアをやっています。 ・よく書く言語：PHP / Ruby / Golang ＿人人人人人人人人人人人人人人＿ ＞ サーバーサイドエンジニア ＜ ￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣ 4 ▪ 今日話すこと
Windows？Mac？なんでもゴザレ。スクリーンショットに特化したキャプチャーツールLightShot先輩の使い方
”気軽な”先輩をウマく使おう。 それなりに融通のきくMacのスクリーンショット機能。それでも、思ったようにキャプチャーできずに何度もやり直してませんか？ WindowsのPrintScreen機能は言わずもがな。そもそも自由度が低く、後でPhotoshopなどでトリミングしないと使い物にならないこともしばしば。 確かにそれで十分な場合もあるでしょう。でも繰り返しますが・・・何度もスクリーンショットの撮り直し、してませんか？どうして何度も撮り直しをしてしまうハメになるんでしょう。きっとそれは・・・ キャプチャー範囲を設定後、自由に選択領域を移動できない。 ということが一番の理由でしょう。つまり、「マウスドラッグで範囲指定し終わった瞬間」に保存されてしまうため、微調整できないことが原因です。例えばSnipping Toolの場合。 クリックで拡大 マウスから手を離すと同時に編集画面に移行してし
Googleのデザイナーなどのポートフォリオを300件以上閲覧できるサイト Bestfolios - LOGzeudon
海外のデザイナーのポートフォリオを見るのに便利なサイトの紹介です。 Bestfolios - UI/UX Design Portfolio Inspiration and Showcase ポートフォリオだけでなく、次の４カテゴリで情報がまとめられています。 Portfolios（ポートフォリオ） Resumes（履歴書） Resources（デザイン素材） Articles（投稿記事） オススメなページ順に、簡単に内容を紹介します。 Articles（投稿記事） ポートフォリオに関連した記事が読めます。 今のところ４記事しかありませんが、いずれもタイトルの魔力がすごい。 Google Designer Portfolio Collection 1 Facebook Product Designer Portfolio Collection 1 10 great fonts you may
今話題の【裁量労働制】が既に導入されてるIT業界で起きてること - 元IT土方の供述
首相が現国会で言及した厚生省のデータ改ざんを発端として裁量労働制が現在話題になってますね。 このブログを初期から御覧の方はご存知かもしれませんが、 私は、デスマーチ、IT土方、多重請負、多重派遣、10K職場と悪名高いことで評判のIT業界にいました。 www.itjigoku.com そして、そのIT業界は真っ先に裁量労働制を導入した業界でもあります。 そのIT業界の裁量労働制の実態を自分自身の経験や、一緒に働いていた人から聞いた情報を基に書き綴っていきます。 ※一昔前の出来事とブコメしてる方いますが、残念ながら、2010年代前半から去年2017年の出来事になります。 そうだったらどれだけ良かったことか・・・。 初めに断っておきますが、ここで語るIT業界というのは、SIerとかシステムインテグレータとか呼ばれるIT業界のことを指します。そして、日本のIT企業の大部分がSIerに属しています。
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 - ICS MEDIA
JavaScriptのモダンな書き方 - ES2017〜ES2018のawait・async, includes(), padStart()等を解説 ECMAScript 2015がリリースされて以降、JavaScriptの機能は大きく強化されました。const/let、アロー関数、クラス構文、Promiseなどが有名なところですが、ES2016、ES2017、ES2018、･･･ES2022、そしてさらにその先へJavaScriptの仕様は日々進化しています。JavaScript・TypeScriptの開発では、これまで当たり前だと思っていた手法を新しい新機能で置き換えることが何度もありました。 本記事では、JavaScriptのモダンな書き方について説明します。おもに2017年から2018年頃に搭載されたES2017・ES2018の機能について焦点を当てて解説します。 非同期のProm
第1回JavaScriptとは
JavaScript初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。 リニューアル後のチュートリアルは次のページを参照してください。 はじめようJavaScript 当連載は、ITエンジニアが本職でない方やプログラム経験のない方が、無理なく段階的にJavaScriptの基本的な知識を学べるコンテンツです。 このコンテンツを読んで、コンテンツに沿って実際にプログラムを書いてみることで理解を深めることができます。 また、忙しくて時間がない方もすき間時間にモバイル端末で概要を読み、あとからPCで手を動かしてみることで、効率良く学習を進められます。 プログラミング入門としてぜひお役立てください。 JavaScriptはWebブラウザー上で動作させることのできる代表的なプログラミング言語です。 たとえば、次のようなWebブラウザー上に表示させる
jQueryでマウス動作が止まった時点で展開するドロップダウンメニューを実装する方法｜BLACKFLAG
以前「jQueryでマウス動作がストップした時を判別して処理する方法」と題して、jQueryでマウス動作がストップした時を判別して処理する方法を紹介しましたが、それを利用してドロップダウンメニューのロールオーバー動作をマウス動作がストップしたときに発動させるUI改善について紹介してみます。 「jQueryでマウス動作が止まった時点で展開するドロップダウンメニューを実装する方法」サンプルを別枠で表示 ※上記のサンプルでは「WORKS」「PRODUCT」「RECRUIT」の3つのボタンのみにドロップダウンメニュー動作を実装しています。 ドロップダウンメニューのようなロールオーバーの状態を判別して処理するメニューUIでは、ボタンにロールオーバーをして表示されたメニューエリアにマウスカーソルを持って行く際に誤って隣のボタンに少しでも触れてしまうと表示されていたメニューエリアの内容が入れ替わってしま
働きたい障害者と就労支援事業所をマッチング - 日経トレンディネット
障害者向け就労支援事業や子ども向け教育事業を手がけるLITALICO（リタリコ）は、働きたい障害者と障害者就労支援事業所とのマッチングを促進するサイト「LITALICO仕事ナビ」を2018年3月に開始する。 LITALICOは、就職を考える障害者のための就労移行支援事業所である「LITALICOワークス」を全国で運営しており、これまでに5000名以上が企業へ就職している。 新たに開始するLITALICO仕事ナビでは、全国の障害者就労支援事業所の情報を分かりやすく掲載し、障害者一人ひとりが自分のニーズに合った事業所を選べるようにサポートする。また、就労支援事業所にとっては、利用者を集めやすくなるという。 就労支援施設は3年間で約1.4倍に増加 LITALICO取締役の中俣博之氏によると、働く意欲を持つ障害者の数は年々増えているという。2017年は47万人以上が民間企業に雇用されており、その数
はじめようJavaScript第2回 かんたんなプログラムを書いてみよう - cybozu developer network
JavaScript初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。 リニューアル後のチュートリアルは次のページを参照してください。 はじめようJavaScript さっそく、JavaScriptを使って簡単なプログラムを書いてみましょう。 わからない単語はインターネットで検索するか、可能な限り注釈をいれているので参考にしてみてください。 今回は、ブラウザー上でプログラミングと実行までできるJSFiddleというサービスをつかいます。 まずはいくつかプログラミングをこなし、慣れてきてからkintone上でプログラミングをしていきたいと思います。
障がい者就労支援事業所を知ってますか--LITALICOが情報サイトで目指す課題解決
LITALICOは1月29日、就労を希望している障がいのある方と、障がい者就労支援事業所とのマッチングを促進する情報サイト「LITALICO仕事ナビ」を、3月からサービス開始すると発表した。その経緯と狙いを事業責任者であるLITALICO取締役の中俣博之氏に聞いた。 LITALICO仕事ナビは、一言でいうと障がい者就労支援事業所の情報サイト。全国の障がい者就労支援事業所について分かりやすく掲載し、障がいのある方が個々のニーズに合った事業所選びをサポートすることで、効果的なマッチングを実現し、就労支援事業所の集客における課題解決にも貢献するというもの。 中俣氏によれば、障がいを持っている方が働くケースは年々増加しており、4月に障害者雇用促進法が改正され、企業の障がい者の法定雇用率が現行の2.0％から2.2％に引き上げられることから、障がい者雇用の関心も高まっているという。 もっとも、企業にお
最近主流になっている、CSS GridやFlexboxでコンテナ内の要素を揃えるテクニックのまとめ
CSSで要素を揃えることは楽しみであると同時に、挫折を経験することがあるかもしれません。CSSはすぐに進化し、新しい仕様はブラウザにどんどん実装されています。 最近主流になっているCSSの整列テクニックは、これまでのものとはまったく異なります。CSS Grid, Flexboxなど、CSSレイアウトを考慮したよりモダンな方法を紹介します。 CSS Alignment Cheatsheet 記事: Demystifying CSS alignment 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 基礎知識: インラインとブロック 要素が含まれるコンテナに指定して揃える コンテナ内の要素に指定して揃える 揃える方法の紹介の前に、まずは基礎知識から。 基礎知識: インラインとブロック 最初に重要なのは、揃えるのがインラインなのか、ブ
CSSだけで一覧ページのレイアウトを切り替える | UNORTHODOX WORKBOOK | Blog
よくあるやつですが、カード型デザインみたいな一覧ページのレイアウトをクリック一発で別のレイアウトへ変更するやつです。 JavaScriptだったり、別ページを用意したり、パラメーターつけたりで変更することもできると思いますが、CSSだけで変更できる簡易的なのを作りました。 カード型レイアウトからシングルレイアウト シングルレイアウトという言葉があるのか分かりませんが、こういうのです。 追記：正確には、カード型レイアウトを「グリッドビュー」、シングルレイアウトを「リストビュー」と言うようです。 See the Pen Change the Layout by Tatsuya Azegami (@42EG4M1) on CodePen. 上部中央にある四角いボタンをクリックすると変わります。 HTML <div class="main"> <input type="radio" name="r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Basic Design Note
