デザインに活かせるフレームワーク20｜金 成奎
久しぶりのnote投稿です。今回は自分の勉強がてら、UX・情報設計・アジャイル開発など、デザインに関わる様々な局面で知っておくと役立つフレームワークを集めてみました。 有名なものからデザイン以外にも使えそうなものまで幅広く選んでいますので、気になるものがあれば改めて実作業に生かすなり、掘り下げて研究するなり、資料に生かすなりしてもらえると良いのではないかと思います。 （ちなみにここでいう「フレームワーク」とは共通して用いることのできる考え方や思考の型や枠のようなもので、いわゆるCSSフレームワークの類ではありませんので、その点ご了承ください） 1.UXの5段階モデル まずは有名なUXの5段階モデル。アメリカのUXデザイナーであるJesse James Garrett 氏が著書『Elements of User Experience（ウェブ戦略としての「ユーザーエクスペリエンス」）』にて提唱
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」
日本でも、Tailwind CSSを使用する人が増えてきましたね。 フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します。 How I Stopped to Write CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Tailwind CSSとは カードコンポーネントで実装の比較 BootstrapとTailwind CSSの比較 Bootstrapがそんなに恋しいですか？ BootstrapとTailwind CSSのどちらを使えばよいか？ CSSにかかる時間はかなり少なくなりました はじめに 私はCSSアーキテクチャにフォーカスしたフロントエンド開発者として、コードを書くために最高の方法を使いたいと思っています
ゼロから学ぶ！ Single Page Applicationの特徴と主なフレームワーク5選
本連載「モダンなフロントエンド開発者になるためのSPA超入門」では、フロントエンド開発のアーキテクチャである「SPA（Single Page Application）」について、開発に必要となる各種フレームワークの特徴や、サンプルアプリ開発を通じたSPA開発の流れ、フレームワークによる作り方の違いなどを紹介します。 サンプルアプリ開発では、SPA開発において人気がある「React」「Angular2」の使用を予定しています。第1回目である今回は、SPAの特徴と取り巻く環境、フレームワークを紹介します。 SPAとは SPAはAdobe FlashやMicrosoft SilverlightといったリッチなUIを提供できるRIA（Rich Internet Application）に代わるフロントエンド開発の技術として、ブラウザの進化やHTML5の登場などによって誕生したアーキテクチャです。H
CSSリセットの新しい考え方、リセットと有用なコンポーネントだけのスタイルシート -Shoelace.css
レイアウトにfloatを使用していた頃はグリッドを構築するために、複雑なHTMLやテクニックが必要になることがありました。しかし、flexboxやCSS Gridの登場で、レスポンシブ対応の柔軟なグリッドを簡単に利用できるようになりました。 そんな時代に合わせて、グリッドは無し、有用なコンポーネントが簡単に利用できるリセット用のスタイルシートを紹介します。 Shoelace.css Shoelace.css -GitHub Shoelace.cssの特徴 Shoelace.cssの使い方 Shoelace.cssのデモ Shoelace.cssの特徴 グリッドはflexboxやCSS Grid、またBootstrapなどを利用し、プロジェクトにあったデザインでコンポーネントを作成することができます。 Shoelace.cssはフレームワークではなく、有用なコンポーネントが含まれたCSSリセ
JavaScriptフレームワーク選定の議論 - Qiita
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
CSS書きたくなさすぎ問題2017 - DRYな備忘録
css書きたくない。できればjsも書きたくない。js必要なの嫌。軽くやりたい。という個人の日記です。 参考 Best CSS Frameworks of 2017 | Three29 10 Free Lightweight CSS Frameworks for a Fast Start 2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ | コリス ググれ。 lightweight css framework - Google 検索 Gridだけやりたいやつは除外した。 Bootstrap Materialize mui （追記）UIkit （追記）Semantic UI Pure Bulma Skelton Spectre.css Kube Vuetify Fictoan avalanche Beuter Vanilla Milligram InvisCSS Look
【決定版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10
フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源（リソース）を効果的に分配するのもプロとして欠かせない姿勢です。今後もこうしたCSSのフレームワークを活用した流れは続くのではないでしょうか。 そこで本稿では制作の現場で使えるWebデザイナーのための「CSSフレームワーク」ベスト10をご紹介します！下記にご紹介するフレームワークをうまく活用して、ぜひ日々の業務の効率化にお役立てください。 そもそもフレームワークとは何か？ フレームワークとは、本来ファイルとフォルダを含むパッケージのことです。CSSフレームワークの場合だと標準化されたHTML、CSS、JSコードを含んだ機能群のことを指します。こうしたフレームワークを使うことで、一からフロントエンド開発を行うよりも飛躍的にWeb制作の生産性
Flexboxベースのレイアウトを実装できるCSSフレームワークまとめ - NxWorld
レイアウト（特にグリッドレイアウト）を作っていく上で、Flexboxを利用して且つ手軽に実装したいというときに便利なCSSフレームワークを紹介します。 Bootstrapのようにレイアウトに限らず様々なコンポーネントまで用意されているものもあれば、Flexboxを使ったグリッドレイアウトの実装のみに特化したシンプルなものまでいろいろありますが、全体的に適用したい箇所にクラスを付与するだけと簡単に利用できるものになります。 Bootstrap いまや定番といえるCSSフレームワークのひとつでご存知の方も多いBootstrapは、バージョン4からFlexboxを用いたグリッドシステムが利用できるようになりました。 使用方法も下記にあるようにこれまでのグリッドシステムを使用するときと同じような感じで使えるので、今までBootstrapを利用してきた人であれば尚更楽に導入できると思います。 また、
マテリアルデザインのサイトを簡単に作るためのフレームワーク８選
マテリアルデザインは、Googleが推奨しているデザインの概念です。GoogleのウェブサイトやAndroid OSは、マテリアルデザインをベースとしています。 最近では、マテリアルデザインを簡単に作ることができるCSS・JavaScriptフレームワークも充実してきており、誰でも簡単にマテリアルデザインを導入することができるようになっています。 そこで今回はいくつかある候補の中から、人気がありなおかつGithubへのコミットも活発にされているマテリアルデザインをベースとしたフレームワークを紹介します。 Materialize Materializeは、マテリアルデザインのCSSフレームワークとして人気のものの１つです。Bootstrapとほぼ同じような命名規則なので、Bootstrapを使ったことがある人であれば、すぐに理解できると思います。 ShowcaseページにはMateriali
レスポンシブ対応のCSSフレームワーク22選
手軽に素敵なホームページを作成することができるCSSフレームワークが沢山登場しています。アイコンなども全てセットになったものなどもあり、コーダーでなくとも簡単に作業できることから人気を博しています。 今回は、レスポンシブに対応したCSSフレームワークをに紹介します。CSSフレームワークを選ぶ際の参考にしましょう。 CSSフレームワークとは？その特徴とメリット CSSフレームワークを簡単に言うと、Webサイトに必要なパーツや主な機能などがセットになったパックのことです。Webサイトをデザインするとき、通常はイチからデザインを考えて、パーツを揃え、CSSを記述していく必要があります。これは時間がかかる上、Webデザイナーやエンジニアなどの専門家がいない場合、整ったデザインのWebサイトを制作することは非常に困難だと言えるでしょう。 そんなときに便利なのがCSSフレームワークです。CSSフレーム
GoによるWebアプリ開発のキホン
1. The document discusses RESTful APIs and gRPC, comparing their characteristics and use cases. 2. RESTful APIs typically use HTTP and JSON to access resources via URLs while gRPC uses protocol buffers and HTTP/2 for efficient streaming and RPC. 3. gRPC is better suited for microservices and mobile apps due to its ability to handle streaming and performance, while REST is more widely used due to i
Web開発の未来 – React、FalcorおよびES6 | POSTD
この記事でWeb開発の未来を垣間見ることができるでしょう。UIの構築やサーバ、データ・エンドポイントの新しい見解を得ることができると思います。ここで、ブラウザとサーバコードの両側を含めたフルスタックな話をしていきます。これを読めば、 完全に機能するGitHubリポジトリ で紹介されたすべてのコードの検証や実行ができるようになります。皆さまが開発者として次の資質を持っていることを前提に話を進めていきます。 JavaScript中級者 HTML中級者 クライアント/サーバ間通信の基礎知識 JSONの基礎知識 Node.jsの基礎知識 上の知識がなくても、 おそらく この記事の進行についていけるでしょう。しかし、知識がないと私の紹介するコードを現実的なシナリオあるいは重要なシナリオに応用するのは難しいでしょう。インターネットは情報の宝庫なので、理解に必要な概念などをたくさん提供してくれます。必要
IE9+もサポート、CSS3 Flexboxを始める人にぴったりな極めてシンプルな使いやすいフレームワーク -FOX CSS
そろそろFlexboxを使ってみたいな、と考えている人にぴったりなCSS/Sassの超軽量フレームワークを紹介します。 もちろんFlexboxをバリバリ使っていて、シンプルなのが必要な人にもぴったりです。 FlexboxはIE11+対応ですが、IE9+にも一行加えるだけで同じHTMLで実装できます。 FOX CSS FOX CSS -GitHub Flexboxの各プロパティの使い方は、以前の記事を参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 FOX CSSの特徴 FOX CSSの使い方 FOX CSSのリセット FOX CSSのFlexbox FOX CSSの特徴 FOX CSSはモバイルファーストで設計されており、その半分がCSSリセット、もう半分がマイクロフレームワークで構成されています。 ライセンスはCC BY 3.0で、個人でも
[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout
最近のWebページでよく使用されるシンプルな1カラム、マルチカラム、カード型のレイアウトをはじめ、フッタが常に最下部に表示されるスティッキー、Webアプリなど、人気のグリッドレイアウトを簡単に実装できる超軽量スタイルシートを紹介します。 もちろんレスポンシブ対応で、古い環境（IE8+, iOS5+, Android3+）もサポートされています。 レイアウト用だけのフレームワークを必要としている人にはぴったりだと思います。 GridLayout GridLayout -GitHub サポートするのがモダンブラウザだけであれば、Flexboxでレイアウトをするのがベストです。 Flexboxについては、下記ページで徹底的に解説しているので参考にしてください。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 GridLayoutの主な特徴 GridLayoutのデモ
![[CSS]IE8もサポート、レスポンシブ対応のさまざまなレイアウトを手軽に使いたい人にぴったりな超軽量スタイルシート -GridLayout](https://cdn-ak-scissors.b.st-hatena.com/image/square/b5ba934ae36a322ae8ab722a40c75aec7f103caf/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082103.png)
Deep Learning のフレームワーク Chainer を公開しました - Preferred Networks Research & Development
こんにちは、得居です。最近は毎晩イカになって戦場を駆けまわっています。 本日、Deep Learning の新しいフレームワークである Chainer を公開しました。 Chainer 公式サイト GitHub – pfnet/chainer Chainer Documentation Chainer は、ニューラルネットを誤差逆伝播法で学習するためのフレームワークです。以下のような特徴を持っています。 Python のライブラリとして提供（要 Python 2.7+） あらゆるニューラルネットの構造に柔軟に対応 動的な計算グラフ構築による直感的なコード GPU をサポートし、複数 GPU をつかった学習も直感的に記述可能 ニューラルネットをどのように書けるか 次のコードは多層パーセプトロンの勾配を計算する例です。 from chainer import FunctionSet, Vari
2015年、Web制作者が押さえておきたいCSSの各種リセット、アニメーション、フレームワーク、アイコンのまとめ
制作時に欠かせないリセット用のCSS、ページのグリッドやレイアウト・コンポーネントが用意されたフレームワーク、クリック・タップやホバーやスクロールを楽しませるアニメーション、モバイルにもフレンドリーなCSSでつくられたアイコンなど、ゼロから用意するのはかなり大変なCSSの便利なフレームワークを紹介します。 リセット用のCSSはこの3種類 レスポンシブ対応の定番フレームワーク Material Designに対応したフレームワーク さまざまなアニメーションが簡単に実装できるCSS かわいいアニメーションを使ったローダー 使いやすいアイコンフォント・Pure CSSのアイコン リセット用のCSSはこの3種類 HTMLの各要素のブラウザごとに異なる差異をなくし、意図した通りに実装できるようスタイルをリセットするスタイルシート。 Reset CSS 2.0 HTMLの各要素のmarginやpadd
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
ブルマがすごい！外部CSSを一つ加えるだけで今時のコンポーネントやエレメント、レイアウトが簡単に利用できる -Bulma
http://kwatch.houkagoteatime.net/blog/2015/10/28/keight_rb_released/
TECH PROjin
