Webエンジニアのブログ

CSSで「interpolate-size: allow-keywords;」を指定することで、widthのauto、min-content、max-contentなどの値をCSSアニメーションに適用することができます。これによりCSSのみ...
続きを読む>>

YouTube ショートやHTMLのvideoタグなどで縦型動画を読み込む場合、そのまま埋め込みコードを読み込んでもレスポンシブWebデザインに対応していないので、CSSでアスペクト比の調整などが必要になります。ここでは、YouTube シ...
続きを読む>>

CSSの:hover擬似クラスを利用したhoverアクションの実装は、モバイルデバイスでは予期せぬ動作を起こすことがあります。ここではhover関連のメディア特性を利用してhoverが動作するデバイスを判別し、hoverが動作するデバイスに...
続きを読む>>

Webサイトにはお問い合わせフォームや登録フォーム、ログインフォームなど、フォーム部品を構築することはよくありますが、HTMLのfieldset要素やlegend要素を使うことで、手軽にフォームを装飾することができます。...
続きを読む>>

HTMLとCSSでコンテンツの横並びを実装するCSS Gridでは、subgrid（サブグリッド）を使うことで手軽に横並びレイアウトの要素の中の高さを揃えることができます。ここではCSSのsubgridの使い方を、カード型レイアウトを...
続きを読む>>

CSSの@propertyルールを利用することで、CSSのカスタムプロパティの定義において、プロパティの型や既定値の設定、プロパティが値を継承するかどうかなど、厳密な定義ができるようになります。...
続きを読む>>

HTMLのvideo要素で動画を扱っていく場合、ファイルサイズの大きい動画データは読み込みに時間がかかるため、Webページのパフォーマンスに影響を与えます。ここでは、video要素で動画データを遅延読み込みする方法について、コントロールパ...
続きを読む>>

HTMLのvideo要素で動画を扱う際に、複数のメディアリソースを指定できるsource要素で動画を読み込み、media属性でメディアクエリを指定することで、画面幅に応じて読み込む動画を切り分けることができます。ユーザーが利用するデバイスに...
続きを読む>>

高品質でファイルサイズの小さいWebP形式の画像は、アニメーションにも対応していますので、アニメーションWebPとしてもコンテンツで利用していくことができます。利用用途は様々ですが、動画バナー広告としても活用できるでしょう。ここでは動画をア...
続きを読む>>

HTMLのvideo要素では、動画の読み込みの記述で動画ファイルの末尾にパラメータを追加することで、動画フレームをサムネイル画像として設定することができます。JavaScriptでコントロールする必要が出てくる場合もあるので、スクリプトでの...
続きを読む>>