初心者がはじめに覚えておきたい 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適用 ブラウザ表示時

 
 

2. CSSの書き方と方式

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

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

  • 1.インラインスタイルシート
  • 2.内部スタイルシート
  • 3.外部スタイルシート

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

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

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

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


 

■使用例

 

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

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

インラインの場合は、HTMLタグの中に以下のように記述します。プロパティとプロパティの間は「;」で区切って何個でも足していくことができます。

 

■使用例

 

■表示例
はじめてのCSS 赤色文字 水色背景 横幅50%
 

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

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

 
 

2-2.内部スタイルシート

内部スタイルシート形式
2つ目が、htmlのheadタグの中にまとめてスタイルを記述する方法です。
 

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

内部スタイルシート CSS のプロパティの書き方
 

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

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

■使用例

で記述します。
 

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

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

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

内部スタイルシート CSS のプロパティの書き方
 

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

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

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

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

 
 

2-3. 外部スタイルシート

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

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

下記のようにHTMLファイルのheadタグの中に外部のCSSファイルを参照する設定します。

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

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

 

<link rel=”stylesheet” href=”CSSファイルの格納場所”>
 

格納場所の指定は、通常相対パスという形式で指定します。
(相対パスの参考:初心者がはじめに覚えておきたいHTMLの基本とタグの一覧 | 画像の格納場所の指定方法
 

■使用例
HTMLファイル

 

外部CSSファイル(styles.css)

 

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

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

外部スタイルシートでは、下記のように記載します。
 

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

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

 

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

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

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

 

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

(ここでは詳しく説明しませんが、同じ箇所に異なる設定をしている場合は、優先順位があるので、それにしたがってスタイルが適用されます)。
 

2-4. 3つの方式の特徴まとめ

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

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

 
 

2-5. (補足)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名がついているタグは文字色を青色にする」
 

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

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

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

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

 

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

 

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

3. 主なCSSプロパティ

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

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

3-1. 文字に関するスタイル

文字に関するスタイルの説明
 

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

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

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

文字の大きさ(フォントサイズ)はfont-size:値;で指定します。
 

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

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

 

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

3-1-2. 文字の色(color)


 

文字の色は「color:値;」で指定します。
 

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

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

参考:ウェブカラー
 

■使用例

 

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

3-1-3. 文字の太さ font-weight

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

文字の太さは「font-weight:値;」で指定します。
 

最もよく使うのは「font-weight:bold;」で太文字になります。
 

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

 
 

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

3-1-4. 文字の字体 font-family

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

文字の種類(フォント)は「font-family:値;」で指定します。
 

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

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

■使用例

 

■表示例

 

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

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

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

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

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

3-2. 枠線 border

枠線の説明
 

枠線はborderで色や種類、太さを指定します。
 

3-2-1. 枠の色・種類・太さ border

borderで枠線の設定
 

枠線は「border:枠線の色の値 枠線の種類の値 枠線の太さの値」で設定します。
 

例) border:red solid 5px;  (※)solidは実線

値は半角スペースで区切ります。順番は順不同でどれを先に書いても構いません。
 

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

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

また、下記のように上、下、左、右など、特定の箇所だけ枠線を設定することもできます。
border-top:上側の枠線の色の値 上側の枠線の種類の値 上側の枠線の太さの値;
border-bottom:下側の枠線の色の値 下側の枠線の種類の値 下側の枠線の太さの値;
border-left:左側の枠線の色の値 左側の枠線の種類の値 左側の枠線の太さの値;
border-right:右側の枠線の色の値 右側の枠線の種類の値 右側の枠線の太さの値;
 
 

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

borderで枠の色、種類、太さをまとめて指定しましたが、それぞれ「border-color」、「border-style」、「border-width」で個別に設定することもできます。
 

枠の色は「border-color:値」で指定します。
前述の文字の色の指定と同じように、「red」や「blue」のように指定する方法もあれば、「#FF0000」のようにRGB16進数で表記することもできます。
 

枠線の種類は「border-style:値」で指定します。
値には以下のような種類がよく使われます。

  • なし(初期値)「none」
  • 1本の実線「solid」
  • 2本の実線「double」
  • 点線「dotted」
  • 破線「dashed」

 

枠線の太さは「border-width:値」で指定します。
いくつかの指定方法がありますが、値を「px」で指定することが多いです。
 
 

3-2-3. 枠の丸さ 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%
 
 

3-3. 背景 backgroundの基本

backgroundの基本 background-color background-image
 

つぎに、背景に関する基本のスタイルを説明していきます。

3-3-1. 背景の色 background-color

背景background:pinkのサンプル
 

背景の色を設定したい場合は「background-color:値;」で設定します。
 

値の色は、前述と同様に「blue」や「red」などの指定方法と、「#FF0000」などの指定方法がよく使う指定方法です。
 

■使用例

 

■表示例
background-colorがpinkになっている 
 
 

3-3-2. 背景の画像 background-image

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

先ほどは背景に色を設定しましたが、背景に画像を使いたい時は「background-image:url(画像の場所);」で指定します。
 

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

■使用例

 

■表示例
背景が宇宙になるサンプル
 
 

3-3-3. (補足)背景の色々な設定

少々難しくなるためここでは詳しく説明しませんが、背景画像には他にも色々な細かい指定があるので簡単にご紹介します。
 

背景画像のリピート:background-repeat

先ほどのbackground-imageで指定した地球の絵は繰り返されていました。

パターン画像などでは背景の繰り返しするパターンが多いですし、繰り返したくない背景画像の場合もあると思います。

リピートの設定は下記のような指定があります。
 

  • background-repeat:repeat; (縦横に背景画像を繰り返します(初期値))
  • background-repeat:no-repeat; (背景画像を繰り返しません)
  • background-repeat:repeat-x; (横方向に背景画像を繰り返します。)
  • background-repeat:repeat-y; (縦方向に背景画像を繰り返します。)

 

背景画像の表示開始位置:background-position

背景画像の表示開始位置を「background-position」で指定できます。
 

■使用例
background-position:left top;
 

背景画像の固定・移動:background-attachment

背景画像をスクロールしても固定したい時は「background-attachment:値;」で設定できます。
 

  • background-attachment:scroll; (スクロールすると背景画像も移動する。初期値)
  • background-attachment:fixed; (背景画像をスクロールしても固定させる)

 

背景設定をまとめて設定 background

borderの設定と同様に背景設定をまとめて指定できます。

■使用例

 

■表示例

 
 

背景画像のサイズ background-size

背景画像のサイズをbackground-sizeで指定することができます。
 

よく使う設定値は下記の通りです。

  • background-size:auto; 自動算出(初期値)
  • background-size:contain; 縦横比を保持して背景領域に収まる最大サイズになるよう拡大縮小する
  • background-size:cover; 縦横比は保持して背景領域を完全に覆う最小サイズになるよう背景画像を拡大縮小する

 

なお、「background」でbackground-sizeもまとめて指定する場合は、background-positionの値を指定した後に「/」を入れる必要があるようです。
 

■使用例
background:url(https://webst8.com/blog/wp-content/uploads/2017/07/earth.jpg) center /cover;
 

ややこしいので、まずはbackground-sizeはbackgroundで指定せずに、background-sizeで指定するようにしましょう。
 
 

3-4. 横幅と高さに関するスタイル

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

つぎに、横幅と高さに関するスタイルを説明していきます。
 

3-4-1. 横幅 width

横幅が400pxのサンプル
 

横幅は「width:値;」で設定します。
 

単位は「px」や「%」などがあります。
 

pxの場合は固定値です。
%は親要素に対する割合になります(body直下のHTML要素の場合はブラウザサイズに対する割合)。
 

■使用例

 

■表示例
width 横幅の設定
 
 

3-4-2. 高さ height

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

縦の高さは「height:値;」で設定します。
 

横幅と同様に単位は「px」や「%」などがあります。
 

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

■使用例

 

■表示例
CSS 高さ400pxの例
 
 

3-5. 余白に関するスタイル

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

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

3-5-1. 外部余白 margin

divの外部余白を100pxとる
 

外部の余白は「margin:値;」で設定します。
 

値の単位は「px」です。
 

値を1つ指定した場合は、全方向(「上」「下」「左」「右」)でそれぞれ指定した値の余白が設定されます。
 

値は複数設定することもできます。
 

「margin:値1 値2;」と指定した場合、「値1が上下」「値2が左右」の余白が設定されます。
 

「margin:値1 値2 値3 値4;」と値を4つ指定した場合は、
 

記述した順に「上」「右」「下」「左」と余白が設定(時計周り)されます。
 

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

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

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

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

 
 

3-5-1-1. marginの相殺

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

■marginの相殺の例

 

■上記のソースコード

 
 

3-5-1-2. 要素を真ん中寄せにする例 margin:autoを利用する

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

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

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

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

 

■上記のソースコード

 
 

3-5-2. 内部余白 padding

divの内部余白を100pxとる
 

内部余白は「padding:値」で設定します。
 

値の単位は「px」です。
 

外部余白marginと同様に、
 

値を1つ指定した場合は、全方向(「上」「下」「左」「右」)でそれぞれ指定した値の余白が設定されます。
 

値は複数設定することもできます。
 

「padding:値1 値2;」と指定した場合、「値1が上下」「値2が左右」の余白が設定されます。
 

「padding:値1 値2 値3 値4;」と値を4つ指定した場合は、
 
 

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

 

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

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

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

 
 

3-6. 水平方向の位置 text-align

text-alignの説明
 
行揃えの位置を指定する場合は、「text-align:値;」で設定します。
 

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

  • text-align:left; 左寄せにします。
  • text-align:right;右寄せにします。
  • text-align:center; 中央揃えにします。

 

■使用例

 

■表示例

 
 

さて、ここからは少しステップアップしたプロパティを紹介していきます。ここからは内部スタイルシート形式での例になります。
 

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

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

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

■表示例

 

■上記のソースコード

 
 

3-7. 表示に関するスタイル display

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

補足

divやaなどのHTMLの各要素は、大きくブロックレベル要素とインライン要素のどちらかに分類できます。
 

代表的なブロックレベル要素とインライン要素

代表的なブロックレベル要素として以下のようなものがあります。

項目 主な要素 特徴
ブロックレベル要素
  • div
  • h1〜h6
  • p
  • ul,ol,li
  • dl,dt,dd
  • table
  • form
ブロックレベル要素は各要素が一つのブロック(塊)で、以下のような特徴があります。

  • 要素の前後に改行が入り、ブロック要素同士縦に並ぶ
  • 横幅や高さを指定できる
  • 余白(margin,padding)が指定できる
インライン要素
  • a
  • span
  • img(※)
  • label
  • input(※)
  • textarea(※)
代表的なインライン要素として以下のような特徴があります。

  • 要素の前後に改行が入らず、インライン要素同士横に並ぶ
  • 横幅や高さを指定できない(※)
  • ブロックレベル要素のように余白設定(margin,padding)が効かない

(※)ただし、img、input、textareaなどの一部のタグは幅高さや余白の設定が可能です。

 

■ブロックレベル要素 divタグを使った例

[divタグ]ブロック要素は改行が入ります。
[divタグ3]高さと幅も指定できます。
[div4]余白の設定もできます。

 

■インライン要素 aタグを使った例
[aタグ1]aタグはインライン要素です。[aタグ2]インライン要素は改行が入りません。[aタグ3]幅や高さの指定はできません。
 

イメージ的には、ブロックレベル要素は段ボールやコンテナのような箱に相当し、インライン要素は箱の中に入っている内容物に相当します。
 

ブロックレベル要素 インライン要素 イメージ

ブロックレベル要素とインライン要素のイメージ

 

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

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

  • display:inline;指定した要素をインライン要素の性質にする(改行なし、幅・高さ・余白を指定できない)
  • display:block;指定した要素をブロックレベル要素の性質にする(改行あり、幅・高さ・余白を指定できる)
  • display:inline-block;指定した要素を中間の性質にする(改行がつかないが、幅・高さ・余白を指定できる)
  • display:none;指定した要素を非表示にする

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

display:inlineの例

■ブロックレベルのli要素をinline指定。改行なし、幅・高さ・余白は指定できない。
display:inlineでli要素を横並び。幅高さ余白は指定できない
 

■上記のソースコード

 
 

display:inline-blockの例

■ブロックレベルのli要素をinline-block指定して横並びにして、幅・高さを指定
display:inline-blockでli要素を横並び・幅・高さを指定
 

■上記のソースコード

 
 

display:blockの例

■ldisplay:blockでa要素に幅や高さ・余白を指定する

(ブロックレベル要素にすることで、a要素が指定した幅と高さを持つので、文字や画像以外の端の部分でもクリックしてリンクに飛べるようになります。)
 

■上記のソースコード

 
 

3-8. 位置に関するスタイル position

要素の位置を指定する際には、「position」を使用します。
 

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

  • position:static;通常の位置。初期値。
  • position:relative;位置を相対位置にします。
  • position:absolute; 位置を絶対位置にします。
  • position:fixed; 位置を絶対位置かつスクロールしても位置固定します。

 

具体的な位置の指定

positionで位置方式の指定とともに、具体的な位置(距離)指定には以下の設定を行います。position:static以外の値が指定されているときに有効です。単位は%またはpxです。
 

  • top:xxx(距離);基準位置の上端との距離
  • bottom:xxx(距離);基準位置の下端からの距離
  • left:xxx(距離); 基準位置の左端からの距離
  • right:xxx(距離); 基準位置の右端からの距離

 
 

通常の位置 position:static;

position: static;は初期値で、通常通り左上に配置に配置されます。前述のtop,bottomなどの位置指定をすることができません。
 

■例 position:static(なにもしない初期状態)
position:static 左上に配置される
 

■上記のソースコード

 

何も指定しない時はposition:staticになっているので、明示的に指定するケースは少ないと思います。
 
 

相対位置 position:relative;

position:relative;を指定すると、後述のtop,bottom,left,rightなどで位置を指定ができるようになり、もともと配置されるはずの場所から位置を調整できます。
 

■例 position:relative; さらにtop:50px;left:50pxで位置を右下にずらしている。
position:relative topやleftで位置を指定できる。
 

 

何もしないとstaticと同様に元々の表示される予定の位置に表示されますが、子要素にposition:absoluteを使うために、利用する場合もあります。
 

なお、位置調整でできた隙間に、他のコンテンツが自動的に配置されることはありません。
 
 

絶対位置 position:absolute;

通常の配置から外れて、親要素の左上を基準点とした位置に強制的に配置されます。
 

親要素にposition:static以外の値が指定されていない場合には、ブラウザの左上が基準位置になります。
 

■例 position:absolute、bottom:0、right:0で右下に固定
position:absolute。横幅300px、高さ300px、下から0px、右から0px
 

■上記のソースコード

 

親要素にposition:relativeなどstatic以外の値が指定されている場合は、ブラウザの代わりにその親要素が基準位置になります。
 

■例  親要素をposition:relativeにして、子要素をposition:absoluteで親要素を基準位置にしてずらす
HTML POSITIONの設定 relativeとabsoluteの例
 

■上記のソースコード

 
 

絶対位置 position:fixed;

absoluteと同様に、通常の配置から外れて、親要素を基準点とした位置に強制的に配置されます。
 

前述のabsoluteとの違いは、スクロールしても位置が固定されたままという点です。
 

 

 
 

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

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

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

div1、div2、div3が縦に並んでいる

div1、div2、div3が縦に並んでいる

 

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

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

 

■上記のソースコード

 

設定値は下記の通りです。
 

  • float:left;要素を左に配置
  • float:right;要素を右に配置
  • float:none;floatしない(初期値)

 

なお、前述のpositionでstatic以外の値が指定されている要素にはfloatは適用されません。
 
 

clearプロパティでfloatを解除する

floatを利用すると、横並びにしたくない後ろの要素もfloatの影響を受けて回り込む問題があります
 

floatを記述していないサンプル3のdivが正しく配置されない

サンプル3のdivが正しく配置されない

 

■上記のソースコード

 

floatとセットで後ろの要素にclearプロパティを利用して回り込み解除を行うことができます。
 

サンプル3の上部に余白がとれた

サンプル3の上部に余白がとれた

 

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

4. まとめ

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

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

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

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

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

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

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

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

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

「自分で作る選択を!」個人事業主のための大阪のホームページ作成とWeb集客の教室・スクール 「Webst8」

ウェブストエイトは自分でホームページ制作・Web集客したい方向けの少人数制個別指導のスクール・塾です。 継続6ヶ月コースとお試し1ヶ月コースから選択して受講できます。

コメントを残す

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

CAPTCHA


ABOUTこの記事をかいた人

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

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

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

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