#Introduction Apple introduced the Liquid Glass effect during WWDC 2025 in June—a stunning UI effect that makes interface elements appear to be made of curved, refractive glass. This article is a hands‑on exploration of how to recreate a similar effect on the web using CSS, SVG displacement maps, and physics-based refraction calculations. Instead of chasing pixel‑perfect parity, we’ll approximate
9月17日、AppleはSafari 18.0をリリースした。iOS 18、iPadOS 18、macOS Sequoia、そしてvisionOS 2と共に、53の新しいウェブプラットフォーム機能、25の非推奨機能、そして209の修正が加えられた。このリリースでは、特にCSS、HTML、JavaScriptの新機能に注目すべき点が多く、Webエンジニアにとっては重要なアップデートである。 Safari 18.0における新機能 1. Distraction Control Safari 18では「Distraction Control」が導入された。この機能により、ウェブ閲覧中に表示されるサインインバナーやクッキー通知、ニュースレターのサインアップオーバーレイなど、煩わしい要素を非表示にできる。Distraction ControlはiOS 18、iPadOS 18、macOS Sequoi
CSSの設定で、”overflow: auto” や”overflow:scroll”を指定したとき、 iPhoneでそこを表示すると、要素のはみ出した部分は隠れた状態となり、 スクロールは可能なのですが、スクロールバーが表示されません。 そのままでは、そこがスクロール可能であるということがわかりづらく、 サイトとして使いづらくなってしまう可能性が高くなります。 なんとか解決策はないかと探していたところ、 Webkitを使ったブラウザでは、CSSの疑似要素を使って、スクロールバーをデザインすることができることがわかりましたので、 その方法についてご紹介いたします。 ↓こちらがデモです(ChromeもしくはSafariにてご覧下さい) DEMO 方法 スクロールバーの中でデザインすることができるのは、スクロールバー本体・スクロールバーの動く部分・角それぞれのwidthとbackgroundと
infoScoopをタブレット対応させる際に、iFrame絡みのクロスブラウザ対策でハマったので、そのあたりの対策について紹介したいと思います。 サポートブラウザ 今回サポート対象となったブラウザ（OS）は以下になります。 Safari（iOS） Android Browser（Android） IE（Windowsタブレット） DOCTYPE宣言 HTMLの記述の前に、まずはDOCTYPE宣言です。 以下はHTML5のDOCTYPE宣言になります。 <!DOCTYPE HTML> 現状では何も宣言しないとブラウザのレンダリングモードは互換モードが選択されます。 また、互換モードに比べて標準モードの場合は記述が厳格になることもあり表示速度の向上も期待できます。 なので、モバイル向けにWebページを作成する際にはHTML5のDOCTYPE宣言をするようにしましょう。 iOSのiFrameにお
最近ではスマートフォン対策されたサイトが増えてきており、自分もスマホ対策を行ってます。 そんなスマホ対応していてiPhone（正確にはiPod touch）で確認してみたら特定のエリアだけ文字サイズが妙に大きくなっている現象があり、ちょっと（実際にはかなり）ハマったので備忘録的メモ。 メディアクエリを使ってウィンドウサイズによってスタイルシートを分けてるんですが、PC環境とiPhoneを縦で見ると問題ないのに何故か横にした時だけフォントが大きくなるという現象が発生。 cssを色々書き換えてもどうしても直らずレイアウトから変えなきゃいかんのか…と悩んでいたら、どうやらiPhoneでは自動でフォントサイズを調整してくれる機能があるらしいです。で、それを解除するにはCSSのbodyにでも以下を加えるだけ。 -webkit-text-size-adjust: none; これで無事解決。 でもAn
少しのコードで実装可能な15のスマートフォンサイト用小技集スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ スマートフォンサイト用小技集 目次いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントを iPhone などに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる文字サイズの自動調整をオフリストのクリック（タップ）範囲を広げる画面の幅にあわせて CSS を変えるリンクテキストのある Div 全体をクリック（タップ
2017年6月29日 Webサイト制作, Webデザイン, 便利ツール iPhone持ってないくせにWebクリエイターボックスをiPhoneで見やすいよう改良しました。iPhoneからhttp://webcreatorbox.comにアクセスすると自動的にhttp://webcreatorbox.mobify.meにリダイレクトされます。（されてなかったら直接http://webcreatorbox.mobify.meからドウゾ…）今回は下記に説明するmobifyというサイトからiPhone用サイトを作りましたが、他にも便利な方法があったので紹介してみます。 ↑私が10年以上利用している会計ソフト！ 1. CSSのみで切り替える iPhone用に作成したCSSを作り、デバイスの幅によって使用するCSSを切り替えます。 &amp;amp;amp;amp;amp;lt;link rel
WordPress のiPhone Safariからの閲覧を最適化してくれる「WPtouch」というプラグインを利用して、WordPressのiPhoneビューを作っている方は非常に多いかと思いますが、先ほどAppBankでちょっと手を入れたのでそのご紹介。 スクリーンショットの大きさによって画面内ががたがたになっていて見にくかったので、CSSをちょっと手直ししたところPCでの閲覧とほぼ同じ状態にできました。特に2つの画像を横に並べてきれいに表示したい！と思われている方はこの方法で解決できると思います。紹介します。 WPtouchのCSSカスタマイズ事例 さて、「WPtouch」を入れると下記のような閲覧画面になります。 WPtouchは月ごとに日付の部分のアイコンの色が変わったり、コメントが付いていればコメントの件数を記事一覧ページに表示してくれたりと、非常にすぐれたiPhoneビューを
why the iPhone? Creative mobile web design is here, and it can be tough searching the web for inspiration when you need some. You never know if a site has a mobile [iPhone] alternative, and if they do you either have to use your phone to find it, or take a stab at what the sub-domain is: m, iphone, mobile, ect.. CSSiphone.com is dedicated to helping you find your iPhone inspiration. about this sit
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
