Webエンジニアのブログ

デジタルホワイトボードのFigJamは、デザインツールのFigmaに付属している機能で、Figmaも含め基本、無料で利用することができます。ここでは、様々な用途で便利に活用できるデジタルホワイトボード「FigJam」の使い方について簡単にご...
続きを読む>>

デジタルホワイトボードのFigJamは、ホームページやブログなどのWebサイトに埋め込むことができます。ここでは必要なコードの読み込みだけでなく、レスポンシブWebデザインに対応する方法も合わせてご紹介します。...
続きを読む>>

iPadなどモバイルデバイスの画面を共有して何かを説明する場合は、同じアカウントで同時にWeb会議に参加することで、PCでWeb会議を進行しつつ、必要に応じてモバイルデバイスの画面を共有して会議を進行することができます。ここでは、PCのWe...
続きを読む>>

Photoshopの生成AI機能を利用することで、画像のアスペクト比（縦横比）を崩して縦幅や横幅を拡張した画像を生成したり、画像内にオブジェクトを追加または削除したりできます。ここでは、Photoshopの生成AI機能の「生成拡張」と「生成...
続きを読む>>

Google ChromeやMicrosoft Edge、Firefoxなど、多くのWebブラウザでYouTube動画やHTMLのVideo要素のスクリーンショットを撮ることができます。フルHD/WQHD/4Kなど動画の画質によっては、高解...
続きを読む>>

CSSの@scope規則を利用することで、参照する範囲を指定してスタイルを適用させることができます。これまでの階層構造でのセレクタの指定、ほか属性やid、classでの指定とはまた違った、ピンポイントでスタイルを適用させることが可能になりま...
続きを読む>>

CSSの@starting-style規則を追加することで、トランジションでの変化前のスタイルを適用させることができ、Webページのアクセス時にトランジション処理を実装することができます。ここでは、CSSの@starting-style規則...
続きを読む>>

Googleアナリティクスを活用してWebサイト全体のアクセス状況を把握する中で、どのページからどこの外部サイトに移動したのかを計測したいこともあるでしょう。ここでは、Googleアナリティクスのデータ探索機能を活用して、外部サイトへのリン...
続きを読む>>

HEICの画像ファイルフォーマットは、高度な圧縮アルゴリズムによって高品質を維持したままファイルサイズを削減できます。JPEG形式の画像と比べても品質は変わらず、Webパフォーマンスを意識するのであれば、HEIC形式の画像もホームページやブ...
続きを読む>>

Webでは様々なフォーマットの画像が利用でき、よく使われるところでいくとJPEG、PNG、GIF、WebPなどがあります。最近ではiPhoneやiPadのカメラで撮影した画像のフォーマットが、設定によってはファイルの拡張子が「.heic」と...
続きを読む>>