見出し画像

学習ログ〜CSS〜

本日の学び

1.CSSと文字の色
2.文字の大きさと種類
3.横幅、高さ、背景色
4.タグに名前をつける


1.CSSと文字の色

CSS
 ・レイアウト(色・大きさ・配置)を整えるための言葉
 ・HTMLで用意した要素に対して
 《どこの》《何を》《どうするか》を指定することができる

例)
HTML
<h1>prorate</h1>

   ⬇︎

CSS
h1{
 color: red;
 }

h1要素の(どこの)、color(何を)を、赤色(red)にする。

※対象の要素名をセレクター、変更項目をプロパティという


colorプロパティ
color: #ff0000 ; 16進数のカラーコードで色を指定する
※主要カラーは、コード打たず《red》で指定できる

CSSのプロパティの末尾はコロン(:)、行末はセミコロン(;)


2.文字の大きさと種類

font-size: 文字の大きさpx;
・文字の大きさを指定する
・px(ピクセル)を用いて指定する
・フォントの種類指定可能

font-family:フォント名:
・フォントの種類指定
・フォント名にスペースがある場合は、
 font-family:"フォント名": ダブルクォーテーションで囲む

font-familyの種類
明朝体
・serif
・YuMincho

ゴシック体
・sans-serif
・Lucida Grande


3.横幅、高さ、背景色

background-color: #ddddd
・背景色のプロパティ
・色の指定はcolorと同様
・#ddddddは#dddに省略可

width: 数値px; 横幅のプロパティ

height: 数値px;  高さのプロパティ


4.タグに名前をつける

class
これをつけることによって、それぞれの要素を識別し、
別々のCSSを適用することができる。 

1つのリスト要素に色をつけた場合どのように表したらいいのか?

HTML
<li class-"selected">HTML</li>

CSS
.selected{
  color: red;
 }

※classの場合は、ドット(.)が必要、タグの場合は必要ない
selectedが1つのリスト要素に色をつけてくれるclass名
ドットを付けることで、selectedと云うclass名がつている全てのHTML要素に同じCSSが適用される


本日のまとめ

CSSでは沢山のタグがでてきた。

color
font-size
font-family
background-color
width
height
class
selected


まずはこれらを何回もコードを書きながら覚えていかなければならないな。
ノートに書くだけ、記録するだけではなく実際コードを入力して体に染み込ませようと! 

私は、英語が苦手なので変な良い方で覚えたいと思います!

次回までにクリアにすること・・・classについて

classを理解するの少し時間がかかったので、他に参考になる記事や書籍を読もうと思います。

この記事が気に入ったらサポートをしてみませんか?