ＨＴＭＬ　６日目、ＣＳＳ　初日

投稿日：2021-10-25

更新日：2022-03-24

（深堀・続き）第５章：グループの定義

div要素

<div class="goods">
  <h2>商品名</h2>
  <div class="text">商品説明</div>
  <div class="price">1,000円</div>
</div>

1つのHTMLファイル内で同じidを複数使うことができない
そのため、デザインのために「印をつけたい」時はclass

id名：1つのHTMLファイル内で同じ名前を複数を使うことができない
class名： 1つのHTMLファイル内で同じ名前を複数を使える
　　※「id名」はページ内リンクの表示位置に名前を付けるときに使用
　　　デザインでは「class」を使用するといい

class名・id名の命名規則

「半角英数字」「ハイフン」「アンダーバー」を使用
最初の文字に「数字」「2つのハイフン（–）

「半角スペース」で区切ると１つの要素に複数のclass名を指定できる

<div class="goods pickup soldout">
  <h2>商品名</h2>
　<div class="text"> 商品説明</div>
  <div class="price sale">1,000円</div>
</div>

class名「goods」と「pickup」と「soldout」

class名「price」と「sale」

span要素

文章内の一部分をグループ化してデザイン変更する時はspan要素を使う

<h1>SF映画特集<span class="subtitle"> - これからのSF</span></h1>

デザインで使用する大きなグループ（ブロック）を作る時はdiv要素
文章内一部分の小さなグループを作る時はspan要素

※div要素は改行される、span要素は改行されない

第９章：スタイルシートの基本

スタイルシートとは

メリット

文章構造とデザインを分離することができる
細かいデザインを設定できる
デザインを一括管理できる
（複数のHTMLファイルをまとめてデザイン管理できる）
デバイスごとにデザインできる

CSSは外部管理する

CSSの記述法

p {
  color: red;
  font-size: 20px;
}

中括弧 { } の中は字下げして見やすく記述

CSSの場合、一つのセレクタに対して多くのスタイルを定義するので、
一定義ごとに改行して見やすく記述

コメントの記述法：/* コメント */

※VSCodeでは、HTMLと同様に「ctrl」+「/」でコメント化される

p {
  /* 文字色 */
  color: red;
  /* 文字サイズ */
  font-size: 50px;
}

Google chrome 検証ツール

調べたいページを表示して【F12】を押すと検証ツールが表示される。

CSS適用方式

インライン方式
HTML内の要素にstyle属性を追記して直接適用させる
埋め込み方式
HTMLのhead要素内にstyleタグを使って記述し適用させる
外部リンク方式
HTMLとは別にCSSファイルを作成し、HTMLファイルからCSSファイルを作成し、HTMLファイルをリンクさせて適用させる

９割は「外部リンク方式」

外部リンク方式

<link href="読み込むファイルの場所" rel="ファイルの種類">

【必須属性】外部ファイルの場所を指定する属性：link要素にhref属性

【必須属性】画像の説明を指定する属性：link要素にrel属性

ファイルの新規作成

CSSファイルの命名規則

ファイル名.css

※HTMLと同じ。小文字・英単語を利用する

第10章：文字・文章のスタイルを定義

文字色を定義する：color

color: 色の値;

リンク：色番号参考

カテゴリー

ブログ一覧

コメントは受け付けていません。

ＨＴＭＬ ６日目、ＣＳＳ 初日