Webエンジニアのブログ

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

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

JavaScriptで配列でデータを管理して扱っていく中で、配列に格納されている文字列から、対象の文字列が含まれているかどうかを判定したい場合は、some()メソッドがとても便利です。引数に指定したコールバック関数で評価を行うので、複数のオ...
続きを読む>>

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

Pythonプログラムなどで何かの作業を自動化する時には、コマンド操作でファイルを実行していくことになりますが、バッチファイルを用意しておくとコマンド操作の手間を省くこともできます。ここでは、WindowsやMacのバッチファイル（シェルス...
続きを読む>>

CSSでのスタイルの調整には様々な方法がありますが、Webブラウザのサポートが進むコンテナスタイルクエリ（Container Style Queries）も、新しい記法として使えそうです。コンテナスタイルクエリで親要素のスタイルに基づいて定...
続きを読む>>

Pythonの開発はライブラリを使っていくことが多いので、開発に必要なライブラリをインストールしたり、複数のライブラリを管理していくことはよくあります。ここでは、Pythonのライブラリをインストールする方法についてご紹介します。...
続きを読む>>

Python開発を進めていく中で、セキュリティ面での向上や利用できる構文や機能が新しく追加されたりするので、より最新のバージョンを利用していきたいところです。ここでは、WindowsやMacで最新バージョンのPythonを利用する方法から、...
続きを読む>>

Webページのコンテンツで関心を引かせたり効果的に情報を伝える場合には、そのコンテンツを強調させることが必要になります。CSSでは様々なアニメーション関連のプロパティを使うことで、CSSのみでWebページのスクロール時に関心を引かせたいテキ...
続きを読む>>

WebブラウザのSafari 17.4から、type属性がcheckboxのinput要素にswitch属性を指定することで、簡単にスイッチUIを実装することができます。ここでは、switch属性を適応させたスイッチUIの実装と、デザインの...
続きを読む>>