「CSSが使えるとどんなメリットがあるの?」Web制作やプログラミングについて学び始めた人は、このような疑問を感じているかと思います。実は、CSSはWeb制作に欠かせない大切な言語なのです。プログラミング初心者にもおすすめな言語なので、ぜひ勉強することをおすすめします。この記事では、CSSの基本知識や使い方などについて、わかりやすく解説します。この記事を読んで、CSSの基本を理解していきましょう。Sheets(カスケーディング・スタイル・シート)の略で、Webページをデザインするための言語です。プログラミングにおいてはCSSと一緒にHTMLも勉強されることが多いですが、Web制作においてはHTMLとCSSは両方とも欠かせません。HTMLはWebページの構造を作る言語ですが、CSSはHTMLによって作られた構造の見た目を整える(=スタイルを整える)役割があります。ちなみに、厳密に言えばCSSはプログラミング言語ではなく、スタイルシート言語です。プログラミング言語は計算などの動作処理を行うものですが、CSSはあくまでスタイルを整える言語なので、スタイルシート言語と呼ばれています。具体的にCSSは、文字の大きさや色の指定、枠線の追加、テキストや画像の配置などができます。HTMLだけでもWebページの制作は可能ですが、CSSも用いることによって、よりデザイン性のあるWebページができあがるのです。ここで、CSSのWebページ制作における重要性を感じていただくためにも、HTMLだけ使ったWebページとHTMLとCSSを使ったWebページの違いを見てみましょう。HTMLだけを使ったWebページです。HTMLだけだと、色や画像の配置ができないので、見栄えに限界があります。CSSを適用したら以下のようなデザインになります。フォントの変更、テキストの拡大、アンダーラインの設定、テキストや画像の配置が行えるので、HTMLだけのページよりも見栄えが良くなりました。このように、Webページ制作においてはHTMLのみならずCSSも必要なのです。HTMLとCSSを一通りマスターすれば、デザイン性の高いWebページを作れるようになります。CSSの基礎:外部ファイルに書くCSSを記述する場所は、以下の3通りです。styleタグインライン外部ファイルしかし基本的にCSSは、HTMLとは別の外部ファイルに記述します。それぞれの書き方はどのように違うのか、どうして外部ファイルに書く方が基本なのかを見ていきましょう。styleタグに書く場合styleタグは、HTMLのheadタグの中に記述し、styleタグの中にCSSをどのように適用したいかを記述していきます。見出しのh2タグの背景色を水色にしたい場合のコードは、以下の通りです。今回の場合「h2(見出し)タグの背景色を水色にする」というCSSのコードを書きます。以下のように、見出しの背景色が水色になりました。styleタグにCSSを記述する場合、該当するHTMLにその都度コードを書く必要があります。「他のHTMLの見出しも水色の背景にしたい!」という場合、全てのHTMLページに、見出しの背景色を水色にするコードを書かなければなりません。Webサイトを1ページ分だけ制作するなら、styleタグにCSSを記述する方法でも大丈夫です。複数のページがあるWebサイトを制作する場合、styleタグに記述する方法は余計な手間がかかってしまいます。インラインに書く場合インラインにCSSを書く場合、HTML内の該当するタグの中に直接書き込みます。今回はインラインに書くやり方で、見出しの文字の色を赤色にしてみましょう。インラインにCSSを記述する場合、コードは以下の通りです。今回の場合「h2(見出し)タグの文字色を赤色にする」というCSSのコードを書きます。すると、Webページの見た目は以下の通りになります。見出しの文字色が赤色に変わりました。インラインにCSSを記述する方法も、CSSを直接書いた箇所にしかCSSが適用されません。したがって、制作したいWebサイト内に複数のページを用意する場合、インラインに書く方法は不向きです。外部ファイルに書きたい場合、HTMLファイルとは別のファイルを用意して、そのファイルにCSSのコードを書き込みます。HTMLファイルのheadタグ内で、CSSファイルを読み込むためのコードを記述します。上記の画像のように、linkタグを設置し、href内に該当するCSSファイルのパスを指定します。今回は、外部ファイルに記述する方法で、本文のテキストを紫色にしてみましょう。変更前はこの通りですが、外部のCSSファイルに以下のコードを記述します。すると、本文のテキスト(pタグのテキスト)が紫色に変わりました。外部ファイルにCSSを記述する方法は「styleタグに書く方法」「インラインに書く方法」とは異なり、複数のページにCSSを同時に適用できるというメリットがあります。Web制作では同じサイト内に複数のページを用意する場合も多いですが、その際に外部ファイルにCSSを記述する方法を使えば、効率よくWebページを制作できます。したがって、Web制作においてはCSSを外部ファイルに記述する方法が基本的なのです。上で触れた通り、HTMLで外部ファイルを読み込む場合は、headタグ内でlinkタグを用いてCSSファイルを指定する必要があります。href=”CSSファイルのパス”>という書き方で書きましょう。CSSファイルのパスは、相対パスと呼ばれるパスを書くのが基本です。現在のファイルから、指定したいファイルまでのルートを指し示したもの。今回の場合、HTMLファイルからCSSファイルを読み込みたいので「HTMLファイル→CSSファイル」を指し示すパスを記述しましょう。相対パスを書く際は、以下のルールに基づいて記述します。今回は、以下の構造のフォルダ内で「index.html」というHTMLファイルから「style.css」というCSSファイルを読み込んでみます。img(フォルダ)この場合index.htmlから見て、style.cssは、同じ階層のcssフォルダ内にあります。したがって今回は、下の階層のファイルを指定する書き方で書きましょう。今回の場合だと、書き方は以下の通りになります。href=”./css/style.css”>相対パスは、HTMLとCSSの学習で必ず出てくる箇所なので、理解しておきましょう。CSSの基礎:使い方ではCSSのコーディングをする場合、どのような書き方をするのかを見ていきましょう。CSSのコーディングでは、セレクタプロパティ値この3つの部分を指定する形でコーディングします。それぞれ3つについて見ていきましょう。セレクタセレクタとは、HTMLのどの要素を変えるかを指定する際に使うものです。pタグを変えたい時はpタグを、h2タグを変えたい時はh2タグを指定します。セレクタによる要素の指定方法は、以下の通りです。指定したいタグの名前をそのまま記述します。【全ての要素への指定方法】*を記述します。特定のクラスを指定する場合「.クラス名」、特定のidを指定する場合「#id名」と書きます。子要素名を記述します。要素名の間には半角スペースを入れましょう。プロパティプロパティとは、指定した要素の「どの部分を変更するか」を決めるものです。要素を変えたいと言っても、文字の色を変更するか、文字の大きさを変更するかなど、様々あります。使うプロパティは記事の下の方にまとめたので、読んでみてください。値とは「どのように変更するか」を決めるものです。文字の色を変えたい場合、紫色にしたいのか赤色にしたいのか、様々ありますよね。値についても下記で紹介していきます。CSSでよく使うプロパティ(文字編)ここからはCSSでよく使うプロパティを紹介します。文字に関するプロパティからです。font-weightfont-familytext-alignbackground-colorcolorline-heightborderの7つです。font-weightfont-weightとは、文字の太さを指定するものです。font-weightを使う場合、値は数値か特定のワードを使って指定します。【font-weightの値で使用するワード】normal...基本の太さbold...太字の太さfont-familyfont-familyとは、文字のフォントを指定するプロパティです。font-familyは、あらゆるOSに対応するためにも、複数のフォントを指定するのが基本です。フォントを複数指定しておけば「このフォントはMacに対応していないから表示できない...」という事態を防げます。font-familyは以下のように書きます。font-familyには以下のルールがあります。左のフォントほど優先順位が高いスペースがあるフォント名は「”」か「’」で囲む英語のフォントはなるべく左に書く総称ファミリーフォントを最後に記述する総称ファミリーフォントとは、指定したフォントがどのOSにも入っていない時に表示させるためのフォントです。text-aligntext-alignとは、文字や画像を横方向に動かすプロパティです。text-alignで使う主な値は、以下の通りです。【text-alignで使う値】left...左に寄せるcenter...中央に寄せるright...右に寄せるbackground-colorbackground-colorとは、背景色を指定するプロパティです。background-colorの指定方法は、以下の通りです。【background-colorの指定方法】カラーコード(#6桁の英数字)カラーネーム(red、blueなど)RGB(rgb(赤色の数値、緑色の数値、青色の数値))colorcolorは、文字の色を指定するプロパティです。colorも「カラーコード」「カラーネーム」「RGB」のいずれかで指定します。line-heightline-heightとは、行の高さを指定するプロパティで、値はpxや%で指定します。line-heightを指定しない場合は、テキストが以下のようになります。line-heightを設定し、値を20pxにしてみましょう。ご覧の通り、行間に幅が生まれました。このように、line-heightは行間に余裕を持たせたい時に便利です。borderborderとは、文字を囲む線を指定するプロパティです。あるテキストを赤い線で囲む場合、以下の通りになります。borderの値は、1線の種類2線の太さ3線の色の順番で指定します。【主な線の種類】solid...一本線double...二本線borderに関連する他のプロパティには、アンダーラインを指定するborder-bottomなどがあります。CSSでよく使うプロパティ(画像編)Web制作では、画像を挿入することもよくあります。画像も綺麗に配置できるよう、画像に関するプロパティについても知っておきましょう。今回紹介するプロパティは以下の通りです。【画像に関する主なプロパティ】background-imagewidth、heightそれぞれ見ていきましょう。background-imagebackground-imageとは、背景の画像を指定するプロパティです。pタグやh2タグなど、個別のタグにもbackground-imageを設定できます。このままだと背景がオレンジですが、オレンジ色の背景の代わりにbackground-imageを指定してみます。今回は、水色のグラデーション写真を背景にしてみます。background-imageは「background-image:url(画像のパス);」と書くのが一般的です。width、heightwidthは、画像の横幅を、heightは画像の高さを指定するプロパティです。widthもheightも、pxか%で指定して調整できます。CSSでよく使うプロパティ(レイアウト編)最後に、Webページをより見やすくレイアウトするためのプロパティを紹介します。今回紹介するプロパティは、paddingとmarginです。padding、marginpaddingとは要素の内側の余白を、marginは要素の外側の余白を指定するプロパティです。paddingとmarginの違いをイラストで表すと、以下の通りです。paddingで余白を作った場合、paddingの余白内に背景色や背景画像、paddingの境界線にborderを書けますが、marginではそれらができません。paddingとmarginは、値の書き方が複数あります。左の余白;また、paddingの上の部分や下の部分だけ設定したい場合は、padding-topやpadding-bottomなどのプロパティで指定します。まとめ:CSSの基礎とよく使うプロパティをマスターしよう!今回はCSSの基本知識について紹介しました。今回の記事に書かれていることをしっかりとマスターすれば、Webページの制作もできるようになります。学んだことを活かして、簡単なWebページ制作からやってみてはいかがでしょうか?英語でプログラミングが学べるKredoオンラインキャンププログラミング×英語を身につけてグローバルに活躍しませんか?当メディアを運営しているKredoでは、プログラミング×英語が学べるオンラインスクール「Kredoオンラインキャンプ」を運営中です。フリーランスへのキャリアチェンジを実現しています。これからの時代に必要な「英語×IT」のスキルを身につけてグローバルに活躍しませんか?ツイートシェアはてなポケットこの記事を書いた人Kredo編集部Kredo編集部です!プログラミング、英語学習、キャリア、Kredo情報を発信していきます。