会社の試験に向けてHTML/CSSの復習をしています。
その中で「あ！忘れてるな」と思った部分があったのでまとめてみます。
#CSSの構成
CSSはセレクタ・プロパティ・値で構成されています。
次のコードを例にすると
body {
background-color: white;
}
セレクタ ⇨ body (CSSによる装飾を、どの部分のHTMLに適用するか)
プロパティ ⇨ background-color (何を変えるのか)
値 ⇨ white (設定する内容)
となります。
#class属性とclassセレクタ、id属性とidセレクタ
class属性とはHTML要素に対して個別に名前を指定することができる属性
id属性とは特定のHTML要素のみに対して、名前を指定することができる属性
※id属性には**「1つのページ内で、同じid名を複数のHTML要素に付与しない」**というルールがあります。
次のhtmlコードを例に説明します。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>旅行予約サイトA</title>
<link rel="stylesheet" href="tripstyle.css">
</head>
<body>
<h1>
国内旅行
</h1>
<p>
沖縄
</p>
<p>
石垣
</p>
<p>
宮古島<b>この部分は太字になります。</b>
</p>
<a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
</body>
</html>
<p>石垣</p> のみを装飾したい場合
複数のp要素がある中で一部のp要素のみを装飾したい場合はclass属性を使います。
記述例：<p class="ishigaki">
<p>宮古島</p>のみを装飾したい場合
特定のHTML要素のみに対して、名前を指定したい場合はid属性を使います。
記述例：<p id="miyakojima">
CSSへは次の様に記述することでそれぞれの装飾が反映できます。
p {
font-size: 24px;
color: red;
}
.ishigaki {
color: orange;
font-size: 12px;
}
#miyakojima {
color: blue;
}
#span要素
テキストの一部だけを装飾したい場合に使います。
※部分的にテキストのフォント調整、文字色・背景色を変更する場合など
装飾したいテキストの前後を<span>...</span>で囲み、span要素にクラスを設定
<span class="red">装飾したいテキスト</span>
CSSファイルで、クラスにプロパティを設定する
.red {
color: blue;
}
これで、装飾したいテキストにのみ適用されます。
#ul要素とli要素
ul要素
順序のないリストを示すブロックレベル要素、li要素の親要素となります。
li要素
リストの項目を示すブロックレベル要素です。ul要素の子要素です。
次の様に記述します。
<ul class="lists">
<li class="list">北海道</li>
<li class="list">東京</li>
<li class="list">大阪</li>
<li class="list">福岡</li>
</ul>
.list{
list-style: none;
}
値を指定しない場合箇条書きの頭に・がつきます。
値としてsquareを指定すると箇条書きの黒点を■で表現できます。
値としてnoneを指定していると、箇条書きの黒点を消すことができます。
リストのうち、一箇所だけ装飾をしたい場合は
追加でCSSを追加したい部分だけに、新たにclassを追加する
＝半角スペースで区切ることによって、1つの要素が複数のクラスを持つことができます。
<ul class="lists">
<li class="list">北海道</li>
<li class="list">東京</li>
<li class="list">大阪</li>
<li class="list jimoto">福岡</li>
</ul>
.lists{
list-style: none;
}
.jimoto{
background-color: yellow;
}
####基礎中の基礎！だと承知していますが、ほんと〜〜に忘れっぽいのでまとめました。
記事の頭に[memo]がついているものは実装手順がわからなくなりそうなものだったり、
理解を深めるためのメモ記事になります。今回はいくつかのまとめなので[まとめ]にしました。