【 CSS 入門 】CSSの基本とよく使うプロパティ


CSS 入門 CSSの基本とよく使うタグ ホームページ作成
 

  1. 1. CSSとは
  2. 2. CSSの基本構造
  3. 3. 主なCSSプロパティ
  4. 4. まとめ

 

CSSとは

前回の記事(【HTML CSS 入門】HTMLの基本とよく使うタグ)では、HTMLを使って「これは見出し」、「これは文章」、「これは画像」、「これはリンク」など定義していきました。
 

しかし、普段見ているWebページはもっと色や配置が整っていて、綺麗な見た目になっているものが多いかと思います。
 

HTMLで定義した文書構造を綺麗な見た目にするためには、CSSという言語を利用します。
 

CSSとは、Cascading Style Sheetsの略で、Webページのスタイル(見た目)を指定する言語です。先ほどのHTMLと一緒に使います。
 

たとえば、「この見出しは赤文字で」、「この文章のフォントは30pxで」、「このグループは青線で囲む」など、HTMLで定義した内容をどんな見た目に表示させるかを設定していきます。
 

HTML入門 基本構造 CSS
 

CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。
HTML入門 CSS適用 ブラウザ表示時
 
 

CSSの使い方

CSSの使い方ですが、大きく3つの方式があります。
 

1.インラインスタイルシート

一つ目の方法が、下記のようにHTMLの各タグに直接記述する方法です。
 

使用例

 

インライン形式の場合、以下の特徴があります。

  • 各タグにそれぞれ個別に設定できる
  • タグ共通で設定したい場合は、各タグ個別に設定する必要があるので面倒臭い

 
 

2.内部スタイルシート

2つ目が、htmlのheadタグの中にまとめてスタイルを記述する方法があります。
 

具体的には、<head>タグの間に<style>タグを作ってその中にスタイルを記述します。
 

使用例

 

上記のように記述すると<h1>タグは緑色文字になります。
 

また、<xxx(なんでも) class=”blue-text”>は青色文字になります。
 

pやh1などの要素に対してでなく、複数のpタグの中でもこのタグだけ設定したいなどの場合は<p class=”blue-text”>のようにHTMLで記述します。
 

class=”blue-text”を設定したタグは、hタグ、pタグなどのタグの種類に関わらず、文字色を青くなります。
 

内部スタイル形式は、下記のような特徴があります。

  • 1枚のWebページ全体にスタイルを適用できる
  • 複数のWebページ共通で適用できない(各ファイルに同様の記述をしないといけない)

 
 

3.外部CSSファイルを参照する方法

最後に、外部ファイルを参照する方式です。
 

リンクのように、headタグの中に外部のCSSファイルを参照する設定します。
 

使用例

 

外部CSSファイルの場合は、下記のような特徴があります。

  • ファイル間で共通して、一つのcssファイルを読み込める(何か変更したい場合に、一つのCSSファイルの変更で済む)

 

なお、これらの方法は、併用可能です(競合時は優先順位にしたがってスタイルが適用されます)。
 
 

CSSの書き方

次にCSSの書き方を説明します。
 

インラインの場合は、HTMLタグの中に以下のように記述します。

 

内部スタイルシートまたは、外部スタイルシートの場合は、下記のように記述します。
 

セレクタ{プロパティ:値;}
 

使用例

 
 

主なCSSプロパティ

それでは、主なCSSプロパティを説明していきます。
 

フォントサイズ font-size

 

使用例 pタグのフォントサイズを40pxにする

 
 

文字の色 color

使用例 pタグの文字を黄色にする
 

 
 

枠線 border

使用例 divタグの枠線を青色にする
 

 
 

背景 background

使用例 divタグの背景を青色にする
 

 
 

幅 width

使用例 divタグの幅を200pxにする
 

 
 

高さ height

使用例 divタグの高さを400pxにする

 
 

水平方向の位置 text-align

使用例 pタグの文章を水平方向真ん中に設定する
 

 
 

外部余白 margin

使用例 divタグの外部余白を100pxとる
 

 
 

内部余白 padding

使用例 divタグの内部余白を100pxとる
 

 

まとめ

今回は、ホームページを初めて作ろうとしている方向けに、CSSとはなにか、基本の説明とよく使うプロパティについて説明しました。
 

よく使うHTMLに加えて、CSSの基本を知っていると、ちょっとしたブログカスタマイズや見た目の調整ができるようになり、自分の思ったように作っていくことが可能になります。
 

今回紹介したものは、ほんの一部になりますが、CSS 一覧 などで検索すると、ほかにもたくさんのプロパティがヒットしますので、興味のあるかたは調べてみてください。

今回は以上になります。最後までご覧いただきありがとうございました。

こちらの記事もおすすめです


mail無料メルマガ

メルマガを受け取る女性

読者限定の情報やイベント情報を先行配信

読者限定のお得なモニター価格情報やHP作成・運用や独立・副業を考えている人向けにイベントの先行配信しています!登録・解除は自由です!ぜひご登録ください!