BLOG

CSSについて – 初心者向

WEB+DESIGN人気記事

WEBサイトを構成する、
文字や画像などの様々な要素。

それらの要素の
⭐️ 色を変えたり、
⭐️ サイズを変えたり、
⭐️ 位置を変えたり、
⭐️ グルグル回したり、
⭐️ フワッと表示させたり、
⭐️ 線を引いたり、
⭐️ 丸を描いたり、
⭐️ 影をつけるなど、
スタイル（見た目）を設定する言語が「CSS（シーエスエス）」になります。

今回は、そんなホームページのデザイン表現に欠かせない、
「CSS」についてご紹介したいと思います。 😊

CSSとは

CSSとは

「CSS（Cascading Style Sheets）」は、
「HTML」や「XML」など 「マークアップ言語」で作成した要素 を デザインする言語 です。
記述には「テキストエディタ」を使用します。
HTMLについて

「マークアップ言語」は、情報の構造化や役割の明確化を行う言語のため、
スタイル（見た目）を設定する機能がありません。
そこで「CSS」を使用し、サイズや位置、色など、スタイル（見た目）の設定を行います。

「CSS」には「CSS1」 「CSS2」 「CSS3」といったバージョンがあり、
バージョンアップと共に機能の拡充が行われています。 👌
「CSS3」より導入されたアニメーションは、近年のHPに欠かせない表現となっています。

CSSの書き方

CSSの書き方

「CSS」は「セレクタ」「プロパティ」「プロパティ値」で構成されています。
「セレクタ」で、デザインする要素を指定し、
「プロパティ」と「プロパティ値」でスタイルを指定します。 👇

記述ルール

基本的な記述ルールをまとめると

  1. 最初に 「 セレクタ 」 を記述します
  2. 「 セレクタ 」 の後に 「 { } （波カッコ）」 を記述します
  3. 「 { } 」 の中に 「プロパティ : プロパティ値 ; 」 でスタイルを指定します

※ プロパティが1つの場合、最後の「;」が無くても問題ありません。

複数の 「セレクタ」 をまとめて指定する場合、
「セレクタA,セレクタB」のように「,（カンマ）」で区切ります。


        セレクタA,セレクタB { }

ひとつの要素に同じ「プロパティ」が指定されている場合、
「CSS」内のより後ろに記述されている「プロパティ値」、
もしくは、セレクタの優先順位が高い「プロパティ値」が適用されます。

セレクタ

スタイルを適用する要素を指定する「セレクタ」には、

  1. 全ての要素（全称セレクタ） 【 * 】
  2. HTMLタグ 【 header,footer,div,p など 】
  3. idセレクタ 【 #id名 】
  4. classセレクタ 【 .class名 】
  5. 子孫セレクタ 【 A B 】
  6. 子セレクタ 【 A > B 】
  7. 隣接セレクタ 【 A + B 】
  8. 擬似クラスセレクタ 【 :hover,:focus,:first-child など 】
  9. 擬似要素セレクタ 【 :before,:after など 】

など、さまざまな種類があります。

セレクタの優先順位

要素に同プロパティで値の違うスタイルが複数指定されている場合、
「CSS」のより後ろに記述されている「プロパティ値」が適用されます。

ただし、セレクタには優先順位があり、
セレクタの種類によっては記述の順番を無視して「プロパティ値」が適用されます。

「idセレクタ」と「classセレクタ」では「idセレクタ」の方が優先順位が高いため、
「classセレクタ」より前に「idセレクタ」でスタイルが記述されていても、
「idセレクタ」の「プロパティ値」が適用されます。

プロパティ

「CSS」の「プロパティ」は200種類以上あります。

ただし、「プロパティ」の中には、
特定のブラウザで機能しないものもあるので注意と確認が必要です。

覚えている「プロパティ」が多いに越したことはありませんが、
「css 背景」「css 文字サイズ」などでネット検索すれば様々な情報がヒットするので、
初心者の方もプレッシャーに感じる必要はありません。

プロパティ値

「プロパティ値」もネット検索で簡単に調べることができます。

幅や高さ、フォント、配置など「プロパティ値」を数値で指定する場合、
「%」「px」「em」「calc」など、さまざまな単位での指定が可能です。

現在、非推奨となっていますが「!important」を付けて、
セレクタの記述順や優先順位を無視して強制的に「プロパティ値」を適用させる方法があります。

CSSの記述箇所

CSSの記述箇所

CSSを記述できる場所は
⭐️ CSSファイル
⭐️ <style> HTMLタグ
⭐️ HTML開始タグ内 （インライン）
の3箇所です。

CSSファイル

下記のコードをHTMLの「<head>」 内に記述し、
外部「CSSファイル」を読み込むことでスタイルを適用します。
「CSSファイル」の拡張子は「.css」になります。


        <link rel="stylesheet" href="◯◯◯.css" >

<style> HTMLタグ

「HTML」の「<style>」 タグ内にスタイルを記述します。
「<style>」 は 「<head>」 内以外にも記述ができます。 


        <style>
        header {
          width : 100% ;
          height : 50px ;
        }
        </style>

HTML開始タグ内 （インライン）

スタイルを適用したいHTMLの開始タグに直接記述します。


        <div style="width:100%;" > Hello </div>
CSSのコメントアウト

CSSのコメントアウト

CSSでは、下記のように 「 /* 」 と 「 */ 」 で囲みコメントを記述します。
コメント内で改行することも可能です。 


        / * コメント内容 * /

        / *
        コメント内容
        コメント内容
        コメント内容
        * /
最初に覚えたいCSSプロパティ

最初に覚えたいCSSプロパティ

サイズ・形状

width
横幅を指定
height
高さを指定
border-radius
角の丸みを指定
background
背景を指定
opacity
透明度を指定

距離・位置

padding
要素内側の余白を指定
border
要素の境界線を指定
margin
要素外側の距離を指定
position
要素の相対位置・絶対位置・固定位置を指定

フォント

font-family
フォントの種類を指定
font-size
フォントのサイズを指定
font-weight
フォントの太さを指定
line-height
行間を指定
text-align
行の揃え位置を指定
color
文字色を指定
CSS 関連ワード

CSS 関連ワード

リセットCSS

「リセットCSS」とは、WEBブラウザに組み込まれているデフォルトのCSSを上書きする「CSS」です。 🤔

デフォルトのCSSとは、スタイルが指定されていない「HTML」でも、
「見出し」 や 「リンク」 が判別しやすいように用意されているものですが、
ホームページを作成する場合、予期せぬレイアウト崩れの原因になる可能性があるため「リセットCSS」で一度クリアします。 😊

👉 「リセットCSS」は、他の「CSS」よりも最初に読み込みます。

CSSパララックス

「CSSパララックス」とは、CSSで「視差」を生じさせてインパクトを出す表現手法です。

要素ごとにスクロールスピードを変えたり、
スクロールしても背景画像を固定するすることで、
サイトに奥行きを与える効果があります。 ✨

「CSSパララックス」の実装には「JavaScript」を使用するものもあります。