レスポンシブデザインに見るデザインカンプと実装との溝 - シフトブレイン／スタンダードデザインユニット

2019/08/26 92 users デザインカンプ スタンダードデザインユニット 実装 解釈 仕様

デザインカンプを基に実装する難しさはあらゆる場面で語られます。私の場合は特にレスポンシブデザインに関する仕様の解釈に悩む場面が頻繁にあります。 その問題点はどこにあるのでしょうか。私の制作したツールの紹介を通して、グリッドシステムのあり方やレスポンシブデザインの意味などを考察しました。 デザインカ... 続きを読む

軽量でシンプルなレスポンシブフレームワーク「Skeleton」 |　バニデザノート

2015/07/27 62 users Skeleton グリッドレイアウト イレギュラー 横幅 羽根

「Skeleton」は、レスポンシブCSSフレームワークです。「シンプルで、羽根のように軽い」がコンセプトで、基本的なhtmlコンポーネントと、グリッドレイアウトのみが入っています。 モバイルファーストな意識が高く、ファイル自身も少なく軽量なので全体が見渡しやすく扱いやすい印象です。 960gsベースの、グリッドシステムです。HDなPCサイズでのみ横幅を広げるなど、イレギュラーなこともCSSをいじ... 続きを読む

BootstrapのベースのCSSを使ってさまざまな要素を実装してみよう！基本要素とナビゲーションのスタイル | コリス

2015/07/22 87 users コリス Bootstrap CSS ナビゲーション 要素

先日の記事「Bootstrapのグリッドシステムの基本な使い方（翻訳版）」で、Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方まで紹介しました。 次のステップとして、ベースのCSSを使ってさまざまな要素を実装してみましょう。 Base CSS and Navigation Systems in Bootstrap 下記は各ポイントを意訳したもの... 続きを読む

Bootstrap 3でレスポンシブ対応のwebページをつくろう！グリッドシステムの基本な使い方 | コリス

2015/06/17 269 users コリス Bootstrap class フレームワーク 多く

Bootstrapはここ数年人気が非常に高く、多くのWebデザイナー・制作者がレスポンシブ対応のWebサイトを作るための本当に便利なツールです。使いやすいclassを備えたモジュール式のフレームワークで、カスタマイズ性にも非常に優れています。 Bootstrapのファイルのダウンロードからファイルのセットアップ、グリッドシステムの基本的な使い方を解説した記事を紹介します。 Installing B... 続きを読む

Webデザイナーのスキルアップに役立つ便利なチートシートのまとめ | コリス

2014/08/21 406 users コリス Ado スキルアップ チートシート タイポグラフィ

先月は「Web制作時に備えておくと便利なチートシートのまとめ」でデベロッパ向けのチートシートを紹介しました、今回はデザイナー向けのチートシートをまとめました。 Photoshopの各バージョンに対応したショートカット、ブラシやペンツールの使い方、初期設定をはじめ、デザインの要素と原則、カラーセオリー、タイポグラフィ、グリッドシステム、レスポンシブなど、デザインの現場で役立つものばかりです。 Ado... 続きを読む

グリッドシステムベースのデザインをするときに気をつけること |　バニデザノート

2014/07/08 69 users バニデザノート フレームワーク コーディング デザイン 例外

グリッドシステムのフレームワークでデザインを作成する際、コーディングの時点で困らないデザイン方法です。 完全に順守すればほとんどカラム落ちやブラウザのことも考えずに作れると思います。 ただ、例外の部分もあって構わないと私は思っているので、あくまでも基本ということで、拡張は自由にやってください。 続きを読む

高さの異なるパネルを揃え、汎用性に優れたグリッドが簡単に使えるシンプルなフレームワーク -FlexGRID | コリス

2014/02/03 57 users コリス グリッド フレームワーク パネル CSS

CSSハックもJavaScriptも使用せずに、中身のテキストや画像の高さがバラバラでも各パネルの高さを同じにする、モバイルファーストのシンプルなグリッドシステムを紹介します。 非常にシンプルなグリッドなので、さまざまなプロジェクトに利用できると思います。 FlexGRID FlexGridは文字通り、柔軟なグリッドを提供するもので、非常にシンプルなHTMLと軽量のCSSで構成されています。 基本... 続きを読む

Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ | HTML5Experts.jp

2013/08/20 650 users Bootstrap CSSフレームワーク 流行 とおり リスト

人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザイン... 続きを読む

一個覚えとくと重宝するかも！レスポンシブWEBデザイン対応のグリッドシステム色々！ | バンクーバーのうぇぶ屋

2013/02/12 254 users バンクーバー うぇぶ屋 従来 レスポンシブWebデザイン対応

先日、Responsive Grid Systemの仕様変更について記事を書かせて頂きましたが、あの反応としてやっぱりいくつかコメントもらったのが、逆に分かりにくくなったという物。 まぁ、従来の作り方とは大分変わったので、グリッドシステムとして僕の中で大事な要素の一つである『周りとの共有しやすさ』という面ではちょっと難ありかなと思うのが正直な所。一度慣れてしまえばこんな効率の良い作り方も中々無いか... 続きを読む

著作権放棄の、グリッドシステムを搭載したレスポンシブWebデザイン対応CSSフレームワーク・rwdgrid - かちびと.net

2012/10/31 57 users 語弊 レスポンシブWeb ライセンス フリーソフトウェア財団

著作権放棄のレスポンシブWeb デザイン対応CSSフレームワー ク、rwdgridのご紹介。自由に 使っていいフレームワークは 非常にありがたい存在ですね。 ありがたく使わせて頂きます。 著作権放棄、と言ってしまうと語弊があるのかもしれませんが、ライセンスはパブドメではなく、WTFPLです。あまり聞きなれませんが、フリーソフトウェア財団にもGPL互換として承認されている非常に条件の緩いライセンスに... 続きを読む

Photoshop VIP グリッド＆レスポンシブデザインの組合わせ、ユニークなWordPressテーマ素材30個まとめ

2012/08/08 55 users Photoshop Vip グリッド レスポンシブデザイン

Home　>　 まとめ　>　その他まとめ　>　グリッド＆レスポンシブデザインの組合わせ、ユニークなWordPressテーマ素材30個まとめ Webサイトやブログなどで、コンテンツを分かりやすく、見やすく表示する方法のひとつとして、垂直/水平方向に分割するガイドラインを使ったグリッドシステムがあります。 このグリッドに、Webデザイントレンドでもあるレスポンシブデザインを加えることで、より動きのある... 続きを読む

[CSS]表示サイズに合わせて最適なグリッドを構築するスタイルシート -SimpleGrid | コリス

2011/08/29 98 users コリス グリッド CSS 水平スクロールバー class

SimpleGrid 3つの特徴 Responsive Web Design SimpleGridは4種類のスクリーンサイズで最適なレイアウトを提供します。 水平スクロールバーとは、さよならです。 ～720px 720px～ 985px～ 1235px～ 効率的なclass管理 同様のグリッドシステムの多くは、同じサイズのグリッドを一つのclassで管理します。SimpleGridではユニットの最... 続きを読む

[CSS]可変でも固定でも対応できる、シンプルなグリッドシステム -Grid | コリス

2011/07/03 211 users grids Grid コリス class CSS

FruidレイアウトでもFixedレイアウトでも、入れ子でも対応できる、シンプルなグリッドシステムを実装するスタイルシートを紹介します。 デモページ：入れ子のグリッド Gridの使い方 Gridは、使い方も簡単です。 コンテナとなる要素のclassに「grids」を加えます。 子要素に望むサイズのclassを指定します。 Gridのスタイルシート 2011年7月1日リリース版のスタイルシートです。... 続きを読む

スマフォ対応の洗練されたUIエレメントがすぐに実装できるCSSとJSの開発キット -Skeleton | コリス

2011/05/25 209 users Skeleton コリス UIエレメント CSS スクリーン

Skeletonの特徴 スマフォ対応のグリッド Skeltonでは軽量の960pxのグリッドシステムを採用しています。 ブラウザやタブレット、スマートフォンなどスクリーンのサイズが小さくなると、そのサイズに最適なレイアウトに変更します。 Fast to Start 洗練されたベーシックなUIエレメントをあらかじめ用意してあるので、すばやくサイトの制作が始められます。 Style Agnostic ... 続きを読む

[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム | コリス

2009/02/19 235 users コリス マージン グリッド CSS 10px

全幅970px（960+10px）の6カラムと12カラムのグリッドをベースにし、汎用的に展開できるように設計されたグリッドシステム「The Golden Grid」を紹介します。 The Golden Grid ベースとなる6カラムと12カラムのグリッドは、下記のようになっています。 6カラムの構成 1カラム：150px、マージン：10px 150*6+10*7=970px 12カラムの構成 1カ... 続きを読む