HTML/CSS

~はじめてのCSS~ HTMLに紐づけてみよう!

CSS(シーエスエス)とは?

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

Webページのデザインやレイアウトなどの見栄えを変えていくためのコンピュータ言語です。 CSSは”スタイルシート”とも呼ばれます。

前回解説した”HTML"に色を付けたり見栄えをよくするためのものです。

だからスタイルシートなんですね!

HTMLだけだと白黒のままだから早く教えてください♪

では順番に見ていきましょう!

CSSでできること

詳しいことは後程説明しますが、文字の色を変えてみたり、太字にしたり、文字の大きさを変えることができます。例えば下のようなHTMLを書いたとします。

<p> これは例文です。 </p>

HTMLで段落を入力するために使う”タグ”は<p></p>でしたね。
このタグに対してフォントを設定していきます!

p {
  font-size: 20 px;
  color: orange;
}

設定したいタグを指定して{ }かっこの中に設定項目を書いていきます。
文字の大きさを変えるのは”font-size”を使い、
文字の色は"color"を使います。

なるほど。
" : "とか使ってるけど書き方の指定はあるんですか?

タグ名 { プロパティ名 : 値 ; }

のように決まりがあるので覚えておいてくださいね♪

 "font-size"の値の指定は[px(ピクセル)]で指定しています。
"color"の値には[orange(オレンジ色)]を指定しています。
※それぞれほかの書き方もあるので状況に応じて変えてください。

CSSを書く場所は?

実はCSSを書く場所は3パターンあります。

  1. CSSファイルを作成しHTMLファイル内で読み込み
  2. HTMLファイルにstyleタグを追加してそこにCSSを直接書く
  3. HTMLファイル内のタグの中に直接書く

それぞれメリット・デメリットがあるので、うまく使い分ける必要があります

今回はわかりやすくてよく使うのではないかと思う、
「1.CSSファイルを作成しHTMLファイル内で読み込み」
を説明していきます。

HTMLでCSSファイルを読み込んでみる

まずは、HTMLとCSSのファイルを用意します。

Test.html

<!DOCTYPE html>
<head>
	<title>Sample</title>
</head>
    <body>
	<p>HTML/CSSの基本を勉強しよう。</p>
    </body>
</html>

Test.css

p {
	font-size: 20px;
	color: orange;
}

では次に、HTMLにCSSを読み込むためのコードを書いていくよ。

Test.html

<!DOCTYPE html>
<head>
	<title>Sample</title>
	<link rel="stylesheet" href="Test.css">
</head>
    <body>
	<p>HTML/CSSの基本を勉強しよう。</p>
    </body>
</html>

Test.htmlの4行目を追加しました!

たったこれだけですか?

簡単ですよね♪

軽く説明すると、「link rel="styleseat"」ここでスタイルシートの読み込みをしますという宣言のようなものです。
「href="Test.css"」ここで""中に指定したcssの読み込みをしています。

まとめ

いかがでしたか?
今回はHTMLで記入したファイルに"CSS"を使い装飾しデザインしてWebサイトを華やかに見やすくする方法をご説明しました。

今回出てきた"タグ"や"プロパティ"などについては
また別の記事で特集していますので、ぜひご覧ください!

~HTMLクイックリファレンス~ タグ一覧

~はじめてのCSS~ プロパティについて


Copyright© FUNA BLOG , 2020 All Rights Reserved.