便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer

2022/07/25 251 users CSS 検証 登場 スタイル定義 無料ツール

1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。 CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。 CSS Analyzer CSS Analyzer -GitHub CSS AnalyzerはWallace CLI,... 続きを読む

「分析SQLスタイルガイド」をかなり真面目に考えた - Qiita

2021/01/11 250 users SQL 指針 本業 Qiita 命名規則

目次 なぜSQLのスタイルガイドが重要なのか この記事の目的 この記事の対象者 分析SQLスタイルガイドの指針 基本ルール 命名規則 インデントルール 別名ルール joinルール クエリ分割ルール なぜSQLのスタイルガイドが重要なのか SQLはプログラミング未経験者でもとっつきやすい言語と言われ、エンジニアや分析を本業と... 続きを読む

Chromeの新機能CSS Overviewがすごく便利！ページに使用しているCSSの概要や未使用の宣言がすぐ分かる | コリス

2020/07/06 421 users コリス FYI CSS Chrome フォント

Chromeに新しく実装された「CSS Overview」が非常に便利なので、紹介します。 表示しているページのCSSの概要、カラー、フォント、メディアクエリ、未使用の宣言が一覧でき、制作したページの検証やスタイルガイドとしても役立ちます。 Chromeの新機能「CSS Overview」 Fyi: New in Chrome: CSS Overview Chromeの新機能... 続きを読む

CC0の太っ腹ライセンス！スタイルガイドと150種類以上のコンポーネントが揃ったワイヤーフレーム素材 -Contra | コリス

2020/04/22 12 users スターターキット contra コリス コンポーネント

150種類以上のコンポーネントと50種類以上のすぐに使えるスマホスクリーンが含まれたワイヤーレフーム素材を紹介します。 アイデアを素早くプロトタイプ化するためのスターターキットで、スタイルガイドを利用して新しいコンポーネ...記事の続きを読む 続きを読む

Pythonのスタイルガイドの確認 - めも

2019/12/14 16 users Python PEP 確認 Wikipedi 言葉遣い

スタイルガイド PEP-8 Google Python Style Guide django 既存のコードに対するpep8の確認 pep8 flake8 autopep8 docstringのフォーマット 各スタイルガイド要約 PEP8 Google 自分の確認用です. スタイルガイド スタイルガイドは、出版物などにおいて統一した言葉遣いを規定する手引き (出典：スタイルガイド - Wikipedi... 続きを読む

Pythonのコード改善のためのツール5つを試してみた - minus9d's diary

2019/10/11 109 users Python コード改善 出力 Sider Blog ツール

Pythonのコードを改善するためのツールについて一通り試してみました。各ツールのインストール方法や使い方については Pythonのスタイルガイドとそれを守るための各種Lint・解析ツール5種まとめ！ - Sider Blog に詳細にまとまっているのでおすすめです。 サンプルコード 以下のサンプルコードを対象に、各ツールの出力... 続きを読む

JavaScript Standard Styleのススメ - Qiita

2018/12/02 174 users Qiita シングルクォート ダブルクォート インデント タブ

みなさんは、JavaScriptのコードを書くときに文字列は何で囲みますか？シングルクォート？ダブルクォート？ インデントに使用する文字はスペース？それともタブ？ JavaScript Standard Styleは、そのように千差万別なコーディングスタイルを統一するためのスタイルガイドの一つです。1 JavaScript Standard Styleのルー... 続きを読む

Zeplinがかなり便利！Adobe XDやPhotoshopからデザインの指示書やスタイルガイドを簡単に自動作成できる | コリス

2018/10/26 56 users Zeplin デザイ コリス Photoshop スマホアプリ

Webサイトやスマホアプリのデザインの指示書やスタイルガイドをわざわざ作成するのは時間がかかり、なかなか面倒です。Adobe XDやPhotoshopなどで作成したファイルから、Zeplinでこれらを自動生成する方法を紹介します。 Zeplinは1プロジェクトまで無料で利用できます。Adobe XDにもデザインスペックという機能でデザイ... 続きを読む

echo.css : CSS framework optimized for CMS theming

2018/10/05 26 users SMACSS FLOCSS コンポーネント CMS 微調整

CMSサイト制作に最適化 "echo.css"は、SMACSS, FLOCSSを設計ベースとしたCSSフレームワークです。特に、WordPress等のCMSを組み込んだウェブサイトの制作に最適化しています。 CMSによく見られる機能を想定したコンポーネント、コンテンツの微調整を行う補助クラスを数多く実装しています。 ぜひ「スタイルガイド」をご... 続きを読む

Atomic Design ～堅牢で使いやすいUIを効率良く設計する 読了 - くらげだらけ

2018/05/01 76 users 堅牢 コンポーネント くらげだらけ 読了 思想

2018 - 05 - 01 Atomic Design ～堅牢で使いやすいUIを効率良く設計する 読了 design 昨今ではデザイナーの間でも、アプリやサービスに使われる色やテキストなどをまとめた「スタイルガイド」や、デザイン コンポーネント をまとめた「パターンライブラリ」、さらにそれらを全てまとめてドキュメント・原則・思想なども含めた「デザインシステム」などを作りながら効率よくより良い体験... 続きを読む

Rustが、コードのスタイルガイド「Rust Style Guide」と自動整形ツールを導入する理由。コードをめぐる議論を省き、メンタルの負担を減らし、プログラマを参加しやすくする － Publickey

2018/02/19 69 users Publickey rust Mozilla プログラマ 議論

Rustが、コードのスタイルガイド「Rust Style Guide」と自動整形ツールを導入する理由。コードをめぐる議論を省き、メンタルの負担を減らし、プログラマを参加しやすくする Mozillaが中心となってオープンソースで開発されている 言語「Rust」 の最新バージョン 「Rust 1.24」がリリースされました 。 Rust言語は、C言語のように低レベルのシステム開発向けに作られた言語。不... 続きを読む

Vue.js スタイルガイド早見表

2017/12/10 62 users Vue.js Vue 要点 補足 あなた

Vue.jsの公式スタイルガイドは長い！！！ サクッっと要点だけまとまったガイドが欲しい。そんなアナタのために書きました。 この記事はVue.jsのスタイルガイドを簡潔にまとめたものです。 ( ※部分的に補足を加えたりしています。 ) 対象となる人物像: 一度目を通したことがある人 or 時間の無い人 or ザックリでいいから知りたい人 ルールカテゴリ Vueのスタイルガイドは4つのカテゴリに分け... 続きを読む

デザインシステム、パターンライブラリ、スタイルガイドそれぞれの定義と違い | UX MILK

2017/11/20 44 users パターンライブラリ UX MILK 定義 デザインシステム

ZackはUXPinのUXデザインライターです。彼の仕事はUX Magやawwwards、 Speckyboyで出版されています。 デザインシステム、パターンライブラリ、スタイルガイドという言葉が、同じような意味で使われていることがあります。 これら３つのコンセプトには繋がりはあれども、決して同じものではありません。 この記事では、定義を明確にして、それらがどのように繋がっているかを視覚化します。... 続きを読む

サービスの一貫性と高速開発をもたらす「動くスタイルガイド」 | BIZREACH Designer Blog

2017/10/25 67 users 一貫性 高速開発 サービス

10月18日（水）に、 株式会社ベーシック で行われた「 Nextstage Nite vol.2 – 実践されるデザインガイドライン – 」に、HRテック（HR × Technology）で採用を強くする「 HRMOS（ハーモス）採用管理 」のフロントエンドエンジニアの浅井が登壇しました！ 浅井 雅彦 (Masahiko Asai) 大手のWeb企画・制作企業にて、ナショナルクライアントの大規模... 続きを読む

闇深めだったサービスのスタイルガイド作成までの真実

2017/10/19 46 users LIMIA Event 作成 登壇資料 手法

Nextstage Nite vol.2 - 実践されるデザインガイドライン - での登壇資料です。 LIMIAのスタイルガイド作成までのお話。 闇を抱えたサービス、サイトにおすすめの手法です。 https://connpass.com/event/68231/ 続きを読む

こういうのを一つは用意しておきたい！Webサイトのスタイルガイドを作成する時に便利な無料テンプレート素材 | コリス

2017/09/27 103 users Sketch コリス ダウ フォント フォーマット

スタイルガイドを0から作成している人に、朗報です。 Webサイトで使用するカラーやフォント、ロゴなどを変更するだけで、そのWebサイトのスタイルガイドが作成できるSketchのテンプレート素材を紹介します。 UI要素はシンボル化されており、カスタマイズも自由。しかもスタイルガイドのフォーマットは4種類用意されています。 Symbols Symbolsで作成できるスタイルガイド Symbolsのダウ... 続きを読む

Webデザインのスタイルガイドの作り方 | UX MILK

2017/08/28 924 users UX MILK webデザイン 作り方

Tomasはリトアニアの旅行 ライフスタイルに関する起業家 およびブロガーです。彼はブログや毎週配信される ニュースレター で、趣味やライフスタイルデザイン、起業精神について執筆をしています。 Webサイトの制作はどんどん複雑化しており、１人で行う仕事ではなくなってきています。サイト制作では、ビジネスの目的に合わせた一貫性のあるデザインによって、快適なユーザー体験を作り出すことが重要です。 Web... 続きを読む

人工知能もついにここまで！ロゴのデザイン、Webサイトのスタイルガイドを作成できるオンラインサービス -Brandmark | コリス

2017/08/21 143 users リデザイン コリス フォント 人工知能 組み合わせ

今年になって人工知能、AIが取り入れられたWeb制作関連のサービスがどんどんリリースされています。フォントの組み合わせをAIで、カラーの組み合わせをAIで、サイトのリデザインをAIで、自動化することができ、自分にはない知 ...記事の続きを読む 続きを読む

納品用のWebサイトのスタイルガイドが簡単に作成できるHTMLのテンプレート -Style Guide Guide | コリス

2017/05/23 66 users コンポーネント コリス ガイドライン アイコン カラー

Webサイトのガイドライン、カラーや文字やアイコンや画像のスタイル、使用するコンポーネントを定義するスタイルガイドが作成できるテンプレートを紹介します。 Style Guide Guide Style Guide Gui ...記事の続きを読む 続きを読む

最近のデザインで使われている、ロゴ・ブランディング・Webサイトのガイドラインのまとめ | コリス

2017/04/25 107 users UIエレメント ブランディング バリエーション コリス 定義

Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。 ロゴやブランディングも引き出しを増やすためにも参考にしたい ...記事の続きを読む 続きを読む

React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする - KAYAC engineers' blog

2017/04/12 68 users KAYAC engineers React カヤック パーツ

2017 - 04 - 12 React Componentのスタイルガイドを自動生成してパーツの再利用をしやすくする react javascript こんにちは。カヤックのReactおじさんこと 島津 です。 最近はVue.jsにも浮気し始めましたが、Reactについての記事を書きます。 Reactのコンポーネントが増えてきて管理が大変 Reactを使うとコンポーネントの部品化が捗りますが、 ... 続きを読む

10000行超のElmを書いて見つけたベストプラクティス - ジンジャー研究室

2016/12/03 87 users ベストプラクティス github.com ジンジャー研究室

2016 - 12 - 04 10000行超のElmを書いて見つけたベストプラクティス この記事は Elm Advent Calendar 2016 の4日目です。 会社で書かせてもらってるElm製アプリが10000行を超えたので、現時点で個人的にこれはと思うベストプラクティスを実際のソース付きで書いてみる。 github.com （アプリについての情報は機会があれば） 1.必ずスタイルガイドに従... 続きを読む

Webデザインの勉強にいい！レイアウトやUIエレメントやカラーの使い方の参考になるStyle Guideのまとめ | コリス

2016/01/06 198 users アニメーション バリエーション コリス 定義 UIエレメント

レイアウトの基本構成・展開例、UIエレメントのバリエーション、カラーの使い方など、Webページのデザインの定義がまとめられたスタイルガイドを紹介します。 各リンク先では、スタイルガイドの大きいものやアニメーションなどを見 ...記事の続きを読む 続きを読む

珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD

2015/12/28 395 users Bootstrap POSTD Sketch 互い 原則

ここ何年も、私たちはデザイン理解してもらえるよう、スタイルガイドなどを作成してきました。同じように、開発者もBootstrapなどのツールでプログラミング作業を楽にしようとしてきました。互いに妥協点を見いだし協力することで互いの作業を楽にできます。それを実現しようとしてるAtomic Designについて解説します。概要：  Sketchを使ったAtomic Designの方法がプロダクトデザイン... 続きを読む

スタイルガイド導入してみた - sekaie engineers' blog

2015/12/22 22 users sekaie engineers Blog PostCSS

2015 - 12 - 22 スタイルガイド導入してみた 最近さえりさんという方の 綾野剛 の妄想ツイにはまってます。まいど富坂です。 twitter.com 本日はセカイエ アドベントカレンダー 22日目の記事です。 qiita.com 前回、 sekaie.hatenablog.com ということで今回はPostCSS導入して更にスタイルガイドジェネレーター導入してみました。 スタイルガイドと... 続きを読む