便利な無料ツールが登場！ 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の新機能... 続きを読む

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にもデザインスペックという機能でデザイ... 続きを読む

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つのカテゴリに分け... 続きを読む

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

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

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

こういうのを一つは用意しておきたい！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の方法がプロダクトデザイン... 続きを読む

日本語文章のスタイルガイドのまとめ - Qiita

2015/10/11 192 users まとめ - Qiita 日本語文章

JTF日本語標準スタイルガイド（翻訳用） 『JTF日本語標準スタイルガイド（翻訳用）』は、実務翻訳において和訳時に使用できる日本語表記ガイドラインです。 このルールを適応出来るtextlintプラグインを書いた azu/textlint-plugin-JTF-style 外来語（カタカナ）表記ガイドライン第3版 カタカナの長音や複合語の際の表記についてのガイドライン JIS Z 8301:2011... 続きを読む

ブラウザー上でスタイルガイドが作れるFrontifyを試してみた | Webクリエイターボックス

2015/09/24 123 users Gulp Grunt CSS Webクリエイターボックス

巷ではgulpやGruntなどを使ったスタイルガイド生成ツールが多く存在します。しかし、CSSのコメントに書き込んだりするのはWeb制作者でないと難しい部分もありますし、そもそもファイルを作るのがめんどうだったり…と、なかなかスタイルガイドを作る気になれない人もいるんじゃないかと思います。今回は非Web制作者でも簡単にスタイルガイドが作れちゃうFrontify Style Guideを紹介します！... 続きを読む

プログラミングスタイルガイドのスタイルガイド - Qiita

2015/08/25 454 users 言語 アプリケーション 構造 本文書 プログラミング言語向け

本文書は、プログラミング言語向けのスタイルガイドに向けたスタイルガイドである。 構造 対象を明確にする そのスタイルガイドがどのような状況のどのような対象に向けたスタイルガイドであるか規定すること。 状況や対象は広すぎてはならない。 理由: 対象はスタイルガイド記述者には自明かもしれないが、似て非なる言語に誤用されたり、特定分野のアプリケーション向けスタイルガイドが他分野のアプリケーションを理不尽... 続きを読む

これで無料とはすごい！Mac, Win, Linux対応、デザインの指示書やスタイルガイドを簡単に作成・共有できる -Zeplin | コリス

2015/08/12 715 users Zeplin コリス マージン フォント 要素

デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketc... 続きを読む

参考にしたい！ JavaScript(CoffeeScript)スタイルガイド7選！ | マネーフォワード エンジニアブログ

2015/07/30 50 users CoffeeScript 平山 マネーフォワード 昨今 役割

こんにちはー。 フロントエンドエンジニアの平山です。 JavaScript(CoffeeScript)の役割が増えてきた昨今。 ここいらで一度、有名なスタイルガイドを追ってみたいと思います。 一緒にスタイルガイドを策定したり、あーやこーや語らいながらよりよいスタイルガイドを考えたいフロントエンドエンジニアの方は、とりあえず一緒に開発しましょう！ 【採用サイト】 ■『マネーフォワード採用サイト』　h... 続きを読む

CSSを書く、設計する時に参考にしておきたいCSSのガイドライン・スタイルガイドのまとめ | コリス

2015/07/24 400 users ガイドライン コリス 長期 プロジェクト 一貫性

大規模なプロジェクト、長期に渡るプロジェクト、複数のメンバーが関わるプロジェクト、そして明日の自分も一年後の自分が見ても分かる、メンテナンス性に優れ、一貫性のあるCSSを書くのに役立つガイドラインやスタイルガイドを紹介し...記事の続きを読む 続きを読む