スポンサー

CSSの基本・CSSの構造を簡単に説明

デベロッパーパーツール(開発者ツール)の画面WP CSS
デベロッパーパーツール(開発者ツール)の画面
WP CSS
スポンサー

CSSとhtmlの違い

  • htmlは<>で囲んだタグとタグで挟まれた要素と属性からなる
  • CSSはhtmlの要素のスタイル
  • CSSはプロパティと値からなる

htmlはウェブページを作るために開発された言語で、CSSでそのスタイルを指示します。

htmlの例(下の画像より)

<h2>ミニシアター</h2>

<img decoding=”async” width=”512″ height=”288″ src=”/with2.jpg” alt=”魔法使いと黒猫のウィズ”>

htmlタグと要素の例

タグ要素(<>で囲んだタグとタグの間)
h2タグミニシアター
imgタグwidth属性(幅の指定)
height属性(高さの指定)
src属性(URLを指定)
alt属性(代替テキスト)

下の画像は、デベロッパーパーツール(開発者ツール)の画面です。

赤い枠の部分をクリックし、本文のh2にカーソルを合わせると、h2のスタイルが表示されます。

デベロッパーツールの使い方
デベロッパーツールの使い方

赤い枠はh2で黄色い枠はimgです。

デベロッパーツールの使い方
デベロッパーツールの使い方

CSSはプロパティ+値からなる

h2 {
font-family: serif;
padding: 0 0.5em 0.5em 2.5em;
border-width: 0 0 3px 3px;
font-style: italic;
border-bottom: solid 2px;
}

プロパティ
font-family(書体)serif
padding(境界線の内側の余白)0 0.5em 0.5em 2.5em
margin(境界線の外側の余白)
border-width(ボーダーの幅)0 0 3px 3px(下と左が3px)
font-styleitalic(イタリック
border-bottom(下のボーダーについて)solid 2px(2pxの実勢)

プロパティ値の記述 padding 他

  • 「0 0.5em 0.5em 2.5em」は、「上、右、下、左」
  • 値が2つの場合「0 0.5em」は「上下、左右」で「上下が0で、左右が0.5em」
  • 値が1つの場合「0.5em」は「上下左右が0.5em」
デベロッパーツールの使い方 padding
デベロッパーツールの使い方 padding

上の画像でわかるように、1em=24px

  • 「0 0.5em 0.5em 2.5em」は「上0、右12px、下12px、左60px」

デベロッパーツール(開発者ツール)

左がウェブページで、右がそのページのhtml・cssです。

デベロッパーパーツール(開発者ツール)の画面
デベロッパーパーツール(開発者ツール)の画面

Google Chrome のデベロッパーパーツール(開発者ツール)の開き方

  1. ブラウザでページを開く
  2. F12(または三点メニュー→その他のツール→デロッパー ツール)でデロッパー ツールが表示される

Safariのデベロッパーパーツール(開発者ツール)の開き方

  1. メニューバー
  2. 開発メニュー→デベロッパーパーツール

メニューバーに開発メニューバーが無い場合は、設定→詳細→「メニューバーに「開発」メニューを表示」を選択

スポンサー

CSSの基本・CSSの構造

要素とプロパティとプロパティ値

上の画像より

h2 {
    font-size: 25.6px;
    line-height: 25.6px;
}

上のコードの要素

要素プロパティプロパティ値
h2font-size(フォントサイズ)25.6ピクセル
line-height(行間)25.6ピクセル
  • プロパティとプロパティ値の間は :(コロン)
  • プロパティ値の終了は ;(セミコロン)を最後に付ける

サイズの定義

文字や行間などのサイズは、px、em、%などあります。

1em16px100%

x-small、small、medium、largeなどで定義する場合もあります。

CSSを変更する

デベロッパーパーツール(開発者ツール)を使うとページを確認しながら、プロパティやプロパティ値を変更できます。

例 h2のフォントのサイズを42pxに変更します。

html 変更前

デベロッパーパーツール(開発者ツール)の画面
デベロッパーパーツール(開発者ツール)の画面

h2(見出し)のフォントのサイズを42pxに変更

CSSを変更する
h2(見出し)のフォントのサイズを42pxに変更

セレクター

  • h2のセレクター
  • pのセレクター

要素 {プロパティ : プロパティ値 } を言います。

h2 {
    font-size: 25.6px;
    line-height: 25.6px;
}
p {
    font-size: 16px;
    line-height: 1.6px;
}

見出し(h2)のサイズフォントが25.6px、行間が25.6pxで、段落(p)のフォントサイズが16px、行間が1.6pxです。

スポンサー

ブログの書き方・見出しの順番

SEO対策のためにも、次の順番でhタグを使った方がいいようです。

  • h1はページのタイトルに使われる(ページに1つだけ)
  • h2~h6までを見出しに使う(実際はh5、h6を使うことは殆どない)
  • h2の小見出しはh3、h4・・と順番通りに使う(h2の下にh3を飛ばして、h4にしない)

h1、h2、h3、h4と順番に並べることで、Googleに伝わりやすい。

ブログの書き方 hタグ
ブログの書き方 見出しの順番

TikTok、毎日19時頃投稿予定

福岡のランチやカフェや福岡の情報について毎日19時頃投稿予定です。
TikTok @y20189
@y20189
スポンサー
FOLLOW
WordPress を簡単に
タイトルとURLをコピーしました