[B! レスポンシブ] hyasu93のブックマーク

レスポンシブなデザインを構築する際のベースに·skelJS MOONGIFT

skelJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。レスポンシブなWebデザインを考える際にはブロックを意識してデザインを行う必要があります。多くは幅を12分割して提供するようです。レスポンシブなサイトやWebアプリを開発するためのフレームワーク、skelJSも同様の設計となっています。デスクトップサイズ。Bootstrapのように見やすい画面になっています。タブレットサイズ。この場合もデスクトップライクですが、横の隙間は狭まっています。スマートフォンサイズ。メニューなどはそのままに、下のコンテンツはずれています。作成例。12個のブロックをどう割り当てるかを決めていく形です。 -3uといった指定をすると左側が空く仕組みになっています。これは面白いです。入れ子にした場合の表示はちょっと変わっています。 skelJSは大きなフレームワーク

hyasu93 2013/08/13

シンプルでいいかも。今作ってるのにいれてみようかな。

リンク

レスポンシブ・ウェブデザインでの CSS コードの書き方 | Yomotsu net

いわゆるレスポンシブ・ウェブデザイン、つまりメディアクエリーを採用した Web サイトを構築する際の一番管理しやすいと感じるコードの書き方をまとめました。ただし、あくまでも個人的な、経験から感じた意見ですので絶対ではありません。 CSS のコードの配置広く知られている方法はいくつかあります。 CSS ファイル自体を分ける方法 @media 規則で 1ファイル内にメディア特性単位に書く方法 @media 規則で 1ファイル内にパーツ単位で書く方法それぞれをコードで表すなら以下の書き方が該当します。方法1 : CSS ファイル自体を分ける方法この方法は管理が大変でおすすめできません。これでファイルごとコード分割されてしまったらコード検索しづらいわけです。 <link rel="stylesheet" href="desktop.css" media="(min-width:769px)">

hyasu93 2012/10/01

これもあとで読む

リンク

必読！5分でわかるレスポンシブWebデザインまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

二度目まして。デザイナーの野田です。レスポンシブWebデザインについて、僕なりにまとめてみたのでご覧下さい。今回は、制作に関することではなく、最低限知っておかなければならないことの基本編になります。独学でつまずいていませんか？ Webデザインを効率的に学びたい、転職・就職を目指している、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。どんなスクールがあって、どんな内容が学べて、費用はどれくらいするのか、情報として持っておいて損はないはず。下記におすすめスクールを集めてみました！レスポンシブWebデザインとは「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、複数の異なる画面サイズをWebサイト表示の判断基準にし、ページのレイアウト・デザインを柔軟に調整することを指します。現在はPCやスマートフォンなど、デバイス毎に各HTMLファイル