自社サービスのロゴをWebフォント化して楽をしようと試みてみる方法 | nanapi TechBlog

2014/05/28 9008 users nanapi TechBlog ロゴ エンジニア 修正 みんな

Webサービスをリリースしたばかりの頃は、毎日修正で日々細かい調整に追われるもの・・・さらに最近はレスポンシブWebデザインでMedia Queriesの分、いちいち修正するのかとか思うと、Sass mixinの使い方が巧いデザイナー、エンジニアが羨ましい・・・みんな、そんな毎日じゃないかなと思います。今回はちょっとでも楽をしてほしくて、本当にちょっとの楽くらいにしかならないですが、Webフォント... 続きを読む

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

2012/04/18 1364 users レスポンシブWebサイト HTML5 マルチデバイス CSS

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

なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！ | gori.me

2012/10/15 1301 users gori.me ウェブデザイン イケイケ 必読 株式会社LIG

今のウェブデザインの流行りは「レスポンシブ・ウェブデザイン」！ 昨日、とあるアプリの紹介ページについて話し合っていたのだが、株式会社LIGのデザイナブログに書いてあった「必読！5分でわかる流行のレスポンシブWebデザインまとめ」に載っていた「NHKスタジオパーク」のレスポンシブ・ウェブデザインがイケイケすぎて感動したので、紹介する！これは本当にすごい！！ まず普通に表示するとこんな感じ。よくある3... 続きを読む

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - ＠IT

2014/03/19 1069 users Bootstrap サンプルアプリケーション API 概要

HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) 話題のレスポンシブWebデザインも簡単にできる、CSSフレームワーク「Bootstrap」の概要と基本的な使い方をサンプルとコードを交えて紹介します。 最近はやりのHTML5、JavaScriptライブラリ、CSS3、APIの紹介、またそれらを組み合わせたサンプルアプリケーションの紹介... 続きを読む

» レスポンシブWebデザインの画像問題の解決法5種│Design Spice

2012/06/13 974 users Design Spice jQuery 画像問題 回線速度

レスポンシブWebデザインの問題の一つに、PCと同じ画像を回線速度の低いモバイルデバイスでも表示させるのか、といった点が挙げられます。そこでこの問題に対する解決策を調べてみました。 Javascriptを使う Javascript（jQuery）を使う方法です。 幾つもの手法が発表されてますが動作も様々です。 Responsive-Images Responsive Images 最初に小さい画像... 続きを読む

レスポンシブwebデザインで制作する時のポイント | Design Spice

2011/09/22 917 users Design Spice Dreamweaver ポイント

先日、CSS Nite in Ginza, Vol.59「DreamweaverによるレスポンシブWebデザインの実装」に出席してきました。 とても勉強になったので復習も兼ねてレスポンシブwebデザインに関して、セミナーで学んだ内容に自分の調べた点を加えてまとめます。 （一部の図はセミナーの資料を元に作成してます。） 始めに：スマートフォンサイト制作の選択肢 スマートフォンサイトを制作するには幾つ... 続きを読む

レスポンシブWebデザインの作り方（簡単設定方法） | フリーランスWEBデザイナーの仕事

2013/02/03 883 users フリーランスWEBデザイナー 作り方 Android 仕事

フリーランスWEBデザイナーが日々の仕事で実践した技術や培ったノウハウ、業務での成功や失敗、WEB業界の最新情報を綴ります！WEBデザイナーじゃなくてもWEB制作のお仕事をされている人達のお役に立てれば幸いです。 レスポンシブWebデザイン・・・レスポンシブルWebデザインじゃないよ。「ル」は要らないです。 さて、androidやiPhone・iPadなどのスマートフォンやタブレットが普及してきて... 続きを読む

レスポンシブWebデザインでテーブルを使う時の小技 │ Design Spice

2012/11/01 877 users Design Spice テーブル 小技 table list

レスポンシブWebデザインで狭いスクリーンサイズの時にテーブルをどう見せるかは悩ましい問題のひとつです。その対応方法を幾つか調べてみました。 tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist... 続きを読む

完全無料、レスポンシブWebデザイン対応のHTMLテンプレート素材まとめPhotoshopVIP |

2013/06/23 801 users 完全無料

HTMLとCSSを使ったウェブサイト用テンプレートのなかでも、無料ダウンロード可能で、レスポンシブデザインにも対応したHTMLテンプレート素材をまとめたエントリー「Free Responsive HTML 5 Templates」が、デザインブログSpeckyboy.comで公開されていたので、今回はご紹介します。 スマートフォン利用者が急増しており、それと同時に、モバイル端末表示に対応したWeb... 続きを読む

ASCII.jp：スマホ対応の新潮流「レスポンシブWebデザイン」とは？

2011/06/17 739 users 新潮流 ASCII.jp 実例 薄い水色 外側

スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？　実例で解説する。 スマートフォンやタブレットの登場で多様化するスクリーンサイズ。中央の濃い青はモバイル、外側の薄い水色はテレビのサイズで、これだけのスクリーンサイズに対応するには従来の方法では難... 続きを読む

必読！5分でわかる流行のレスポンシブWebデザインまとめ 制作編 | デザイナーブログ | 株式会社LIG

2012/09/28 703 users 必読 後藤 前々回 株式会社LIG デザイナー

お久しぶりです。デザイナーの後藤です。 まず、今回の記事を見ていただく前に、前回と前々回に書かせていただきました。 「必読！5分でわかる流行のレスポンシブWebデザインまとめ」 「必読！5分でわかる流行のレスポンシブWebデザインまとめ Pt.2」 を読んでいただけるとスムーズです。 今回で、【必読！5分でわかる流行のレスポンシブWebデザインまとめ】のシリーズも最後にさせていただきますので、少し... 続きを読む

ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個 | A40

2013/12/23 692 users Bootstrap フレームワーク かなり手間 機能 国内

レスポンシブWebデザインのサイトは国内でも増えてきましたが、制作するとなるとかなり手間がかかります。 そんなとき役に立つのがレスポンシブWebデザイン対応のフレームワーク。中でも「Bootstrap」は、多彩な機能を備え、その使いやすさから広く知られています。 そこで今回は、国内の秀逸なレスポンシブWebデザインを集めた「Responsive Web Design JP」から、Bootstrap... 続きを読む

【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方 | WEBデザイナーの憂鬱

2013/12/25 687 users Bootstrap臭 Gunosy Bootstrap 事例

「Responsive Web Design JP」を運営されているA40さんのまとめ記事ここまでできる！Bootstrapで作られた国内のレスポンシブWebデザインのサイトまとめ20個が今日のGunosyで取り上げられていましたが、twitter Bootstrapを使ったレスポンシブWEBデザインのウェブサイトの事例が国内でもかなり増えてきました。 当社で制作した化粧品ブランド　リボーテ -R... 続きを読む

レスポンシブWebデザインの基礎

2013/10/08 676 users 基礎 裕之 ディレクション コーディング コンサル

レスポンシブWebデザインの基礎 Presentation Transcript 小川 裕之 レスポンシブWebデザインの基礎 13年10月8日火曜日 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅... 続きを読む

Rriver » レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと

2012/05/01 625 users Rriver RWD リニュー 半年 ウェブサイト

昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニュー... 続きを読む

簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 ～メディアクエリを使ってCSSを分岐させる～ | HTML5でサイトをつくろう

2012/05/16 613 users CSS メディアクエリ サンプル XHTML HTML5

スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。 そこで今回はレスポンシブWebデザインを使用したサイトの制作や仕組みを理解しておくためにCSS3のメディアクエリを使用してレスポンシブWebデザインのデモソースとチュートリアルをつくりました。 今回はXHTMLでコーディングしたソースで、CSS3のメディアクエリを使って、PC、タブレット、... 続きを読む

ASCII.jp：レスポンシブWebデザインとは｜ゼロから始めるレスポンシブWebデザイン入門

2012/06/04 585 users ASCII.jp 菊池 デバイス 概念 崇氏

スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部） レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイス... 続きを読む

レスポンシブWebデザインのメリット、デメリット比較まとめ - Photoshop VIP

2012/11/12 555 users 割合 モバイル端末 テクニック ウェブサイト メリット

2011年8月に調査された、モバイル端末に対応したウェブサイトの割合は、全体の7.12%でした。2012年8月に行われた調査では、11.78%にまで増えてきています。 新しいWebデザイントレンドに、あらゆるデバイス端末表示に対応するレスポンシブWebデザインがあります。最近モバイル化された、Webサイトの多くが取り入れているテクニックですが、まだまだ新しい技術ということもあり、ユーザー間でも利用... 続きを読む

レスポンシブWebデザインで作られた10の美しすぎるサイト | SEO Japan

2012/02/21 544 users きり SEO Japan デバイス デバイス毎 最中

PCにモバイル、スマートフォンにタブレット、そして今後はデジタルTVまでユーザーがデジタルコンテンツに多種多様なデバイスでアクセスし、消費する時代が本格化している最中。デバイス毎にウェブサイトをデザインしていてはキリがないとばかりに、最近注目されているのが「レスポンシブWebデザイン」という画面サイズやOSにデザインを柔軟に対応して表示させる手法。今回は、そんなレスポンシブWebデザインを実践して... 続きを読む

レスポンシブWebデザインの基礎を習得したい人に絶対役立つスライドまとめ7つ - W3Q

2012/08/08 542 users スライド 基礎 W3Q デザイン設計

[デザイン設計] レスポンシブWebデザインの基礎を習得したい人に絶対役立つスライド 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #16 レスポンシブWebデザインでテーブルを最適化するベストプラクティス ｜ Developers.IO

2013/03/17 518 users ベストプラクティス MdN Developers.IO 勉強

dislay 属性についてもっと知りたいという方は、こちらのサイトを参照ください。 display - CSS | MDN 要するに何が言いたいかというと、テーブルもまたスタイルシートの display 属性によってその形状を実現しているに過ぎず、この値を色々と操作すればスマートフォンのようなスクリーンサイズの狭い環境にも最適化された表示が出来るのではないかということです。 実際に作ってみた - ... 続きを読む

レスポンシブWebデザインで成功するUI／UXのポイント5つ | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ

2014/04/09 505 users マウス モバイルファーストラボ マウス操作 WEB構築 設計

レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで... 続きを読む

もう、レスポンシブでいいんじゃない？ – Rriver

2016/11/17 466 users ワークフロー Rriver レスポンシブ テクニック 視点

先月末、 藤井さん の働く 株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「 レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけ... 続きを読む

著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid - かちびと.net

2011/09/23 462 users iPhone パブリックドメイン フレームワーク レイアウト

なかなか凄いフレームワークがあったので 反射的にメモ。パブリックドメインという のが何より太っ腹ですねー。自由に使用で きて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整 するレスポンシブWebデザイン対応のHTML5 フレームワークです。 これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。 F... 続きを読む

しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則 | コリス

2014/11/18 455 users スクリーン タブレット Web Design コリス 許可

レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ... 続きを読む