企業概要

X MediaはX SIGHTのブログプラットフォームであり、広範な愛好者により興味深いコンテンツを提供することを目的としています。

X SIGHTは、ミニマルでありながら印象的なデザインを追求する情熱を原点とし、10年以上にわたり実績を積み重ねてきたクリエイティブデザインスタジオです。デザイナー、開発者、ストラテジストなど多様な専門性を持つメンバーが、未知を探求する力を信じ、大胆なアイデアを具体的な成果へと導きます。私たちが掲げる「無限の可能性」という理念のもと、革新的なソリューションを提供し、未来のデジタル世界を形作ることに挑戦し続けます。

テクノロジー

Gmailがパスワードから卒業する日──次世代ログイン体験「パスキー」とは？

GoogleはGmailのパスワード廃止を本格化し、パスキーとQRコードによる次世代ログイン体験へと移行中。本記事では、その背景とパスワードが不要になる時代の変化をわかりやすく解説します。

Gmailがパスワードから卒業する日──次世代ログイン体験「パスキー」とは？

PHPでMySQLのバージョンを確認する方法

PHPを使ってMySQLのバージョンを取得する方法には、mysqli_get_server_info()、PDO::getAttribute()、および SELECT VERSION() という3つの一般的な方法があります。それぞれの方法でMySQLへの接続が必要です。

PHPでMySQLのバージョンを確認する方法

スクロールに応じてアニメーション！jQueryで要素にクラスを追加する方法

jQuery を使ってページのスクロールイベントを監視し、特定の位置に到達した際に要素へ指定したクラスを追加することで、CSS アニメーションを利用した「要素の登場アニメーション」を実現できます。これはウェブデザインでよく使われる手法で、ページのインタラクション体験や視覚的な魅力を高める効果があります。

スクロールに応じてアニメーション！jQueryで要素にクラスを追加する方法

JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる

本コードは典型的なモバイル用サイドナビゲーションの実装例です。ボタンによる表示切替と、メニュー外クリック検知を組み合わせることで、ユーザー体験を向上させています。さらにESCキーでのメニュー閉鎖も可能にし、アクセシビリティも配慮しています。

JavaScriptでナビゲーション以外の場所をクリックしたらナビゲーションを閉じる

日本語用WebサイトのCSSフォント設定（日本語フォント／游ゴシック／游明朝）

日本語フォントはOSにより異なるため、複数のフォントを優先順に指定する。 "Yu Gothic"や"Yu Mincho"はモダンな日本語フォントでWindows 8.1以降に搭載。 "ヒラギノ角ゴ"や"ヒラギノ明朝"はmacOS向けで、高品質。 "メイリオ"や"MS 明朝"などは古いWindows環境にも対応。ゴシック体はカジュアル・読みやすさ重視、明朝体はフォーマル・高級感重視に適している。

日本語用WebサイトのCSSフォント設定（日本語フォント／游ゴシック／游明朝）

CSS3 object-fit 属性浅析示例

object-fit は、画像や動画などの置き換え要素が、その親要素の枠内でどのように表示されるか（サイズ調整やトリミング）を指定するCSSプロパティです。 CSS3のobject-fit属性の簡単な解説 object-fit は、置き換え […]

CSS3 object-fit 属性浅析示例

相対パスと絶対パスの使い方

相対パスは、モジュールやディレクトリ内のローカルな参照に適しており、柔軟性があります。一方、絶対パスはウェブサイト全体で共通のリソース（CSS、画像、CDNなど）を参照する際に便利です。両者を理解して使い分けることで、パスのエラーや読み込み不具合を防げます。

相対パスと絶対パスの使い方

inputのプレースホルダー（placeholder）の色を変更する

プレースホルダーの色は::placeholder疑似要素で変更可能 IEやEdgeなどの古いブラウザ向けに:-ms-input-placeholder、::-ms-input-placeholderを併用 Firefoxでは透明度の調整のためopacity指定が推奨される

inputのプレースホルダー（placeholder）の色を変更する

CSSによる絶対中央寄せ

実用性が高い方法順で7種類の実装方法を紹介最も推奨されるのは Flexbox と Grid transform を使う方法はどんな要素にも応用可能 line-height や table-cell は特定用途向け JavaScript による制御も紹介されている

CSSによる絶対中央寄せ

2025年のWeb制作 × AI活用の最前線｜実務で使えるAIテクノロジーと現場導入ガイド

2025年のWeb制作業界は、AI技術の導入によって大きな変革を迎えています。生成AIやRAG、ノーコードツールを活用することで、デザイン・コーディング・SEO・運用まで大幅な効率化が実現。現場の生産性向上だけでなく、“人にしかできない体験設計”の重要性も高まっています。本記事では、AI時代における最新のWeb制作ノウハウと具体的な実践ポイントを徹底解説。今後のトレンドや現場Tipsも紹介します。

2025年のWeb制作 × AI活用の最前線｜実務で使えるAIテクノロジーと現場導入ガイド

SafariでGoogleフォントが正しく表示されない原因と対策【font-weight・font-style完全ガイド】

SafariやiOSでGoogleフォントが正しく表示されない主な原因と対策を徹底解説。font-weight・font-styleの指定ミスによるWebフォント崩れを解決するCSSサンプル付きガイド。

SafariでGoogleフォントが正しく表示されない原因と対策【font-weight・font-style完全ガイド】

scroll-behaviorで平滑スクロール、一行でいけるんだ

一般的に、アンカーリンクをスムーズにスクロールさせる時、JavaScriptやjQueryで実装することが多いです。例えば、でも実は、CSSだけでもできるんです。そのためのプロパティがこちら：これを書くだけで、リンクをクリックした時にス […]

メモ・ノートスケ

scroll-behaviorで平滑スクロール、一行でいけるんだ

Facebookがウェブページを開いたときに自動でFacebookアプリを起動し、指定したユーザーのページを開く方法

このチュートリアルでは、ウェブページからFacebookアプリを自動または手動で起動し、指定したFacebookページを開く方法を紹介しています。ページIDの取得方法、iPhoneとAndroidで異なるリダイレクト方法、リンクによる手動遷移の実装例を説明し、最後にクライアント判別を含むサンプルパッケージも提供しています。Facebook誘導やモバイルUX改善を目指す方におすすめです。

Facebookがウェブページを開いたときに自動でFacebookアプリを起動し、指定したユーザーのページを開く方法

PHPでランダムIDを生成するランダムな文字列を生成する

このPHPコードは、セキュリティ重視のWebシステムに必要な「予測不可能な」ランダムトークンを生成するために設計されています。openssl_random_pseudo_bytes() を使うことで、一般的な rand() や mt_rand() よりも格段に安全なランダム性が確保されます。

PHPでランダムIDを生成するランダムな文字列を生成する

【jQuery】フルスクリーンナビゲーション時に背景のスクロールを無効にする方法

このjQueryコードは、トグルボタンの状態に応じてナビゲーションを開閉し、背景のスクロールを動的に制御します。クラス名 back をトリガーとして、html 要素に適切なスタイルを適用し、快適なフルスクリーンUIを提供します。

【jQuery】フルスクリーンナビゲーション時に背景のスクロールを無効にする方法

«
1
2
3
4
»

TOP