タグ レスポンシブWebデザイン
人気順 5 users 10 users 100 users 500 users 1000 usersFigma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント
2024/04/15
165 users
figma
ポイント
3つ
この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも... 続きを読む
レスポンシブwebデザインのコーディングでやってること｜Web Design KOJIKA17
2018/12/28
113 users
コーディング
Normalize.css
CSS
差異
案件
今年、携わった案件のほとんどがレスポンシブwebデザインでした。 今更ですが、私がレスポンシブwebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」を... 続きを読む
レスポンシブwebデザインのコーディングでやってること｜Web Design KOJIKA17
2018/12/28
113 users
コーディング
Normalize.css
CSS
差異
案件
今年、携わった案件のほとんどがレスポンシブwebデザインでした。 今更ですが、私がレスポンシブwebデザインのコーディングでやっていることや気を付けていることを整理してみたいと思います。 User Agent Style Sheetの対応 ブラウザのデフォルトで設定されているスタイルシートの差異を埋めるCSSは「Normalize.css」を... 続きを読む
CSS GridとFlexboxで驚くほど簡単にレスポンシブレイアウトを実装する方法 - WPJ
2018/03/15
83 users
Flexbox
WPJ
レスポンシブレイアウト
レイアウト
レスポンシブWebデザインの実装に欠かせないメディアクエリを使わずに、CSS GridとFlexboxでレスポンシブなレイアウトを実装する方法を紹介します。 レスポンシブなレイアウトにはメディアクエリが欠かせないわけですが、 CSS GridやFlexboxを使えばメディアクエリなしでもレスポンシブなレイアウトが可能 です。メディアクエリが全くいらなくなるということはないと思いますが、CSS Gr... 続きを読む
レスポンシブWebデザインのための２つのCSSテンプレート
2017/05/05
258 users
CSSテンプレート
最近では、Webデザイナーとして仕事をしていく上でレスポンシブ対応は必須のスキルになってきています。 スマホの普及率も高まっているので、今後も必要とされるスキルでしょう。 もちろんですが、レスポンシブ対応がきちっとできるだけで仕事の単価も上がります。 CSSのテンプレートを知る Webデザインの勉強を始めたばかりの時は、レスポンシブというと何か魔法のように聞こえることもあることでしょう。 とにかく... 続きを読む
Macで素早く作業する10のTIPS+α | Stocker.jp / diary
2017/04/03
77 users
Stocker.jp
diary
Tips
Mac
以外
4月より新しく「 スマートフォン時代のWebコーディングスクール 」開催！PC・タブレット・スマートフォンに対応したHTML・CSSを基礎から学べます！ レスポンシブWebデザインを土曜に学ぶ「 スマートフォンサイトコーディング講座 」開催！こちらはHTML・CSSが書ける方向けです。 Macで作業するときに知っておくと素早く作業できる10個のTIPSと、素早く作業する以外のTIPSを3個まとめま... 続きを読む
もう、レスポンシブでいいんじゃない？ – Rriver
2016/11/17
466 users
ワークフロー
Rriver
レスポンシブ
テクニック
視点
先月末、 藤井さん の働く 株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「 レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけ... 続きを読む
今、フロントエンドエンジニアが知っておきたい「進化したレスポンシブWebデザイン」とは？ - エンジニアtype
2015/10/09
53 users
エンジニアtype
フロントエンドエンジニア
著者プロフィール Web Directions East LLC代表 菊池 崇 ノーマン＆ニールセングループのUXサーティファイド・モバイルデザインスペシャリスト。海外から各分野のスペシャリストを招聘し、国内のトップデザイナーや開発者向けにカンファレンスやワークショップを開催している。Web Directions Eastをはじめ、UX DAYS TOKYO、Node.jsなどのサポートを担当。著... 続きを読む
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ | BlackFlag
2015/07/21
170 users
BASIC
CSS
BlackFlag
レイアウト
表組み
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic ... 続きを読む
Googleモバイルフレンドリーに対応しよう！ダメなレスポンシブWebデザインから卒業するために知っておきたいことがよく分かるオススメの本 | コリス
マルチデバイス対応のWebページを制作する際、何を参考にしていますか？ 他のWebページがどのように実践しているか参考にしたり、実機でレイアウトを試したり、レスポンシブのツールを使ったり、いろいろあると思います。 去年の...記事の続きを読む 続きを読む
Web制作に役立つ便利すぎるブックマークレットのまとめ | コリス
2015/04/02
306 users
コリス
グリッド
ブックマークレット
フォント
ピクセル単位
Webサイトの制作に役立つ便利なブックマークレットを紹介します。 ブラウザの機能拡張も便利ですが、入れすぎると重くなったり、Chromeで使えるけど他で使えないなどあるので、ブックマークレットもなかなか重宝します。 ページにグリッドを表示した確認 レスポンシブWebデザインの確認 デザインの確認をピクセル単位でできる ページで使用しているフォントをチェック ページをワイヤーフレーム化 ページの構造... 続きを読む
レスポンシブWEBデザインでフィットネスクラブのサイトを作ってみる｜ cocope [Web制作ヒント集 ココペ]
2015/02/25
105 users
フィットネスクラブ
実案件
サンプル
目標
スマホ
現在WordPressで実案件を想定としたWordPress構築術を紹介しています。レスポンシブWEBデザインで作っているのですがあまり詳しく解説していなかったので今回改めてまとめていきたいと思います。 今回目標としているサイトは小規模のフィットネスクラブです。サンプルサイトをご用意していますのでスマホやPCで確認してみてください。 今回のサンプル： Sample Fitness Club まずは... 続きを読む
レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説 | コリス
2015/01/26
104 users
コリス
fixed
absolute
static
配置
レスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。 さらに複雑しているのが配置の名称。 Static, Absolute, Relative, Fixed、、、スタティックとはどこが... 続きを読む
しっかりと理解しておきたい！レスポンシブWebデザインを使いこなすための9つの基本原則 | コリス
2014/11/18
455 users
スクリーン
タブレット
Web Design
コリス
許可
レスポンシブWebデザインは、デスクトップやスマホやタブレットなどさまざまなサイズのスクリーンの問題に対する素晴らしい解決方法です。 レスポンシブWebデザインをより深く理解するための基本原則を紹介します。 9 basic principles of responsive web design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ... 続きを読む
無料ではじめる！レスポンシブ対応のWordPressテンプレートまとめ 2014年9月度 - Photoshop VIP
2014/09/16
58 users
レスポンシブ対応
レイアウト
端末
コンテンツレイアウト
参考
デスクトップやモバイルなど、表示している端末に応じてレイアウトを変化させる、レスポンシブWebデザインに対応した無料WordPressテンプレート素材を今回はまとめてご紹介します。デザイン性が高いだけでなく、さまざまなコンテンツレイアウトの参考にすることもできそうなアイテムが揃っています。 詳細は以下から。 無料ではじめる！レスポンシブ対応のWordPressテンプレートまとめ Pure 5種類の... 続きを読む
レスポンシブWebデザイン（RWD）とユーザーエクスペリエンス – U-Site
2014/06/03
59 users
RWD
ユーザーエクスペリエンス
ユーザビリティ
要旨
原文
レスポンシブWebデザイン（RWD）とユーザーエクスペリエンス 公開：2014年6月4日付（日本語版）、2014年5月4日付（原文） 著者：Amy Schade 原文（英語）：Responsive Web Design (RWD) and User Experience 要旨 多数のデバイスをサポートするためにレスポンシブデザインのチームが作成するサイトは1つだが、ユーザビリティを確実なものにする... 続きを読む
自社サービスのロゴをWebフォント化して楽をしようと試みてみる方法 | nanapi TechBlog
2014/05/28
9008 users
nanapi TechBlog
ロゴ
エンジニア
修正
みんな
Webサービスをリリースしたばかりの頃は、毎日修正で日々細かい調整に追われるもの・・・さらに最近はレスポンシブWebデザインでMedia Queriesの分、いちいち修正するのかとか思うと、Sass mixinの使い方が巧いデザイナー、エンジニアが羨ましい・・・みんな、そんな毎日じゃないかなと思います。今回はちょっとでも楽をしてほしくて、本当にちょっとの楽くらいにしかならないですが、Webフォント... 続きを読む
Re: 年寄りを困らせる「レスポンシブWebデザイン」 | 覚え書き | @kazuhito
2014/05/19
65 users
kazuhito
覚え書き
RWD
年寄り
ユーザビリティ上
少し前の記事ですが、日経BPコンサルティングスタッフルームに掲載された年寄りを困らせる「レスポンシブWebデザイン」を読んでの感想。確かに、レスポンシブWebデザイン（以下「RWD」）のユーザビリティ上の問題点について指摘はしているものの、その問題点は本当に高齢者に特有のものなのだろうか？ そして、記事中で紹介されている東北大学の対応策は本当に利用者の使い勝手を考えてきちんと吟味し、改善策を実践し... 続きを読む
画像の作り方・使い方でファイルサイズを減らす方法 │ Design Spice
2014/04/16
116 users
Design Spice
切り口
CSS
ファイルサイズ
前提
画像のサイズを軽くするためにCSSやWebフォントを使う方法はよく聞かれますが、今回は画像ファイルを使う前提でその容量を減らす方法を別の切り口からまとめてみました。 高速化のための画像最適化の方法はいろいろなところで紹介されております。 当ブログでも過去にレスポンシブWebデザインの画像問題の解決法5種という記事を書きました。 こちらの記事でも紹介したように画像のサイズを軽くするためにCSSやWe... 続きを読む
レスポンシブWebデザインで成功するUI／UXのポイント5つ | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ
2014/04/09
505 users
マウス
モバイルファーストラボ
マウス操作
WEB構築
設計
レスポンシブWebデザインでサイト構築をする際に、今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。 これまでのWebにおけるUI／UX これまで、PCのブラウザをメインにネットをする層が中心だった時代では、マウス操作が基本になっていました。 当たり前ですが画面上のマウスを操作して、クリックをしたり、ドラッグ・アンド・ドロップで... 続きを読む
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
2014/03/24
452 users
Design Spice
備忘録
%指定
比率
数値
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×1... 続きを読む
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デザインに対応した横メニューの作り方｜Webpark
2014/03/18
379 users
Webpark
toggle
MENU
max-width
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px... 続きを読む
レスポンシブWebデザインに対応したモーダルウィンドウを実装するjQueryプラグイン・Remodal - かちびと.net
2014/03/07
96 users
モーダルウインドウ
jQuery
RWD対応
スクリプト
設計
RWD対応のモーダルウィンドウを実装するスクリプト、Remodalのご紹介です。jQueryに依存しています。 RWDなWebサイトで使えるモーダルウィンドウ実装スクリプトです。 Remodal デバイスのモニタサイズに応じて適切なレイアウトを維持するモーダルウィンドウです。 スマフォの場合は全画面に表示されるのでフィンガーフレンドリーを考慮した設計と言えそうです。 <script src="ht... 続きを読む
レスポンシブWebデザインに対応！クリエイティブな無料HTMLテンプレート素材まとめPhotoshopVIP |
2014/03/04
148 users
海外デザインブログdesiznHDで、無料ダウンロードできるHTMLテンプレート素材をまとめたエントリー「Latest Free Bootstrap Themes」が公開されていたので、今回はこちらをベースにブックマークしておきたいアイテムを一緒にご紹介します。 BootstrapをベースにしたHTMLファイルや、2014年のデザイントレンドを意識したアニメーションや、フラットデザインなどを採用し... 続きを読む