Webエンジニアのブログ

より良いUI/UXを意識するのであれば、JavaScriptによるプログラムの実装もユーザーの環境に合わせることが求められますが、matchMediaメソッドを使うことでメディアクエリや表示領域のリサイズの判定、hover動作のデバイスの判...
続きを読む>>

Braveブラウザは、Brave SearchのアップデートによりAIツール「Answer With AI」が搭載され、検索に「AIアンサーエンジン」機能が追加されました。これによりBraveでもAIを活用した検索が可能となり、さらにはBr...
続きを読む>>

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

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

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

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

オンライン掲示板アプリのPadletの機能が拡張され、描画したものを手軽に共有できるPadlet Sandboxという機能が追加されました。共同作業ができるデジタルキャンバスとして、ビジネスや教育機関で便利に活用できるでしょう。ホワイトボ...
続きを読む>>

コミュニケーションツールでもあり情報収集ツールでもあるSNS。2023年7月にMeta社がリリースしたThreadsも、2024年には月間アクティブユーザー数が1億人を超え、日本でも多くの方が利用していることでしょう。 フォローしているユー...
続きを読む>>

昨今はプライベートでもビジネスでも、さまざまなSNSを使って情報を発信していくことでしょう。多くの方が複数のSNSでアカウントをお持ちですが、複数のSNSアカウントの管理にはBuffer（バッファ）というアプリの利用がおすすめです。 Buf...
続きを読む>>

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