超シンプルフレームワーク「Responsive Grid System」に画像対応などしてレスポンシブWEBサイトをつくろう（カスタマイズ編） | HTML5でサイトをつくろう

2014/06/23 122 users Responsive Grid System Resp

前回紹介した超シンプルで簡単にレスポンシブWebサイトが作れるフレームワーク「Responsive Grid System」に画像のスマートフォン時の対応や簡単なレイアウトを付け加えてブログフォーマットのベースになるような形をつくってみたいと思います。 前回の導入編をご覧になっていない場合はこちらからご覧ください。サンプルファイルの使い方などをまとめています。 超シンプルなフレームワーク「Resp... 続きを読む

超シンプルで簡単なフレームワーク「Responsive Grid System」でレスポンシブWEBサイトをつくろう（前編：導入編） | HTML5でサイトをつくろう

2014/06/16 252 users フレームワーク レスポンシブフレームワーク タブレット

最近は様々なレスポンシブ対応のフレームワークがでていて、これらを使うことによって簡単にPC、タブレット、スマートフォンに対応したサイトが作成できるようになりました。 そこで今回は本ブログのリニューアルで使用した、モバイルファーストを意識した超シンプルで簡単なレスポンシブフレームワーク「Responsive Grid System」の使い方を解説していきます。 本ブログのリニューアルや、先日発売され... 続きを読む

カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG

2013/11/19 305 users コンポーネント Sass UIパーツ デザイナー アツい

こんにちは。デザイナーのはるえです。 レスポンシブWEBサイトを作成する際に重宝されているCSSフレームワークですが、 「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込... 続きを読む

ドラッグ&ドロップでレスポンシブサイト！TwitterBootstrapBilder Jetstrapがすごい！-ITかあさん

2013/08/06 126 users ITかあさん レスポンシブサイト ドラッグ＆ドロップ 無理

エディタ不要！ドラッグ&ドロップでTwitterBootstrapを使ったレスポンシブWEBサイトが作れるJetstrap Jetstrap ITかあさんです。もう私のことは忘れてしまいましたか、無理もありません。ここまでブログ放置したのは開設以来初めてで、独立してからめっちゃくちゃ忙しい数ヶ月をようやく乗り越え、やっとブログに向き合う時間が出来ました。放置した数ヶ月分の知識を吐き出していきたいと... 続きを読む

Rriver » レスポンシブWebデザインのサイトに「デスクトップ表示」ボタンが必要な2つの理由

2013/01/23 147 users Rriver RWD レスポンシブWebデザイン ボタン 理由

レスポンシブWebデザイン（RWD）で作ったウェブサイトを運営しはじめてから気になっていたことが一つあります。それは、RWDで作られたウェブサイトでもデスクトップ版のレイアウトが見られるようにする機能が必要かという疑問です。僕が書いた本でもp.176のコラム「レスポンシブWebサイトでも『PCサイト』ボタンが必要？」で触れた内容ですが、先日のBruce Lawson氏のブログ記事を読んでいて、再び... 続きを読む

文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう

2012/11/03 556 users WordPress

文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう — Presentation Transcript 文系デザイナーでも大丈夫！ レスポンシブWebサイトを          で作ってみよう November 3,2012 WordCamp Osaka 額賀 順子12年11月3日土曜日 ようこそWordCamp Osaka 2012 へ12年11月3日土曜日 自... 続きを読む

レスポンシブなWebサイトの作り方を解説したスライド。ブレークポイントやデザインワークフローなど、レスポンシブ特有の考え方を把握するのにちょうどいい資料。 → 文系デザイナーで

2012/11/04 16 users Nov デザインワークフロー ブレークポイント スライド

文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう - 文系デザイナーでも大丈夫！ レスポンシブWebサイトを          で作ってみよう Nov 続きを読む

ソースコピーですぐ使えてスマホ専用サイト作成に便利！PC・スマートフォンサイトの振り分けJavaScript作りました。 | HTML5でサイトをつくろう

2012/05/28 930 users JavaScript HTML5 ユーザーエージェント 内容

PCとスマートフォンで違うページを閲覧させたい場合は、ユーザーエージェントを判別して切り替えることができます。 メディアクエリなどを使用したレスポンシブWEBサイトの場合は1ソースでそれぞれのデバイスに振り分けますが、PCサイトとスマホサイトで内容なども変更させる場合は、それぞれサイトを作って振り分ける必要があります。 ユーザーエージェントを判別するには、PHPやJavaScriptや.htacc... 続きを読む

ゼロからはじめるレスポンシブWebサイトを作るために勉強できるサイトをまとめました | HTML5でサイトをつくろう

2012/04/18 1364 users HTML5 マルチデバイス CSS デバイス 選択肢

スマートフォンサイトとPCサイトの振り分けを考える上で、 ひとつの選択肢となる「レスポンシブWebデザイン」。 スマートフォンサイトの最適化とは違い、CSS3のメディアクエリ機能を使って、デバイスのサイズごとにCSSの読み込みを変更することによって、1ソースでマルチデバイスに対応したサイトを制作することができます。 しかし、その分ソースや読み込むCSSが多くなってしまったり、構成をしっかりと考えな... 続きを読む

Photoshop VIP ☞ iPhone表示にも対応、レスポンシブデザインの無料WordPressテーマ15選(プラグイン付)

2011/09/08 218 users レスポンシブデザイン Photoshop Vip 併用 編集

レスポンシブデザインに関するjQueryプラグインなど レスポンシブWebサイトを作成するときに便利なツールなどをまとめています、ご参考までに。 FitText ウィンドウ幅に応じてフォントサイズを変更してくれるプラグイン、Webフォントを利用するときに便利。 無料ダウンロード Lettering.js タイポグラフィーのカーニングや編集なども可能にするプラグイン、こちらもWebフォントとの併用を... 続きを読む