CSS~よく使うプロパティ~
こんにちはkazutoです。今回は、CSSという言語について解説をしていきます。
CSSとは
CSSとはHTML要素に対して装飾する言語です。あなたが見ているサイト
- クラス属性
- id属性
を取得して色を指定、文字のサイズを変えたりします。言葉で説明されてばかりでは、頭の中に入らないですね。なので実例を踏まえて説明していきます。
<h1 class="a">色が変わります。</h1>
<h2 class="b">色が変わります。</h2>
<p class="c">サイズが変わります。</p>こちらのHTML要素にCSSで装飾してみると
.a{
color: red;
}
.b{
color: blue;
}
.c{
font-size: 50px;
}
と上記のように色が変わります。普段、馴染みがある
- Youtyube
と言ったサービスにもCSSという言語が使われています。CSSを使うのに慣れてきたらアニメーションなども作れるようになります。
CSS環境構築
勉強熱心な皆さんは、既にご存知だとい思いますがHTMLとCSSは違うファイルに記述します。（HTMLに埋め込んで各方法もありますが省略します。）
その際に、HTMLファイルとCSSファイルを連結させるという手順を踏まないといけないです。少し面倒だと感じますが難しい手順はないので大丈夫です。
下記のソースコードをご覧ください。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- ⬇️⬇️⬇️ -->
<link rel="stylesheet" href="style.css">
</head>矢印が指しているのがCSSファイルを読みこんている記述です。正直、中身がどのような働きをしているのかは、初学者の時点では覚えなくても大丈夫です。
まあとりあえず、
href="ファイル名"hrefのなかにファイル名を記述すれば問題はないです。
よく使うプロパティ
color
文字の色を変えます。
color: カラー色;
color: blue;background-color
背景色を変えます。
background-color:背景色は;
background-color:red;font-size
文字の大きさをしています。
font-size:サイズ指定 ;
font-size:33px;width
横幅を指定します。
width: ;
width:100% ;
width: 100px;
width:100vw ;height
高さを指定します。
height: 高さ指定;
height: 22px;
height: 100%;
height:89vw;まとめ ~よく使うプロパティ~
今回は、CSSについて解説しました。
要約すると
- CSS とは
- CSS環境構築
- よく使うプロパティについて
CSSはwebサイトのフロント部分に欠かせない技術なのでHTMLとセットで覚えましょう。
ここまで読み終えたらアウトプットしましょう。