Webサイトで実装するさまざまなUIエレメントやコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイドを作成できるシンプルなフレームワークを紹介します。 必要に応じて、HTMLのテンプレート、CSSのスタイルシート、使用しているのであればJavaScriptもすべて利用できます。
レスポンシブの確認もできる！UIコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイド -Component Styleguide
Webサイトで実装するさまざまなUIエレメントやコンポーネントのデザインや実装方法をまとめて管理できるスタイルガイドを作成できるシンプルなフレームワークを紹介します。 必要に応じて、HTMLのテンプレート、CSSのスタイルシート、使用しているのであればJavaScriptもすべて利用できます。
Web制作者がチェックしておきたい！デザイン要素の定義や見せ方が勉強になる最近のスタイルガイドのまとめ
Webサイトを制作している時、そして納品する時、サイトのデザインで定義されているカラー・タイポグラフィ・エレメントなどのスタイルを一覧できるようにまとめたスタイルガイドを紹介します。 Photoshop, Illustrator, Sketchなどのアプリを使ったり、オンラインツールを使ったものなどいろいろあり、中身だけでなくその見せ方の参考にもなると思います。
フロントエンド視点：デザイナーと協業して作るスタイルガイドの難易度を下げる
前回 Atomic Design を実案件に導入した話で触れたコンポーネントリストを作り始めたとき、個人的にいろいろと学びがありました。 コンポーネントリストやスタイルガイドは、フロントエンドエンジニアとデザイナーが協業して作る必要がありますが、この協業がなかなかうまくいかず、スタイルガイド運用をワークさせるのは難易度が高い印象がありました。 自分自身、今まで携ってきた開発プロジェクトにおいて、うまくワークしたと思えるスタイルガイド作りができなかったのですが、現在のプロジェクトで開発初期からスタイルガイドを作り、リリース後、運用フェーズまでワークさせることができました。 本記事ではフロントエンドエンジニアとデザイナーが協業してスタイルガイドを作り始めるにあたって気をつけたことについて書いていきます。 共通言語としてのスタイルガイド 開発において、スタイルガイドが欲しい理由は、開発中のコミュ
CSSとSassのコーディングスタイルガイドを作ってみた - Qiita
CSS Styleguide CSSにはスコープという概念が存在しないのでコードを指定する順番を管理してカスケーディングを意図した通りにおこなわせる必要があります。また、インデントや命名規則など好みや考え方が異なることも多いです。 スタイルガイドは知識を共有することで認識のズレをできるだけ無くし、制作をする上での約束事を決めることだろうと考えています。以下のガイドラインはCSSとSass（scss記法）を扱う上でベターだと考えていることをドキュメントとしてまとめたものです。 このガイドラインは2015年11月15日公開（2016年1月14日に改定）されたもので、最新のガイドラインはGitHubで公開しています。 css-styleguide | GitHub manabuyasuda はじめに このスタイルガイドはCSSを扱う上でベターだと思われる方法をまとめたものです。必ずしも正しいもの
作成したWebサイトのスタイルガイドを一瞬で作成できるWebサービス「Stylify Me」
スタイルガイドはサイトを制作した時に残しておくことで、あとで色々と手直しとかメンテナンス時に役に立つ便利なものですが、作るのがめんどくさいという方も多い。 そんなわけで、一瞬でスタイルガイドを作成できるWebサービスのご紹介。 これなら、作ってなかったとしてもあとからいつでも確認できるので、激しく便利です。 URLをいれればOK ネタ帳のURLを入れるとこんな感じ。 DownloadボタンをクリックするとPDFしてくれますので、保存も可能です。 はてなのトップページだとこんな感じ。 「あれなんか色使いすぎるな・・・」 とか、 「同じような色をテキストにつかってるな・・・」 とかも再確認できますね。 お試しあれ。 一瞬でスタイルガイドを作成するWebサービス Stylifym Me それでは、また。
サイト制作時のデザインやコードの「ぶれ」をなくすスタイルガイドを作成するためのテンプレート -Style Guide Boilerplate
ウェブサイトの制作時で大切なことの一つは、デザインやコードの「ぶれ」をなくすこと。 ウェブサイトを制作する際、プロジェクトに関わる全ての人が参考にできるデザインのスタイルガイドを作成するBootstrapベースのテンプレートを紹介します。 Style Guide Boilerplate Bootstrap Edition Style Guide Boilerplate -GitHub スタイルガイドは作成した時の利点が多く、もしまだ未の人は是非チャレンジしてみてください。 また、もう利用している人には、Bootstrapベースで簡単にスタイルガイドが作成できるので試す価値があると思います。 スタイルガイドを導入する利点 ウェブサイトのデザインや実装方法を定義し、一貫性を促進する。 モジュール形式の考え方を促進する。 ページを作成する際にパーツやエレメントで迷わないようにする。 ウェブサイト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
レスポンシブの表示も完璧に定義できる優れもの！スタイルガイドを作成するのに役立つテンプレート -Styleguide | コリス
任意のWebサイトのCSSから簡易的なスタイルガイドを作成するChromeエクステンション・「SNATCHR」