SEO

CSSって何?初心者でも分かるHTML

  • このエントリーをはてなブックマークに追加

HTMLで作成されるwebサイトにレイアウトを適用する際は、スタイルシートのうちの一つであるCSSが使われます。CSSとはスタイルシート(別名:カスケーディング・スタイルシート)と呼ばれ、webサイトのレイアウトを指定するための言語です。 HTMLがwebサイト内の構造を定義するのに対してCSSは画面に表示される際の文字の色や背景の色、大きさなどを指定します。このように、CSSはHTMLと共にwebサイトの見た目を整える言語として用いられ、これら2つは切っても切り離せないものです。

CONTENTS

なぜCSSが必要なのか

先述の通りCSSは、HTMLによって構造化されたwebページのレイアウトを整える役割を担います。HTMLからでもwebページのレイアウトを整えることは可能ですが、一般的にこのような使い方はしません。そして、通常これらのファイルは別々に記述されます。

ではなぜHTMLとCSSは別のファイルに記述されるのか?なぜなら、HTMLは検索順位を決定付ける要素だからです。レイアウトを整えるためにHTMLを使ってしまうとwebページの情報が検索エンジンに正しく伝わりにくくなってしまいます。そして、webページ内の重要な情報が検索エンジンに認識されにくくなってしまい、webサイトとしての評価が低下してしまうからです。

CSSの働きについて紹介
CSSの書き方は非常に簡単です。まず、サイト内のレイアウトを変えたい部分を指定し、プロパティと値を入力します。プロパティは各要素の文字や色などの状態を指します。そして入力したプロパティに対して任意の値を入力していきます。この値によってwebページのレイアウトが変わっていきます。


HTMLだけでは味気ないレイアウトになってしまいます。
<p>CSSについて</p> 

CSSを付け加えると下のように、色が変わったりします。

<p>CSSについて</p>

次に、書き方のルールに関して少し説明しておきます。レイアウトを指定したい要素をクラス指定し、下のように記述を行います。.content{
font-size:14px;
border-radius:50%;
}
ここで指定したい要素に“.(ドット)”もしくは“#(シャープ)”を付けます。上の例では“.(ドット)”となっていますが、これはclass指定をする際に使われます。idで要素を指定する際は“#(シャープ)”を付けます。font-sizeやcolorなどのプロパティ名前は覚えるしかありません。しかも、使われるプロパティは大体決まっているので、すぐ覚えられると思います。

一応、よく使われるプロパティに関して下に載せておきます。
background(背景)
border(枠線)
color(文字の色)
font-size(文字サイズ)
font-weight(文字の太さ)
height(縦幅)
line-height(行間)
margin(外側の余白)
padding(内側の余白)
text-align(左/中央/右揃え)
width(横幅)

基本的に、プログラミング言語とは異なり前後の関係性などを考える必要がない“マークアップ言語”と呼ばれるものです。一対一対応なので全然難しいものではありません。
クラス指定に関してはidとclassがありますが、idは各要素に一回しか使えないのでclass指定の方が無難です。

まとめ

今回はCSSについて紹介しました。今回の説明で、HTMLとスタイルシートを分ける理由と書き方についてお分かり頂けたと思います。web業界に入ったばかりの人でもHTMLとCSSの関係について理解できたと思います。

  • このエントリーをはてなブックマークに追加

記事の著者が提供するサービス

SEO対策・リスティング広告等のWEBマーケティング基礎攻略ならウェブクマ

運営会社情報


ウェブクマは「WEBプロモーションを活用して費用対効果を劇的にアップする方法」と題して、ウェブプロモーションをご担当される方にブックマークされいつも参照されるようなサイトを目指しております。
長年培ってきたSEOの実績やリスティング広告の智見、WEB制作の経験をもとに貴社のWebプロモーションの問題を解決する記事を多く掲載しております。
SEOベンダーとして、またWEB広告代理店として第一線で活躍する社員自らの経験を惜しみなく公開しておりますので、お困りの際は是非参考にしてみてください。 ウェブクマは株式会社DYMが運営しております。

webマーケティングのことならお問い合わせください

DYMでは様々なインターネット上のサービスを提供しております。興味をお持ちいただいた方は、気軽にご相談ください

  • 最新情報を受け取る
  • SEO対策・リスティング広告等のWEBマーケティング基礎攻略ならウェブクマ

    最新の情報をSNS・メールでご購読いただけます!

    各SNSからご購読いただけます

    メールから最新情報を
    受け取ることができます

  • 最新情報を受け取る