Web_Design のバックアップ差分(No.6)



  • 追加された行はこの色です。
  • 削除された行はこの色です。
[[FrontPage]] / [[Programing]]
[[FrontPage]] > [[Programing]] > Webデザインと制作

#title(Webデザインと制作)

WebアプリとかWebサイトを作るとき、当然Webデザインが必要になる。

見栄えがカッコイイと、それだけで品質も高く見える。

というわけで、Webデザインをやるときの関連資料をまとめました。

#contents

*レスポンシブWebデザイン [#l6c430bb]

スマートフォンやタブレットでも、パソコンでも見やすWebデザイン。それが、レスポンシブWeb。同じWebページが、デバイスの画面サイズに合わせて表示される。

いやもう、これは便利。作るほうも、最初から考慮しておいたほうがいい。

WordPressとか、デフォルトのテーマがレスポンシブWebになったし(Twenty Twelve)

というわけで、このWikiもブログも、そのほかも順次これに移行中。

**参考資料 [#e87e29e3]

-[[Responsive Web Design JP | 日本国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト:http://responsive-jp.com/]]
-[[レスポンシブWebデザインのメリット、デメリット比較まとめ - Photoshop VIP:http://photoshopvip.net/archives/40304]]
-[[ASCII.jp:ゼロから始めるレスポンシブWebデザイン入門:http://ascii.jp/elem/000/000/700/700611/]]
-[[レスポンシブWebデザインはブームではない*ホームページを作る人のネタ帳:http://e0166.blog89.fc2.com/blog-entry-1076.html]]

-[[iPhoneやiPad等にもWebサイトを最適化するレスポンシブWebデザイン構築に役立つフレームワークやTipsいろいろ - かちびと.net:http://kachibito.net/web-design/responsive-web-design-resource.html]]
-[[レスポンシブWebデザインに対応したCSSフレームワーク 10 « nanomal:http://www.nnmal.com/2012/09/10-responsive-css-frameworks/]]
-[[レスポンシブWebデザインに対応している CSS Framework 12個 | Egographica:http://egographica.net/2012/02/responsive-css-framework-12/]]
-[[著作権放棄のレスポンシブWebデザイン対応CSSフレームワーク・ingrid - かちびと.net:http://kachibito.net/web-design/ingrid.html]]

-[[【厳選】レスポンシブWebデザイン参考記事まとめ - NAVER まとめ:http://matome.naver.jp/odai/2133542339535615101]]

-[[SimpleGrid:http://simplegrid.info/]] すげーシンプルらしい。MITライセンス

**twitter Bootstrap [#ge82c529]

すげー有名らしい。レスポンシブのほかにも、いろいろできる。

-[[Bootstrap:http://twitter.github.com/bootstrap/index.html]]
--[[はじめ方:http://twitter.github.io/bootstrap/getting-started.html]] 英語
--[[ドキュメント:http://twitter.github.io/bootstrap/scaffolding.html#gridSystem]] 英語
--[[Twitter Bootstrap使い方-コンポーネント-v2.0.4:http://php-fan.org/sample_code_demo/bootstrap.html]]

-[[Twitter謹製のCSSフレームワーク『Bootstrap』が大幅バージョンアップ中! | IDEA*IDEA:http://www.ideaxidea.com/archives/2011/09/bootstrap_being_upgraded.html]]
-[[Twitter Bootstrapが大幅バージョンアップ!して凄まじいことに・・・ | IDEA*IDEA:http://www.ideaxidea.com/archives/2012/02/twitter_bootstrap_v2.html]]
-[[Twitter bootstrap入門 #twtr_hack:http://www.slideshare.net/makingx/twitter-bootstrap]]スライド
-[[便利すぎる!3分でサイト構築、Twitter Bootstrap。 | open book:http://yukiharutamura.com/web/%E4%BE%BF%E5%88%A9%E3%81%99%E3%81%8E%E3%82%8B%EF%BC%813%E5%88%86%E3%81%A7%E3%82%B5%E3%82%A4%E3%83%88%E6%A7%8B%E7%AF%89%E3%80%81twitter-bootstrap%E3%80%82/]]


-[[これからTwitter Bootstrapをはじめる人のためのエントリまとめ - 大人になったら肺呼吸:http://d.hatena.ne.jp/replication/20120226/1330224012]]
-[[Twitter Bootstrapの使い方:http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap.html]]

-[[Initializr - Start an HTML5 Boilerplate project in 15 seconds!:http://www.initializr.com/]]
-[[Twitter Bootstrapのさまざまなテーマをダウンロードできる『Bootswatch』 | 100SHIKI:http://www.100shiki.com/archives/2012/02/bootswatch.html]]
-[[Bootstrapのフォームコード生成:http://st.ik.am/form-maker/form/;jsessionid=E9FA583644EAFC958C6FD917145C94F9]]
-[[BootstrapのUIがドラッグアンドドロップだけで組める!最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」 | Chrome Life:http://www.chrome-life.com/html5/5648/]]

-[[BootstrapのCSSを簡単にいい感じにカスタマイズできる厳選サービス2+1つ紹介 | クラスメソッド開発ブログ:http://dev.classmethod.jp/tool/bootstrap-custom/]]

-[[Twitter Bootstrap Skin - BootPuki:http://getstarted.main.jp/pukiwiki/index.php?Twitter%20Bootstrap%20Skin]] Pukiwiki用のスキン

**Bootstrap 3 [#e538938b]

-[[Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用 − Publickey:http://www.publickey1.jp/blog/13/bootstrap_3.html]]
-[[Bootstrap3超速レビュー!刷新されたグリッドシステムを理解しよう! | HTML5Experts.jp:http://html5experts.jp/shumpei-shiraishi/1538/]]
-[[Bootstrap3で何が変わるのかをまとめてみた | Pimp My Site:http://pimpmysite.net/archives/501]]

*基本的なこと [#v9963b2c]

-[[初心者の頃分からなかったWeb用語:フレームワーク … CSSからHTML5、WordPressまで:http://webdesignrecipes.com/what-is-the-framework/]]
-[[新人Webデザイナーが現場レベルでよく注意されるポイントのまとめ。 | モノづくりブログ 株式会社8bitのスタッフブログです:http://blog.8bit.co.jp/?p=1810]]
-[[グリッドデザインに使えるツールいろいろ | DesignWalker:http://www.designwalker.com/2010/05/grid-design.html]]

*LESS:CSS拡張メタ言語 [#e6342a94]

レスポンンシブWebやCSSフレームワークのカスタマイズでも、使われているみたいなので。

-[[CSSをシンプルに書くことができるLESS使ってみた | webOpixel:http://www.webopixel.net/html-css/503.html]]
-[[ASCII.jp:CSSの記述が3倍速くなる「LESS」の使い方 (1/2):http://ascii.jp/elem/000/000/668/668205/]]
-[[LESSで3倍ラクするスマートフォンコーディング:連載|gihyo.jp … 技術評論社:http://gihyo.jp/design/serial/01/less]]

*CSSフレームワークのまとめ記事 [#yd945918]

Webサービスで必須となるHTMLとCSSのひな形。

-[[WEBデザインに便利なCSSフレームワークのまとめ「Choosing The Best CSS Framework: A Complete Guide」 | DesignDevelop:http://design-develop.net/web-design/choosing-the-best-css.html]]
-[[[CSS]スタイルシート設計のベースになる12のCSSのフレームワーク | コリス:http://coliss.com/articles/build-websites/operation/css/938.html]]
-[[ふじこのプログラミング奮闘記:http://blog.neo.jp/dnblog/index.php?module=Blog&action=Entry&blog=pg&entry=2597&rand=beec2]]
-[[様々なCSSレイアウトをダウンロードできるサイトをまとめた「465+ Useful CSS Layouts for Download」 | DesignDevelop:http://design-develop.net/web-design/cssweblayout.html]]

-[[個人的に使いそうなPHP、CSS、HTML等のフレームワーク17個 - かちびと. net:http://kachibito.net/software/17-web-dev-framework.html]]
-[[CSS Frameworkを持つ - ゆーすけべー日記:http://yusukebe.com/archives/20120305/075231.html]]

*特定のCSSフレームワーク [#y6e6e012]

-[[CSSのフレームワーク『Blueprint CSS』まとめ | IDEA*IDEA:http://www.ideaxidea.com/archives/2009/01/blueprint_css.html]]
-[[秋元@サイボウズラボ・プログラマー・ブログ: yaml - CSSフレームワークライブラリとそのブラウザエディタ yaml builder:http://labs.cybozu.co.jp/blog/akky/archives/2007/08/yaml-css-framework.html]]
-[[シンプルなもう一つのCSS Framework「inuit.css」 - ゆーすけべー日記:http://yusukebe.com/archives/20120203/104140.html]]

-[[30分、JavaScriptで作るWebサービスのモックアップ - ゆーすけべー日記:http://yusukebe.com/archives/20120222/081031.html#]]

*パーツ [#b2a702ee]
-[[選んで、見て、使える簡単CSS3ジェネレーター「CSS3 Generator」 | DesignDevelop:http://design-develop.net/web/css3-generator.html]]
-[[フリーで使えるCSS3のメニュージェネレーター「CSS3 Menu. Free CSS Menu Maker」 | DesignDevelop:http://design-develop.net/web-design/free-css-menu-maker.html]]



* 関連ページ [#c08d6809]

-[[Webサービス構築>web_programing]]
-[[Webサービス構築>web_programing]]



トップ   一覧 単語検索 最終更新   ヘルプ   最終更新のRSS