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でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじ
レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法
Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。 Thinking About The In-between Design Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブにおける中間のデザイン 中間のデザインとは 中間のデザインに備えて
Vvverb.js - ドラッグ&ドロップでWebサイトを作成 MOONGIFT
かつてはWebサイトを構築する際にオーサリングツールを使うのが当たり前でしたが、最近ではUIフレームワークが出てきたり、CSS3の多機能性によってHTMLを手打ちすることも増えてきました。とはいえ、簡易的な内容であればオーサリングツールを使った方が簡単でしょう。 そこで使ってみたいのがVvverb.jsになります。ドラッグ&ドロップでWeb UIが作成できるソフトウェアです。 Vvverb.jsの使い方 メイン画面です。左側にコンポーネント、中央が編集画面です。 コンポーネントを選ぶと右側にプロパティが出ます。 テンプレートは幾つも用意されています。 デスクトップだけでなく、スマートフォンサイズも確認できます。 Vvverb.jsは多彩なコンポーネントが用意されており、大抵のニーズは満たせるのではないでしょうか。アンケートフォームを作ったり、ユーザベースでページを作る、Webサイトのモック
CSS Abuse
It’s all about CSS. All authors here either forgot to use JavaScript or they had disabled it in their browser and can not enable it back again; so they had to finish the job using only pure CSS. Cube Pack I thought those cubes are a 3D work, but as the author said “he forgot to use THREE.js” and it’s all pure CSS. What I really like here is how cubes cast shadows and reflect light, made it feels l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MUSUBii
「出会えたことに感謝したいCSSベスト3」まとめ
