mosya

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">