6-CSSを使う

サイトの紹介と使い方動画


created: 2021/08/12 modified: 2021/09/14

初めに

① CSSは、HTMLコードで作った表示を飾り付け(装飾、デザイン)します。
② デザイン(文字の大きさ、太さなど)はプラットフォーム(アメーバowndなど)によって、初期設定されています。
③ ②の初期設定を自分が、部分的に変更することができます。
④ パソコンなどの液晶画面は、素子(ちいさな粒)がぎっしりと並んで作られています。
1024x768などの液晶画面の解像度は、この素子の下図が縦と横にいくつ並んでいるかで決まります。
そして、この素子1つのことをピクセル(px)と呼びます。

操作

① 3-プラットフォーム-土台-アメーバowndの準備の「CSSの編集方法」を参照してください。

HTMLタグとクラス

HTMLタグ

① 特定のHTMLタグに対して変更することができます。
② 下の例は、「<p>タグで表示する文字の大きさを20ピクセルにする。」という命令です。

p{
  font-size:20px;
}

クラス

① 特定のHTMLタグの1つ(あるいは複数)に対して変更することができます。
② CSSでクラス(class)を作成するために .(ピリオド)+クラス名を宣言します。
③ 下の例でクラス名はexampleになります。
④ 下の例で クラス example は、文字の色を「赤」にすることを意味します。
⑤ HTMLでCSSのクラスを利用するためにタグの属性 class を使います。
⑥ 下の例で、abcは赤く表示されます。

CSSの内容(コード)
.example{
  color:red;
}
HTMLの内容(コード)
<p class="example">abc</p>

文字の大きさを変える

.my-fontsize{
  font-size:20px;
}

文字の太さを変える

.my-weight{
  font-weight:bold;
}

文字の色を変える

.my-color{
  color:blue;
}

CSS リファレンス

① クイックリファレンスまたは、CSSCopyにCSSの説明やリストがあります。
② 膨大な量がありますが、少しずつ覚えればいいと思います。
③ 筆者も1、2割しか覚えていません。
必要になったら調べています。

メールアドレス:

お問合せ・御要望

  • お問合せ
  • トップへ戻る
    タイトルとURLをコピーしました