HTML その４

2020年2月4日 08:40

<h1>前回の復習</h1>

(CSS)
h1{
color: #ff0000 ;
}

これで<h1>の文章の文字は赤く変わります。

この時、{}　で囲まれた行はインデント（字下げ）すること。
CSSのプロパティ（この場合color）の末尾にはコロン（:）をつけ、
行末にはセミコロン（;）をつける必要があります。

またCSSにもコメントを記述できる、

/* この部分がコメントになります。*/

上記の通り、/* */ の仲の部分がコメントになります。

CSSには色を変えるだけでなく、文字の大きさ、フォントの種類など
様々な要素を設定できる。

（HTML)
<h1>hello world</h1>
<h2>こんにちは</h2>
<p>プログラマーになるために毎日コツコツとアウトプットしていきます！</p>

（CSS）
h1{
color:#ff0000;
}

h2{
color:#00ff00;
}

p{
color:#0000ff;
}

今回もこれを使って出力していきます。

ここからCSSで設定を加えてみます。

h1{
color:#ff0000;
font-size: 10px;
/* font-sizeは文字の大きさを変えます。*/
}

h2{
color:#00ff00;
font-family: serif;
/* font-familyはフォントの種類を指定します。*/
}

p{
color:#0000ff;
font-size: 40px;
font-family:"Avenir Next";
/* フォント名にスペースがある時は、ダブルクォーテーションで囲みます*/
}

ここで出力の前にお詫びすることが一点、
フォント名を入力したのですが、そのフォントが私のPCには入っていません。
ですので、プログラム自体はこれで大丈夫かと思いますが、
字体は変わっておりません、大変申し訳ございません。
今回はあくまで雰囲気を掴む感じで出力します…。

hello world が小さすぎて非常に見にくいですが、
このようにCSSを使って様々な表現ができるようです。

今回はここまでにします。

私はプログラミング初体験ですので、表記自体間違えているかもしれません、その時は指摘していただけると助かります。

また、知識のある方、コメントなどでアドバイスをお待ちしております！

いいなと思ったら応援しよう！