font-size-rem.md font-size には rem を使うべきかどうかについての見解 結論 可能であればChrome の文字拡大機能をサポートするためにremを使用する。 ただし、実際にChrome の文字拡大機能を「極大」にして検証することが必須条件。これに時間的・労働的なコストを割けないのならpxを使用したほうがいい。 結論に至った背景 「font-size には rem を使いましょう」という教えが独り歩きしており、実際にChrome の文字拡大機能を「極大」にして検証していない人が多いため。 font-size だけ rem を指定すればいいという訳ではなく、文字拡大に伴ったレイアウトの変更に耐えうる設計とする必要がある。つまり、font-size だけでなく文字の拡大に依存する余白やサイズなどもフォントサイズを基準とした相対値(remやemなど)で指定する必

Webサイト制作者・スマホアプリ開発者向けに、iPhone,iPad,Apple WatchなどのAppleデバイスのスクリーンサイズ、各サイズを採用しているモデル、ノッチのサイズ、解像度、PPI、表示タイプ、比率、セーフエリア、ウィジェットのサイズなど、実装時に役立つ情報がまとめられたScreen Sizesを紹介します。2022年の最新モデル、iPhone 14シリーズ、iPadAir(5th Gen),Apple Watch Series 8をはじめ、最新機種から初代までの情報が網羅されています。 Screen Sizes サイトを利用するのは簡単、登録など面倒なことは一切不要です。 アクセスして、サイドバーから欲しい情報にアクセスするだけです。iPhone 14 Pro Maxは今までになかった新しい解像度ですね。

【2024年最新】LINE広告のバナーサイズ・入稿規定一覧 入札価格や予算を自由に設定できる運用型LINE広告のバナーサイズを見ていきます。LINE広告のことでお困りですか?経験豊富なプロが運用をサポートします。 デジマールでは、広告運用のプロフェッショナルチームが、貴社の目標に最適化された広告戦略を立案・実行します。 豊富な経験と徹底したデータ分析を駆使し、成果を最大化するための効果的な運用をお約束します。 広告パフォーマンスの向上を目指したい、または運用をプロに任せて効率化を図りたいとお考えの方は、ぜひ一度ご相談ください。 貴社の成功を、デジマールが全力でサポートします。LINE広告で利用できるバナーのサイズについて紹介します。LINE広告には、運用型と純広告(予約)型の2種類あります。今回は入札価格や予算を自由に設定できる運用型LINE広告のバナーサイズを見ていきます。 運用型の

【2024年最新】Facebook・Instagram広告の画像サイズ・テキストの要件を紹介 Meta広告(Facebook広告とInstagram広告)で利用できるバナーサイズ・テキストの要件をご紹介していきます。本記事では、Meta広告(Facebook広告とInstagram広告)で利用できるバナーサイズ・テキストの要件をご紹介していきます。 Meta広告では、様々なフォーマットで様々な配置に広告配信が可能です。Facebook上だけでなく、InstagramやMessengerへの広告配信も同じ広告プラットフォーム上で配信を最適化することが可能です。多くのことができるとその分、画像や動画のサイズや規定も増えていくため、「まず何を準備すればいいのか」「どのような規定があるのか」わからなくなってしまいます。 今回はFacebook広告およびInstagram広告で使うことのできる、画

GDNやYDNといったアドネットワークでディスプレイ広告を配信する時、なんと言ってもまずはバナーを用意しないと始まりませんよね。 もちろん配信先のネットワークごとに細かく入稿規定が決まっていますので、そのルールに沿ったサイズのバナーを準備しないといけません。 しかし、バナーサイズに関する規定を広告ネットワークごとにいちいち確認するのは、少し大変な作業ですよね。 そこでこの記事では、ディスプレイ広告の主な配信先ごとに、使用出来るバナーサイズを一覧でまとめてご紹介していきたいと思います。 バナー画像についての見落としがちな入稿規定も併せておさらいしていきますので、ぜひチェックしてみてください! 1.ディスプレイ広告のバナーにはどんなタイプがある? 始めに、ディスプレイ広告のバナーサイズにはどのようなタイプがあるのか、ざっと大まかに見ていきましょう。 下記は大まかな掲載イメージになります。 まず

iOSデバイス各種のSize Classチートシート 先日このブログで少し触れていたiOS Size Classについて、デバイスが沢山あって覚えきれないので、株式会社そらかぜさんの資料を参考にしながらチートシートを作成してみました。 かなり沢山の情報量なので1枚のシートにまとめようと思うとA3サイズになってしまいましたが、モニター画面で参照するのにはそれだとちょっと不便かも、ということで、A3サイズ1シートにまとめたものと、A4サイズ3ページに分けたものを用意しています。 プリントアウトして使う場合と画面での参照用途でお好きなのをご利用ください。 ▼ A3タイプ ▼ A4タイプ ・1ページ目 ・2ージ目 ・3ページ目 かなりニッチでマニアックな資料ですが、お困りの方の一助になれば幸いです。 ダウンロードは下記にて。

Few days ago,Apple introducediPhone 6 Plus. The newiPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this. 320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the scree

Adaptive なアプリを作ろうiPhone 6 / iWatch が発表され、iOS に新しい画面サイズのデバイスが仲間入りしました。おそらく今後も新しい画面サイズの iOS デバイスが登場してくるでしょう。このことから、各画面サイズに応じたアプリにすることはもはや必須要件と言えるでしょう。 このことはもちろんApple も考慮しており、iOS 8 から Adaptive という概念が導入されました。Adaptive とは適応性という意味です。つまり画面サイズが小さくても大きくても、それぞれの画面サイズにうまく適応させて設計していきましょうという考えかたです。 ということで、本稿では iOS 8 からのマルチサイズに適応させる方法について解説します。 Size Class これまでiPhone /iPad の判定や Portrait / Landscape の判定にはUIUs
![[iOS 8] マルチデバイス対応の新機能「Trait Collection」 | DevelopersIO](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f34de6d57437c5cfc77b749f99e4483a7a1702539%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fdevio2023-media.developers.io%252Fwp-content%252Fuploads%252F2014%252F06%252Fios81.png&f=jpg&w=240)
とあるお仕事で、iPad をサポート(= Universal 化)してほしいという要望があり、せっかくなのでiPhone 6 / 6 Plus (4.7 / 5.5 inch スクリーン)もサポートしようってことで、新しい Xcode 6 の新しい仕組みである Size Class を使って複数画面対応を行ないました。あと、同じく Xcode 6 から Asset Catalog でベクター形式がサポートされるようになったので、こちらもトライしてみました。 で、そのときに学んだ諸々の断片的なメモです。勘違いもあるかもしれないのでその際は優しくご指摘いただけますと幸いです。 ※ちなみに Size Class やベクター形式画像の使用は iOS 8 以上縛りではありません。単に Xcode 6 の新機能というだけなので。 Size Class の前提知識をつける 「Size Classsとは

► 2024 (10) ► 12月 (1) ► 11月 (3) ► 10月 (1) ► 9月 (1) ► 6月 (1) ► 3月 (2) ► 2月 (1) ►2023 (6) ► 12月 (1) ► 7月 (1) ► 5月 (1) ► 4月 (1) ► 3月 (2) ►2022 (17) ► 12月 (2) ► 11月 (3) ► 9月 (2) ► 8月 (2) ► 7月 (2) ► 5月 (2) ► 4月 (2) ► 3月 (1) ► 2月 (1) ► 2021 (46) ► 12月 (2) ► 10月 (1) ► 9月 (1) ► 8月 (3) ► 7月 (2) ► 6月 (5) ► 5月 (12) ► 4月 (7) ► 3月 (5) ► 2月 (7) ► 1月 (1) ► 2020 (44) ► 12月 (6) ► 11月 (5) ► 10月 (1) ► 9月 (1) ► 8月
フォントサイズを指定するとき、「em」、「%」、「px」を使って指定することが多いと思いますが、CSS3から利用可能になった「rem」という新しい単位について、指定方法など調べてみました。 「rem」とは、「root」+「em」という意味で、 root要素(html要素)に対して相対的にフォントサイズが指定できます。 「em」や「%」などの従来の相対指定と違って、親要素を継承しないという特徴があり、 入れ子にするとどんどん拡大、縮小されてしまったり、指定に細かな計算が必要だったりすることもありません。 常にroot要素に対して「何倍」という使い方ができるので、指定の仕方が非常にわかりやすく、便利です。 下記のように、htmlに「font-size: 62.5%;」を指定しておくと、「10px = 1rem」となるので、 px単位で計算ができます。html { font-size: 62

寡聞につき、rem(rootem)なんてフォントサイズの単位があるのを今まで知りませんでした。 ちょっと興味を持って調べてみたところ、結構使えそうなテクニックだったのでご紹介したいと思います。 rem (rootem) というのは、「ルート要素(典型的にはhtml要素)に対する相対的なフォントサイズの単位」です。 従来のemは、親要素に対して相対的なフォントサイズの単位でした。そのため、要素の出現位置次第でフォントサイズが変わってしまうことも多く、使いにくい場面も多々ありました。 他にもフォントサイズの指定方法には、ピクセル(px)を用いたものがあります。が、特に今は様々なスクリーンサイズを意識しなくてはならない時代。スクリーンサイズの小さいデバイスでは全体的なフォントサイズを同時に大きくしなければならないこともよくありますが、pxを使用していると、メディアクエリなどを使ってあらゆるフ
おにゅーなAndroidUI情報サイト、「Android Design」のアイコン情報のページがpxで書いてなくて微妙に不親切な気がしたので、px単位でのメモ。Android Design:Iconography http://developer.android.com/intl/ja/design/style/iconography.html Material Design対応(Android 5.0から)時に前述のサイトは404になった(URLマッピングがうまくいってない?)模様なので、以下のページを参照する必要があります。 Material Design Style > Icon http://www.google.com/design/spec/style/icons.html <4.4以前との差分> ・Launcher等で使われる48dpのProduct Iconと、Acti
FINDJOB! 終了のお知らせ2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ

“The 44-pixelblock is, in many ways, the basic unit of measurement for theiPhone interface, establishing the visual rhythm of manyiPhone apps. That metric is significant as the recommended minimum size to make a tap target (like a button or listitem) easily and reliably tappable.” The quote above is taken from Josh Clark’s book Tapworthy, an authoritative book oniPhoneUI design.Apple’s Mobi
iPhone・iPadアプリを制作する時、リソース画像は ① 従来のディスプレイ用 ② Retina ディスプレイ用 上記の2種類が必要ですね。Androidアプリも同じようにdpiごとにリソース画像を用意する必要があります。 今回は 1. 必要となるリソース画像サイズの種類 2. デザインする時の画面サイズ 3. アイコンサイズのガイドライン などAndroidアプリのリソース画像を作る時に役に立つ情報をまとめてみました。 必要となるリソース画像サイズの種類Androidアプリのリソース画像は対応するdpiによって用意する画像サイズが変わります。 まず、dpiって何でしょう。 dpiは『Dot Per Inch』、1インチ辺りのピクセル数を意味します。つまりdpi数値が高くなるとディスプレイが鮮明できれいになります。 dpiは主にldpi(低解像度)、mdpi(中解像度)、hdpi(

リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く