CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる
Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。 今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
これで解決！height: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック
iOSのスマホでheight: 100vh;を定義してビューポートの高さいっぱいに表示したいのに、アドレスバーが表示されているとその分下が隠れて表示されてしまい、高さいっぱいにならないのを解決する方法を紹介します。 CSSのみのテクニックで、JavaScriptは必要ありません。 height: 100vh;だけでなく、min-heightやmax-heightでも機能します。 PostCSS 100vh Fix -GitHub PostCSS 100vh Fix 注意点 使い方 PostCSS 100vh Fix PostCSS 100vh Fixは、100vhのiOSの挙動（バグ？）を修正するPostCSSのプラグインです。ピュアCSSのソリューションで、JavaScriptは必要ありません。 高さいっぱいに表示したい時に、height: 100vh;だけを定義してもiOSでは期待通り
iPhone の Safari で文字サイズが勝手に大きくなる時の対処方法 - by Takumi Hirashima
iPhone の Safari で文字サイズが勝手に大きくなる時の対処方法を紹介します。 iPhone の Safari で文字サイズが勝手に大きくなる原因 Safari で文字サイズが勝手に大きくなる時の対処方法 iPhone の Safari で文字サイズが勝手に大きくなる原因 iPhone の Safari では、文字サイズを自動で調整する機能が働いて、意図しない箇所で文字サイズが変わってしまうことがあります。 Safari で文字サイズが勝手に大きくなる時の対処方法 文字サイズが勝手に変わらないようにするためには、css スタイルの -webkit-text-size-adjust を適用することで、指定した箇所の文字サイズが勝手に変わらないようにします。 例えば、iPhone の Safari で文字サイズを勝手に変えないようにするには、次のコードを該当箇所に追加します。 bod
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
【スライス不要】Photoshop画像アセット生成の基本とつまずきがちな5つのコト | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
独学でつまずいていませんか？ Photoshopの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGではWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。詳細を知りたい方は、ぜひスクールの詳細をチェックしてみてください！ →スクールの魅力が分かる資料はこちら！（資料請求） スライスせずに書き出せるPhotoshopの「画像アセット生成」って？ 画像アセット生成とは、ファイルのレイヤーやレイヤーグループのコンテンツからJPEGやPNG等の画像アセットを生成するという、スライス作業を不要とする機能です。PhotoshopCCから実装されている機能で、CC2014以降は画像に加えてSVGの書き出しも可能となりました。 普段からコーディングもしているデザイナーさんは効率化のために早くから使ってい
display:table-cellでwidth:100%に設定したいとき
2014年12月5日に作成されたページです。 情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。 全件リストはこちら。 どもです。 久々の連続更新(ﾟ∀ﾟ) 要素を手っ取り早く上下中央揃えにしたいとき、親要素のdisplayをtable-cellにするのが楽ちん。 でも、display:table-cellはwidth:xx%が効かない罠。 親要素のwidthが決まっている場合、width:inherit;（親の数値を引き継ぐ）でイケる。 まぁ、親要素が決まってるならそのpx書けば良いだけだけど、その変動も考えるとinheritのが堅実。 しかし親要素もパーセンテージ指定だったら…。 width:想定される最大pxより大きな数値;でイケた。ちょっと驚いた。 どうやらtable-cellには親要素を絶対にはみ出ないという原則があるようだ。
Androidでつまずいたバグについてのまとめ
こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかってしまったことがいくつかあったのでメモです。 <p>要素が指定した幅に広がらない 原因はおそらくその時のviewportの指定の仕方です。 例えば<p>要素が『100%』としても横幅いっぱいに広がらず、勝手に折り返しされてしまうことがありました。 対策としては『background』の要素を指定してあげると指定したサイズになりました。 背景が白い要素でしたら『background:#FFFFFF;』などを指定してあげるとよいです。 ただ、背景色を付けられないという場合もあるかと思います…。今回の私がそうでした。 なるほどと思ったのは『透過した画像をおく』ということでした。 今回私は透過pngを置いて何とか回避できました。 もしかしたら背景に要素を置いただけではうまく表示できない可能性もあるのですが、その時はサイズも指
CSSで背景100％表示で切れる時の解決方法｜ヨシキミナトヤ.COM
背景横100％で表示すると背景が切れる 背景色でも背景画像でもブラウザ横100％で表示する事は普通にあると思います。 背景の上にそのままコンテンツを展開する場合は問題ないのですが、 中に「width固定」を入れると、ブラウザの横スクロールが出るまで縮めてスクロールすると、 背景が切れている場合があります。 なぜでしょうねぇ。検証します。
スマホサイト制作時の困った！iPhoneでフォントサイズが勝手に拡大されてしまうのを防ぐ方法。
メディアクエリを使ってコーディングをしていたのですが、iPhoneで見ると一部のフォントサイズが拡大されてしまう現象に遭遇。（SafariもChromeも） しかも、画面が縦位置の時は何ともないのに、横位置で見たときだけ。 CSSをどういじってもダメで半べそになりながらも無事に解決したので、よろこびのエントリー。 目次 CSSにコードを追加で解決！なぜ-webkit-text-size-adjust: 100%;なのか？実機確認て、やっぱり大事可読性かデザイン性か… CSSにコードを追加で解決！ はじめに結果だけ書いてしまうと、CSSに body { -webkit-text-size-adjust: 100%; } と記述することで解決しました。 なぜ-webkit-text-size-adjust: 100%;なのか？ -webkit-text-size-adjustは文字通り、テキス
[jQuery]Google Chromeで画像のwidthやheightがうまく取得できない場合の対処方法
jQueryでimg要素のwidthやheightを取得するコードがIEやFirefoxではうまく動きますが、Google Chromeではうまく動かない現象に遭遇しました。その場合の回避方法です。 下記のコードはidにtargetが指定された要素のwidthとheightを取得するコードです。IEやFirefoxでは想定通りに動きますが、Google Chromeでは想定通りに動きません。 [javascript] $(function(){ var w = $(‘#target’).css(‘width’); alert(w); }); [/javascript] jQueryの$()はDOMの読み込みが完了後に実行されるはずですが、画像の読み込みについては別なようなのです。ですが、jQueryのbindメソッドを使うことで画像の読み込みを待つことができます。 [javascript]
『$(window).height()』
<script> var MSIE =/*@cc_on!@*/false; if(MSIE){ H =document.documentElement.clientHeight; }else{ var H=innerHeight; } </script> スピード判定もしてみた http://jsperf.com/innerheight-vs-window-height/2 jQueryはごみのように遅いです＼(^o^)／ IE判定は９と１０がどう判定されるのか 謎なのでよくわかりませんー IEは６、７は当たり前ですが無視してます ↓以下過去の文↓ 最近はこまごましたネタばかり jQueryでウィンドウの高さなりをとろうとすると $(window).height() ですむけれど これなんでjQuery通すんだ？ いっぱつでとれそうだ！ と思っていろいろ調べてみたら クロスブラウザ処理が超
HugeDomains.com
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
[AS3] Vectorインスタンスには長さを定めた方がよい
投稿者：野中 文雄 | 投稿日：2011.02.13 | [AS 3][ActionScript][Tips][野中ゼミ] Adobeのドキュメント「VectorクラスとArrayクラス」は、Vectorインスタンスには予め長さ(Vector.lengthプロパティ)を定めた方がパフォーマンスはよいと説明します。ただ、日本語の意味がわかりにくいように思われます。 Vectorのサイズが時間よりも先に指定されない場合、Vectorの容量が不足すると、サイズが増えます。Vectorのサイズが増えるたびに、メモリの新しいブロックが割り当てられます。Vectorの最新の内容がメモリの新しいブロックにコピーされます。データを余分に割り当てて複製することにより、パフォーマンスに影響があります。 英語の原文はつぎのとおりです。Vector(インスタンス)の"size"というのは、コンストラクタメソッドの
![[AS3] Vectorインスタンスには長さを定めた方がよい](https://cdn-ak-scissors.b.st-hatena.com/image/square/a092edc21fa668dd8fd9d4117d5f1ea7812f16d6/height=288;version=1;width=512/http%3A%2F%2Ff-site.org%2Fogp_2013.jpg)
[CSS]横スクロール時にヘッダやフッタが切れてしまう時の解決方法
ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。 How to Resolve a Fluid Header/Footer Problem When the Window is Resized デモページ（不具合版） ※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして） この現象が起きる条件は下記のようになります。 ヘッダとフッタのサイズは指定されていない。 →横いっぱいに広がる。 コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。 ブラウザのサイズはコンテンツエリアのサイズより小さい。 →ブラウザに横スクロールバーがでる。 期待される表示は、下記のようにコンテンツが中央
USBメモリ：容量4Gバイトのはずが250Mバイトの時に「SDフォーマッター」！
USBメモリに、話題のChromium OSなんかをインストールしてひとしきり楽しんだ後、メモリとして使おうとしてWindowsでフォーマットすると、容量がずいぶん少なくなってしまった。なんて経験ありませんか？ 例えば、容量4Gバイトのはずが、250Mバイトくらいの容量しか使えない。といった感じです。 「まっ。使えるから良いか」なんて諦めず、パナソニックが配布している「SDフォーマッター 2.0」（Windowsのみ対応）を一度試してみて下さい。 SDフォーマッター2.0は、SDカードをフォーマットする用途で配布されていますが、私（傍島）が確認した限りでは、USBメモリをフォーマットしても問題ないようです（全て確認してわけではないので、使用する場合は、自己責任でお願いします）。 やっぱり心配だ！ という方は、PCに装着した時に飛び出しが少ない小型のUSBメモリの中身は、microSDとUS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ツクメモ - ウェブやアプリをツクるヒトのメモ