タグ「レスポンシブWebデザイン」

タグレスポンシブWebデザイン

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 88件)

Figma初心者でも大丈夫！レスポンシブ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デザインのための２つのCSSテンプレート

2017/05/05 258 users CSSテンプレート

最近では、Webデザイナーとして仕事をしていく上でレスポンシブ対応は必須のスキルになってきています。スマホの普及率も高まっているので、今後も必要とされるスキルでしょう。もちろんですが、レスポンシブ対応がきちっとできるだけで仕事の単価も上がります。 CSSのテンプレートを知る Webデザインの勉強を始めたばかりの時は、レスポンシブというと何か魔法のように聞こえることもあることでしょう。とにかく... 続きを読む

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

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

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

テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ | BlackFlag

2015/07/21 170 users BASIC CSS BlackFlag レイアウト表組み

レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりとレイアウトに苦労することがよくあります。そんなテーブルをレスポンシブ対応させる際にいろいろと便利に使えそうなjQueryプラグインをまとめて自分用メモとして紹介してみます。 Basic ... 続きを読む

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

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

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

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

画像の作り方・使い方でファイルサイズを減らす方法 │ 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デザインに対応！クリエイティブな無料HTMLテンプレート素材まとめPhotoshopVIP |

2014/03/04 148 users

海外デザインブログdesiznHDで、無料ダウンロードできるHTMLテンプレート素材をまとめたエントリー「Latest Free Bootstrap Themes」が公開されていたので、今回はこちらをベースにブックマークしておきたいアイテムを一緒にご紹介します。 BootstrapをベースにしたHTMLファイルや、2014年のデザイントレンドを意識したアニメーションや、フラットデザインなどを採用し... 続きを読む

レスポンシブWebデザインやスマートフォンサイトに最適なメニューを実装できるプラグインやチュートリアル 25 | NxWorld

2014/02/13 180 users NxWorld ウインドウサイズセレクタアコーディオン

いずれもメニューを実装する際に便利なプラグインやチュートリアルで、もちろんPCサイトでも問題なく使えますが、レスポンシブWebデザインやスマートフォンサイトといったサイトを制作する際には特に便利なものです。サイドからスライドしてくるものやウィンドウサイズが狭まるとセレクタやアコーディオンに変化するものなど、見せ方も様々なタイプがあります。ずらっと並んではいますが、大まかに同じような動きをするものは... 続きを読む

すぐに使いたい！レスポンシブWebデザイン対応の無料HTMLテンプレート10選 | TechAcademyマガジン

2014/02/10 186 users デバイス HTMLテンプレート HTML 普及手法

スマートフォンやタブレットの普及に伴って、Webサイトを多デバイスに対応することが増えてきました。その1つの解決策として、「レスポンシブWebデザイン」が多く使われています。レスポンシブWebデザインとは、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる手法です。そこで今回は、レスポンシブWebデザインに対応した無料のHTMLテンプレートを集めてみました。海外サイトも多... 続きを読む

レスポンシブWebデザインはviewportとメディアクエリーからはじめろ！ | 株式会社Bark to Imagine

2014/01/07 313 users 横幅キリン住友商事概念 viewport

今話題の「レスポンシブWebデザイン」。有名なところでは、「TOYOTA新卒採用ページ」、「キリン」、「住友商事」などがあります。ブラウザの横幅に応じて適切なデザインを表示する技術ですが、実際はどのような目的で使われているのでしょう。今回はそんな「レスポンシブWebデザイン」の概念から記述方法までといった、次世代Webサイトの入門的な内容をわかりやすく解説していきます。レスポンシブWe... 続きを読む

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

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

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

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

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

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

各種パーツごとにWebデザインを色々見たい人の為のまとめサービス色々｜レスポンシブ・ヘッダー・フッター・サイドバー・ロゴ等 | Flips Blog Web担の小技

2013/12/20 108 users レスポンシブフッターヘッダー Web担ロゴ

今回は、WebデザインのインスピレーションをまとめたWebサイトをご紹介。２０１２年から、結構色々なところで紹介されている有名ドコロではありますが、それぞれ、特徴的な部分をもったサイトのみをピックアップ致します。是非デザインに迷ったら参考にしてみてくださいね。レスポンシブWebデザインのまとめサービス http://responsive-jp.com/ レスポンシブWebデザインがまとまってい... 続きを読む

「実務で使うためのレスポンシブWebデザインの基礎・実践」に参加しました。 | nrjlog

2013/11/28 110 users 略歴 nrjlog 北九州マルチデバイス時代著者

11月16日に北九州のMIKAGE1881 で行われた「実務で使うためのレスポンシブWebデザインの基礎・実践」に参加してきました〜！今回は「レスポンシブWebデザインマルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)」の著者である菊池崇さんにお越しいただき、とても濃い内容の勉強会となりました♪ ▼菊池崇さんの略歴はこちら http://all-web.org/i... 続きを読む

要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」:phpspot開発日誌

2013/11/08 163 users WallPaper projects エレメント必携背景

要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 2013年11月08日- Wallpaper/Projects/Ben Plum 要素の背景画像を伸縮してくれるレスポンシブWEBデザインに必携のjQueryプラグイン「Wallpaper」 div等のエレメントに設定した背景が自然に自動伸縮されていい感じにしてくれるプラグインです。ブラ... 続きを読む

(1 - 25 / 88件)

次の25件 »