Android の Chrome で開いたページを、PC から DevTools でデバッグする
「iPhone でサイトを開いて、Mac の SafariからそのページをWebインスペクタで確認する」という記事に続きまして、同様のことを Android でも行う方法を紹介したいと思います。 Android でサイト…
TAM のテクニカルチームがお届けする WEB技術ブログ！
「iPhone でサイトを開いて、Mac の SafariからそのページをWebインスペクタで確認する」という記事に続きまして、同様のことを Android でも行う方法を紹介したいと思います。 Android でサイト…
前回の記事でも触れましたが、AMP HTMLはちょっとしたことでエラー出ます。 せっかく対応しても、正しく設定されていないとAMPコンテンツとしてGoogleに認識されません。 そこで今回はAMP HTMLのチェック方法…
グノシーやスマートニュース、日経電子版などのニュース系アプリでよく使われているUIで、スワイプで記事一覧が横スライドしていくものがあります。 大量の更新記事をカテゴリ毎に効率よく見せるのに非常に効果的なUIです。 web…
先月23日にGoogleがAMP (Accelerated Mobile Pages) に対応したモバイル検索を開始しました。 そこで今回はモバイルサイトの表示が高速化できるAMPの主な仕様についてまとめてみました。
今回はPCサイトとスマホサイトを異なるURLで作成する際に必要になっていくる対応策についてまとめていきたいと思います。 PCサイトとスマホサイトで別々のURLで作成するとはどういうこと？ PCサイトのURL：http:/…
Mobile でハンバーガーボタンはよく見かけますが、 ちょっとアニメーションをつけたりするのは意外と時間がかかるものです。 そこで、ご存知の方も多いかもしれませんが、 今回ご紹介するのは「Transfor…
HTMLメールを作成する際、レスポンシブやリキッド対応を求められることが多くなりました。 リキッドレイアウトのHTMLメールでは、外側の要素にmax-widthで最大幅の指定をして、中の要素は固定せずにパーセント指定でコ…
スマホサイト制作で便利なフレックスボックスでカラムレイアウトを実装したいと思います。
レスポンシブHTMLメールを作成することがあったので、覚書です。 おもに「テーブルレイアウトで、PCの時には横並びのカラムを、スマホの時には縦並びにする」 方法についてです。
スマホサイト制作でこのようなデザインを実装する場合、 テキスト位置の調整を考えると、displayプロパティが便利です。 セル間隔をmarginで調節したいところですが、table-cell に margin は無効です…