[[FrontPage]] / [[Programing]]
#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を簡単にいい感じにカスタマイズできる厳選サービス２＋１つ紹介 ｜ クラスメソッド開発ブログ: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]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
