コピペで使えるAMP HTMLのUIコンポーネント

コピペで使えるAMP HTMLのUIコンポーネント
AMP Start

AMPプロジェクトからAMP対応のUIコンポーネントが公開されています。必要な要素をコピペで使うことができるので、開発リソースを大幅に節約することができます。

この記事では、ソーシャルアイコンのシェアボタンや画像のカルーセル機能、チェックボックスやラジオボタンのフォーム、レスポンシブ対応のナビゲーションメニューをAMP対応のHTMLコードで実装する方法を紹介します。

 

フリーランスITエンジニアの案件・求人情報サイト

フリーランスWebクリエイター大募集!「ギークスジョブ」

スポンサーリンク

ボタン

ボタンをAMP対応のHTMLで実装します。

ボタン

AMP対応HTMLコード

 

AMPボタン

AMP対応HTMLコード

フォーム要素 チェックボックス

チェックボックスをAMP対応のHTMLで実装します。

フォーム要素 チェックボックス

AMP対応HTMLコード

フォーム要素 ラジオボタン

ラジオボタンをAMP対応のHTMLで実装します。

フォーム要素 ラジオボタン

AMP対応HTMLコード

フォーム要素 テキストボックス

テキストボックスをAMP対応のHTMLで実装します。

フォーム要素 テキストボックス

AMP対応HTMLコード

フォーム要素 レンジ入力

レンジ入力ををAMP対応のHTMLで実装します。

フォーム要素 インジケータ

AMP対応HTMLコード

フォーム要素 テキストエリア

テキストエリアをAMP対応のHTMLで実装します。

フォーム要素 テキストエリア

AMP対応HTMLコード

フォーム要素 セレクトボックス

セレクトボックスをAMP対応のHTMLで実装します。

フォーム要素 セレクトボックス

AMP対応HTMLコード

関連記事の表示1

関連記事の表示をAMP対応のHTMLで実装します。

関連記事の表示1

AMP対応HTMLコード

関連記事の表示2

関連記事の表示をAMP対応のHTMLで実装します。

関連記事の表示2

AMP対応HTMLコード

ソーシャルアイコン フォローボタン

Twitter、Facebook、Google+、Pinterest、メールのフォローボタンをAMP対応のHTMLで実装します。

AMP対応HTMLコード

ソーシャルアイコン シェアボタン

Twitter、Facebook、Google+、Pinterest、メールでのシェアボタンをAMP対応のHTMLで実装します。

ソーシャルアイコン シェアボタン

シェアボタンを実装するには、<head>タグ内にスクリプトタグを追加する必要があります。

AMP対応HTMLコード

リスト表示(番号付き)

リスト表示(番号付き)をAMP対応のHTMLで実装します。

リスト表示(番号付き)

AMP対応HTMLコード

リスト表示(番号なし)

リスト表示(番号なし)をAMP対応のHTMLで実装します。

リスト表示(番号なし)

AMP対応HTMLコード

画像 フルページ表示

画像のフルページ表示をAMP対応のHTMLで実装します。

画像表示 フルページ

AMP対応HTMLコード

画像 ヘッドライン付き

ヘッドライン付きの画像をAMP対応のHTMLで実装します。

画像 ヘッドライン付き

AMP対応HTMLコード

画像 クレジットのキャプション付き

クレジットのキャプション付きの画像をAMP対応のHTMLで実装します。

画像 クレジットのキャプション付き

AMP対応HTMLコード

画像 カルーセル機能

画像カルーセル機能をAMP対応のHTMLで実装します。

画像 カルーセル機能

カルーセル機能を実装するには<head>タグ内にスクリプトを追加します。

AMP対応HTMLコード

画像 カルーセル機能キャプション付き

キャプション付きの画像カルーセル機能をAMP対応のHTMLで実装します。

画像 カルーセル機能キャプション付き

カルーセル機能を実装するには<head>タグ内にスクリプトを追加します。

AMP対応HTMLコード

著者表示

著者表示をAMP対応のHTMLで実装します。

著者表示

AMP対応HTMLコード

ナビゲーションメニュー(レスポンシブ対応)

レスポンシブ対応のナビゲーションメニューをAMP対応のHTMLで実装します。

ナビゲーションメニュー(レスポンシブ対応/階層型)

スマホ画面ではハンバーガーメニュー表示になります。

ハンバーガーメニュー

<head>タグ内にスクリプトを追加します。

AMP対応HTMLコード

ナビゲーションメニュー(常にハンバーガーメニュー)

ハンバーガーメニューをAMP対応のHTMLで実装します。

ナビゲーションメニュー(常にハンバーガーメニュー)

<head>タグ内にスクリプトを追加します。

AMP対応HTMLコード

フッター

フッターをAMP対応のHTMLで実装します。

フッター

AMP対応HTMLコード

見出し

見出しをAMP対応のHTMLで実装します。

見出し

AMP対応HTMLコード

文字サイズ

文字サイズをAMP対応のHTMLで実装します。

文字サイズ

AMP対応HTMLコード

引用

引用をAMP対応のHTMLで実装します。

引用

AMP対応HTMLコード

ドロップキャップ(先頭文字を大きく表示)

先頭の文字を大きく表示するドロップキャプションをAMP対応のHTMLで実装します。

ドロップキャップ(先頭文字を大きく表示)

AMP対応HTMLコード

本文

本文をAMP対応のHTMLで実装します。

本文

AMP対応HTMLコード

スポンサーリンク

関連記事 & スポンサーリンク

コメント

  • Posted on
  • Views 512