1月の授業日記
12/16 CSS(スタイルシート)
CSS(スタイルシート)とは
- HTMLでは定義した構造に見合った見栄えをブラウザが解釈し表示させていたが自由度が低い
- 構造と表示を分離し、表示方法を独自に定義させるために追加された言語がスタイルシート
CSSの基本書式
様々な表示に関する設定(プロパティ)を指定できる
CSSを記述する場所
CSSはHTMLとは記述方法が違うのでうまくHTMLのなかに取り込む必要がある
style属性の属性値として記述することでそのタグ内をスタイル指定できる
<タグ style="プロパティ:値">
対象はタグ内のみ
- タグ内だと同じ指定でもタグごとに何度も記述する必要がある
- タグから切り離し、ヘッダ等に記述すればページ内を一括指定できる
セレクタ
タグから切り離す場合、何に対しての指定化が判るように対象をセレクタで表す
セレクタ{プロパティ:値;}
セレクタをタグにするとタグの見栄えを自分で指定できる
3.タグから切り離す際の記述場所
- 指定対象が登場する前でなければいけないので<head>内に
- なんらかのタグの中に入れる必要があるので<style>タグで括る
- <style>タグを解釈できないブラウザ用にコメントタグで括る
background-color:
body以外の様々な要素にも背景色がつけられる
きょうのひとこと
CSSも難しそうだけど頑張ります!
1/27 CSS3 クラス/IDセレクタ
CSSによる罫線
border:プロパティで様々な個所に様々な様式で罫線をつけられる
border:形状 色 太さ
一つのプロパティに複数の値をつける場合、それぞれを半角スペースで区切る(順不同)
class/IDセレクタ
タグのclass/ID属性
タグに名前をつけて識別できる
<タグ class="クラス名">(何度か出現する場合)
<タグ ID="ID名">(一度きりしか出現しない場合)
class/IDセレクタの指定方法
(タグ).class名{プロパティ:値}
(タグ)#ID名{プロパティ:値}
タグと関係なくスタイル指定を行いたい場合、タグをつけずにclass/ID名のみをセレクター
表示効果のないタグ
div,spanタグを用いればタグの表示効果と切り離して指定できる
<div>〜</div>
改行のみ入る=ブロック単位の指定に用いる
<span>〜</span>
改行も入らない=段落内の一部の指定に用いる
きょうのひとこと
試験頑張ります