レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指

以前、「GoogleAnalyticsで複数ドメインをまとめて計測する」方法を記事にさせていただきましたが、 その後、GoogleAnalyticsはユニバーサルアナリティクスへ、設定はGoogleタグマネージャで、など 管理方法や解析タグも変化してきております。 今回は、そういった変化をふまえて「Googleタグマネージャでのクロスドメイントラッキング」を実装してみたいと思います。 ※トラッキングコードはユニバーサルアナリティクスで設定していきます。 以前の記事は下記よりご参照ください。 »Google Analyticsで複数ドメインをまとめて計測する方法 »GoogleタグマネージャでGoogle AnalyticsやAdWordsのタグを一元管理する 手順1.Googleタグマネージャにクロスドメイン用のタグを作成 ※まずはユニバーサルアナリティクスに移行出来ているかGoogleA

パワー・インタラクティブでは、マーケティングを半歩先へ導くための読み物コンテンツを「パワーブログ」として公開しています。こちらはパワーブログの一覧ページです。

本日は、htmlやcssはたまたjavascriptのソースを綺麗にしてくれるwebサービスを紹介します！ もちろんお金等はかかりません。 綺麗に書くように意識しつつも、 忙しい時期や、修正が繰り返し発生したりすると、 ソースを綺麗にする意識はどこかにいってしまいがちですよね・・・(自分だけでしょうか？) そんな時に、ソースを書き終わったら、 このツールを使えば、ソースがあっという間にキレイになります。 PrpCSSor こちらはcss専用で、オプションが豊富です。 ・インデントの設定（1から4の半角スペース） ・括弧の位置の指定 ・複数セレクタ指定の際、改行or一行の選択 ・親子関係の際にインデントの指定 PrpCSSor DIRTYMARKUP こちらは、html,css,javascriptも整形出来ます。 デバック機能もあるようです。 ・インデントの設定（1から4の

Material Design Google I/O 2014 で新しいデザインガイドラインが発表されました。 Google Design その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。 ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。 Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。 イントロダクション まずはじめに Material Design の概要です。本文をそのまま引用します。 We challenge

前回は「ハンバーガーメニュー」について紹介させていただきました。 今回はハンバーガーメニューだけではない、レスポンシブデザインでも使えて、変換ツール系でも利用できる、jQueryメニューをいくつかご紹介します。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに jQueryでサイトに合ったナビゲーションメニューを作ろう レスポンシブデザインで使える簡単メニュー「Naver」 レスポンシブデザインのサイトで今もよく見る形の、画面幅が小さい場合にグローバルメニューを、ハンバーガーボタンのメニューの中に隠すjQueryです。 【関連ページ】レスポンシブデザインのスマホサイトを使いやすいUIに サンプルコードはこんな感じになります。 <nav> <a href="#">Home</a> <a href="#">News</a&

小さな企業やサイトで役立つユニバーサルアナリティクスの便利な使い方を紹介する本連載。今回は、Google タグマネージャーでユニバーサルアナリティクスのイベントトラッキングを設定する方法を解説します。 Googleタグマネージャーとは 現在のWebサイトはGoogle アナリティクスなどの分析ツールをはじめ、広告計測ツール、ソーシャルプラグインなど多くのタグをソースコードに貼り付けて運用しています。それらのタグを一元管理できるツールがタグマネージャーで、Googleが無料で提供しているツールが「Googleタグマネージャー 」（https://www.google.co.jp/tagmanager/、以下、GTM）です。 GTMは「コンテナ」「タグ」「トリガー」「変数」で設置するタグを管理します。また、eコマースなどのデータをGTMに渡すときには「dataLayer」を使います。 コンテナ

圧倒的な人気を誇るJavaScriptのライブラリー「jQuery」。サイトに効果をあたえるプラグインが多数あることが魅力ですが、そのプラグインを探すことがWeb制作者の手間になっています。本連載では、「こうめ」さんこと大竹孔明さんがおすすめのプラグインと実装方法、実装例を紹介します。

フォントフリーについて FONT FREE（フォントフリー）は、無料で使える日本語フリーフォント投稿サイトです。 漢字やカタカナ、ひらがなをはじめとした日本語の無料フォントを、明朝やゴシック、手書きなどのカテゴリーから探すことができます。紹介ページリンクからダウンロードもすぐにできます。 あなたの欲しかったフォントが、すぐに見つかりますように。

head内に記述する情報を見直す機会があったので、 改めて「TwitterCards」も調べなおしてみました。 ●「TwitterCards」とは？ ●申請方法 ●「Twitter Analytics」について ●OGPの設定について URLを含むツイートを投稿すると、FacebookのOGP画像のようなサムネイルを表示させる機能です。 OGPを設定済みであれば、簡単な設定と申請のみで反映されます。 ＜手順＞ （1）Facebook用のOGPを設定する （2）TwitterCards用のタグをHTMLに追加 （3）Twitterに申請 （4）ツイートをして動作確認 ＜設定・申請に必要な情報＞ ・Twitterアカウント ・それに紐付くパスワードとメールアドレス ＜設定した例＞ てすとー　http://t.co/QPJ1xZBMfv — ウメダキョウコ (@umeume66) 2014, 6

PCサイトに電話番号を記載する場合は、テキストか画像で電話番号を表示し、 スマホサイトなら、電話番号にtelリンクを貼って、スマホから 直接電話をかけられるようにすると思います。 PC・スマホ・タブレットと、さまざまなデバイスにワンソースで対応している レスポンシブのサイトの場合はどうでしょうか。 ソースにあらかじめtelリンクを設定しておくと、PCで見た際に 「プロトコルが不明」「開けません」というメッセージが返ってきてしまいます。 （もともとtelリンクは、ガラケーやスマホ向けの機能なので、当然と言えば当然です） telリンクを設定しなければ問題ないのですが、そうすると、スマホで見たときに、 電話番号をタップして電話をかけることができません。 電話をかける機能があるのに直接電話できないのは、ちょっと不親切です。 こういう時は、JS・jQueryを使って、スマホの時だけ電話番号にtelリ

Google AJAX APIを使って、ブログのRSSから取得した情報を、静的なHTMLに新着記事としてを表示させるということを何度かやりました。ですが、その度に過去の案件を見返すことが多いので、備忘録として記事にしておこうと思います。 今回は、記事の日付、タイトル、記事の画像、記事本文概要を書き出ししたいと思います:) 2016/1/11にGoogle AJAX APIが使えなくなったようです。 別の方法でRSSを取得する方法をまとめておりますので、よろしければ以下の記事もご参考になさってください:) ブログのRSSを読み込んで新着記事を表示！PHPを使ってみました 0.RSSとは1.使い方2.新しい記事が反映されない？ 0.RSSとは RSSとは、主に、Webサイトやブログの更新情報を公開するために使われているXMLベースの文書です。 Webサイトの各ページのタイトルや、URL、更新日

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768pxがブレイクポイントとなっており、それ以下になるとアコーディオンに変換してくれます。ダウンロード デモ スクリプト <script src="jquery.min.js" type="text/javascript"></script> <link href="easy-responsive-tabs.css" type="text/css" rel="stylesheet"> <script src="easyResponsiveTabs.js" type="text/javascript"></script> 実装(HTML) <div id="htab"> <ul class="resp

タブ機能の作り方！ページ移動せずに内容を切り替えるタブ機能の作り方を解説。ページを移動することなくボックス内の表示内容を切り替える方法です。HTMLとCSSでタブを作り、JavaScriptを使って表示タブを切り替えます。タブ表示部分がクリックされれば一瞬でページ内容が変化するタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。 タブを押すと一瞬で表示内容が切り替わる機能の作り方 ウェブページを移動することなく指定範囲の表示内容を切り替えられるタブ機能は、狭い領域にたくさんの情報を掲載したい場合に便利です。ジャンル別に記事を掲載するニュースサイトや、地域別にお知らせを掲載する情報サイトなど、多数のウェブページで見かけます。 このようなタブ機能は、ほんの少しのHTML＋CSS＋JavaScriptソースを記述するだけで簡単に作れます。そこで今回は、ウェブページ上にタブ機能を作る方

Webアプリのデバッグやチューニングに役立つ、Chrome Developer Toolsの主要機能を、スクリーンキャプチャ中心で簡潔に紹介。2014年10月に最新情報に改訂。 モダンブラウザーの中でGoogle Chromeは最後発ながら、その機能の潤沢さ、便利さ、高速さからシェアを大きく伸ばしている。そして、今やほとんどのブラウザーではWindowsの場合F12キーを押すことで（Macの場合はCommand＋Option＋Iキーで）手軽に各ブラウザー搭載のデベロッパーツールを利用できるが、特にChromeのデベロッパーツールは、非常に機能が豊富なため、利用している人もかなり多い。 本稿では筆者がよく使う機能や、使うと便利な機能を中心に、Chromeのデベロッパーツールについて紹介していく。なお、本書は執筆時点で、最新のChrome 38を使用している。 機能ふかん 残念ながら、Chro

この記事は、普段サーバーサイドスクリプト言語（PHP、Perl、Ruby等）を書いていない方を対象に、PHP を使うとどのようなことができるのか、あるいはできないのかを解説した入門記事です。 キャンペーンページで、指定の時間に受付を終了する たとえばキャンペーンページで、指定の時間までは「お申込みはこちら！」というボタンを表示し、それ以降は「キャンペーンは終了しました」と表示させたいとします。 こういう時、PHP はわりと直感的に書けるので便利です。 "; // 現在時刻が、キャンペーン終了後であれば } else { echo "キャンペーンは終了しました "; } ?> ※コメントで、「日付はUNIXタイムスタンプに変換してから比較したほうがよい」とご指摘いただいたので、strtotime() を使用するよう変更しました。 3行目に “2013-09-01 00:00:00” という箇

グリッドからナビゲーション、スライダー、フォームなど、レスポンシブ対応のさまざまなコンポーネントが利用できるフレームワーク -Responsive Framework