これからプログラミング、特にWeb制作を学んでいきたいという方の中には「CSSって何？意味が分からない」という方もいらっしゃると思います。プログラミングは知識がゼロの方には難しく感じるかもしれませんが、「意味」が分かってくるとすんなり理解できるようになりますよ。
この記事ではCSSのことをまったく知らない方でも、ご理解いただけるように解説していきますので、ぜひ参考にしてください。
そもそもCSSって何？
CSSとはカスケーディング・スタイル・シートの略で、ウェブページのスタイルを指定するための言語です。HTMLなどで作成されるウェブページではスタイルシートの言語の1つであるCSSが利用されています。
CSSは正式にはプログラミング言語ではなく、マークアップ言語でもありません。CSSはスタイルシート言語と呼ばれるものです。CSSはHTMLの要素にスタイルを指定するために使います。
CSSの使い方や意味
CSSはHTMLと組み合わせて使用する言語です。HTMLはウェブページ内の各要素を構成したり、情報構造を定義するものです。CSSはそのHTMLをどのように装飾するかを指定するために使用します。
ここで、実際にCSSを使用する際の使い方を解説していきます。
CSSとはどんなもの？
WEBページではHTMLとCSSという言語で見た目を作成しています。
CSSとは、HTMLのタグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを装飾を指定するための言語です
CSSで何をするの？
CSSはHTMLのタグの何を、どうするのかを記述しています。HTMLの装飾に関してはあらゆることができます。
CSSファイルの使い方：HTMLとCSSのファイルを作る
CSSのファイルを使用する際は、HTMLとCSSのファイルを用意します。
以下がHTMLファイルの基本形となります。全く勉強をしたことがない方だと難しい言葉が並んでいると思われるかもしれません。まずは、意味を理解しようとするよりも、この内容を必ず記載しなければいけないということを覚えておく程度でいいでしょう。
<!doctype html> <html> <head> <meta charset=”UTF-8″> <title>Webサイトのタイトル</title> <link rel=”stylesheet” href=”css/style.css”> </head> <body> この中に表示させたい内容を書いていきます </body> </html>
この中にHTMLファイルの中に表示させたい内容を記入していきます。そして、保存形式が決まっていて、基本的にHTMLファイルは「index.html」という名前で保存します。ファイル名を「.html」にすることで、パソコンがこのファイルはHTMLのファイルだと認識してくれます。
HTMLのファイルを作成した後、CSSのファイルを作成します。
@charset “UTF-8”; この後にスタイル形式を指定していきます
ファイル名はHTMLと同じように基本的には「style.css」という名前にすることが推奨されています。.CSSとつけることでパソコンがCSSファイルであるということを認識してくれます。
HTMLとCSSを保存するフォルダの注意事項
HTMLとCSSのファイルは適切な形式のフォルダを作成して納める必要があります。これができていないとファイルが正しく動作しません。
下記はフォルダの例です。大本であるすべてのフォルダを保存するフォルダの名前は作成するプロジェクトが分かりやすいように付けるといいでしょう。HTMLのファイルは大本のフォルダの直下に配置します。CSSは複数のファイルを作ることが多いので、CSSのフォルダを作ってその下に配置します。
HTMLは大本のファイルに直接配置する、CSSは専用のファイルを作ると覚えてください。
◎sampleフォルダ
├index.html
└◇cssフォルダ
├reset.css
└style.css
CSSの意味、書き方 、文法
この項目ではCSSの書き方や文法、そしてそれぞれの意味について解説していきます。
CSSを構成する要素
例えばCSSでbody部分に黒を指定したい、という場合以下のように指定します。
body{
color:black
}上記コードの結果は以下の通りです。bodyと呼ばれる画面の全体の部分が黒に指定されました。
この中のbodyという部分がセレクタ、colorの部分がプロパティ、blackの部分が値といいます。CSSは基本的にこの３つの要素からなります。
CSSの要素：セレクタとは
セレクタとは、CSSによる指定をどこの部分に対して適用するかを決めるものになります。今回紹介した例ではbodyと呼ばれる部分に関して指定しています。
CSSの要素：プロパティと値とは
プロパティと値は常にセットで書きます。プロパティはcolorやfont-sizeなどどの要素に関してなのかというのを記載します。値はプロパティで指定した要素の値を指定します。
頻出のCSSのプロパティとその意味を紹介
ここで、代表的なCSSのプロパティの書き方や文法、そしてどういう意味があるかを解説していきます。どれもよく使うものですので、ぜひ覚えてみてください。
ちなみに前述のセレクタと呼ばれる範囲指定をせずに下記を記入した場合、ファイルの全体に指定したプロパティが反映されます。
CSSでできること１：フォントの指定
CSSでは、HTMLで入力した文章の文字の大きさ、太さなどを指定することができます。具体的なプロパティとしては、以下の通りです。具体的には以下のようなfont○○というコードを使用します。
| font | フォント全般に対する指定 |
| font-size | 文字の大きさ |
| font-weight | 文字の太さ |
| font-family | 文字のフォントの種類（ゴシック体などの指定） |
| font-style | 文字のスタイル |
CSSでできること２：背景に関する指定
CSSではHTMLで指定した背景の画像の大きさや位置を変えたり、色を変更したりすることができます。
| background | 背景全般に対する指定 |
| background-color | 背景の色 |
| background-image | 背景画像に対する指定 |
| background-position | 背景画像の表示位置 |
CSSでできること３：領域の高さや幅を指定する
CSSでは、HTMLで指定した内容領域の高さや幅を指定することができます。この高さや幅は数値はもちろん、比率で指定することもできます。
| height | 内容領域の高さ |
| weight | 内容領域の幅 |
CSSでできること４：位置の指定をする
CSSでは、ある地点を起点として、右に○○pixelなどと言った形で要素の位置を指定します。具体的には以下のようなプロパティがあり、それぞれ右、左などにどれだけというような指定をします。
| top | 上からの配置位置 |
| bottom | 下からの配置位置 |
| right | 右からの配置位置 |
| left | 左からの配置位置 |
まとめ
いかがでしたか、今回はCSSの基礎や意味について解説しました。
全く触れたことがないと難しそうに感じるCSSですが、規則や意味合いが分かると自分にも使えそうと思われたのではないでしょうか。CSSはある程度使い方が分かってくるとそれほど難しくなく、反映させるのも簡単なので、使っていて楽しくなってきます。
まずは、ファイルの作成と簡単なプロパティを試してみることから学習を開始してみるのもおすすめです。
この記事がCSS学習の第一歩としてお役立つと嬉しいです。
0 件のコメント:
コメントを投稿