<div class="container"> <div class="label-vertical"> <div class="label">（人数）</div> <div class="label">1000</div> <div class="label">900</div> <div class="label">800</div> <div class="label">700</div> <div class="label">600</div> <div class="label">500</div> <div class="label">400</div> <div class="label">300</div> <div class="label">200</div> <div class="label">100</div> <div class="label">0</div>

何かおいしい日本酒銘柄があれば教えて欲しいと思っている、ともさんです。 ちなみに、私のおすすめは「美少年」です。 先日の案件で、サイト内に棒グラフを表示するページがあったんですが、ただ単に画像で作ってしまっては面白くないなと思い、cssでやってみたら思いのほか上手くできたので晒すことにしました。 実現させたい表示 今回は以下のようなグラフを表現します。 よくある横棒グラフすね。 HTML ベースとなるHTMLは以下です。 <table> <tr> <th>男性</th> <td class="g_man">53,992名</td> </tr> <tr> <th>女性</th> <td class="g_woman">39,795名</td> </tr> </table> 難しいことは何もしてません。 よくあるtableコーディングですねー。 CSS まずCSSすべて晒します。 詳しい説明は

CSS だけで棒グラフを作ってみます。 jQuery を使ったものなどは色々ありますが、CSS だけでも出来るので無理矢理作ります。flexbox を多用するので古い IE などは捨てます。 CSS だけで棒グラフHTML<p class="graph-title">最近のブラウザシェア事情</p> <ul class="bar-graph"> <li class="graph-a"> <dl> <dt>GoogleChrome</dt> <dd> <span>39%</span> </dd> </dl> </li> <li class="graph-b"> <dl> <dt>InternetExplorer</dt> <dd> <span>31%</span> </dd> </dl> </li> <li class="graph-c"> <dl> <dt>Firefox</dt> <dd

WebサイトにCSSの簡単な棒グラフを作る方法をご存じですか？ 本記事に集めた棒チャートはすべてフリーのオープンソースで、CSS3を使ってデザインされています。 また、これらのグラフのほとんどは、追加のCSSアニメーションやグラディエント効果を加えることでさらに強いインパクトを与えられるものです。使うときにはぜひ自身で工夫してみてください。 （イメージをクリックするとCodePenが見られます。） １．データ・チャート このコード・セットでは、美しいデザインに上手く作られたチャートが表現されています。 開発者はこのセットにおいて、おもにUXに重点をおいており、それぞれの棒の上端で数値を表しています。 垂直ないし水平バーのテンプレートを、段々に重ねられたバーでフィーチャーしており、とても印象的ですが、まるまるCSS3でまかなわれています。それぞれの色は、表現するものの性質に応じて変えることも

デジタルマーケティングでは、ブランドの認知向上や集客施策において多くの手法や媒体が存在しますが、その中でも検索エンジンでの上位表示は非常に重要な施策の一つです。 検索エンジンを通じてウェブサイトに訪れるユーザーは、特定の問題を解決しようとする明確な意図を持っており、その結果、コンバージョン（成果）につながる可能性が高く、ウェブプロモーションの成功に欠かせない要素となります。 しかし、SEOは正しい知識と戦略が不可欠であり、誤ったアプローチを取ると、検索エンジンから適切な評価を受けられず、期待した結果を得ることが難しくなります。 この記事では、SEOの基礎的な仕組みやGoogleが重視する要素、SEO対策の種類、そして具体的に上位表示を目指す方法を、初心者にも理解しやすい形で解説します。 SEOは常に進化しており、最新のトレンドや検索エンジンのアップデートに迅速に対応することが重要です。 本

ここでは、SEOを理解するうえで、必要と判断した用語や内容についての説明を掲載しております。 SEO対策は多岐に渡る知識が必要と思われがちですが、基本は外部・内部の施策、そして質の高いコンテンツです。 このように、効果の高い対策を行うことが大切で、押さえておきたいポイントをいくつか覚えておくことで、後は調べながらでも十分対応することが可能です。 正しく理解し、今後のSEO対策に役立てましょう。

2017/01/09 (更新日: 2018/05/14) 【完全な初心者向け】SEO対策の基本をマルっとまとめたので、見てね MARKETING SEO SEO対策の概要から基礎を知りたい方向け。 本記事では、SEO対策の基本を順序立てて解説します。より深い内容を知りたい方向けに、各項目を深掘りしたリンクも掲載しています。 SEOコンサルとして生計を立てつつ、当サイトでも常にSEO実験をしている僕のノウハウ記事です。是非とも、じっくり記事をご覧ください。 ※スキル証明として、長文SEOは１記事で20万円稼げる【SEO対策と文字数を考察した】の記事下部に実績データを掲載しています。< １．SEO対策ってなに？SEOの基本を図で解説します SEOとは、検索キーワードに対して、上位表示を狙うための技術のことです。ウィキペディアの定義を引用すると下記のとおり。 検索エンジン最適化（Search E

いまや企業活動になくてはならないとされるWEBマーケティング。アメリカの広告市場ではインターネット広告の年間売上高が初めてテレビを上回り、首位なったことが報道されました。実際、あの手この手のSEO対策などでWEBマーケのテコ入れに頭もお金も使っている経営者、マーケ担当者は多いでしょう。でも、やってることのそれらはことごとく逆効果、だったとしたらどうします？ インターネット勃興期からこの業界に関わってきたWEBマーケ職人、ニンニンドットコム代表の鈴木さんに「WEBマーケティングの嘘と本当」を深掘り取材しました。ちょっぴり刺激的な内容です。どうぞ心のご準備を。 目次 ◆ なぜ「ダメダメ・サイト」がトップ表示されたのか ◆ 検索順位を決めているのは「人間の頭脳」 ◆「マーケ3原則」の実践に勝るものはない ◆「成功するデート」と「失敗するデート」 ◆ “ほぼ日”をオススメする理由 【PROFILE

Google Chrome（クローム）おすすめ拡張機能11選 （1）Pushbullet パソコン上で見ていたものを携帯で見たり、携帯で撮った写真や動画をパソコンに送ったりすることもあるでしょう。 Pushbulletを使えば、パソコンと携帯、タブレットもすべてつがなる超便利な拡張機能です。 携帯にアプリをダウンロードする必要はありますが、登録はとても簡単なので手間はほとんどかかりません。iPhoneだけでなく、Android対応しています。 実際の使用感 右上のボタンをクリックして、送信したい画像や、URLなどを送信します。 スマートフォンで確認してみてもしっかり来ているのがわかります。 便利なので、ぜひインストールしてみてください。

弊社の取り扱う広告媒体の全体図と、リスティング広告、ディスプレイ広告を中心として運用スキームをご紹介しております。 「アプリのダウンロード数が伸びない…」 「ダウンロードを促す広告を出しているけど効果が今ひとつ…」 このような悩みを抱えている企業様や担当者様は意外と多いのではないでしょうか。そんな皆様に朗報です。この度、2018年7月26日よりAppleから、iOS向けアプリストアである「App Store」上で検索広告を配信できるようになりました。 その名も「Search Ads」 本記事ではそんなSearch Adsについて詳しく説明していきたいと思います。 Search Adsとは？冒頭でも簡単に説明したとおり、App Store上の検索結果へ広告を配信できるサービスです。以前より、アメリカを始めとする海外諸国では提供されていたサービスですが、この度、ついに日本でもサービスの提供が開

2017/10/11 (更新日: 2020/10/18) 【SEO】特定キーワードで上位獲得する『究極的にシンプル』な方法 MARKETING SEO こういった疑問に答えます。 本記事では、特定キーワードで上位獲得する３つの手順を解説しました。 具体例を出しつつ解説していますので、初心者でも分かりやすい記事内容です。 記事の信頼性 世の中には自称SEO専門家が多いですが、その良し悪しを判断するのは『結果のみ』です。本サイトを含め、僕は複数キーワードで１位獲得しておりますので、下記にスクショを貼っておきます。 当サイトで上位獲得しているキーワードです。 このブログを軸にSEOコンサル案件やWeb制作案件を受注しています。 片手間で運営している英語学習のアフィリエイトサイト（e-Life ※サイト閉鎖しました<(_ _)> ）です。２名ほどライターさんを雇い、ほぼ自動化で運営しています。 ほ

広野 萌（ひろの はじめ） 一般社団法人デザインシップ代表。 早稲田大学卒業後、ヤフー株式会社入社。 2015年、オンライン証券「FOLIO」を共同創業。Chief Design Officerに就任。 2018年、一般社団法人デザインシップ設立。代表理事に就任。 法律・医療・自動運転・エンタメ・ARなど幅広い業界の新規事業立ち上げ・デザインを支援。 ラジオ番組「ブレインストーミング」隔日更新中。 2014年 早稲田大学で現代文学・現代思想を中心に研究し、論文「マラルメの謀反 ─リヒャルト・ワーグナーという神話の解体─」にてフランス象徴主義文学の定説を覆す解釈を立論。 日本最大級のハッカソン「Open Hack Day」最優秀賞受賞を経て、ヤフー株式会社へ入社。 主に新規事業・全社戦略の企画やアプリのUX推進に携わる。 在職中、UIに関する特許を3件出願。 同年にデザインコミュニティ De

現在「境界線を調整」はphotoshopCC2017では名前を改め「選択とマスク」という機能としてパワーアップしております。（photoshopCC2015.5から名称変更） しかし、僕は最近photoshopCCを2015→2017にバージョンアップしましたが、この名前変更に気づかず「あれ？「境界線を調整」はどこいったの？ あんなに便利なツールなくなるはずないのに……」と戸惑ってしまいました。 今回は自分と同じように混乱してしまった方や「選択とマスク」「境界線を調整」をそもそも知らなかった方のために改めて「選択とマスク」の使い方をご紹介します。 ※この記事は、2017年に公開されたものです。最新のPhotoshopを使った切り抜きの方法については、以下の記事をご覧ください。 「選択とマスク」を使って髪の毛を切り抜く方法 今回はふわふわヘアのかわいい子供の写真をご用意しました。 できるかぎ

画像の自由変形の完成イメージ 今回はPhotoshopで次の２つの画像加工を行ってみたいと思います。 例1：写真を斜めから撮られた額縁に合わせる 例2：文字を歪ませて、斜めから撮られた本に合わせる どちらも丁寧に加工方法を説明していきますので、ご安心ください。 予備知識：自由変形のショートカット Ctrl ＋ T※ Macの場合、Ctrlの代わりに⌘のショートカットで自由変形モードにできます。後ほど手順の中でも説明するので、まだ覚える必要はありません。 例1： 写真を斜めから見たように自由変形 それでは、例１から手順を解説していきます。