はてなブックマーク

デベロッパーツールとは、Google Chromeに標準搭載されている開発者用の検証ツール（デバッグツール）で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。 この記事では、デベロッパーツールの中でも特に利用頻度の高い、HTMLとCSSの検証をするための「Elementsパネル」と、スマートフォン表示を検証するための「デバイスモード」に的を絞って解説していきます。 今まで、デベロッパーツールを使ったことが無い方でも分かりやすい、初心者向けの内容になっています。この記事の内容を習得すると、ページ修正前の表示検証や、表示崩れの原因特定などができるようになると思います。ぜひ実務で活用してみてください。 ※本記事の公開／更新時のGoogle Chromeのバージョンは107。 起動方法 まずは、デベロッパーツールで検証したいWebページ、またはローカル環境で制作中のH

レスポンシブHTMLメールとは、PCやスマートフォンなどのデバイスの画面サイズに応じて、自動的にレイアウトや画像サイズを最適化して表示するHTMLメールのことです。1つのソースで様々なデバイス表示に対応することができます。 しかしながら、HTMLメールのレスポンシブ化の方法や手順は、Webサイトのレスポンシブ化とは少し異なる点があります。既にレスポンシブデザインを理解しているWebサイト制作者の方でも、HTMLメール用のレスポンシブ化について学んでおく必要があるでしょう。 本記事では、多くのメールクライアントで正しく表示される、シンプルなレスポンシブHTMLメールの作成方法を具体的なコーディング方法も交えながら、初心者の方にもわかりやすく解説します。

マーケティング施策について考慮する場合、もはやデジタル領域を無視することはできなくなりました。この記事では、進歩するテクノロジーによって新たな手法が日々登場する中、デジタルマーケティングとは何か、基本的なデジタルマーケティングの手法とは何かをご紹介します。これからご実施される方、現在ご実施されている方にとって新たな気づきがあれば幸いです。 デジタルマーケティングとは、様々な形態のデジタルメディアを通じて自社のサービスを宣伝・訴求することを指します。デジタルマーケティングは、インターネットを必要としないチャネルを含めるため、オンライン・マーケティングよりも幅広い定義になります。 そのため、ディスプレイ広告、検索エンジン関連のマーケティングなどに限らず、モバイル端末におけるSMSやMMS、ソーシャルメディア・マーケティング、その他のデジタルメディアなどが含まれます。 よって効果測定においては、

この記事では、フォントを指定するためのCSSプロパティ「font-family」の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。 「font-familyはいつもコピペしている…」なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。（最終調査日：2023年7月） font-familyの役割とは CSSのf

メルマガ配信は、見込み客や既存客と直接コミュニケーションを行えるため、マーケティング活動において今も優れた効果を発揮します。そして優れたメルマガを配信するためには効果検証が欠かせません。今回は、圧倒的なユーザー数を誇るウェブ解析サービス『Googleアナリティクス』を用いたメルマガの効果検証の方法をご説明します。 メルマガをGoogleアナリティクスで効果検証するメリットとは？ 『Googleアナリティクス』は、無料にも関わらずウェブサイトに関する多くの数値を取得できます。特にキャンペーンの成果や効果測定を行うための機能が数多く搭載されています。メルマガ配信がウェブキャンペーンのひとつであることを考えると、当然Googleアナリティクスを利用しない手はありません。 具体的には、以下のような数値を図ることで、開封やクリックなどとは異なるメルマガの効果が測定できるようになります。メルマガ配信を

“標準的なHTMLメール”は存在しない 世の中には「標準的なHTMLメール」という規格が存在しません。例えば、マイクロソフトが提供する『Outlook』のサポートチームは『Microsoft Word』を用いてHTMLメールを作成することを推奨していますが（※）、『Microsoft Word』で作成されたHTMLメールは、GmailやiOS、サンダーバードなど別のメールクライアントでは正しく機能しないこともあります。その逆もまた然りです。HTMLメールはこういった複雑な受信環境を前提のもとに作成する必要があります。 ※この理由として「長年ユーザーにはそうしてもらっているし、セキュリティ上の観点からそうしている」という回答がサポートチームから得られたケースもあるようです。 HTMLメールを受け取る環境の組み合わせは100万以上存在する スマートフォンが浸透したことにより、あらゆる環境でHT

パソコン、スマートフォン、タブレット。10年前と比べ、私たちは画面サイズの異なる多くの端末に囲まれて生活するようになりました。そして2016年以降、スマートフォンの普及率はパソコンに接近しており、自社のキャンペーン運用時にもスマートフォンユーザーを意識しなければならなくなった企業の数も増えているのではないでしょうか。 そこで今回は、スマートフォン対応の入力フォームデザインを行う際に知っておきたい6つのポイントをまとめてみました。皆さんはいくつご存知でしょうか。 レスポンシブ・デザインを採用する 最も理想的でシンプルな解決方法は、レスポンシブ・デザインを採用することです。レスポンシブ・デザインとは、画面の幅に応じてページレイアウトが自動的に変わる技術です。この技術を採用すれば、ひとつのページで様々な大きさのディスプレイに最適なレイアウトをそれぞれ表示させることができます。 Googleは「検

メール配信を もっと安心・快適に。 メール配信システム WiLL Mail 初期費用不要・最適なプランを1か月毎に選べる ※デロイトトーマツミック経済研究所株式会社 発刊『ミックITリポート2023年8月号 クラウド型eメール一斉配信サービスの市場動向と中期予測（売上高／アクティブ法人顧客数）』