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

こういうのを一つは用意しておきたい！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サイトのガイドラインのまとめ | コリス

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

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

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... 続きを読む

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

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

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

エンジニアのための英語

2015/06/23 1050 users エンジニア 英語 仮定 意思疎通 お前

お題「お前のやり方でも正しいんだけど、他のところはこういうやり方で統一してるんだよね……申し訳ないけどそう直してくれない？」 まず「統一してるんだよね…」「申し訳ないけど」をばっさりカット。英語で遠慮してると意思疎通ができないのではっきり言う方が良い。以下では「こういうやり方」を指示するのにスタイルガイドがどこかに置いてあると仮定：That’s one way to do it, but we u... 続きを読む

CoffeeScript スタイルガイドの公開とその目的 - クックパッド開発者ブログ

2015/04/15 176 users CoffeeScript 太田 クックパッドニュース 普段

2015-04-15 CoffeeScript スタイルガイドの公開とその目的 こんにちは、クックパッド編集室の太田(@os0x)です。 普段は料理動画やクックパッドニュースなど、メディア寄りのサービスを担当しながら、社内のCoffeeScriptを中心としたウェブフロントエンドのコードレビューなどを行っています。 今回は、そのCoffeeScriptのレビューを円滑に行うためのコーディングスタイ... 続きを読む

iOSアプリのコーディング規約を考える時はGoogleよりもNYTimesのObjective-Cスタイルガイドを参考にすべき - Steel Dragon 14106

2015/04/04 214 users NYTimes objective-Cコード インスタ 参考

Googleのスタイルガイドは古い 複数人でiOSアプリをObjective-Cコードで書いて保守する時、コーディング規約を検討することになる。 参考にすべきスタイルガイドとして良く挙がるものにGoogle Objective-C Style Guideがあるが、これはいかんせん古い。メモリ管理ARCやNSNumberのリテラル構文など、比較的新しいトピックについても追記されてはいるが、 インスタ... 続きを読む

Swift開発で参考にしたいGitHub社の「Swift Style Guide」と日本語版

2015/02/06 399 users github社 Swift開発 定石 Swift 参考

Appleのアプリ開発用言語として大きな注目を集めているプログラミング言語「Swift」。まだ新しい言語だけあって、様々な定石や規約が出揃っておらず、どのように書けばベストなのか迷っている開発者の方も多いかもしれません。 そのようなときに参考になりそうなGitHub社のスタイルガイド、「Swift Style Guide」と、その日本語訳「Swiftコーディング規約」が公開されています。 同スタイ... 続きを読む

Webデザインの勉強になる！有名ブランドサイトのスタイルガイドのまとめ -Brand Style Guide Example | コリス

2015/01/16 152 users レイアウト ガイドライン パリ 有名ブランド 実装方法

最近はスタイルガイドを公開しているサイトも増えてきました。有名ブランドのWebサイトのスタイルガイドやガイドラインを数多くまとめているサイトを紹介します。 なんとなく眺めるだけでもよし、もちろん実装方法やレイアウトのバリ...記事の続きを読む 続きを読む

進化の早いフロントエンドの世界についていくために、スタイルガイドを有効活用しているという話 - I am mitsuruog

2014/12/06 182 users 進化 プロトタイプ ライブラリ 世界 フロントエンド

フロントエンドの世界では、日々新しいフレームワークやライブラリが生まれています。 初めてそういった新しいものを習得する場合に、なるべくなら近道したいと思うのが人の気持ちだと思います。 まず大変なのが、Hello Worldから実際のプロダクトやプロトタイプで利用する場合で、これは初めてで何もわからない土地を一人で散策するような感覚にも似ています。 今日、紹介するのは私が進化の早いフロントエンドの世... 続きを読む

JavaScript で if 文を書くとき必ず波括弧を書くべきと主張しているスタイルガイド - @kyanny's blog

2014/06/02 248 users 一行 kyanny's blog 本体 好み コード

2014-06-02 JavaScript で if 文を書くとき必ず波括弧を書くべきと主張しているスタイルガイド 新人さんの JavaScript のコードレビューをしていて、 if 文の本体部分を波括弧で囲っていないコードを見つけた。 おれは本体が一行しかなくても必ず波括弧で囲うようにしており（そのほうがわかりやすいと思っているから）、できればそうして欲しいけど個人の好みを押し付けるのはよくな... 続きを読む

サイト制作時のデザインやコードの「ぶれ」をなくすスタイルガイドを作成するためのテンプレート -Style Guide Boilerplate | コリス

2014/06/02 167 users Bootstrapベース コリス ウェブサイト プロジェクト

ウェブサイトの制作時で大切なことの一つは、デザインやコードの「ぶれ」をなくすこと。 ウェブサイトを制作する際、プロジェクトに関わる全ての人が参考にできるデザインのスタイルガイドを作成するBootstrapベースのテンプレートを紹介します。 Style Guide Boilerplate Bootstrap Edition Style Guide Boilerplate -GitHub スタイルガイ... 続きを読む

Javascriptのスタイルガイドまとめ(おすすめ4選) - Qiita

2014/04/23 201 users Qiita Bad Parts 各々 ルール 英語

はじめに スタイルガイド自体は各々のルールでかなりの数が存在しますが、 下記のおすすめ4選を抑えておけば問題ないと思います。 おすすめ４選 Google JavaScript Style Guide Googleによる、最も代表的なスタイルガイドです。 時間のない方は、これだけにでも目を通しておく事をおすすめします。 JavaScriptのBad Partsについても述べられています。 英語：ht... 続きを読む