[B! web制作] moja23のブックマーク

WAI-ARIA の基礎知識 | Accessible & Usable

公開日 : 2014年4月15日 (2018年1月20日更新) カテゴリー : アクセシビリティ / 情報設計 (IA) WAI-ARIA 1.0 が、2014年3月20日付で W3C の勧告 (Recommendation) になりました。 WAI-ARIA とは、Web Accessibility Initiative (W3C の中で、Web アクセシビリティに関する仕様を検討する部会) が策定した、Accessible (アクセシブル) な Rich Internet Applications (リッチインターネットアプリケーション : RIA) に関する仕様です。この仕様で定められた記述をソースコードに加えることによって、JavaScript などでインタラクティブに動くユーザーインターフェース (UI) であっても、その状況の変化を、マシンリーダブルな形で支援技術 (スクリー

moja23 2016/02/15

リンク

Bootstrapをカスタマイズ！ページをスマホで表示した際に横からナビゲーションをスライドさせる -Bootstrap Offcanvas

Bootstrapで実装したページをスマホなどの幅が狭いスクリーンで表示した際に、横からオフキャンバスのナビゲーションをアニメーションでスライド表示させるJSとCSSのパックを紹介します。 Off Canvas -Bootstrap Bootstrap Offcanvasの使い方 Step 1: 外部ファイル当スタイルシートとスクリプトを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="../dist/css/bootstrap.offcanvas.min.css"/> </head> <body> ... <script src="../dist/js/bootstrap.offcanvas.js"></script> </body> Step 2: HTML まずは、オフキャンバスのナビゲーションを開くボタン。 <butt

moja23 2016/02/04

リンク

15分で作ってレビュー！新たな発見を生むトレーニング法「コードスプリント」のススメ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

それでは、みんなが15分という短い間でどのようにコーディングしたのか見ていきましょう！ SMACSSで汎用性を意識した、店長のモジュール化コーディング See the Pen gPPpOJ by yusuke omi (@Im0-3) on CodePen. まずは手前味噌ですが、私、店長のコードから紹介したいと思います。ポイントは、SMACSSでのCSS設計を意識したコーディングです。グリッドレイアウトはSMACSSのレイアウトルールに沿った命名にし、使い回しがしやすいようにパーセントで、グリッド幅を指定しました。また、カテゴリの部分やNEWのパーツはモジュール化して、他のところでも使い回しをしやすいように計算をしています。意味のあるコードだけを書きたい。まろCのエモコーディング See the Pen xZZNey by maroc (@maroc) on CodePen. CTO

moja23 2016/01/29

web制作

リンク

UX（ユーエックス）ってなんだ？実際に活躍している人たちに聞いてみた（後編） | ウェブ電通報

ウェブ／アプリの重要テーマのひとつであるUXに関してのコラム後編になります。前編では、UXの意味に関して現場で活躍している方々にご意見をいただきました。【再掲】アンケートに協力してくださった皆さん【再掲】実施した４つの質問・「（あなたにとって）UXとは何か？」と聞かれたらどのように説明するか・UXを考える上で大事にしているポイント・UXを意識した象徴的な出来事（ご経験がおありの場合）・UXについてどうやって学習／インプットをしているかこの4つの設問をメールでお送りし、UXについての捉え方や設計の考え方をこの前編に、そして、過去の経験や知見に関するものを後編に分けてご紹介いたします。＊回答の中から4つほどピックアップをしております。＊回答の紹介順は順不同です。＊時々、私が回答に個人的に感動／共感し、レビューが長文になってしまっていますがご容赦ください。【再掲】UXとは

moja23 2016/01/22

リンク

LIGのフロントエンドチームを構築するためにやった6つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

LIGフロントエンドチームの歴史まず、2015年9月現在のフロントエンドチームは、以下のメンバーで構成されています。はやちせいとおじいちゃんまろいなば店長 [New] ゆうた [New] ゆたろ 7月にゆうた、8月中旬にゆたろが新しく仲間に加わりました。まだLIGブログ上にはデビューしていないのでメンバーページへのリンクはありませんが、近々登場する予定です。さて、そもそもチームが発足したのは2014年の1月頃のことでした。 2014年1月私がLIGの最終面接へやってきたときのこと。当時はまだフロントエンドチームという明確な組織形態はなく、代表のたかさんから以下のように言われました。「これからフロントエンドチームを作ってほしい」「うちはどこの会社よりも必要としている！」「必要としている」とはっきり言われたことがすごく嬉しく、その熱意に惹かれて入社する決意をかためました

moja23 2015/12/25

“制作フローの見直し”

リンク

フロントエンドエンジニア、そしてCTOとしての2015年を振り返る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、CTOの林です。みなさんにとって2015年はどのような年でしたか。記憶に残るような1年でしたでしょうか。私は今年からCTOとなり、多くのことがこの1年で変化し、それに伴いたくさんの出会いや経験がありました。今日はこの1年間を振り返りながら、CTOになった経緯や来年の取り組みについてお話しさせていただきます。 ※これは「LIGinc Advent Calendar 2015 最終日」の25日目の記事です。 6月にフロントエンドリーダーという立場に加えて、CTOになりました。さらに組織体制が変わったことにより、Web制作グループ長も兼任となり、最終的には「CTO兼Web制作グループ長兼フロントエンドチームリーダー兼フロントエンドエンジニア」となりました。長い。 CTOになった経緯 2014年4月にフロントエンドチームのリーダーとしてLIGへジョインしてから、職種にとらわれない活

moja23 2015/12/25

リンク

本当に使えるコーディングチェックサイト厳選3選

コーディングの正確性について、不安を持つWeb制作担当者は少なくないのではないでしょうか。コーディング後に、ミスが発覚すると修正作業のために時間を大幅にロスしてしまう可能性があります。できるだけミスを防ぐためにも、適切なコーディングができているかどうかをチェックできるツールはストックしておいた方がいいでしょう。今回は、コーディングを担当しているものの自信が無いという方にオススメのコーディングチェックツールをご紹介します。コーディングで気を付けなくてはいけないこと制作するにあたって、コーディングレベルがありますが、HTML・CSSを利用する際に気を付けなくてはいけないことは単純に「正確に動作し、ブラウザによってサイト崩れが発生しない」ことなのではないでしょうか。例えば、「リンクページをクリックしたが、正確にページが表示されない」や「PCでサイトを見たときには正常に動くのにスマホで

moja23 2015/12/17

リンク

第14回　HTML5で日報アプリを作る　解説編［3］　非同期処理とCSS Animationを使う

第12回からは「解説編」として、日報アプリに実装した要素を詳しく解説しています。第12回　HTML5で日報アプリを作る　解説編［1］　HTML5の入力補助部品を使う第13回　HTML5で日報アプリを作る　解説編［2］　レスポンシブWebデザインとBootstrapを使う「実践編」では、Webアプリケーションの構成に従い、以下の順で進めました。画面の構造を定義する（HTML）画面のレイアウトを定義する（CSS）画面の操作や、処理を定義する（JavaScript）「解説編」でも基本はこの構造に従って進めていますが、解説編の最後である今回はJavaScriptを使った画面の操作や、処理の定義です。日報アプリケーションでは、以下の要素技術を使用しました。基本的なJavaScriptの実装 Ajaxと非同期処理 CSS Animation File API このうち、HTML5の開発

moja23 2015/12/11

リンク

CSSオンリーで作られたLightBox「css-lightbox」:phpspot開発日誌

Cerealkillerway/css-lightbox GitHub CSSオンリーで作られたLightBox「css-lightbox」 CSSのみで作られたとは思えないような感じのLightboxがピュアCSSで実現されています。関連エントリ必要な機能は全部入ったモダンなLightBox実装jQueryプラグイン「lightGallery」レスポンシブで全画面やズーム表示に対応したLightBox実装「Chocolat」

moja23 2015/12/11

“CSSオンリーで作られたLightBox「css-lightbox」”

リンク

ローカルビジネスのためのschema.orgの仕様をGoogleが公開。ナレッジパネルから予約や注文も可能に

[レベル: 上級] Googleは、ローカルビジネス情報をschema.orgで提供する仕様を構造化データの開発者向けサイトで公開しました。名称や住所などの各種情報をローカルナレッジパネルに表示したり、そこから注文や予約といったアクションを実行させるたりすることができます。ローカルビジネス情報をschema.orgでマークアップ schema.orgの LocalBusiness でマークアップすることにより、あなたが営むローカルビジネスに関する情報を正確かつ詳細にGoogleに伝えることができます。たとえば、正しい名前や住所、電話番号を定義できるし、メニューが書かれているURLや営業時間を伝えられます。こうした情報は、検索結果のナレッジパネルに表示されます。 schema.org/LocalBusinessで利用できる次のプロパティが必須または推奨、任意です。 name（名称、必

moja23 2015/12/07

“ローカルビジネスのためのschema.orgの仕様をGoogleが公開。ナレッジパネルから予約や注文も可能に”

リンク

LIGブログにダメ出ししてください！第1回ネットウォッチャー・Hagex（ハゲックス）さん | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは、LIGブログ編集長・ナッツです。昨今のWeb業界は多数のメディアが誕生し、日々無数のコンテンツが生み出されています。この状況を、「ネットの有識者」や「ご意見番」と呼ばれる方はどう見ているのか？　そしてLIGブログをどう思っているのか？　お伺いしてみたいと思います。題して「LIGブログにダメ出ししてください」初回のゲストは、月間約300万PVのブログ「Hagex-day.info」を運営し、はてなブログを中心に活躍するネットウォッチャー・Hagexさんに来ていただきました。 ※ご本人の希望により、顔に処理を施しております。ー Hagexさん、本日はよろしくお願いいたします。よろしくお願いします。私はLIGが大好きなので、今回LIGのダメなところをスライドにしてきました。徹底的にプレゼンさせてください。人物紹介：Hagex ネットで起こる揉めごとを長年培った勘と目で

moja23 2015/12/02

リンク

Google、リアルタイム配信のブログ記事を検索結果に表示するカルーセルを一般公開

[レベル: 上級] ライブブログ (Live blogs) の記事更新をカルーセル形式で検索結果に表示する機能をGoogleは一般公開しました。ライブブログとは、たとえばアカデミー賞の授賞式やスポーツの試合などをリアルタイムにブログ記事で実況中継する配信方法です。赤色の「Live」ラベルが目印こちらはGoogle DevelopersのGoogle+アカウントがライブブログのカルーセルを導入したことをアナウンスした投稿です。 Earlier this year, we announced that users would start seeing carousels with news content on the Search results page, powered by structured data markup that publishers implement. Tod

moja23 2015/11/30

リンク

Web制作における要件定義で心がける5つのポイント | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

今回は、クライアントとの意識のすりあわせの中で重要な要件定義のポイントについて書いていきたいと思います。そもそも要件定義とは？現場でよくある「要件定義」。言葉は立派に見えますが、そもそもどういうことなのでしょうか。改めて調べてみました。要件定義とは、システムやソフトウェアの開発において、実装すべき機能や満たすべき性能などのを明確にしていく作業のこと。いわゆる上流工程の一部で、実際の開発・実装作業を始める前に行う作業の一つである。要件定義では、利用者がそのシステムなどで何がしたいのかを元に、それを実現するために実装しなければならない機能や、達成しなければならない性能などを開発者が検討して明確にしていく。まとめられた成果は「要件定義書」として文書化されることが多い。引用元：要件定義とは – IT用語辞典 http://e-words.jp/w/要件定義.html すこしわかりにくいで

moja23 2015/11/26

リンク

HTML5における no-cache - Qiita

注 updated: 2018/01/25 本記事の投稿当時に紹介したアプリケーションキャッシュは、現在では廃止予定の機能となりました。順次、各種ウェブブラウザからも廃止されていくことでしょう。かわりに Service Workers / Cache API を使用するべきです。 Service Worker の紹介 | Web | Google Developers Service Workerの利用について - Web API インターフェイス | MDN はじめにちょっとした JavaScript ミニアプリの作成で、キャッシングを無効にしたコンテナ用 HTML ページを1枚用意したかったんですが、ひっさびさに W3C Validation Service にかけたらエラーの烙印を食らったのでメモしておきます。留意事項本稿執筆時点で HTML5 の仕様は「勧告候補」の段階で

moja23 2015/11/25

リンク

jsdo.it

Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovr ai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovr ai a

moja23 2015/11/19

リンク

最前線IT企業のデザイナーたちが参考にしてきた「UI・UXの良書」とは | nanapi [ナナピ]

便利なシステムを生み出し、ユーザーの感動体験に欠かせない「UI/UX」。デザイナーとしてお勤めの方はもちろんのこと、IT業界に関わっている・関心があるなら積極的に学んでいきたい分野です。今回話をうかがったのは、人気IT企業におつとめのデザイナーの方々。「UI/UX」について学び考える上で、おすすめの書籍を教えていただきました。ご回答いただいた企業はこちら 1　グリー株式会社 2　GMOインターネット株式会社 3　GMOペパボ株式会社 4　ピクスタ株式会社 5　株式会社ブラケット 6　ヤフー株式会社 7　株式会社リブセンスグリー株式会社　細川菜々恵さんスマートフォン向けアプリ開発を担うスタジオ「Wright Flyer Studios」にて、Art UI UXチームのUI/UXディレクターを務める細川菜々恵さん（以下、細川さん）。UI/UXを学ぶにあたり、おすすめを教えていただきまし

moja23 2015/11/16

リンク

Responsive Web Design JP（日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト）

日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイトです。

moja23 2015/11/13

リンク

もっとSassろう！慣れてきたら使いたいワンランク上のコーディング方法4選

同じレイアウトのスタイルで、一部の色やアイコンだけを変えたい、というときに便利です( ˇωˇ ) 使用方法 html <section id="nav"> <ul> <li class="nav_home"><a href="#">HOME</a></li> <li class="nav_about"><a href="#">ABOUT</a></li> <li class="nav_company"><a href="#">COMPANY</a></li> <li class="nav_contact"><a href="#">CONTACT</a></li> </ul> </section>  以前、$colorsに直接色コードを配置しておりましたが、あらかじめ変数を定義しておくと、のちの管理がしやすくなります�( ˇωˇ ) /* ===========

moja23 2015/11/12

リンク

コピーライター・谷山雅計さんに、広告業界の話はすっ飛ばして、Web業界のライティングやコピーライティングについて聞いてきました。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。ひゃくいち（@tanabe101）です。なんと、かのコピーライター・谷山雅計さんにインタビューしてきました。 ▼LIGブログ編集長ナッツ（@nuts612）によるインタビュー後編はこちら谷山さんは、資生堂「TSUBAKI」「FOGBAR」、東京ガス「ガスパッチョ! 」、新潮文庫「Yonda?キャンペーン」、au「ガンガンメール」「iida」、日産自動車「セレナ」、全日空「OKINAWA」、キリンビバレッジ「生茶」「ペコロジー」、東洋水産「マルちゃん正麺」、日本テレビ「日テレ営業中」「日テレ式」などなど、誰もが目にしたことのあるクリエイティブを手がける広告業界の大御所です。お話を聞ける、せっかくの機会。インタビューを担当することが決まって震えながら考えたのは「いろいろなところですでに聞かれてきたであろう、いわゆる広告業界の話はすっ飛ばしてしまおう」ということでした。とい