コンテンツリンクコンポーネントにスキップ - Skeuomorphism グレースケール
ブログコンテンツ用のグレースケールのSkeuomorphicデザインを使用したシンプルでレスポンシブな「コンテンツにスキップ」リンク。ダークモードのサポートが含まれています。
HTMLコード
<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>
<main id="main-content" class="p-4">
<!-- Your main content goes here -->
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
<p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>関連コンポーネント
コンテンツリンクコンポーネントにスキップする
視覚的に魅力的な 3D スタイルの [コンテンツにスキップ] リンクは、ユーザーがソーシャル メディア インターフェイスのナビゲーション メニューをバイパスするのに役立ちます。このコンポーネントは、補色 (青とオレンジ) を使用し、影と変換によって 3D 効果を実現します。レスポンシブデザインとダークテーマのサポートを備えています。リンクは、フォーカスされているときやアクティブになっているときはビューポートの左上に固定されているように見えるため、キーボード操作に簡単にアクセスでき、使用していないときは目立たないようになっています。
コンテンツリンクコンポーネントにスキップする
メインコンテンツにスキップするためのリンクを提供するWebコンポーネントで、パステルカラーの配色のマテリアルデザインでスタイル設定されており、eコマースWebサイトに適しています。ダークテーマをサポートするレスポンシブデザインが特徴です。
コンテンツリンクコンポーネントにスキップする
物理ボタンに似たスキューモーフィック要素で設計された Skip to Content Link コンポーネント。このコンポーネントには、パステル調の配色、ホバー効果を含む適度な複雑さ、ダーク テーマのサポートがあります。