作成日: 2021/08/12 更新日: 2023/03/25 サイトの紹介と使い方
初めに
① 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割しか覚えていません。
必要になったら調べています。
メールアドレス: