Figma初心者でも大丈夫！ レスポンシブWebデザインをFigmaで作るための3つのポイント

2024/04/15 165 users figma ポイント 3つ

この記事について この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 最近はスマホで見ることを前提にデザインされたWebサイトも増えてきていますが、そのようなWebサイトでもPCでみた時にも... 続きを読む

コード不要でレスポンシブ対応のWebページを作成、ダウンロードできるシンプルなWebサイトビルダーアプリ・「Aspect」 | かちびと.net

2020/09/21 7 users ビルダー 矢印キー テキスト 要素 D＆D

Aspect Aspectはコード不要でレスポンシブ対応のWebページを作成、ダウンロードできるシンプルなWebサイトビルダーアプです。 よくあるタイプの簡易的なビルダーではなく、要素はD&Dで配置したり矢印キーで微調整可能、色やテキストも自由に設定可能で、その場でレスポンシブWebデザインの表示確認も出来るようになって... 続きを読む

レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法 | コリス

2020/06/04 30 users 見栄え スクリーン 中間 タブレット コリス

Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れ... 続きを読む

Container Queriesという手法 / CSS Advent Calendar 2019 | Web Design KOJIKA17

2019/12/23 9 users Container Queries レイアウト 手法

Container Queriesという手法 / CSS Advent Calendar 2019 2019-12-23 Container Queriesを知っていますか？ Media Queriesに依存せず、コンテンツにあわせてレイアウトを変化させるを手法です。 Container Queriesとは レスポンシブwebデザインを行う時、みなさんはMedia Queriesを使用していると思います。 ブレークポ... 続きを読む

レスポンシブ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デザインの勉強におすすめの3冊｜レスポンシブ対応 / jQuery - 元『企業戦士』の1日1歩ブログ ~素晴らしき日常~

2017/07/13 37 users jQuery jQueryデザイン入門 マルチデバイス時代

2017 - 07 - 13 Webデザインの勉強におすすめの3冊｜レスポンシブ対応 / jQuery おススメの紹介 おススメの紹介-書籍 Webデザイン はじめに １．HTML5&CSS3デザインブック ２．レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック  ３．Web制作の現場で使うjQueryデザイン入門 最後に はじめに ブログをはじめて3か月がたち、ますますWEB... 続きを読む

レスポンシブ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個まとめま... 続きを読む

レスポンシブが変わる!? EQCSSによるエレメントクエリーの使い方 - WPJ

2017/02/15 44 users WPJ メディアクエリー 常識 サンプルコード 要素ごと

レスポンシブWebデザインで使うメディアクエリーを進歩させて、要素ごとに条件を設定できる「エレメントクエリー」を作ろうという動きがあります。どこがどう便利なのか？ 専用ライブラリー「EQCSS」で体験できます。サンプルコードで使い方を紹介します。レスポンシブの常識が変わる!? 君はエレメントクエリーを知っているか？ 2017/02/15 Baljeet Rathi Articles in this... 続きを読む

レスポンシブWebデザイン対応の棒グラフ、折れ線グラフ、円グラフを作れる・「Pizza Amore!」 - かちびと.net

2017/01/30 32 users zurb 棒グラフ 円グラフ Foundation MIT

Pizza Amore! Pizza Amore!は様々なデバイスで折れ線グラフや円グラフ、棒グラフ等を表示出来るスクリプトです。Foundationを提供するZURBが開発、公開しています。マークアップは簡単なリストにカスタムデータ属性を追加すればSVGグラフに変換してくれます。扱いやすいし手軽で良い気がします。ライセンスはMIT。 Pizza Amore! Other Links WPデザイン... 続きを読む

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

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

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

[jQuery] レスポンシブWebデザイン対応のメガメニュー - かちびと.net

2016/02/02 25 users jQuery ウインドウサイズ アコーディオン ウィ net

Result See the Pen megamenu.js – Last responsive megamenu you’ll ever need by Mario Loncarek ( @riogrande ) on CodePen . ウィンドウサイズが943px以上はドロップダウン、以下の時はクリックで開閉するアコーディオンのメガメニュー。上記デモはモバイル向けになっていると思います。ウィ... 続きを読む

今、フロントエンドエンジニアが知っておきたい「進化したレスポンシブ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 ... 続きを読む

レスポンシブWebデザイン対応のミニマルなUIフレームワーク・「KATHAMO」 - かちびと.net

2015/07/01 41 users UIフレームワーク ミニマル net

Web制作の話題を中心に、便利なWebサービスやリソースなどを紹介 Kudos for About This Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。 Kachibito.net is a community-based ... 続きを読む

Googleモバイルフレンドリーに対応しよう！ダメなレスポンシブWebデザインから卒業するために知っておきたいことがよく分かるオススメの本 | コリス

2015/04/24 59 users コリス おすすめ

マルチデバイス対応のWebページを制作する際、何を参考にしていますか？ 他のWebページがどのように実践しているか参考にしたり、実機でレイアウトを試したり、レスポンシブのツールを使ったり、いろいろあると思います。 去年の...記事の続きを読む 続きを読む

ASCII.jp：いまさら聞けないSVG——Web制作に便利な3つの理由 (2/2)｜本気で使いこなす「SVG」再入門【2015年版】

2015/04/06 26 users SVG 図版 縮小 SVG——Web制作 ラスター画像

Web制作でSVGが役立つ3つのシーン 前に解説したとおり、SVGはラスター画像の画像フォーマットとは異なる性質を持っています。この性質をWeb制作のさまざまな場面で活かせます。 レスポンシブWebデザイン SVGは拡大・縮小に強いで、レスポンシブWebデザインで有効です。ロゴ画像や、図版に使えば、1つの画像ファイルでスマートフォンからPCまで対応できます。 マルチデバイス対応 「拡大・縮小に強い... 続きを読む

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 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ... 続きを読む

問題点がありつつも。業務で使えるオープンソース（134）·レスポンシブWebデザイン MOONGIFT

2014/10/07 9 users MOONGIFT レスポンシブWeb 単語 トレンド 業務

今回のテーマはレスポンシブWebデザインです。MOONGIFTでレスポンシブWebデザインという単語が出たのは2012年7月ということで、2年前のことになります。その2年間で注目が一気に高まりましたが、色々な場面で問題点があるとも聞きます。 銀の弾はないという話ではあるのですが、そういった問題を踏まえつつもトレンドとして使っていく必要があるでしょう。ということでよくある問題点と、レスポンシブWeb... 続きを読む

無料ではじめる！レスポンシブ対応のWordPressテンプレートまとめ 2014年9月度 - Photoshop VIP

2014/09/16 58 users レスポンシブ対応 レイアウト 端末 コンテンツレイアウト 参考

デスクトップやモバイルなど、表示している端末に応じてレイアウトを変化させる、レスポンシブWebデザインに対応した無料WordPressテンプレート素材を今回はまとめてご紹介します。デザイン性が高いだけでなく、さまざまなコンテンツレイアウトの参考にすることもできそうなアイテムが揃っています。 詳細は以下から。 無料ではじめる！レスポンシブ対応のWordPressテンプレートまとめ Pure 5種類の... 続きを読む