授業15回目 CSS⑺ 2018.1.30(tue)
2018年 02月 14日
■共通のstyle.cssを読み込むとき(cssを共通で使うとき)
<body class="entry">などと<body>にclassをつけておくと良い。
cssを記述する時に、.entryと最初に指定すると、他のhtmlファイルに同じ要素があっても、<body class="entry">のhtmlファイルにスタイルを適用するよう指定できる。
■border-collapse:キーワード
隣り合うセルのボーダーを結合するか分離するかを指定する。
キーワード:collapse・separate
*隣り合うセルのボーダーを重ねて表示する→collapse
*隣り合うセルのボーダーを隙間を空けて表示する→separate
■vertical-align:キーワード or 数値と単位
テキストや画像などの垂直方向の位置揃えを指定する。
キーワード:baseline・top・bottom・middle・super・sub・text-top・text-bottom
単位:px・%・em・vwなど
■グループセレクタ
複数のセレクタをカンマでつないで一括指定する
h1,h2,h3{ color : #ff0000 ; }
#green,#blue{ color : #00ff00 ; }
.green,#green.blue{ color : #0000ff ; }
*「,」は「&」を意味する。
ex.
.entry .entryForm input[type="text"],
.entry .entryForm input[type="email"]{
width: 400px;
padding: 5px;
border: #ccc 1px solid;
}
■属性セレクタ
属性の値を使うセレクタを属性セレクタという。
*属性に指定の値が設定されているものの場合
属性に特定の値が指定されている要素を対象とするセレクタの記述方法
要素名[属性名="値"]{
プロパティ:値;
}
ex.
input[type="text"]{
width: 400px;
border: #ccc 1px solid;
}
■擬似クラス
要素が「どういった状態にあるのか」を指定するためのもの。
:focus
フォーカスされた要素にスタイルを適用する
ex. フォームの入力欄にカーソルを合わせてテキスト入力できるようになった状態など
要素名:focus{プロパティ名:値;}
.entry .entryForm input:focus,
.entry .entryForm textarea:focus{
background-color: #ff9;
}
*フォームの入力欄にカーソルを合わせてテキスト入力をする状態の時に、入力欄の背景が黄色系の色になる。
*input type= "radio" "checkbox" "reset" "submit"には当たらない。(入力欄ではない)
■cursor:キーワード
ポインタ(カーソル)の形状を指定する。
キーワード:auto・crosshair・default・pointer・move・e-resize・ne-resize・nw-resize・n-resize・se-resize・sw-resize・s-resize・w-resize・text・wait・progress・help・URL
ex.
label,
input[type="radio"],
input[type="checkbox"],
input[type="submit"],
input[type="reset"]{
cursor: pointer;
}
♣︎参考にしたサイト・本♣︎
ホームページ作成ノート
属性セレクタ
HTMLクイックリファレンス
:focus擬似クラス
『HTML&CSSとWebデザインが1冊できちんと身につく本』服部雄樹(著)技術評論社
by zooori
| 2018-02-14 20:15
| 授業まとめ(CSS編)