CSSとは – まーくんのアフィリエイト学校【afb】

アフィリエイトを始めるために知っておきたいことなどの基礎から、運営に関する知識やテクニックなどの応用まで様々なノウハウを学ぶことができます

CSSとは

公開日 最終更新日

 

CSSとは、Webサイトの装飾をするためのプログラミング言語。レイアウトを整えたり、タイトルをおしゃれにしたり、文字を四角で囲んだりなど、サイトデザインに大きく関わります。

CSS図解

んん?別にCSS使わなくてもHTMLで装飾できるくまよね?
まーくん、それはHTMLじゃなくて「HTMLに直接書き込んだCSS」ですよ~
え!?そうだったくま!?

 

あなたの傍にCSS

「装飾をすべてHTMLでやっている」

と思っている人、実は知らぬ間にCSSは使われていたんです。

 

こんなタグに見覚えはありませんか。

<span style=”color:カラーコード”></span>

 

よく見る文字の色を変えるタグですが、この指定されている「style」というのが「CSS」になります。

HTMLに直接書き込むCSS

このタグの意味は「spanで囲んだ部分をCSSで○○に装飾するよ」という意味なのです。

 

同じものはまとめよう

CSS例囲み枠

例えばこの「囲み枠」、HTMLに直接書き込むとこうなります。

サイトのデザインは全ページで統一している方がいいですよね。

でもデザインを記事ごとに一々書いていくのは面倒です。

しかも、もし「デザインを変更したい」となった時に全てのページを書き換える必要が出てきます。

HTMLにCSSを直接書くと変更が面倒

毎回使うものであればファイルを分けて、必要な時にそこからデザインを取り出してあげた方がコードもすっきりして、デザイン変更も一度で済みます。

何回も使うCSSならファイルを分けておく

CSSファイルからデザインを取り出す場合、先ほどのコードはこう変わります。

CSS例4

HTMLの中身が大分スッキリしました。

次にCSSファイルの方にこう記述します。

 

CSS例2

書き方が変わっていますが、これで同じ「囲み枠」の完成です。

 

デザイン呼び出し(セレクタ)

 

CSSの指定方法のことを「セレクタ」と言います。

これは

「(HTMLにある)この名前を付けた部分は、CSSファイルにある同じ名前のCSSを適用させる」

という意味です。

 

このセレクタは「タグ・ID・class」の3種類あり、それぞれ記述方法が異なります。

セレクタ

●タグ

HTMLの同一タグすべてに反映されます。CSSの記述方法はそのままタグを指定してあげるだけです。

●ID

HTMLでIDの名前を付けたものに反映されます。CSSの記述方法はID名に「#」を付けて指定してあげます。

●Class

HTMLでclassの名前を付けたものに反映されます。CSSの記述方法はクラス名に「.」を付けて指定してあげます。

 

IDとclassの違い

IDは1ページ中に同じIDは1度しか使えませんが、classは同じ名前であっても何度も使うことができます。

ややこしいので、基本的にはclassですべて指定すれば問題ありません。

 

「CSS」のおさらい

簡単に今回のまとめをしておくです~。
CSSのまとめ

CSSはHTMLを装飾するもの

繰り返し使うデザインならCSSとHTMLを分けて記述したほうがいい

 

関連用語

CMS

PHP

JavaScript

HTML

 

その他参考になる記事

CSSとは:SEO HACKS

今さら聞けない!CSSとは【初心者向け】:TECH ACADEMY

 

 

アフィリエイト用語辞典 一覧に戻る

この記事を書いた人

著者:afb運用チーム

高収入アフィリエイター様からの満足度11年連続1位の評価※をいただいているafbの運用チームです。
経験豊富な専門スタッフが、アフィリエイトの知識やノウハウを解説します。

※ 2013〜2023年6月に実施された、特定非営利活動法人アフィリエイト・マーケティング協会の 「アフィリエイト・プログラムに関する意識調査」における利用者満足度調査による