Web制作・運営・解析・SEO用語集

CSS

HTMLタグにレイアウトや装飾を付加するプログラム及びコードをいいます。

概要

CSS(Cascading Style Sheets)は、インターネットブラウザにおけるHTMLタグに「レイアウト情報」や「装飾情報」を付加し、視認性の向上やアクション強調などに使われるWeb制作面にはなくてはならないプログラムの1つです。

PHPやjavascriptと比べ、使用するタグ名に直線指定したり、指定したclass名やid名に指定するので、命令文が直感的且つ直接的な点から修得敷居は低めで扱いやすいプログラムになります。

とはいっても、複雑な動きや動的処理を実現する場合はコードも複雑になるため、奥の深さも兼ね備えたプログラムと考えてください。
これらのCSSは、基本的にはCSS3という新しい表現が可能になったCSSを組むことで実現できるものになります。

CSSを極めることは、複雑な動きをするサイトにも関わらず非常に動作が軽くなるので、当然ながらユーザビリティの向上やユーザーエクスペリエンスの充実に繋がってきます。
CSSを知れれば、デザイナーさんの自由度をある程度担保できる環境を作れるため、高品質なサイト制作には個人的にはHTML5よりもCSSの基本をしっかり押さえることが何より大事なのではと考えています。

この用語のメモ

CSSのたくさん記述されたコードを初めて見るとギョッとします。
初めてCSSを見たときは誰しも「こんなコード組めるかよ」と思うことも多いと思います。

最初は複雑なものを組む必要はありません。性質をきちんと理解することが大事です。

極端な話、レイアウトだけであれば最低でも「float処理」と「clear処理」の2つの処理さえ覚えれば「サイトっぽい形のレイアウト」が組めてしまったりします。
タグも最初は「要素」を気にしてしまうので、レイアウト練習する場合は全部「div」タグでやっていくのも手です。

慣れてきたら次は主要タグごとに「inline要素」(要素内の流れを分断せず行を折り返さない)と「block要素」(要素内の流れを強制的に分断し、行を折り返す)を使いこなせるように練習しましょう。
この2ステップを踏むことで、レイアウトのコントロールがしやすくなります。

この用語の使いどころ

HTML制作現場で使われないことはまずあり得ないでしょう。HTMLとセットになるため、必ず出てきます。
このCSSは、Web制作を初めて行う方にとって最初の壁になることが多く、CSSを使いこなせるようになった時はさらにWeb制作が面白くなってきます。

このCSSはレスポンシブデザインの実現にも深く寄与し、今日のモバイルユーザビリティ実現の最大の原動力にもなっています。

関連用語

  • HTML
  • レスポンシブデザイン
  • モバイルユーザビリティ

Web担当・運営・解析・SEO問題集の例題問題

CSSに関連するジャンルの練習問題を掲載しています。Web担当・運営・解析・SEO問題集一覧から各ジャンルの問題にチャレンジできます。
クリックすると問題の答えと解説が見れます。

Q:次のタグのうち、そのページを開いたときの画面上に内容が表示されないタグを選んでください。
  • headタグ
  • bタグ
  • aタグ
  • timeタグ
  • marqueeタグ

この答えの解説

headタグのみ、bodyタグ外に設置されるタグなのでページ内に表示されません。
しかし、ヘッダー情報があることによりGoogleの検索結果に表示させたりブラウザのタブにページのタイトル名を表示させたりすることができます。
また、SNSなどと連携して画像を表示させたりする機能もこのheadタグ内に様々なタグを用いて設置します。

Q:次のタグのうち、存在しないタグを選んでください。
  • mainタグ
  • sideタグ
  • headerタグ
  • articleタグ
  • preタグ

この答えの解説

sideタグは存在しません。
非常に似たタグ名にasideタグというものがあり、こちらは印刷物でいう欄外項目の表示にあてがわれます。

Q:次のタグのうちHTML5で使用できないタグを選んでください。
  • iframeタグ
  • strongタグ
  • textareaタグ
  • fontタグ

この答えの解説

fontタグは、HTML5では廃止されました。
CSSのfont属性でサイズ調整やカラー調整を行い、要素のフォントに装飾をつけましょう。

Q:ブラックハットSEOの説明で正しいものを選択してください。
  • Googleのアルゴリズムを逆手に取り、他サイトの順位を下げる手法
  • Googleのアリゴリズムを逆手に取り、不正に検索結果に表示させる手法
  • Googleのアルゴリズムを熟知し、コンテンツを作り上げていく手法
  • Googleのアリゴリズムを熟知し、ユーザーの目的に合った結果結果を表示させる手法

この答えの解説

ブラックハットSEOは、Google検索システムに「ノイズ」を発生させ、本来不要である検索結果が表示されてしまうことを狙ったSEO手法であり、非常に悪質なものです。
他サイトの順位を下げる手法として、「逆SEO」と呼ばれる手法が有名ですが、こちらも非常に悪質です。
いずれにしても、アルゴリズムの抜け道を狙ったSEOは重いペナルティーを科されるため、間違ってもやらないようにしましょう。

Q:リンク先のタイトル名が「水道料金詳細」である場合のアンカーテキストとして適切なものを選んでください。
  • もっと詳細を見る
  • 水道料金詳細はこちら
  • 詳しくはこちら
  • 水道料について

この答えの解説

アンカーテキストは、リンク先のページを端的に予想できる内容であることが最も効果が高いです。
正解以外の内容は「何について」が無いか、または「水道料の何なのか」という点で具体性が伝わりづらく、選択肢としては相応しくないと言えます。

Q:ペンギン・パンダ両アップデートが発動されました。順位が下がる可能性が低いものを選んでください。
  • 画像ばかり貼り付けられたページ
  • 外部へのリンクばかり貼り付けられたページ
  • 他のサイトに記載された内容を転載したページ
  • サイト遷移時に色々なページへ誘導されるページ
  • グローバルナビゲーション、ローカルナビゲーションのリンクばかりのページ

この答えの解説

正解の選択肢では、例えば画像素材集のサイトであれば、ツール提供ページとして役割を果たします。また、画像を用いた説明ページでも問題ありません。
しかし、きちんとalt属性を設定することも併せて行うようにしましょう。

Q:ページビュー数が増加した要因として考えられるものを選んでください。
  • サイト内の導線を改善した
  • 選択肢の全て
  • ページ送りなどの機能をつけた
  • レコメンド機能をつけた
  • 各ページに関連カテゴリーリンクをつけた
  • パンくずリストをつけた

この答えの解説

いずれも可能性としては挙げられます。
共通している点としては、内部リンクの強化になります。
コンテンツ間での繋がりが明確であれば、ページ単位のSEO効果も高まりやすくなります。

Q:あるサイトで契約を150件取りたいが予算が30万円以内でサイト制作費は18万円と決められています。広告運用を行うために適切なコンバージョン単価を選んでください。
  • 900円以内
  • 950円以内
  • 850円以内
  • 800円以内

この答えの解説

30万円予算に対し制作費で18万円充てられているため、残金の12万円で広告運用が必要となります。
12万円で150件のコンバージョンを見込む場合、1コンバージョンあたり12万÷150で800円となります。
それ以上の数はいずれも予算オーバーとなり、目標未達となってしまいます。

Q:セッション数とユーザー数の違いの説明で適切なものを選んでください。
  • セッション数とユーザー数は、一日のアクセスにおけるカウントが異なる
  • セッション数とユーザー数は、一日にたくさんページを回遊したユーザーかどうかを判別するもの
  • セッション数とユーザー数は、違いは特に無い
  • セッション数とユーザー数は、コンバージョンを行ったユーザーとそうでないユーザーの違い

この答えの解説

セッション数は1日を基準とし、その日のうちに断続的にサイトに訪れた場合、都度カウントされます。(ブラウザを閉じて再度立ち上げる、など)
ユーザー数は1日を基準とし、Cookieを参照しその日のうちに断続的にサイトを訪れても同一ユーザーと判断されるため都度カウントはしません。
セッション数とユーザー数に差があるのはこのカウントのしかたが異なるためです。

関連タグ【Web制作】に関するよくある質問

Web制作に関するよくある質問を抜粋しています。Web制作に関するよくある質問はこちらから。

Webサイトを作るときにどんなことを意識していますか?

今でこそ、SEOを中心にコーディングを組むことが大半になってきているため言える話になりますが、Webサイトの一ページ一ページは「本」を作る意識を持って取り組んでいます。
ちゃんとタグにも「タイトル(表題)」や「見出し」、「段落」など、「作文」や「国語」にまつわる言葉が多く出てきますね。

Google側も同じように「記載されている内容」が「どの場面」で「どれぐらいの分量」の情報が「検索された内容に対し正確性があるか」が重要です。
コーダーやライターはその辺りを意識することが大切です。

デザイナーは、Googleよりも人間側が認知する視覚情報がもっともウエイトを占めるため、分かりやすさとトレンドをいかにストレスなくユーザーに供与できるかが大事で、ユーザーエクスペリエンスの精度に関わります。
Webサイトは、成長を前提に作ることが大事です。そういう意味では、いつまでもページが増え続ける「1巻だけの本」を作り続ける意識が必要ではないかと考えます。

CSSの最大の利点を教えてください。

何より少ない容量で「ある程度の動的動作」や「サイトの整形」が出来る点だと思います。
また、手軽にスマホサイト対応ができる「メディアクエリ」が使用できるのも大きな利点で、こんにちのモバイル対応を支えているものになります。

CSSは、手段を覚えておけば覚えておくほど、レイアウトの調整手段が増えてくるため、容量を抑えつつ動作を行えるソースが作れます。

Web制作に必要なソフトを教えてください。

製作工程に応じて使いやすいソフトが大筋決まっていることが多いです。

構成案やサイトマップを作る際はMicrosoftの「Excel」や「PowerPoint」が鉄板です。
大まかなデザイン枠を作る分にはPowerPointがあれば十分作れますし、サイトマップやスケジュール・見積もりなどの情報は、Excelがほとんど使われることが多いです。
いずれもPDFに手軽に変換できる点も非常に使いやすい要因となっています。

デザイン面では、Adobeの「Illustrator」か「Photoshop」が鉄板で、まれに「Fireworks」を使用しているユーザーもいます。
一般的に紙媒体もやっている企業では、「Illustrator」を使用してサイトデザインを制作しているケースが非常に多いです。

コーディング等ではAdobeの「Dreamweaver」がもっとも有名ですが、テキストエディタでコードを作成できる力があれば、ワードパットソフトの「Terapad」やGithubが提供している「Atom」も非常に使いやすいです。
コーディング面においてはファイルのエンコードとHTMLやCSS記載のエンコードをあわせないと文字化けも起こしてしまうので、個人的には「Terapad」が使いやすいと感じています。

運用面、特にアクセス解析などにおいてはこちらもMicrosoftの「Excel」や「PowerPoint」が非常に使われます。ツールとしては「Googleアナリティクス」と「Googleサーチコンソール」を使います。
Excelはうまく使えば得られたアクセス情報からさらに様々な視点でのアクセス情報を拾い出すこともできるため、Excelを使いこなせることができれば大きな武器になります。
アクセス解析等はディレクターが兼任しているケースも多いです。

ざっと上げましたが、全てを担当する場合は「Excel」「PowerPoint」「Illustrator」「Photoshop」「Dreamwerver」「Googleアナリティクス」「Googleサーチコンソール」の7つをマスターすることで大半の業務が行える形になります。
浅く広く習得するか、深く狭く習得するかは得手不得手で決めればよいのではと思います。

関連タグ【SEO】に関するよくある質問

アクセス解析に関するよくある質問を抜粋しています。SEOに関するよくある質問はこちらから。

SEOを行う上で何から行ったらよいかわかりません。

まずはGoogleアナリティクスとGoogleサーチコンソールを導入し、サイトに訪れる際に検索されているキーワードを探してみましょう。

次に、今展開しているコンテンツが「その検索キーワードにマッチしている内容かどうか」をしっかり精査した上でサービス説明を組み替えたり、検索されやすいキーワードを文中に文法上意味の通る状態を考慮した上で組み込むなどのてこ入れをしていきます。

Googleサーチコンソールって何ですか?

クリック数、コンバージョン率、合計表示回数、平均掲載順位などの検索キーワード関連の他にGoogleにインデックスするページを増やしたり不要なURLを削除したりするツールです。

サイトの構造を精査したりサイト上に検出されたエラーを修正することにより、検索結果に画像を表示、評価の★マークをつけたり等といった検索に効果をつけることもできます。

Fetch as Googleのようなクロールがすぐできるツールが消えてしまいました。どうしていますか?

Fetch as Google自体はGoogleサーチコンソールのアップデートによって終了してしまいました。現在では、それに変わるツールに「URL検査」というものがあります。
対象のURLを入れ込み、URLのステータスを出力してください。出力されたページの現在の状況が確認できます。
その中に「インデックス登録」という項目が選択できる場合、インデックスをリクエスト(再クロール)することができます。
リクエストしたURLは、最大2~3日くらいでインデックスされるかされないかが決定し、された場合はインデックスされた数に追加されます。

競合他社から攻撃されている可能性があります。どうしたらいいですか?

まず、どのように攻撃されているかを冷静に見ていきましょう。特に多いのが「リンク」攻撃です。
不自然なリンクがあり、理不尽なペナルティが届いたら「リンク否認」をすぐに行いましょう。

SEO業者などによって質の低いコンテンツが載っているサイトからの大量のリンクが張られたりする悪質な手口を実行してくることがあるため、Googleから通知が着たら「あわてず」「冷静に」「URLを確認してリンク否認」を実行しましょう。

そして、「手動による対策」が表示されていた場合は、「不適切なサイトからのバックリンクがあったため、リンク否認を行いました。対象サイトはhttp://○○です。」といったような内容で送ると良いでしょう。

検索順位が落ちた場合はどうしますか?

手動による対策で下がった場合は、1つ上の質問の内容の通り、コンテンツの中身を精査してみてください。

競合が順位が上がったことにより、順位が落ちることも当然ながら多々あります。
そのような場合は、相手のコンテンツのどういった点がよさそうに感じるのか、キーワードの頻出具合はどのようになっているのか、コンテンツに厚みや面白味があるか、どの端末でも問題なく閲覧できているか、サイトが軽いか(容量が少なく済んでいるか)。

ざっと思いつくものでもこれだけあります。競合と比べて劣ってそうと思うところは1つずつ地道に改善していきましょう。SEOは一日にして成らずです。

関連タグ【アクセス解析】に関するよくある質問

アクセス解析に関するよくある質問を抜粋しています。アクセス解析に関するよくある質問はこちらから。

カスタムレポートは使用されますか?

出力が必要な指標が多いサイト(ランキングやある特定の状況下でのアクセス等)であれば、基本的なサマリーを表示するために使用することはあります。
とくに、広告を扱うようなサイトであれば多視点から情報を集めなければならないため、短時間での状況把握をするべく使用することがあります。

一般的な企業サイトや個人サイトであれば、ユーザーサマリーの概要をしっかりつかんでおけば十分だと思います。

Googleのアカウントをとった後、何をすればよいですか?

Googleアナリティクスのサイトに移動し、ログインしてアカウントに入場してください。
なお、アカウント登録した直後であれば、なにも登録されていないはずです。

アクセス解析を勉強したいですが、何から勉強したらいいですか?

Googleアナリティクスを使いこなせるようになりたいのか、アクセス解析の用語などの知識をつけたいのかによって、勉強するポイントは大きく変わります。

Googleアナリティクスを使っていく上ではまずは「ユーザー」「概要」に記載されている基本レポートの使い方を知るところから始まります。もっとも見る頻度が高いからです。
徐々に、「集客」の「トラフィック」や「行動」の「サイトコンテンツ」を知り、理解が進みページ前後の遷移状況などを見れるようになれば、「セグメント設定」を身に着けていく段階になります。

知識としては、離脱率と直帰率の違いをきっちり理解できればページの性質に合わせた説明をできるようになるのではと考えています。
アクセス解析に関する用語を習得する場合は、市販に売っている本や、用語解説をしているサイト等を参考にしてみましょう。
その際、単純に用語を知るだけでなく、使い道などにも触れている情報を参考にすると良いです。

サイトのアクセス状況を見るにはどうすればよいですか?

すでにGoogleアナリティクスのアカウントがあることが前提ですが、Webサイトを運営している担当者もしくは担当部署にお手持ちのGoogleのメールアドレスをお知らせください。

担当者もしくは担当部署にてアカウント設定を行い、設定完了すればご自身のGoogleアナリティクスのアカウントにWebサイトが追加され、様々な情報が閲覧できます。

権限の状態によっては細かい設定もできるようになります。

年齢別や地域別のアクセスはどんな時に使いますか?

一例ですが、特定の地域や年齢層、それから男女どちらかまたは両方に大きく支持されているのであれば、支持された層のトレンドを狙ったコンテンツや広告ワード、閲覧されてる時間帯に広告費用をかけるなどといった費用投資判断の指標に使えます。

どんなレポート内容が喜ばれることが多いですか?

単純明快に「ここがよい」「ここが悪い」がはっきりしたグラフや数値の表記と、それに対するコメントや提案を記載していると、議論が進みやすく喜ばれやすいです。

複雑にしすぎると、概要が頭に入らなくなりがちになるため、「で、結局何が悪いの?」と打ち合わせの後半で陥る可能性があります。

索引から探す

タグから探す

よくアクセスされている用語

その他カテゴリー

Webサイトトップページに戻る

スポンサードリンク