AMPコンポーネントの使用方法とその効果 | フロントエンドBlog | ミツエーリンクス
以前投稿したAMP対応でモバイルユーザーを獲得するという記事で、AMP対応においてサイトの機能性やデザインの再現性への影響が大きいと思われる制約の一つとして、「AMP JS以外のJavaScriptの記述と読み込みの禁止」という項目があることをご紹介しました。今回はそれを補うための手段をご紹介します。 AMP JS以外のJavaScriptの記述や、読み込みが禁止されていることによる影響の大きさはサイトによって様々ですが、jQueryやlodashなどのライブラリやフレームワーク、スクラッチで開発したJavaScriptファイルを読み込むこと、script要素を用いてHTMLソース内にJavaScriptソースを記述することも禁止されています。 AMP HTMLでカルーセルやアコーディオンメニュー等の機能を実装するためには、AMPコンポーネントを使用します。 AMPコンポーネントとは、外部
AMP HTML ページの作成
まずは以下のマークアップから見ていきましょう。これは、今後のボイラープレートとしても利用できます。 これをコピーし、.html 拡張子のファイルとして保存してください。 <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Hello, AMPs</title> <link rel="canonical" href="https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/"> <meta name="viewport" content="width=device-wid
AMP(Accelerated Mobile Pages)とは～対応HTMLを作ってみてわかったこと～
AMPとはAccelerated Mobile Pages の略で、GoogleやTwitterなどが共同で参加しているAMPプロジェクトが構築した仕組み、もしくはそのためのHTML規格のことです。 AMPはその名のとおりモバイルユーザーのユーザー体験向上を目的として、WEBページの表示速度高速化が図られています。（ですのでAMP HTMLは基本的にモバイル端末で閲覧することが想定されています） Google検索ではすでに2016年2月24日からAMPで作成されたページが検索結果画面に表示されています。 ここではHTMLをAMPに対応させるための書き方の基本やAMPを取り巻く環境の変化についてまとめました。 update この記事はもともとGoogleのAMP実装に合わせて作成した記事でしたが、8月に大きく追記・修正しました。 今のSEOの成果に満足していますか？ SEO対策・記事制作なら
AMP対応ページサンプル（通常html版ページ）
このページは通常html版ページです。AMP版ページはこちら。 （amphtmlメタタグを設定してるけど、ブラウザがそれを判断してAMP版に飛んでくれるわけではないらしい。。） 基本的には、AMP公式プロジェクトの情報を元に作っています。Create Your AMP HTML Page（公式サイト） AMP対応htmlファイルの作り方 以下は公式ほぼそのままなのですが、だいたい必須項目なのでそのまま使えると思います。 「⚡」という雷マークの絵文字がソースに入ります。間違いじゃありません。（⚡の代わりにampでも良い。） viewportのinitial-scale設定と、<script type="application/ld+json">〜</script>の部分はオプションなのでなくてもOKです。 通常htmlページとAMP対応htmlページを両方作る場合はメタタグの規定の書き方があ
デザインシステムにおける色の命名ルール
崩れない色名にする 前回「デザインシステムに採用する色を決める5つのルール」を通して、色の名前の付け方や整理の仕方を紹介しました。これを受けてウェブデザイナーの深沢幸治郎さん（@witch_doktor）が「ウェブサイトに使われる色に固有の名前をつけてみる」という記事を書いてくれました。色の命名にまつわる苦労や工夫について読むことができるので、ぜひ参考にしてください。 前回の補足として、デザインシステムにおける色名の付け方の工夫を 3 つ紹介。色の整理をするときの参考にしてください。 色名＝変数 色の名前を付けるのに困っている方は、Kromatic がオススメ。カラーパネルのスライダーを動かすか HEX 値を入力するだけで、色名を提示してれます。他にも color-names という 10,000 以上の色名が収録されたライブラリもありますし、Wikipedia にも色名は幾つかあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
