【ここだけ見れば作れちゃう！】初心者向けホームページの作り方まとめ
今回は、これから自分でホームページ作成しようとCSSの勉強を始めた初心者の方向けに、CSSの基本と書き方やよく使うプロパティ一覧を紹介します。
HTMLを勉強したい方は「【初心者向け】知っておきたいHTMLの基本とよく使うタグ一覧」の記事をご参考ください。
『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室
CSSとは
HTMLのおさらい
前回の記事(HTMLの基本とよく使うタグ)では、HTMLを使って「これは見出し」、「これは文章」、「これは画像」、「これはリンク」など定義していきました。
HTMLとはHyper Text Markup Languageの略です。Webページの構造を定義する言語のことです。
■人の構造の定義に例えたイメージ
もう少し具体的に言うと、HTMLでは<html>〜</html>のように、< >で囲んだ『タグ』と言われるかたまりを使って、「これは見出し」「これは文章」「これは画像」「これはリンク」など定義していきます。
HTMLで記述されたファイルをWebブラウザで開くと、ブラウザが上記の記述を解釈して、普段見ているWebページとして見ることができます。
このように、HTMLを使ってページを作成することを「マークアップする」とも言います。
しかし、普段見ているWebページはもっと色や配置が整っていて、綺麗な見た目になっているものが多いかと思います。
HTMLで定義した文書構造を綺麗な見た目にするためには、CSSという言語を利用します。
HTMLとセットで使う言語CSS
HTMLで作成したWebページのスタイルを整えるため、CSS（Cascading Style Sheets）という言語を利用します。
■人に例えたイメージ
具体的には「この見出しは赤文字で」「この文章のフォントは30pxで」「このグループは青線で囲む」などHTMLで定義した内容をどんな見た目に表示させるかをCSSで設定していきます。
CSSでスタイルを指定すると、ブラウザで開いたときにそのスタイル(見た目)が適用されています。
CSSの3つの書き方
CSSの書き方ですが、大きく3つの方式があります。
CSSの3つの書き方
- インラインスタイルシート
- 内部スタイルシート
- 外部スタイルシート
それでは、順番に説明していきます。
インラインスタイルシートでのCSSの書き方
インラインスタイルシート形式でのCSSの書き方
- 【書き方】 <html要素名 style="プロパティ(設定項目):設定値;">
- 【例】 <h1 style="color:red;">赤色の見出し</h1>
インラインスタイルシートでは、HTMLの各タグに直接記述します。
後ろのセミコロンは省略可能ですが、複数のプロパティを設定する場合は必須なので付けておく習慣づけをしておくと良いと思います。
■使用例
1 | <h1 style="color:red;">はじめてのCSS</h1> |
■表示例
■複数のプロパティを設定する場合
「文字は赤色で背景は水色で」といったように複数の設定値を入れる場合は、プロパティとプロパティの間に「;」で区切って何個でも足していくことができます。
■使用例 文字色が白色で背景がライトブルーで枠線がスカイブルー
1 | <h1 style="color:white;background-color:lightblue;border:4px solid skyblue;">はじめてのCSS</h1> |
■表示例
インラインスタイルシート形式の場合、以下の特徴があります。
インラインスタイルシート形式の特徴
- 各タグにそれぞれ個別に設定できる
- 「pタグは全て青文字」のように共通で設定できないので、都度設定する手間がかかる
内部スタイルシートでのCSSの書き方
内部スタイルシート形式でのCSSの書き方
- 【書き方】 <head>タグの中に下記のようにスタイルを記述します。
- 【例】123456789101112131415<!DOCTYPE html><html><head><meta charset="utf-8"><title>はじめてのCSSセミナー</title><style media="screen">h1{color:red;}</style></head><body><h1>はじめてのCSS</h1></body></html>
■表示例
(※)改行や半角スペースあってもなくても構いませんが、見やすさを考慮して改行しています。
(※)media="screen"はあってもなくても構いません。
参考:●media属性を使った媒体別のスタイルシート
(※)セレクタとはスタイルを適用する対象のことです。h1やpなどのhtmlタグのほか後述で説明するid名やclass名などがあります。
■複数のプロパティの設定をする場合
インラインスタイルシート形式と同様にプロパティとプロパティの間に「;」で区切って設定値を何個でも足していくことができます。
■設定例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> <style media="screen"> h1{ color:white; background-color:lightblue; border:4px solid skyblue; } </style> </head> <body> <h1>はじめてのCSS</h1> </body> </html> |
■表示例
■複数のセレクタに対してスタイルを設定する
複数のセレクタに対してスタイルを設定する場合は、下記のようにh1は赤文字でh2はオレンジで、といったように追記していきます。
■設定例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> <style media="screen"> h1{ color:red; } h2{ color:orange } </style> </head> <body> <h1>はじめてのCSS</h1> <h2>CSSの書き方</h2> </body> </html> |
■表示例
内部スタイル形式は、下記のような特徴があります。
内部スタイルシート形式の特徴
- 1枚のWebページ全体にスタイルを適用できる
- 複数のWebページ共通で適用できない（各ファイルに同様の記述をしないといけない)
外部スタイルシートでのCSSの書き方
最後に３つ目の書き方は、外部に作ったCSSファイルを参照する方式です。
任意の名前のCSSファイル(例. style.css)を作成してそこにCSSを記述します。
また、HTMLファイル側では作成したCSSファイルを参照する設定をします。
外部スタイルシートの読み込み設定
■CSSファイル側では下記のように記載します。
セレクタ1{
プロパティ1:値;
プロパティ2:値;
...
}
セレクタ2{
...
}
・・・
(※)先頭の@charset "UTF-8";は文字コードの設定(おまじないのようなもの)です。それ以外は内部スタイルシートの場合と同じような書き方になります。
■HTMLファイル側ではCSSファイルを参照する設定をします。headタグ内に以下のような記述をします。
<link rel="stylesheet" href="CSSファイルの格納場所(※)">
格納場所の指定方式は画像の格納場所の指定方法と同じです。
(相対パスの参考：画像の格納場所の指定方法 | HTMLの基本とタグの一覧
■HTMLファイルの例 cssフォルダにあるstyle.cssを参照
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>はじめてのCSS</h1> </body> </html> |
■外部CSSファイル(style.css)
1 2 3 4 | @charset "UTF-8"; h1{ color:red; } |
■表示例
外部スタイルシートの場合は、下記のような特徴があります。
外部スタイルシート形式の特徴
- 複数のHTMLファイルで同じCSSファイルを利用できる(何か変更したい場合に、一つのCSSファイルの変更で済む)
3つの方式の特徴まとめ
CSSの3つの書き方の特徴のまとめです。
| 方式 | メリット | デメリット |
|---|---|---|
| インラインスタイルシート | 各タグにそれぞれ個別に設定できる | タグ共通で設定したい場合は、各タグ個別に設定する必要があるので面倒臭い |
| 内部スタイルシート | 1枚のWebページ全体にスタイルを適用できる | 複数のWebページ共通で適用できない（各ファイルに同様の記述をしないといけない) |
| 外部スタイルシート(CSS)ファイル参照 | 各ページで共通して一つのcssファイルを読み込める(何か変更したい場合に一つのCSSファイルの変更で済む) | 慣れないうちはインライン形式・内部スタイルシートに比べてHTMLタグへの指定方法が少し難しい。 |
なお、インラインスタイルシート、内部スタイルシート、外部スタイルシートは併用ができます。
競合する設定をしている場合は、優先順位があるのでそれにしたがってスタイルが適用されます。
詳細は「知っておきたいCSSセレクタの優先順位・詳細度・継承」の記事をご参照ください。
(補足)HTMLにつけるid属性とclass属性について
さて、htmlの各タグにはid属性やclass属性というものが設定できます。
例
<h1 id="top-h">はじめてのCSS</h1>
<p class="blue-text">この文章は青色になります</p>
idやclassを設定することでCSSでレイアウト装飾する際に
「このid名がついているタグは背景を赤色にする」
あるいは
「このclass名がついているタグは文字色を青色にする」
などの指定ができるようになります。
■記述例 (内部スタイルシート形式で記述)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> <style media="screen"> #top-h{ background: red; } .blue-text{ color:blue; } </style> </head> <body> <h1 id="top-h">はじめてのCSS</h1> <p class="blue-text">この文章は青文字になっています</p> <h2 class="blue-text">この見出しも青文字になっています</h2> </body> </html> |
■表示例
HTMLのタグを書く際に
<HTML要素名 id="任意のid名">
あるいは
<HTML要素名 class="任意のclass名">
と記述します。
CSS側では
id名を「 #id名 」
class名を「 .class名 」
で指定します。
(※)idはHTMLファイル内で一意である必要があり、classは一意でなくとも構いません。
主な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
文字の大きさ(フォントサイズ)の指定方法
- 【書き方】 font-size:値;
- 【例】 font-size:20px;
値の単位は簡単な「px」をまず覚えましょう。（他にも基準サイズに対して比率で算出する方式でrem、emや%などがあります。）
■使用例 pタグのフォントサイズを40pxにする(インラインスタイルシート形式)
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <p style="font-size:40px;">この文章のフォントサイズは40pxです。</p> </body> </html> |
■表示例
文字の色(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で自分の好きな色を調整することができます。
■使用例
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <h1 style="color:blue">青色の見出しだ！！</h1> </body> </html> |
■表示例
文字の太さ font-weight
文字の太さ
- 【書き方】 font-weight:値;
- 【例】 font-weight:bold;
■使用例 pタグを太文字にする
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <p style="font-weight:bold;">この文章は太文字です</p> </body> </html> |
■表示例
テキストの装飾 text-decoration
文字の装飾の指定方法
- 【書き方】 text-decoration:値;
- 【例】 text-decoration:line-through; (打ち消し線)
テキストに下線・上線・打ち消し線を付けたりするにはtext-decorationで指定します。
| none | 初期値。テキストに線などつけない。 |
| underline | 下線を付けます。 |
| overline | 上線を付けます。 |
| line-through | 打ち消し線を付きます。 |
■text-decorationのサンプル
1 2 3 4 5 6 | <p> 何もなし。 <span style="text-decoration:underline">下線</span> <span style="text-decoration:overline">上線</span> <span style="text-decoration:line-through">打ち消し線</span> </p> |
■表示例
文字の字体 font-family
文字の種類(フォントファミリー)
- 【書き方】 font-family:値;
- 【例】 font-family:'Hiragino Mincho ProN','ＭＳ 明朝',serif;
｢ＭＳ ゴシック｣や｢ＭＳ 明朝｣のようにフォント名で指定します。フォント名にスペースが含まれている場合はシングルクォーテーション（ ' ）で囲みます。
（またはダブルクォーテーション（ " ）で囲むこともできますが、インラインスタイルシート形式でstyle=""でくくっている場合は、シングルコーテーション（'）を使用してください。）
■使用例
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <h1 style="font-family:'Hiragino Mincho ProN','ＭＳ 明朝',serif">明朝体の見出し</h1> <h1>通常の見出し</h1> </body> </html> |
■表示例
(補足)フォントタイプは少し複雑で、複数の値を記述することができます。値をカンマ（ , ）で区切って複数の候補を並べます。
例えば、MS明朝はWindowsにあるけどもMacにないフォントであるため、Macで明朝体を表示できません。
そこで「'Hiragino Mincho ProN',’ＭＳ 明朝’,serif」のように複数記述することで、「左から順番にフォントが閲覧している端末に適用し、なければ次に書いてあるフォントを適用する」といったような使い方をします。
上記例では、MacではHiragino Mincho ProNが適用されて、WindowsではMＳ 明朝が適用されて、どちらもない場合はserifを使うといった形になります。
枠線 border
枠線 borderの基本的な使い方
枠線 border
- 【書き方】 borer:枠線の色の値 枠線の種類の値 枠線の太さの値;
(※)値は半角スペースで区切ります。順不同でどれから先に書いても構いません。 - 【例】 border:red solid 2px;
| 項目 | 内容 |
|---|---|
| 色 | redなどの色指定、または#ff0000などの16進数表記 |
| 種類 |
|
| 枠線の太さ | 2pxなど 〇〇pxで設定 |
■使用例 見出しに赤色・実線・太さ5pxの枠がついている
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <h1 style="border:red solid 5px;">これは見出し。赤の枠内にあります。</h1> </body> </html> |
■表示例
(補足)色々なborderの使い方
特定の辺だけ枠線をつける
- 【上辺の枠】 border-top
- 【底辺の枠】 border-bottom
- 【左辺の枠】 border-left
- 【右辺の枠】 border-right
例 border-top:red solid 5px;
例 border-bottom:red solid 5px;
例 border-left:red solid 5px;
例 border-right:red solid 5px;
枠の色border-color/種類border-style/太さborder-width
borderの代わりに、「border-color」、「border-style」、「border-width」でそれぞれ設定することもできます。
1 | <h1 style="border-color:red;border-style:solid;border-width:5px">これは見出し</h1> |
枠の丸さ border-radius
border-radiusを利用するとborderで作った枠線の角を丸くする事ができ、円も作る事もできます。
border-radius:30px とした場合、すべての角が30pxになります。
border-radius:50%と指定した場合は、50%=円の半径で下記のように円になります。
また、border-top-left-radius（左上の箇所）:xxxなどのように場所を指定すると下記のように左上だけ丸くすることもできます。
背景 backgroundの基本
背景「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-color
- 【書き方】 background-color:値;
- 【例】 border:pink;
値の色は「blue」や「red」など色を直接指定する方法や16進数表記「#FF0000」、透明度を設定できる「rgba(255,0,0,0.5)」などの指定方法がよく使われます。
■表示例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body style="background-color:pink;"> <h1>ピンク色の背景が全体にかかっています。</h1> </body> </html> |
背景画像 background-image
background-image:url(画像の場所);
- 【書き方】 background-color:値;
- 【例】 background-image: url(images/sample.jpg);
画像の場所は、「http://xxxxx.com/xxxx/sample.jpg」のように絶対パスで指定する方法と「images/sample.jpg」のように相対パスで指定する方法があります。
■表示例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body style="background-image: url(https://webst8.com/blog/wp-content/uploads/2018/03/pattern0740.jpg);"> <h1>背景を設定</h1> </body> </html> |
「background」関連プロパティについてのより詳細な内容を「https://webst8.com/blog/css-background/」に紹介していますので、こちらもご参照ください。
横幅widthと高さheight
横幅 width
横幅width
- 【書き方】 width:値;
- 【例】 width:300px;
横幅の単位は「px」や「%」があります。pxの場合は固定値です。%は親要素に対する割合(body直下のHTML要素の場合はブラウザサイズに対する割合)です。
■使用例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div style="width:400px;background:yellow;"> 横幅400pxの黄色のdiv </div> <br> <div style="width:90%;background:yellow;"> 横幅400pxの黄色のdiv </div> </body> </html> |
■表示例
高さ height
高さheight
- 【書き方】 height:値;
- 【例】 height:200px;
縦の高さは「height:値;」で設定します。横幅と同様に単位は「px」や「%」などがあります。
(注)heightの%利用は難しく、親要素の%を明示していないとうまく表示されないためご注意ください。
分かりにくいCSS height のパーセント設定のまとめ
■使用例
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div class="height:400px;background:yellow;"> 高さ400pxの黄色のdiv </div> </body> </html> |
■表示例
余白に関するスタイル
余白には要素外部に設定する外部余白(margin)と要素内部に設定する内部余白(padding)の2つがあります。
| 項目 | 値 | |
|---|---|---|
| 外部余白 | margin | 外部余白 |
| margin-(※各辺) | 外部余白の各辺 (上top/下bottom/右right/左left) | |
| 内部余白 | padding | 内部余白 |
| padding-(※各辺) | 内部余白の各辺 (上top/下bottom/右right/左left) | |
外部余白 margin
外部余白
- 【書き方】 margin:値;
- 【例】 margin:200px;
値の単位は通常「px」です。値は半角スペースで区切って複数設定することができます。
| 項目 | 内容 |
|---|---|
| margin:値; | 上下左右で指定した値の余白が設定されます。 |
| margin:値1 値2; | 「値1が上下」「値2が左右」の余白が設定されます。 |
| margin:値1 値2 値3 値4; | 記述順に上右下左と余白が設定（時計周り）されます。 |
■使用例 divタグの外部余白を100pxとる
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div style="margin:100px;border:5px green solid;"> 外部余白100pxになっています。 </div> </body> </html> |
■表示例
以下のように個々に設定することもできます。
- margin-left:値; (左の外部余白)
- margin-right:値; (右の外部余白)
- margin-top:値; (上の外部余白)
- margin-bottom:値; (下の外部余白)
marginの相殺
各要素間でmarginで余白を設定している時、外部余白は足し算になるのではなくどちらか大きい方の余白が採用されることに注意してください。
■marginの相殺の例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSS</title> <style media="screen"> .sample1{ background-color: skyblue; margin-bottom:100px; } .sample2{ background-color: pink; margin-top:100px; } </style> </head> <body> <div class="sample1"> 外部余白 <br> 下向きに100px; </div> <div class="sample2"> 外部余白 <br> 上向きに100px; </div> </body> </html> |
要素を真ん中寄せにする例 margin:autoを利用する
左側余白を自動(margin-left:auto)、右側余白も自動(margin-right:auto)のように、左右のmarginをそれぞれauto にすれば要素が真ん中寄せになります。
margin:〇〇px auto; (margin:autoでも可能)のように記述できます。
(対象の要素にwidthを指定している必要があります。widthはデフォルト100%のため、設定していないと真ん中寄せしていても変化はありません。上下に対するautoは効かないため0になります。)
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div style="background:pink;width:400px;"> 400px<br>通常配置の<br>左寄せになっているボックス </div> <div style="background:skyblue;width:400px;margin:10px auto;"> 400px<br>margin:0 autoで<br>真ん中寄せしたボックズ </div> </body> </html> |
内部余白 padding
内部余白 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とる
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div style="padding:100px;border:5px green solid;"> 内部余白100pxになっています。 </div> </body> </html> |
■表示例
以下のように個々に設定することもできます。
- padding-left:値; (左の余白)
- padding-right:値; (右の余白)
- padding-top:値; (上の余白)
- padding-bottom:値; (下の余白)
ボックスの算出方法 border-box
枠線「border」や内部余白「padding」を横幅や高さに含めるかどうか、ボックスの算出方法に「border-box」を利用します。
| 項目 | 内容 |
|---|---|
| content-box | 枠線「border」や内部余白「padding」を横幅と高さに含めない（初期値） |
| border-box | 枠線「border」や内部余白「padding」を横幅と高さに含める |
■表示例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS</title> <link rel="stylesheet" href="style.css"> <style media="screen"> .box1{ background:skyblue; width:400px; height:300px; padding: 100px; box-sizing: border-box; } </style> </head> <body> <div class="box1"> 横幅400 x 高さ300pxのボックス </div> </body> </html> |
水平方向の位置 text-align
水平方向の位置 text-align
- 【書き方】 text-align:値;
- 【例】 text-align:center;
値には以下の3つがあります。
| 項目 | 値 |
|---|---|
| text-align:left; | テキストを左揃えにします(初期値) |
| text-align:center; | テキストを中央揃えにします |
| text-align:right; | テキストを右揃えにします |
■使用例
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <p style="text-align:right;border:1px brown solid;">左寄せになります</p> <p style="text-align:right;border:1px brown solid;">右寄せになります</p> <p style="text-align:center;border:1px brown solid;">中央揃えになります</p> </body> </html> |
■表示例
marginの真ん中寄せとtext-alignの中央揃えの違い
marginは自身の要素を真ん中寄せにするのに対して、text-align:centerは文字や画像などの中身を中央揃えにします。
■表示例
■上記のソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>はじめてのCSSセミナー</title> </head> <body> <div style="background:pink;width:400px;text-align:center;"> 400px<br>通常配置の<br>左寄せになっているボックス <br> text-align:centerで文字を中央寄せ。 </div> <div style="background:skyblue;width:400px;margin:10px auto;text-align:center;"> 400px<br>margin:0 autoで<br>真ん中寄せしたボックス <br> text-align:centerで文字を中央寄せ。 </div> </body> </html> |
行間 line-height
一行の高さを指定するには、「line-height」を指定します。
指定できる値は「数字(倍率になります)」もしくは「px」です。
例えばフォントサイズが16pxの場合、「line-height:1.5」にすると24px(16*1.5)になります。line-height:24pxでも同じです。
■使用例
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <p style="line-height:2"> ウェブストエイトは大阪のWebスクールです。 <br> 本スクールの特徴は個人事業主様・経営者様向けで <br> 自分のビジネス用のHPを自ら作成して、 <br> ビジネスに活用することをコンセプトにしています。 </p> <hr> <p style="line-height:32px"> 初心者向けのセミナーや講座も開催しています。 <br> ホームページ作成セミナーで検索順位1位。 <br> 自らWeb集客しながら教室を運営しています。 </p> |
■表示例
ウェブストエイトは大阪のWebスクールです。
本スクールの特徴は個人事業主様・経営者様向けで
自分のビジネス用のHPを自ら作成して、
ビジネスに活用することをコンセプトにしています。
初心者向けのセミナーや講座も開催しています。
ホームページ作成セミナーで検索順位1位。
自らWeb集客しながら教室を運営しています。
表示に関するスタイル display
要素のブロックレベル・インライン等の表示形式を指定する際に「display」を使用します。
■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を利用した位置指定のサンプル
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(右)」を利用します。
positionについてのより詳細な内容を位置指定で使うCSSプロパティ「position」の使い方」に紹介していますので、こちらもご参照ください。
横並び(浮動)に関するスタイル float
divタグなどのブロックレベル要素は基本的に上から下に向かって順番に縦に並んで表示されますが、これを左または右に寄せて横並びで配置したい場合は、「float」を利用して横並びにすることができます。
また、floatとセットで後ろの要素にclearプロパティを利用します。
floatとclearについては、より詳細な内容をCSSのfloatプロパティで要素を横並びにする方法」に紹介していますので、こちらもご参照ください。
まとめ
今回は、ホームページを初めて作ろうとしている方向けに、CSSの書き方とまずはじめに覚えておきたい代表的なスタイルについて説明しました。
HTMLに加えてCSSの使い方を知っていると、ちょっとしたブログカスタマイズや見た目の調整ができるようになり、自分の思ったように作っていくことが可能になります。
他にも以下の記事が参考になるかと思います。
CSSのfloatプロパティで要素を横並びにする方法
CSS 知っておきたいCSS セレクタの優先順位・詳細度・継承
知っておきたいCSSの擬似クラスと擬似要素の基本と併用可否について
CSSメディアクエリとViewPortによるレスポンシブデザインの作り方
今回紹介したものは、ほんの一部になりますが、CSS 一覧 などで検索すると、ほかにもたくさんのプロパティがヒットします。
最近では、「CSS3」といって新しい便利なプロパティや使い方も利用できるようになったので、興味のあるかたはぜひいろいろ調べてみてください。
弊社は、自分でホームページを作ることを推奨しています。「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。
個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
無料事前相談もしておりますので、まずはお気軽にご登録ください。
今回は以上になります。最後までご覧いただきありがとうございました。
