【CSSの基本】CSSの基本とプロパティ一覧

初心者向け 知っておきたいよく使うCSSの基本と書き方・プロパティ一覧
ホームページの作り方に関する記事一覧はこちらをご参照ください。
【ここだけ見れば作れちゃう!】初心者向けホームページの作り方まとめ
 

今回は、これから自分でホームページ作成しようとCSSの勉強を始めた初心者の方向けに、CSSの基本と書き方やよく使うプロパティ一覧を紹介します。
 

HTMLを勉強したい方は「【初心者向け】知っておきたいHTMLの基本とよく使うタグ一覧」の記事をご参考ください。
 

前回、HTMLを勉強して簡単なWebページが作れるようになりました。ただ、もっと色をつけたり綺麗なサイトを作成したいんですがどうすれば良いのでしょうか??
 

HTMLで作ったページを綺麗に装飾するにはCSSを利用します。ここでは、CSSの基本と書き方を説明していきますね。
 

【メルマガ登録はこちら!!】
自分でホームページ制作・Web集客したい個人事業主様向けWebスクール・教室

自分でホームページ作成・Web集客したい個人事業主のためのウェブスクール・教室 ウェブストエイト

 

 

CSSとは

HTMLのおさらい

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

HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語のことです。
 

HTMLを人に例えると、「頭が一つ」あって、その中に「目が二つ」「鼻が一つ」「口が一つ」といったように人の構造を定義していくのと同じような感じでしたよね!
 

■人の構造の定義に例えたイメージ
HTMLで人の基本構造を定義
 

もう少し具体的に言うと、HTMLでは<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って、「これは見出し」「これは文章」「これは画像」「これはリンク」など定義していきます。
 

HTML入門 基本構造 ソース
 

HTMLで記述されたファイルをWebブラウザで開くと、ブラウザが上記の記述を解釈して、普段見ているWebページとして見ることができます。
 

HTML入門 基本構造 ブラウザ表示時
 

このように、HTMLを使ってページを作成することを「マークアップする」とも言います。
 

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

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

▲▲目次に戻る▲▲

 

HTMLとセットで使う言語CSS

HTMLで作成したWebページのスタイルを整えるため、CSS(Cascading Style Sheets)という言語を利用します。 

HTMLとCSSは何が違うんですか??
 

たとえば、HTMLが「目が二つ」「鼻が一つ」でといったように人の構造を定義する言語だとすると、CSSは「この人の目は二重にして、鼻の高さは2センチで」といったように人の見た目を調整する言語です。
 

■人に例えたイメージ
人に例えたイメージ)HTMLは人の構造を定義。CSSで十人十色に見た目を調整
 

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

HTML入門 基本構造 CSS
 

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

HTML入門 CSS適用 ブラウザ表示時
 

HTMLは文書の構造を定義する言語、セットで使うCSSは文書の見た目を調整する言語という点を覚えておきましょう。
 

▲▲目次に戻る▲▲

 

CSSの3つの書き方

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

CSSの3つの方式 インラインスタイルシート 内部スタイルシート 外部スタイルシート
 

CSSの3つの書き方

  • インラインスタイルシート
  • 内部スタイルシート
  • 外部スタイルシート

 
それでは、順番に説明していきます。
 

▲▲目次に戻る▲▲

 

インラインスタイルシートでのCSSの書き方

インラインスタイルシート形式 例 style="color:red"
 

インラインスタイルシート形式でのCSSの書き方

  • 【書き方】 <html要素名 style="プロパティ(設定項目):設定値;">
  • 【例】 <h1 style="color:red;">赤色の見出し</h1>

 

インラインスタイルシートでは、HTMLの各タグに直接記述します。
CSS インラインスタイルシート形式での書き方
 

後ろのセミコロンは省略可能ですが、複数のプロパティを設定する場合は必須なので付けておく習慣づけをしておくと良いと思います。
 

■使用例

 

■表示例
はじめてのCSS 見出しが赤文字に
 

■複数のプロパティを設定する場合
「文字は赤色で背景は水色で」といったように複数の設定値を入れる場合は、プロパティとプロパティの間に「;」で区切って何個でも足していくことができます。
 

■使用例  文字色が白色で背景がライトブルーで枠線がスカイブルー

 

■表示例
CSS インラインスタイルシート形式 文字色白色・背景lightblue・枠線skyblue
 
 

インラインスタイルシート形式の場合、以下の特徴があります。

インラインスタイルシート形式の特徴

  • 各タグにそれぞれ個別に設定できる
  • 「pタグは全て青文字」のように共通で設定できないので、都度設定する手間がかかる

 

▲▲目次に戻る▲▲

 

内部スタイルシートでのCSSの書き方

内部スタイルシート形式
 

内部スタイルシート形式でのCSSの書き方

  • 【書き方】 <head>タグの中に下記のようにスタイルを記述します。
    内部スタイルシート CSS のプロパティの書き方
  • 【例】

 

■表示例
はじめてのCSS 見出しが赤文字に
 

(※)改行や半角スペースあってもなくても構いませんが、見やすさを考慮して改行しています。

(※)media="screen"はあってもなくても構いません。
参考:●media属性を使った媒体別のスタイルシート
 

(※)セレクタとはスタイルを適用する対象のことです。h1やpなどのhtmlタグのほか後述で説明するid名やclass名などがあります。
 

■複数のプロパティの設定をする場合
インラインスタイルシート形式と同様にプロパティとプロパティの間に「;」で区切って設定値を何個でも足していくことができます。
 

■設定例

 

■表示例
CSS 内部スタイルシート形式 文字色白色・背景lightblue・枠線skyblue
 

■複数のセレクタに対してスタイルを設定する
複数のセレクタに対してスタイルを設定する場合は、下記のようにh1は赤文字でh2はオレンジで、といったように追記していきます。
 

■設定例

 

■表示例
CSSのサンプル
 

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

内部スタイルシート形式の特徴

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

 

▲▲目次に戻る▲▲

 

外部スタイルシートでのCSSの書き方

外部スタイルシート(CSSファイル)参照
 

最後に3つ目の書き方は、外部に作ったCSSファイルを参照する方式です。
 

任意の名前のCSSファイル(例. style.css)を作成してそこにCSSを記述します。
また、HTMLファイル側では作成したCSSファイルを参照する設定をします。

外部スタイルシートの読み込み設定

外部スタイルシートの読み込み設定

 

■CSSファイル側では下記のように記載します。

@charset "UTF-8";
セレクタ1{
プロパティ1:値;
プロパティ2:値;

}
セレクタ2{
  …
}
・・・

 

(※)先頭の@charset "UTF-8";は文字コードの設定(おまじないのようなもの)です。それ以外は内部スタイルシートの場合と同じような書き方になります。
 

■HTMLファイル側ではCSSファイルを参照する設定をします。headタグ内に以下のような記述をします。
<link rel="stylesheet" href="CSSファイルの格納場所(※)">
 

格納場所の指定方式は画像の格納場所の指定方法と同じです。
(相対パスの参考:画像の格納場所の指定方法 | HTMLの基本とタグの一覧
 

■HTMLファイルの例 cssフォルダにあるstyle.cssを参照

 

■外部CSSファイル(style.css)

 

■表示例
はじめてのCSS 見出しが赤文字に
 

外部スタイルシートの場合は、下記のような特徴があります。

外部スタイルシート形式の特徴

  • 複数のHTMLファイルで同じCSSファイルを利用できる(何か変更したい場合に、一つのCSSファイルの変更で済む)

 

▲▲目次に戻る▲▲

 

3つの方式の特徴まとめ

CSSの3つの書き方の特徴のまとめです。
 

方式メリットデメリット
インラインスタイルシート各タグにそれぞれ個別に設定できるタグ共通で設定したい場合は、各タグ個別に設定する必要があるので面倒臭い
内部スタイルシート1枚のWebページ全体にスタイルを適用できる複数のWebページ共通で適用できない(各ファイルに同様の記述をしないといけない)
外部スタイルシート(CSS)ファイル参照各ページで共通して一つのcssファイルを読み込める(何か変更したい場合に一つのCSSファイルの変更で済む)慣れないうちはインライン形式・内部スタイルシートに比べてHTMLタグへの指定方法が少し難しい。

 

なお、インラインスタイルシート、内部スタイルシート、外部スタイルシートは併用ができます。
 

競合する設定をしている場合は、優先順位があるのでそれにしたがってスタイルが適用されます。
 

詳細は「知っておきたいCSSセレクタの優先順位・詳細度・継承」の記事をご参照ください。
 

▲▲目次に戻る▲▲

 

(補足)HTMLにつけるid属性とclass属性について

HTMLにつけるid属性とclass属性
 

さて、htmlの各タグにはid属性やclass属性というものが設定できます。
 


<h1 id="top-h">はじめてのCSS</h1>
<p class="blue-text">この文章は青色になります</p>

 

idやclassを設定することでCSSでレイアウト装飾する際に
 

「このid名がついているタグは背景を赤色にする」
 

あるいは
 

「このclass名がついているタグは文字色を青色にする」
 

などの指定ができるようになります。
 

■記述例 (内部スタイルシート形式で記述)

 

■表示例
CSS サンプルid名がtop-hとついているタグの背景が赤色、class名がblue-textと付いているタグが青文字
 

HTMLのタグを書く際に
<HTML要素名 id="任意のid名">
あるいは
<HTML要素名 class="任意のclass名">
と記述します。
 

CSS側では
id名を「 #id名 」
class名を「 .class名 」
で指定します。

 

(※)idはHTMLファイル内で一意である必要があり、classは一意でなくとも構いません。
 

▲▲目次に戻る▲▲

 

主なCSSプロパティ

主要なCSSプロパティ 文字・枠・背景・幅高さ・余白・位置など
 

CSSの書き方はわかりました。意味は分かったので覚えればなんとかなりそうです(笑)
つぎは、具体的なCSSの設定項目とかをもっと教えて欲しいです。
 

ではつぎに実際によく使うCSSの設定項目や設定値について説明していきますね。
 

ここまでCSSの書き方について説明しました。ここからはよく使う有名なCSSプロパティを説明していきます。
 

▲▲目次に戻る▲▲

 

よく使うCSSプロパティ一覧

カテゴリプロパティ意味
文字に関するスタイルfont-size文字の大きさ(フォントサイズ)
color文字の色
font-weight文字の太さ
font-family文字の字体
text-decorationテキストの装飾
枠線に関するスタイルborder枠線
border-(※各辺)枠線の各辺
(上top/下bottom/右right/左left)
border-radius枠の丸さ
背景に関するスタイルbackground-color背景の色
background-image背景の画像
background-repeat背景の画像の繰り返し
background-position背景画像の表示開始位置
background-attachment背景画像の固定・移動
background-size背景画像のサイズ
background背景全般
横幅と高さに関するスタイルwidth横幅
height高さ
余白に関するスタイルmargin外部余白
margin-(※各辺)外部余白の各辺
(上top/下bottom/右right/左left)
padding内部余白
padding-(※各辺)内部余白の各辺
(上top/下bottom/右right/左left)
ボックスサイズの算出方法を指定box-sizing枠線(border)や内部余白(padding)の大きさをwidthやheightに含めるかどうか
テキストに関するスタイルtext-align水平方向の位置
line-height行の高さ
表示に関するスタイルdisplay表示
位置に関するスタイルposition位置
top上からの位置
bottom下からの位置
left左からの位置
right右からの位置
z-index重なりの順序指定
横並び(浮動)に関するスタイルfloat横並び(浮動)
clear横並び(浮動)の解除
影に関するスタイルbox-shadowボックスの影
text-shadowテキストの影

 

▲▲目次に戻る▲▲

 

文字に関するスタイル

ここでは、文字に関する代表的なスタイル(文字の大きさ、文字の色、文字の太さ、文字の字体)について説明していきます。

文字に関する代表的なスタイル

  • 文字の大きさ font-size
  • 文字の色 color
  • 文字の太さ font-weight
  • 文字の字体 font-family
  • 文字の装飾 text-decoration

 

文字の大きさ(フォントサイズ) font-size

フォントサイズを60pxにする例
 

文字の大きさ(フォントサイズ)の指定方法

  • 【書き方】 font-size:値;
  • 【例】 font-size:20px;

 

値の単位は簡単な「px」をまず覚えましょう。(他にも基準サイズに対して比率で算出する方式でrem、emや%などがあります。)
 

■使用例 pタグのフォントサイズを40pxにする(インラインスタイルシート形式)

 

■表示例
pタグのフォントサイズ 40pxのサンプル
 

文字の色(color)

文字の色の指定方法

  • 【書き方】 color:値;
  • 【例】 color:red;またはcolor:#ff0000;など

 

値は「red」「blue」などのように色で指定することもできますし、RGBの16進数表記「例. #FF0000」で指定することもできます。
 

「red」、「blue」など有名な色は前者で指定できるのに対して、#FF0000などの16進数では合計16,777,216通りの細かい色を設定することができます。
 

■参考:
ウェブカラーで各色の単語がわかります。
Color wheel | Color schemes – Adobe Color CCで自分の好きな色を調整することができます。
 

■使用例

 

■表示例
h1タグの文字色が青色のサンプル
 

文字の太さ font-weight

フォントを太文字にする例
 

文字の太さ

  • 【書き方】 font-weight:値;
  • 【例】 font-weight:bold;

 

■使用例 pタグを太文字にする

 

■表示例
フォントの太さを太文字にする
 

テキストの装飾 text-decoration

文字の装飾の指定方法

  • 【書き方】 text-decoration:値;
  • 【例】 text-decoration:line-through; (打ち消し線)

 
テキストに下線・上線・打ち消し線を付けたりするにはtext-decorationで指定します。
 

none初期値。テキストに線などつけない。
underline下線を付けます。
overline上線を付けます。
line-through打ち消し線を付きます。

 
 

■text-decorationのサンプル

 

■表示例
text-decorationのサンプル
 

文字の字体 font-family

cssサンプル フォントファミリーをMS 明朝にする例

文字の種類(フォントファミリー)

  • 【書き方】 font-family:値;
  • 【例】 font-family:'Hiragino Mincho ProN','MS 明朝',serif;

 

「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合はシングルクォーテーション( ' )で囲みます。
 

(またはダブルクォーテーション( " )で囲むこともできますが、インラインスタイルシート形式でstyle=""でくくっている場合は、シングルコーテーション(')を使用してください。)
 

■使用例

 

■表示例

 

(補足)フォントタイプは少し複雑で、複数の値を記述することができます。値をカンマ( , )で区切って複数の候補を並べます。
 

例えば、MS明朝はWindowsにあるけどもMacにないフォントであるため、Macで明朝体を表示できません。
 

そこで「’Hiragino Mincho ProN’,’MS 明朝’,serif」のように複数記述することで、「左から順番にフォントが閲覧している端末に適用し、なければ次に書いてあるフォントを適用する」といったような使い方をします。
 

上記例では、MacではHiragino Mincho ProNが適用されて、WindowsではMS 明朝が適用されて、どちらもない場合はserifを使うといった形になります。
 

(※参考)font-familyで指定できるフォント名一覧
 

▲▲目次に戻る▲▲

 

枠線 border

枠線 borderの基本的な使い方

borderで枠線の設定
 

枠線 border

  • 【書き方】 borer:枠線の色の値 枠線の種類の値 枠線の太さの値;
    (※)値は半角スペースで区切ります。順不同でどれから先に書いても構いません。
  • 【例】 border:red solid 2px;

 

項目内容
redなどの色指定、または#ff0000などの16進数表記
種類
  • なし(初期値)「none」
  • 1本の実線「solid」
  • 2本の実線「double」
  • 点線「dotted」
  • 破線「dashed」
枠線の太さ2pxなど 〇〇pxで設定

 

■使用例 見出しに赤色・実線・太さ5pxの枠がついている

 

■表示例
h1に赤色・実線・太さ5pxの枠がついている
 
 

(補足)色々なborderの使い方

特定の辺だけ枠線をつける

  • 【上辺の枠】 border-top
  • 【底辺の枠】 border-bottom
  • 【左辺の枠】 border-left
  • 【右辺の枠】 border-right

 

例 border-top:red solid 5px;
上側の枠 border-top
 
例 border-bottom:red solid 5px;
下側の枠 border-bottom
 
例 border-left:red solid 5px;
左側の枠 border-left
 
例 border-right:red solid 5px;
右側の枠 border-right
 

枠の色border-color/種類border-style/太さborder-width

borderの代わりに、「border-color」、「border-style」、「border-width」でそれぞれ設定することもできます。

 

枠の丸さ border-radius

border-radiusを利用するとborderで作った枠線の角を丸くする事ができ、円も作る事もできます。
 

border-radius:30px とした場合、すべての角が30pxになります。
border-radius:30px
 

border-radius:50%と指定した場合は、50%=円の半径で下記のように円になります。
border-radius:50%
 

また、border-top-left-radius(左上の箇所):xxxなどのように場所を指定すると下記のように左上だけ丸くすることもできます。
border-top-left-radius:50%
 

▲▲目次に戻る▲▲

 

背景 backgroundの基本

backgroundの基本 background-color background-image

背景「background」の基本的な使い方

背景「background」については、下記のような設定項目があります。

カテゴリプロパティ意味
背景に関するスタイルbackground-color背景の色
background-image背景の画像
background-repeat背景の画像の繰り返し
background-position背景画像の表示開始位置
background-attachment背景画像の固定・移動
background-size背景画像のサイズ
background背景全般

 

「background」関連プロパティについてのより詳細な内容を「https://webst8.com/blog/css-background/」に紹介していますので、こちらもご参照ください。
 

背景の色 background-color

背景background:pinkのサンプル
 

背景の色 background-color

  • 【書き方】 background-color:値;
  • 【例】 border:pink;

 
値の色は「blue」や「red」など色を直接指定する方法や16進数表記「#FF0000」、透明度を設定できる「rgba(255,0,0,0.5)」などの指定方法がよく使われます。
 

■表示例
body背景をピンクに設定
 

■上記のソースコード

 
 

背景画像 background-image

背景background-imageが宇宙になるサンプル
 

background-image:url(画像の場所);

  • 【書き方】 background-color:値;
  • 【例】 background-image: url(images/sample.jpg);

 
画像の場所は、「http://xxxxx.com/xxxx/sample.jpg」のように絶対パスで指定する方法と「images/sample.jpg」のように相対パスで指定する方法があります。
 

■表示例
body背景に画像を設定
 

■上記のソースコード

 

「background」関連プロパティについてのより詳細な内容を「https://webst8.com/blog/css-background/」に紹介していますので、こちらもご参照ください。
 

▲▲目次に戻る▲▲

 

横幅widthと高さheight

高さと横幅に関するスタイルの説明
 

横幅 width

横幅が400pxのサンプル

横幅width

  • 【書き方】 width:値;
  • 【例】 width:300px;

 

横幅の単位は「px」や「%」があります。pxの場合は固定値です。%は親要素に対する割合(body直下のHTML要素の場合はブラウザサイズに対する割合)です。
 

■使用例

 

■表示例
width 横幅の設定
 

高さ height

divの高さを400pxにするサンプル

高さheight

  • 【書き方】 height:値;
  • 【例】 height:200px;

 

縦の高さは「height:値;」で設定します。横幅と同様に単位は「px」や「%」などがあります。
 

(注)heightの%利用は難しく、親要素の%を明示していないとうまく表示されないためご注意ください。
分かりにくいCSS height のパーセント設定のまとめ
 

■使用例

 

■表示例
CSS 高さ400pxの例
 

▲▲目次に戻る▲▲

 

余白に関するスタイル

外部余白と内部余白の設定

余白には要素外部に設定する外部余白(margin)と要素内部に設定する内部余白(padding)の2つがあります。

項目
外部余白margin外部余白
margin-(※各辺)外部余白の各辺
(上top/下bottom/右right/左left)
内部余白padding内部余白
padding-(※各辺)内部余白の各辺
(上top/下bottom/右right/左left)

 

外部余白 margin

divの外部余白を100pxとる

外部余白

  • 【書き方】 margin:値;
  • 【例】 margin:200px;

 

値の単位は通常「px」です。値は半角スペースで区切って複数設定することができます。

項目内容
margin:値;上下左右で指定した値の余白が設定されます。
margin:値1 値2;「値1が上下」「値2が左右」の余白が設定されます。
margin:値1 値2 値3 値4;記述順に上右下左と余白が設定(時計周り)されます。

 

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

 
■表示例
CSSサンプル 外部余白 100px

以下のように個々に設定することもできます。

  • margin-left:値; (左の外部余白)
  • margin-right:値; (右の外部余白)
  • margin-top:値; (上の外部余白)
  • margin-bottom:値; (下の外部余白)

 

marginの相殺

各要素間でmarginで余白を設定している時、外部余白は足し算になるのではなくどちらか大きい方の余白が採用されることに注意してください。
 

■marginの相殺の例

 

■上記のソースコード

 
 

要素を真ん中寄せにする例 margin:autoを利用する

左側余白を自動(margin-left:auto)、右側余白も自動(margin-right:auto)のように、左右のmarginをそれぞれauto にすれば要素が真ん中寄せになります。
 

margin:〇〇px auto; (margin:autoでも可能)のように記述できます。
 

(対象の要素にwidthを指定している必要があります。widthはデフォルト100%のため、設定していないと真ん中寄せしていても変化はありません。上下に対するautoは効かないため0になります。)
 

margin:〇〇px auto;で要素を真ん中寄せにする
 

 

■上記のソースコード

 
 

内部余白 padding

divの内部余白を100pxとる
 

内部余白 padding

  • 【書き方】 padding:値;
  • 【例】 padding:200px;

 

値の単位は「px」です。外部余白marginと同様に複数の値を設定することができます。

項目内容
padding:値;上下左右で指定した値の余白が設定されます。
例. padding:100px;
padding:値1 値2;「値1が上下」「値2が左右」の余白が設定されます。
例. padding:100px 200px;
padding:値1 値2 値3 値4;記述順に上右下左と余白が設定(時計周り)されます。
例. padding:100px 150px 200px 250px;

 

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

 

■表示例
CSSサンプル 内部余白100px
 

以下のように個々に設定することもできます。

  • padding-left:値; (左の余白)
  • padding-right:値; (右の余白)
  • padding-top:値; (上の余白)
  • padding-bottom:値; (下の余白)

 

▲▲目次に戻る▲▲

 

ボックスの算出方法 border-box

枠線「border」や内部余白「padding」を横幅や高さに含めるかどうか、ボックスの算出方法に「border-box」を利用します。
 

CSS box-sizingを設定するときとしない時の違い
項目内容
content-box枠線「border」や内部余白「padding」を横幅と高さに含めない(初期値)
border-box枠線「border」や内部余白「padding」を横幅と高さに含める

 

■表示例

 

■上記のソースコード

 

▲▲目次に戻る▲▲

 

水平方向の位置 text-align

text-alignの説明

水平方向の位置 text-align

  • 【書き方】 text-align:値;
  • 【例】 text-align:center;

 

値には以下の3つがあります。

項目
text-align:left;テキストを左揃えにします(初期値)
text-align:center;テキストを中央揃えにします
text-align:right;テキストを右揃えにします

 

■使用例

 

■表示例

 
 

marginの真ん中寄せとtext-alignの中央揃えの違い

marginは自身の要素を真ん中寄せにするのに対して、text-align:centerは文字や画像などの中身を中央揃えにします。

marginはブロックレベル要素を真ん中寄せにするのに対して、text-align:centerは文字や画像などの中身を中央揃えします。
 

■表示例

 

■上記のソースコード

 

▲▲目次に戻る▲▲

 

行間 line-height

 
一行の高さを指定するには、「line-height」を指定します。
 

指定できる値は「数字(倍率になります)」もしくは「px」です。
 

例えばフォントサイズが16pxの場合、「line-height:1.5」にすると24px(16*1.5)になります。line-height:24pxでも同じです。

 

■使用例

 

■表示例

ウェブストエイトは大阪のWebスクールです。

本スクールの特徴は個人事業主様・経営者様向けで

自分のビジネス用のHPを自ら作成して、

ビジネスに活用することをコンセプトにしています。


初心者向けのセミナーや講座も開催しています。

ホームページ作成セミナーで検索順位1位。

自らWeb集客しながら教室を運営しています。

 

▲▲目次に戻る▲▲

 

表示に関するスタイル display

要素のブロックレベル・インライン等の表示形式を指定する際に「display」を使用します。
 

■HTML ブロックレベル要素とインライン要素の違いと特徴
HTML ブロックレベル要素とインライン要素の違いと特徴
 

レイアウトを調整していく中で、インライン要素を使うけど高さと幅を指定したい、ブロックレベル要素を使うけど改行したくないというケースが出てきたときにCSSで「display」を利用できます。
 

displayプロパティには主に以下のような設定があります。
 

(他にも設定値はありますがここでは割愛します。)

項目意味備考
display:inline指定した要素をインライン要素にする改行なくなり横並びにできる。
幅・高さ・上下余白を指定できない
display:block指定した要素をブロックレベル要素にする改行ができて縦並びになる。
幅・高さ・余白を指定できる
display:inline-block指定した要素をインラインとブロックレベルの中間の性質にするインライン要素のように改行がつかず横並びになるが、
ブロックレベル要素のように幅・高さ・余白を指定できる
display:none指定した要素を非表示にする
(補足)
display:table-cell
テーブルtableタグのtd要素のようにする
(補足)
display:flex
最新のレイアウト技法「フレキシブルボックス」。柔軟な横並び・均等な高さを実現できる。まだWebブラウザの対応状況に注意が必要

 

インライン要素・ブロックレベル要素の意味と違いおよび「display」について、より詳細な内容を「インライン要素・ブロックレベル要素とCSS「display」の使い方」に紹介していますので、こちらもご参照ください。
 

▲▲目次に戻る▲▲

 

位置に関するスタイル position

基準位置を設定してから、要素をpxや%で配置する方法として「position」というスタイルがあります。

positionで配置方法を指定しつつ、位置指定のプロパティ「top(上)、bottom(下)、left(左)、right(右)」と合わせて要素の位置を指定することができます。
 

■positionを利用した位置指定のサンプル
CSS positionの説明
 

positionプロパティには主に以下の4つの設定があります。

項目意味
position:static; 「position: static」は初期値です。通常の位置に配置されます(要素の順番に左上から配置されます)。
後述のtop,bottomなどで位置を指定することができません。
何も指定しない時はposition:staticになっているので明示的に指定するケースは少ないです。
position:relative; 「position:relative」を設定すると、もともと配置されるはずの場所を基準にtop,leftなどの位置指定ができるようになります。position:relativeは相対位置と言います。
position:absolute; 「position:absolute」を指定すると通常の配置から外れてブラウザ(body)が基準位置になります。
親要素にposition:static以外の値を設定している場合は親要素の左上が基準位置になります。
position:fixed; position:fixedを指定するとabsoluteと同様に、通常の配置から外れて親要素を基準点とした位置に強制的に配置されます。前述のabsoluteとの違いは、スクロールしても位置が固定されたままという点です。

 

また、positionによる位置指定とともに、具体的な位置(距離)指定に「top(上)、bottom(下)、left(左)、right(右)」を利用します。
 

CSS top,bottom,left,rightを指定したサンプル
 

positionについてのより詳細な内容を位置指定で使うCSSプロパティ「position」の使い方」に紹介していますので、こちらもご参照ください。
 

▲▲目次に戻る▲▲

 

横並び(浮動)に関するスタイル float

float:leftを利用してdiv1、div2、div3が左から順に横並びにする
 

divタグなどのブロックレベル要素は基本的に上から下に向かって順番に縦に並んで表示されますが、これを左または右に寄せて横並びで配置したい場合は、「float」を利用して横並びにすることができます。
 

float:leftを利用してdiv1、div2、div3が左から順に横並びにする
 

また、floatとセットで後ろの要素にclearプロパティを利用します。
 

floatとclearについては、より詳細な内容をCSSのfloatプロパティで要素を横並びにする方法」に紹介していますので、こちらもご参照ください。
 

▲▲目次に戻る▲▲

 

まとめ

今回は、ホームページを初めて作ろうとしている方向けに、CSSの書き方とまずはじめに覚えておきたい代表的なスタイルについて説明しました。
 

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

他にも以下の記事が参考になるかと思います。
 
CSSのfloatプロパティで要素を横並びにする方法

CSS 知っておきたいCSS セレクタの優先順位・詳細度・継承

知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について

CSSメディアクエリとViewPortによるレスポンシブデザインの作り方
 

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

最近では、「CSS3」といって新しい便利なプロパティや使い方も利用できるようになったので、興味のあるかたはぜひいろいろ調べてみてください。
 

【メールマガジンにて限定情報配信】
WordPressやホームページ作成、SEO対策・ウェブ集客に関するウェブストエイトの独自ノウハウを読者限定で配信しています。まずはお気軽にご登録ください。

詳細はこちら

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

大阪の個別指導Webスクール
「WEBST8」

個人事業主様・経営者様・起業副業など
自分のビジネスのために
ホームページの作り方を
習得するスクール

\ 自分で作る選択を! /

詳しくはこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

松本慶

【IT業界でシステムエンジニア歴8年現役Web系フリーランス】

1985年生まれ 立命館大学卒業。 某複合機メーカーで約8年間システムエンジニアとして大阪で勤務後、2016年秋に独立。

「一人一人が創意工夫で思い描く未来を!」 という想いもとに『自分でホームページを作成してWeb集客・売上拡大したい』個人事業主のためのWeb教室・スクール「ウェブストエイト(Webst8)を運営開始。
ウェブやマーケティングなどの覚えたノウハウを自分や周りの目標実現のツールとして使うことにやりがいを感じています。

メルマガ登録はこちら

個人事業主のためのWeb教室・スクール「ウェブストエイト」 ホームページ