https://github.com/manabuyasuda/styleguide/blob/master/css-styleguide.md
難しいOOCSS（オブジェクト指向CSS）の設計 | hijiriworld Web
OOCSSとは、構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法である。 OOCSSの考え方に基づいてスタイルシートを記述すると、パフォーマンスと再利用性、メンテナンス性の向上が見込めます。 しかし、OOCSSを上手に設計するのはけっこう難しいのです。なんとなくそれっぽく書いただけでは、OOCSSの導入を成功に導くことはできません。 TwitterBootstrapに代表されるCSSフレームワークなどは、高度に設計されたOOCSSと言えます。そのレベルまで完成度を高めようとするなら、そうとう高度な設計技術が求められます。 初心者が陥りやすいダメな例 > OOCSS? .red { color: red; } .blue { color: blue; } 一見「どんなサイトでも再利用できそうな汎用性のあるクラス定義で、CSSのプロパティを見なくてもマークアップで
Bootstrap と BEM を組み合わせた CSS 設計パターンについて考える | PSYENCE:MEDIA
前置き - CSS 設計が難しい件について 誤解を恐れずに言うならば、CSS は変数も関数も条件分岐もない、ある種ゆるふわな言語（仕様）といえます。そのためプログラミング言語のように記述ミス一つで全ての挙動が止まるなんてことはありませんし、いくら冗長に記述しようがブラウザ上での挙動に差異が生まれることも殆どありません。ちょっと嗜めばそれっぽいものが作れてしまうので、マークアップエンジニアのいない小規模体制の組織であれば、サーバーサイドエンジニアやデザイナーが片手間で習得して実装してしまうというのも珍しいことではないでしょう。それでも良かったのかもしれません。これまでは…。 片手間で学習した知識というのはなかなか体系化されないものです。CSS も御多分に漏れずプログラミングのテクノロジーは日進月歩なため、その時は最新だった技術が僅か一年も経たないうちに廃れてしまい、バッドノウハウ化してしまう
極めろ！！Google Chrome Devtools 52の関節技 - Qiita
転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づいて紹介しています。 52の関節技！！ Elements 1.hover時のコンポーネントのCSSルールを表示 使い方 ①DOM要素を選択 ②Stylesペインを開く ③:hovをクリック ④hoverフィルタを適用 2.対応するCSSファイルを開く 使い方
人類学者のUX研究コラム：ポストイットには危険性が潜んでいます - DESIGN JOURNAL - 株式会社モンスターラボ
人類学者がUXリサーチに役立つ理由 みなさまはじめまして、比嘉夏子と申します。 私はもともと、海外で長期異文化フィールドワークを実施して人間の価値観や行動について研究してきた人類学者です。最近では人類学の研究で用いられてきた調査手法、いわゆる「エスノグラフィ（人間を経験的・包括的に理解するための記述と手法）」を用いた定性的なリサーチに従事する機会を、人類学研究以外の場でいただくようになりました。 そして現在は京都大学の研究員として在籍しながら、A.C.O.ではUXリサーチの開発をしています。 ところで。 地図で探しだすのにも苦労するような太平洋の小さな島に足を運んで現地語を学び、参与観察をしながら暮らしていた研究者が、なぜいまこうしてUXという全く異なる世界に携わっているのか。一見するとかけ離れた領域のあいだにも、じつは通底する思想や応用できる手法があるのです。そのような断片を、今回はお伝
Bootsnipp
Bootsnipp Design elements, playground and code snippets for Bootstrap HTML/CSS/JS framework What is this? Bootsnipp is an element gallery for web designers and web developers, anybody using Bootstrap will find this website essential in their craft. Stay updated, Subscribe to Bootsnipp mailing list (only important updates will be sent, your email is never shared or sold to anyone else)
レスポンシブデザインのフォームを設計するときに気をつけたい7つのステップ | UI改善ブログ by f-tra
単一のウェブページの装飾やレイアウトを、画面の横幅サイズにあわせて変化させる「レスポンシブ・ウェブデザイン」。 管理するファイルがひとつで済む、どんなデバイスにも対応できる等大きなメリットがありますが、同じコンテンツをどんなデバイスサイズでも快適に閲覧できるようにデザインするのは至難の業です。 とくにユーザビリティが重要な役割を担う入力フォームにおいては、どのような工夫をしたら良いのでしょうか。 本日の記事では、レスポンシブ・ウェブデザインのフォームを設計するときに気をつけるべきポイントについて考えてみたいと思います。 ※今回は新たにフォームを設計する前提で書いていきますが、もちろん、すでにお持ちのフォームを改善する場合でも活用していただければ幸いです。 ステップ1: 独自レイアウトを用意する EFOのテクニックのひとつに、フォーム専用のレイアウトを用意するというものがあります。 これはフ
チームの課題から考える、Adobe XDとSketchの導入メリット | PSYENCE:MEDIA
この記事は RECRUIT MARKETING PARTNERS Advent Calendar 2017 の投稿記事です。 こんにちは！現在キッズリーのデザインを担当しているデザイナーの町田（@macheri_me）です。 今年で中途入社３年目となりました。本日は弊社の制作事例をもとに、AdobeXD・Sketchの活用法についてご紹介します。 【この記事を読んでもらいたい人】 これからAdobe XD、Sketchどちらを導入しようか悩んでいる人 デザイン制作フローの中で課題を抱えており、解決したい人 Adobe XDとSketch。自分のチームにはどちらが最適か サービスのデザインを制作する際、何のツールを使っていますか？少し前だと Adobe Illustrator、Photoshop、Fireworksといったグラフィックツールが多かったかと思います。しかしながら、これらはUIデ
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
アジャイルにおける事前合意について - arclamp
昨年末、ブログをネタにTwitterで議論したことを akipii さんが「アジャイル開発にはモデリングや要件定義の工程はあるのか、という問題とその周辺: プログラマの思索」というエントリにまとめてくださいました。ありがとうございます！。 ブログで書かれたことに直接の返答にはならないのですが「アジャイルにおける事前合意はどうあるべきか？」ということを書きたいと思います。 アジャイルは最初に全てのCDSを決めない まず、狭義のアジャイル開発プロセスは優れたマネジメント手法です。システム開発を評価するQCDS（品質/コスト/期日/スコープ）ですが、Q（品質）というは「そのシステムにとって問題ないレベルにする」でしかないので、CDSの調整が論点になります。 ウォーターフォール型開発というのは、 「スコープは最初に確定」し、 「コストや期日はスコープを達成するために必要な分を最初に設定」し、 必要
www.sukima1gyou.com
高反発マットレスってそもそも何？ 私は15年近く、敷き寝具を専門にたくさんのお客様にあらゆるマットレスを案内してきました。ボンネルコイルやポケットコイル、ファイバーや低反発、ラテックスなどの天然ゴムと実に様々な素材が存在するベッドマットレスとここに簡単に挙げるだけでもマットレスの種類は多様です。その中でも私が長年の接客で最も万人におすすめできると感じたのが今回説明する「ウレタンが芯材となる高反発マットレス」です。 今やマットレスジャンルの一つの地位を確率した高反発マットレスですが、その人気も相まって種類は近年急激に増えてきました。一見同じような性能に見えても価格や耐久性が違いますし、良い高反発マットレスを間違わずに選択するのは大変な時代になったのです。高いお金を出して買ったはいいものの自分に合わずに大失敗してしまった。そんな可能性を少しでも減らすために、おすすめの高反発マットレスの選び方を
カラースキーム作成に便利な14のツール | UX MILK
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 デザイナーが使う手段の中で、「色」はもっとも強力なツールの１つです。同時に、色という概念は習得するのが難しくもあります。色の組み合わせが無数にある中で、サイトやアプリに使用する色を決めるのは骨の折れる作業です。 そこで作業を簡単にするために、カラーパレットを決める際に便利なツールのリストを作成しました。これらのツールを使えば、多くの時間を節約できるでしょう。 この記事では、以下のような切り口から便利なツールを紹介します。 インスピレーションを受ける 自分だけのカラースキームを生み出す 色のアクセシビリティを考慮する １. インスピレーションを受ける 自然の風景 あなたの周りには、既にたくさんのひらめきのもとがあります。インスピレーションを受けるには、周りを見回す
ユーザーリサーチによる無駄な時間とコストを削減する「デザインスプリント検証」 ｜ブログ｜root｜芯を問い、成長に貢献する
この記事はAJ&Smart Berlinの創業パートナー兼UXディレクターヨナサン・コートニー氏のブログ記事を公式に許可をいただき翻訳したものです。 デザインスプリントによって明らかになった、現代のデザインプロセスにおける時間とお金の大きな無駄 （はじめに。はい、この記事のタイトルは嫌ですよね。肩の力を抜いて、とりあえず読んでみてください。個人攻撃ととらえないでくださいね。みなさんのことが大好きですよ。） ユーザーリサーチを事前に行うことは、プロダクトづくりにおける時間の無駄の一つです。時間がかかる作業ですし、意思決定を避ける手段でもあります。実際に動くものを作るという行動が遅れてしまいます。 こんなことを本当は言ってはいけないことも分かってます。デザイン業界では、冒涜的行為とみなされますから。言ってはいけないもう一つの理由は、多くの会社がよく知らない顧客に対してユーザーリサーチの段階を含
イノベーティブな米国スタートアップ5選 デザイン会社 ビートラックス: ブログ
テクノロジーの分野では、VRや360度カメラの一般普及に始まり、ソーシャルメディアなどでのライブストリーミングや、チャットボット、アレクサのような声を用いてインターラクションを図るサービスが多く登場した。また、APIやAI技術を利用したサービスの開発も昨年同様トレンド。 そんな革新的なアプローチでサービスを展開して話題になったスタートアップとして、freshtraxでは以下の5社に注目した。 Forward：テクノロジーを駆使し、予防医療を浸透させる未来の病院Lemonade：もう面倒なことはなし！AIと行動科学を利用した住宅保険Aspiration：最新フィンテックが気になる人は要チェック！金融業界不信を払拭するエシカルなオンライン銀行Voyage：セルフドライビングカーの普及を加速する無人運転のタクシーサービスTHINX：社会のタブーに挑戦する女性用下着ブランド各社の詳細を見ていこう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - hiloki/flocss: CSS organization methodology.
Adele – Design Systems and Pattern Libraries Repository
Free Bootstrap Admin Template - AdminLTE.IO
電子的認証に関するガイドライン(NIST SP 800-63-B) Final翻訳版.pdf
セブン‐イレブンのマルチコピー機で同人活動をもっと手軽に・もっと楽しく！
