CSSの基本を学ぼう
初心者のためのCSS入門11 / 9
さぁ、次のステップに進みましょう!
Webサイトの土台となるHTMLができてきましたね!でも、HTMLだけで作られたものは見た目のバランスも悪いです。
今回のレッスンから、これまで作ったHTMLにCSSという言語を使って装飾を加えていきましょう。
CSSとは?
CSS(シーエスエス)とは「Cascading Style Sheets(キャスケーディング・スタイル・シート)」の略で、スタイル言語とも呼ばれます。
文字の大きさや色、画像やボタンの位置や形などを変えることができ、デザインの幅が広がります。
CSSの書き方
HTMLでp
タグで挟まれた要素は、「段落」を表しましたね。
この段落に書かれた文字色をCSSを使って緑色に変えてみます。
このようにCSSでは、装飾したい要素に対して、文字の色を変更できます。
CSSのきまり
セレクター・プロパティ・値を埋めることによって、「どこの・何を・どのような見た目に変えるのか」を指定することができます。
CSSは波かっこ{
から始まり、波かっこ}
で終わります。
またプロパティ:
(コロン)値の後ろには;
(セミコロン)を入れる必要があります。必ずそれぞれの後ろにセミコロンを入れておきましょう。
CSSを読み込もう
CSSファイルは、例えばstyle.css
のようにファイル名の末を.css
にします。
CSSを使うにはまずCSSファイルを読み込む必要があります。link
タグを使って下のようにCSSを読み込みます。
<link rel="stylesheet" href="CSSのURL">
CSSが同じサイト内にある場合は、CSSが設置されている場所に対してパスを指定してCSSを読み込むことができます。
<!--
CSSの場所が https://mosya.dev/assets/style.cssの場合
-->
<link rel="stylesheet" href="/assets/style.css">