レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。 ※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました レスポンシブ対応のためのJavaScriptによる2つの切替手法 2019.07.17 2024.04.02 JavaScript レスポンシブ こんにちは、開発チームの青木です。普段はレスポンシブと同様のマルチデバイス対応を実現する「GeneCode（ジーンコード）」に携わっています。 今回は、レスポンシブ対応のためのJavaScriptによる2つの切替手法についてお話していきます。 レスポンシブウェブデザインのページで、CSSではメディアクエリを使用して見た目を端末別で分けたが、設置するUIがそれぞれ別になったので、JavaScriptによるイベントも別で付与したいということがあります。 本記事は端末の種類・画面幅によ

（投稿日：2014年09月27日） YouTubeやGoogleマップなどの埋め込み系コンテンツのレスポンシブ対応どうしていますか？個別にCSSをいじってもよいのですがちょっと大変ですよね。そんなときは「Embed Responsively」が便利です。 Embed Responsivelyとは YouTubeやGoogleマップなどの埋め込み用URLから、レスポンシブ対応したコードを生成してくれるサービス。 Embed Responsivelyの使い方 変換元のサービスを選んで、フォームに埋め込み用URLをコピペして、「Embed」ボタンを押すだけ。 レスポンシブ対応した埋め込みコードが生成されます。 Embed Responsively 対応サービス YouTube Viemo Dailymotion Google Maps Instagram Vine Getty Images Ge

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

【2024最新】スマホ・タブレットの解像度一覧表（画面サイズの割合）iPhone・iPad.. 2024/10/02 2018/02/05HowTo, Webデザインテクニック 2024/10「解像度一覧表」 更新 最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方が少なくなってきましたが、そのページごとにブレイクポイントをどこにするか、画像サイズをどれくらいにするか変わってくるので、その都度メモをみたり調べたりしないでいいように、個人的に見やすい表にしてまとめました。主にデザイナーの方にとって見やすい表にしています。 ただ、、、バージョンが増えるにつれて、表も煩雑になってきてるのですが、そこはご了承くださいね。 スマホ・タブレットの解像度一覧表下記の『画面の解像度（画面サイズ）の割合』に詳細は記載してますが、当方管理サイトでの『iOS（iPhone・iPad）の割

「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

【SPIRAL開発8年の実績】申請システムや国際的な会議の受付システムの導入ならお任せください SPIRALを活用した開発パートナーをお探しの皆様へ 官公庁や大企業、中規模企業の皆様の中には、申請フォームや国際会議の受付システムの開発を検討されている方も多いのではないでしょうか？私たちは、SPIRALを活用したシステム開発を10年近く... SPIRALWebサービスビジネスマーケティング 2025年03月03日 SPIRALの運用でお困りではありませんか？私たちが伴走します！ SPIRAL導入後の「思ったより難しい...」を解決します SPIRALを導入し、DX推進を進める企業が増えています。しかし、 導入はできたが、思ったように活用できていない もっと業務を効率化したいが、何をどう設定すればいいのかわからない ... SPIRALWebサービスマークアップマーケティング 2025年03

スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき

この記事は、株式会社Y's アドベントカレンダー7日目の記事になります。 ディレクター出身の初心者エンジニアの私が自社コーポレートサイトを実装したときの経験談。 ディレクター時代に培った提案力が功を奏し、アイデアがたまたま採用されて乗り切れただけなので参考になるかはわかりませんが、あまり書かれていなさそうな方法だったのと、そこにたどり着いた経緯を忘れたくないので、備忘録的に残しておきます。 ※方法のみを知りたいという方は、『実際に使った手法②』から読むことをおすすめします。 普通のランドスケープ対応がしたかった 普段スマホでwebサイトを訪れた際に、端末を横向きにして見るケースは個人的にほとんどないし、自分の周りでもそうしている人はあまり見たことがありません。 それでも世の中に一定少数は居るらしく、その人達のために対応をしてあげる必要があります。 デザインにもよりますが、よくある対応方法と

と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view

【決定版】タブレットでPCサイトを縮小表示をする方法 レスポンシブ対応でホームページを制作する際に、iPadなどのタブレット端末ではPCサイトを縮小表示させたい場合があります。 metaタグのviewport・contentを正しく設定してタブレットで縮小表示させる方法を紹介します。 通常のviewport設定でははみ出してしまう タブレットでPCサイトを表示させようとするとはみ出して表示されてしまう時には、viewportの設定はおそらく下記のようになっています。 <meta name="viewport" content="width=device-width"> なぜタブレットで表示するとはみ出してしまうのか? 問題は content="width=device-width" の部分。 通常スマホではdevice-width、つまりスマホの画面サイズを自動計算してPCサイトをそのまま

非レスポンシブのサイトをiPadで見ようとするとiPadが適切なサイズで表示してくれます。例えば、横幅が1200pxあるサイトでもiPadを縦にしたときの横幅768pxに合わせて縮小してくれるのです。 ところが、タブレットサイズに対応していないレスポンシブ対応のデザインだと実寸のまま表示されてしまいます。往々にして横が画面に収まりきらず、横スクロールが発生しちゃうんですよねー。 レスポンシブ対応をするにあたり、iPadなどのタブレット端末はPCと同じ表示でという希望がけっこうあります。 そんなときは、vierportを切り替えてデバイスに合わせて表示する方が楽に対応できると思います。 というわけで、ユーザーエージェントで判別してタブレットとスマホでviewportを切替える方法のメモです。 jQueryに頼りたいと思います。 // スマホとタブレットでviewportを切替え $(func

Coding Methodology Backlog、Asanaで使える！タスク管理のスプレッドシート活用法

TOPCSS 【CSS】background-sizeで背景画像をレスポンシブに設定する方法 【CSS】background-sizeで背景画像をレスポンシブに設定する方法 公開日：2016.11.28 更新日：2023.03.19 CSS CSSの background-size プロパティは、背景画像のサイズを指定できます。 表示領域のサイズに合わせて背景画像が拡大、縮小されるので、レスポンシブサイトの制作に役立ちます。 同じ画像をそれぞれの値で表示したサンプルを作成したので、以下をご覧ください。 サンプルページ

レスポンシブデザインは画像の可変が必須。 imgタグで挿入する場合にはそうそう悩むことはないが、background-imageを使用する場合。背景画像を可変させようにも、縦横比が崩れてしまう。 background-size:contain; background-size:cover; background-size:100%; などを用いると、横幅は可変することができるが、高さをうまく保つことができない。 そんな場合の対応法をまとめてみました。 背景画像を置く要素に擬似要素を付加する CSSはこちら //背景画像を置く要素 div.sample { width:100%; height:auto; background:url(xxx/sample.jpg);　// 画像ファイル名とパス background-size:100%; } //要素に擬似要素を付加 div.sample:

ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな

IE11が対応したことで、ほぼすべてのブラウザで動作するようになりました。 参考 Can I use ##対象となる方 書き方がよくわからんマークアップな人。 部材を作るデザイナー的な人。 ##特徴 一度用意すれば、CSSで大きさを変えて使いまわせる。 仕様や文言変更にも耐えられる場合が多い。 見た目をオシャレに出来る。 使い方が直感的ではなく、空で書くのはツライ。 ##書き方 細けぇことはいいんだ的な人用に。 border-image.comを利用して、自分の画像から適切なCSSを作りましょう。 よく分かんない人は次の項目へ。

5章. レスポンシブサイトの設計方法 公開日：2017年01月05日 最終更新日：2022年08月10日 設計に関して レスポンシブサイトは、PC、スマホともHTMLの内容をできるだけ同じにすることが前提になります。 そこで問題になるのが、情報量とレイアウトです。 スマホは、サイズの関係上、複雑なレイアウトができません。情報量も増えると縦スクロールさせる距離が長くなってしまいます。 横スクロールに関しては、スマホでの操作性が悪くなるので避けるべきです。 そのため、設計はスマホをベースにしていくことがベストです。 メディアクエリに使用方法に関して メディアクエリでCSSを切り替える方法は、主に3つの設計方法があります。 ケース1 PCサイトのCSSをベースに、そのCSSを継承してメディアクエリでスマホサイトの設計をする方法。 PCのCSS → SPのCSSの順になり、大きいサイズから小さいサ