トップページへ
GoogleService
メニュー
サイト内検索
お問合わせ
[初めてのｗｅｂサイト作成レッスン８]🌹レッスン８🌹
ボックスの構造｛マージン・パディング｝・ＣＳＳとは
🌻パソコンのブラウザはGoogle Chromeを使用しています。
追記：2021年1月28日「HTML５」は廃止となりました。
ボックスの構造については、現時点(20210728)で変更はありません。
詳細はトップページ下部の「お知らせ」をご覧ください。
1. ボックスの構造｛マージン・パディング｝について
ｗｅｂページはＨＴＭＬとＣＳＳでコーディングしていきますが、ＣＳＳでは四角いボックスに描かれるというイメージです。
ボックスモデルは4つの領域から成立しています。
下記はそのイメージ図です。
【説明】
①内容を表示する領域
実際にデイスプレイに私たちが見えている部分で、文字や画像などのコンテンツ内容が表示されます。
②パディング
内容が表示されている領域とボーダーとの余白です。
文字や画像などの内容が接近しすぎないように設定します。（ある程度の余白がないと見づらいため）
③ボーダー
パディングとマージンの境目にある枠線の事で、表示する場合、スタイル・太さ・色などが設定できます。
ボーダーが指定されていれば、ボーダーが優先的に表示されます。
④マージン
ボーダーとの余白です。
2. ＣＳＳとは
カスケーティングスタイルシートの略です。
ＨＴＭＬを補足する言語です。
デザインを設定して見栄えをよくすることができます。
また、ＣＳＳを使用するとＨＴＭＬファイル内のソースが簡素になり、構造部分とデザイン部分の設定を分けることができます。
ＣＳＳの定義にはＨＴＭＬ内に記述する方法と、独立したＣＳＳファイルをリンクさせる方法がありますが、複数のＨＴＭＬファイルにリンクすることにより、統一したデザインが適用されます。
１つのＣＳＳファイルを修正するだけで、複数のＨＴＭＬファイルが変更でき管理が楽です。
なので、ＴＯＰページに書きましたが、メモ帳などを使って独立したＣＳＳファイルに記述していく方法で説明します。
3. ＣＳＳの基本
ＣＳＳの場合は、/* ｘｘｘｘｘ */（スラッシュとアスタリスク）で、メモ代わりにしたり一時的にスタイル指定を無効にできます。
［セレクタ」「プロパティ」「値」で組み合わせてスタイルを設定します。
基本的な書式は、
セレクタ｛ プロパティ：値； ｝
例えば、大見出しの色を青色にしたい場合
ｈ1｛ｃｏｌｏｒ： ｂｌｕｅ；｝
セレクタがｈ1で、プロパティはｃｏｌｏｒで、値はｂｌｕｅです！
プロパティと値の間は、：（コロン）値の後ろは；（セミコロン）
（カッコ閉じを忘れないようにして下さいね。）
☆セレクタのグループ化☆
例えば、＜ｈ3＞と＜ｐ＞を青色にしたい場合
ｈ3,ｐ｛ｃｏｌｏｒ： ｂｌｕｅ；｝
☆セレクタの種類☆
基本セレクタは、ｄｉｖやｐなどのＨＴＭＬ要素にスタイルを適用させます。
ｐセレクタを設定し、スタイルを指定すると、ＨＴＭＬファイル内のすべてのｐ要素に適用されます。
要素名｛プロパティ：値；｝
p{fontsize: 20px;}
🌻クラスセレクタ🌻
は、同じスタイルを複数の要素に適用させることができます。
クラスセレクタは適用する要素にクラス名を付け、要素名とクラス名の間に「.」（ドット）を付けます。
また、要素名を省略して先頭を「.」から記述することも出来ます。
【HTML】
<body>
<h2>クラスセレクタ</h2>
<p class="blue">青色です</p>
<p class="red">赤色です</p>
<p>指定なし</p>
<p class="blue">青色です</p>
</body>
【CSS】
@charset "utf-8"
body {
color: black;
}
/* p classの設定 */
p.blue{
color: blue;
}
.red{
color: red;
}
上書き保存します！
ディスプレイ表示するとこの様になります。
🌻ｉｄセレクタ🌻
は、ページ内にある1つの要素だけに適用させたい場合につかいます。
1つのＨＴＭＬ文書の中で、同じｉｄ名で複数の要素を指定することはできません。
ｉｄセレクタは、要素名とｉｄ名の間に「＃」を付けます。
また、要素名を省略して先頭を「＃」から記述することも出来ます。
【HTML】
<body>
<h2>idセレクタ</h2>
<p id="blue">ここは青色です</p>
<p id="red">ここは赤色です</p>
<p>指定なし</P>
</body>
【CSS】
@charset "utf-8"
body {
color: black;
}
/* p idの設定 */
p#blue{
color: blue;
}
#red{
color: red;
}
上書き保存します！
ディスプレイ表示すると、この様になります。
id名を１文字かえるだけでも別名になりますが、その場合CSSにも別名の記述が必要になります。
🌻疑似クラス🌻
は、リンクを指定するａ要素のリンク状態別の色指定などに使われます。よく青色の文字でアンダーバーがついているリンクを見かけます。
疑似クラスは、a:（コロン）の後に予約語を組み合わせて定義します。
- ａ：ｌｉｎｋ
まだアクセスされていない状態 - ａ：ｖｉｓｉｔｅｄ
アクセス済みの状態 - ａ：ｈｏｖｅｒ
カーソルをのせた状態 - ａ：ａｃｔｉｖｅ
アクセス中の状態
【HTML】
<body>
<h2>疑似クラス</h2>
<p><a href="#">ｌｉｎｋ</a>未アクセス</p>
<p><a href="#">ｖｉｓｉｔｅｄ</a>アクセス済み</p>
<p><a href="#">ｈｏｖｅｒ</a>カーソルをのせた時</p>
<p><a href="#">ａｃｔｉｖｅ</a>リンク中</p>
</body>
【CSS】
@charset "utf-8"
body {
color: black;
}
/* 疑似クラスの設定 */
a:link{
color: blue;
}
a:visited{
color: green;
}
a:hover{
color: yellow;
}
a:active{
color: red;
}
上書き保存します！
ディスプレイ表示するとこの様になります。
🌻子孫セレクタ🌻
は、特定の要素の子要素、または子孫要素にだけスタイルを適用させます。
ＣＳＳは、要素名の間に半角スペースで区切って指定します。
例えば、「ｐ ｅｍ」とセレクタを設定すると、ｐ要素内のｅｍ要素にだけスタイルが適用され、他の「ｐ」要素にはスタイルは適用されません。
【HTML】
<body>
<h2><em>子孫</em>セレクタ</h2>
<p>りんごには２種類あります<em>赤いリンゴ</em>と、</p>
<div>もう１つは、<em>青いリンゴ</em></div>
</body>
【CSS】
@charset "utf-8"
body {
color: black;
}
/* 子孫セレクタの設定 */
p em{
color: red;
}
上書き保存します！
ディスプレイ表示するとこの様になります。
文字を太字にしたい場合は、「font-weight: bold;」と指定します。
「ｐ ｅｍ」を「ｅｍ」とセレクタ設定すると、「見出しタグ」や「ｄｉｖタグ」にも適用されました。
子孫セレクタの「ｅｍ」は、ＨＴＭＬ５から意味が変更された要素です。
| 要素名 | 従来の意味 | ＨＴＭＬ５以降 |
|---|---|---|
| ｓｔｒｏｎｇ | より強く強調する | 重要なテキスト |
| ｅｍ | 強調する | アクセントを付けて強調する |
| ｂ | 文字を太くする | キーワード、固有名詞など区別したいテキスト |
| ｉ | 文字を斜体にする | 質が異なるテキスト |
| ｓｍａｌｌ | 文字を一回り小さくする | 著作権情報、免責条項など |
★まとめ
単に文字の色を指定するだけなら、idセレクタよりも、複数の要素を指定できるclassセレクタの方が、理に適っていると言えます。
疑似クラスは、当サイトの「メニュー（ページ上部に配置されてる）」や「ホームページへ戻る（ＴＯＰページ下部に配置されてる）」にも使用しています。
文章の一部の文字だけをｓｔｙｌｅ変更するには、子孫セレクタが便利です。私はブログでよく使います。
次回レッスン９は、「CSSをHTMLに組み込む方法」他をアップロードする予定です！
See you again Take care
(^.^/)))~~~bye!!
TOP