Webエンジニアのブログ

「AIでWebデザインやプログラミングの学習は無駄になる？」そんな不安を現役エンジニアが解決します。実はAI時代だからこそ「基礎スキル」の価値は高まります。学習を続けるべき理由と、AIを使いこなし価値を高める人材になる方法について解説します...
続きを読む>>

YouTube動画の埋め込みやHTMLのvideo要素で設置した動画は、そのままで価値を伝えることはできません。動画の「構造化データ」で動画SEOとAIOを強化し、Webページも含めてAIに選ばれるコンテンツにする方法を具体的に解説します。...
続きを読む>>

Web制作では、必要に応じてテーマカラーに合わせてWebデザインを作っていくこともありますが、Webサイトの作りによっては、JavaScriptでダークモードとライトモードの切り替えを行う必要も出てきます。JavaScriptではmatch...
続きを読む>>

Webサイトのデザインでは、キャッチなフレーズなどのテキストにアニメーション効果を加えることで、より強く記憶に残りやすくなり情報の理解も深まります。ここではJavaScriptを使ってフェード効果のアニメーションで、テキストを1文字ずつ表示...
続きを読む>>

Webサイトのデザインで、要素に対して固定された幅でCSSなどのスタイルを指定してしまうと、コンテンツ量が想定以上に多くなった際に、レイアウトが崩れてしまうという問題が発生しますが、JavaScriptを活用することで、変動するコンテンツ量...
続きを読む>>

外部サービスを埋め込む際、JavaScriptで生成される動的なリンクには、同じタブでページを開く仕様のものがあります。もしもアフィリエイトのかんたんリンクなどでは、各サービスへのアクセスは別タブで開く仕様となりますが、JavaScript...
続きを読む>>

Webページで動画コンテンツを強調し、ユーザーに視聴してもらいたい場合、画像を強調する際によく活用されるモーダルウィンドウ（ポップアップ）で表示するデザインが有効です。モーダルウィンドウの動作の流れを考えると、意外と手軽にJavaScrip...
続きを読む>>

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

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

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