Webエンジニアのブログ

MENU
  • HOME
  • WEB
  • 便利ツール
  • LIFE

CSSのinterpolate-sizeプロパティを使ったアニメーションの許可

CSSのinterpolate-sizeプロパティを使ったアニメーションの許可

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

2024/10/14|WEB

YouTube ショートなどの縦型動画をWebページに読み込む方法

YouTube ショートなどの縦型動画をWebページに読み込む方法

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

2024/10/06|WEB

JavaScriptのmatchMediaメソッドを使ったメディア判定

JavaScriptのmatchMediaメソッドを使ったメディア判定

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

2024/09/28|WEB

BraveブラウザのAI検索エンジン「Answer with AI」

BraveブラウザのAI検索エンジン「Answer with AI」

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

2024/09/20|便利ツール

CSSでのホバー時のスタイルの適用はany-hoverメディア特製で指定すると良い

CSSでのホバー時のスタイルの適用はany-hoverメディア特製で指定すると良い

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

2024/09/12|WEB

HTMLのfieldset要素とlegend要素を使ったフォームの装飾

HTMLのfieldset要素とlegend要素を使ったフォームの装飾

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

2024/09/05|WEB

CSSのsubgrid(サブグリッド)の使い方

CSSのsubgrid(サブグリッド)の使い方

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

2024/08/28|WEB

CSSの@propertyルールでカスタムプロパティを定義する

CSSの@propertyルールでカスタムプロパティを定義する

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

2024/08/22|WEB

Padletのホワイトボード機能「Padlet Sandbox」の使い方

Padletのホワイトボード機能「Padlet Sandbox」の使い方

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

2024/08/16|便利ツール

Threadsのブックマーク機能でお気に入りの投稿を保存する方法

Threadsのブックマーク機能でお気に入りの投稿を保存する方法

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

2024/08/10|便利ツール

≪ 1 2 3 4 5 6 … 57 ≫
  • バナー広告募集
  • 写真・動画素材 販売中!
  • 大容量無料ファイル転送サービス【ACデータ】

SEARCH

お探しのコンテンツはありますか

WordPress WebTool Google HTML CSS Webdev

PROFILE

Akira
AKIRA

元ボクサー、元トラックドライバーと不思議な経歴を持つ。 納豆はご飯と分けて食べるタイプ。
Ex-Boxer & ex-truck driver. Natto is best when eaten separately from rice.

プロフィール詳細
Bluesky
Threads
mixi2
Webエンジニア - Creator Channel

当ブログのLINE公式アカウントをフォローまたは友達追加していただくと、アカウントの投稿やLINE VOOMのタイムラインから手軽に情報にアクセスすることができます。

友だち追加



CATEGORY

  • LIFE
  • WEB
  • 便利ツール

人気記事

WindowsのVisual Studio Codeでコマンドプロンプトを利用する
WindowsのVisual Studio Codeでコマンドプロンプトを利用する
VSCodeの拡張機能「Minify」でCSSやJSファイルを圧縮・軽量化する
VSCodeの拡張機能「Minify」でCSSやJSファイルを圧縮・軽量化する
Photoshopでカンバスサイズを画像などのオブジェクトに合わせる
Photoshopでカンバスサイズを画像などのオブジェクトに合わせる
Gmailのメール返信でメールの内容を引用する時の引用符の付け方
Gmailのメール返信でメールの内容を引用する時の引用符の付け方
Google Chatの履歴をエクスポートする方法
Google Chatの履歴をエクスポートする方法

note RSS

  • これを知らないとまずい!生成AI時代のWebサイト制作・コンテンツ戦略で重要なポイント
  • 情報活用スキルが高い人(情報強者)は効率的にRSSリーダーを使っている?膨大な情報に溺れないための情報収集術
  • 電車での移動時間、有効活用していますか?自分のための時間の使い方
  • 「自己開示」と「自己呈示」とは?自分自身の情報の提供方法と信頼、そして偽りの危険性
  • 情報化社会で情報に翻弄されないためには!知っておくべき情報の特性と心の持ち方
  • 学生向け ご質問・お問い合わせ
  • Web制作に関する
    ご相談、ご依頼、お見積りは
    こちらから

    NUOVA SFIDA
  • ホーム
  • プライバシーポリシー
  • 広告掲載
  • お問い合わせ(外部サイト)

© 2016 Webエンジニアのブログ