こんにちは、フローです。
今日はCSSを書くと言って、ずっと書いてなかったので、書きたいと思います笑
前回の記事はこちらです。
目次
HTMLとCSSの例
まずは、HTMLのコードをみていきましょう
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>ようこそ！私のWEBサイトへ</h1>
<p>ここにテキストを入れます</p>
<p>ここに二つ目のテキストを入れます</p>
</body>
</html>次に、このHTMLに対してのCSSの記述例です。
body {
background-color: lightblue;
color: white;
font-family: Arial, sans-serif;
}
h1 {
color: navy;
font-size: 2em;
text-align: center;
text-shadow: 2px 2px lightgray;
}
p {
font-size: 1.2em;
line-height: 1.5;
}この、CSSの記述例を詳しく書いていきます。
CSSとは
Cascading Style Sheets（カスケーディング・スタイル・シート）の略で、
HTML文書などのWebページに対して、ページのレイアウトや装飾、
スタイルなどを定義するための言語です。
CSSは、HTML文書に記述された要素（タグ）に対して、
色やフォント、レイアウト、位置、サイズなどのスタイルを適用することができます。
このため、Webページのデザインやレイアウトを調整する際に非常に重要な役割を果たします。
また、CSSは、HTML文書とは別のファイルに記述することができ、
Webページの構造とスタイルを分離することができます。
これにより、Webページの保守や更新が容易になるという利点があります。
background-color
Webページの背景色を指定するために使用されます。
このプロパティに指定された値は、
HTMLの”body”要素や、”div”要素などの背景色を指定するために使用されます。
例えば、
“background-color: lightblue;”と指定すると、Webページの背景色が薄い青色になります。
このように、背景色を変更することで、Webページの見た目や印象を変えることができます。
color
Webページ内のテキストの色を指定するために使用されます。
このプロパティに指定された値は、
HTMLの”p”要素や、”h1″要素などのテキストの色を指定するために使用されます。
例えば、
“color: white;”と指定すると、テキストの色が白になります。
このように、テキストの色を変更することで、Webページの見た目や印象を変えることができます。
また、Webページ全体の文字色を指定する場合には、”body”要素に”color”プロパティを指定します。
font-family
Webページ内のテキストのフォントファミリー（種類）を指定するために使用されます。
このプロパティに指定された値は、
HTMLの”p”要素や、”h1″要素などのテキストのフォントを指定するために使用されます。
例えば、
“font-family: Arial, sans-serif;”と指定すると、
テキストのフォントがArialになります。
もしArialが見つからない場合には、
sans-serifというフォントファミリーの中から選ばれます。
このように、Webページ内のテキストに指定するフォントを指定することで、
Webページの見た目や印象を変えることができます。
font-size
Webページ内のテキストのフォントサイズを指定するために使用されます。
このプロパティに指定された値は、
HTMLの”p”要素や、”h1″要素などのテキストのフォントサイズを指定するために使用されます。
例えば、
“font-size: 1.2em;”と指定すると、テキストのフォントサイズが親要素のフォントサイズの1.2倍になります。
このように、Webページ内のテキストのフォントサイズを変更することで、
Webページの見た目や印象を変えることができます。
また、Webページ全体のフォントサイズを指定する場合には、
“body”要素に”font-size”プロパティを指定します。
text-align
Webページ内のテキストの水平方向の配置（左寄せ、中央揃え、右寄せなど）
を指定するために使用されます。
このプロパティに指定された値は、
HTMLの”p”要素や、”h1″要素などのテキストの水平方向の配置を指定するために使用されます。
例えば、
“text-align: center;”と指定すると、テキストが中央揃えになります。
このように、Webページ内のテキストの水平方向の配置を変更することで、
Webページの見た目や印象を変えることができます。
また、Webページ全体のテキストの水平方向の配置を指定する場合には、
“body”要素に”text-align”プロパティを指定します。
text-shadow
Webページ内のテキストに影をつけるために使用されます。
このプロパティに指定された値は、
HTMLの”p”要素や、”h1″要素などのテキストに影をつけるために使用されます。
例えば、
“text-shadow: 2px 2px lightgray;”と指定すると、
テキストに右下方向に2ピクセル、
下方向に2ピクセルの位置に、薄い灰色の影がつきます。
このように、Webページ内のテキストに影をつけることで、
テキストの立体感や強調を演出することができます。
ただし、影をつけすぎると読みづらくなる場合があるため、適度な量にとどめることが重要です。
line-height
Webページ内のテキストの行間を指定するために使用されます。
このプロパティに指定された値は、
HTMLの”p”要素や、”h1″要素などのテキストの行間を指定するために使用されます。
例えば、
“line-height: 1.5;”と指定すると、
テキストの行間がフォントサイズの1.5倍になります。
このように、Webページ内のテキストの行間を変更することで、
テキストの読みやすさや見た目を調整することができます。
また、Webページ全体の行間を指定する場合には、
“body”要素に”line-height”プロパティを指定します。
まとめ
今回紹介したCSSのプロパティは、ごく一部です。
他にもたくさんありすぎて紹介しきれませんが、今回はこの辺で。
文字の値の数字を変えてみたり、色の指定を変えてみたり、遊んでみて下さい。
プログラミングはとにかく頭と指を動かさないと覚えていきません。
レッツチャレンジ！
最近のコメント