今回もwebフロント技術の勉強のノートをまとめていきたいと思います。
前回までの四回で一通りのhtmlを通したので次からはcssを中心にやっていこうと思います。
今回書く内容はほぼすべてが、cssファイルに書いてます。
htmlファイルの場合は、見出し横に(.html)と記載します。
CSSの定義(.html)
cssは、htmlで作った構造物にデザインやレイアウトなどを適用していく。
cssを使うことで、htmlに色などの様々な要素を付け加えることができる。
HTML内でcssを記述する際には、head内で<style>タグを使います。
<style> h1 {color: red;} </style>
セレクタとプロパティ(.html)
セレクタとプロパティでは、ある要素に対してスタイル適用するところです。
ここで言うセレクタとは、h1などで、プロパティは{}で囲まれた内容です。
- セレクタ:スタイルを適用する対象
- プロパティ:スタイルのルール
ルールに対応する値をコロン：で区切って記述し、値の後ろにはセミコロン;をつける。
<style> h1 {color: red;} </style>
CSSとHTMLの分離！
htmlとcssを分けて扱う場合linkタグを利用してhref属性に外部スタイルシートのURLを指定する。
<link rel="stylesheet" href="style.css">
外部スタイルシートで文字コードの指定
外部スタイルシートで文字コードを指定する場合は@charsetをファイルの先頭で行う。
@charset "UTF-8"
コメントの記載
cssでコメントを記載する際は/*と*/で挟むとコメントとして扱われます。
要素型セレクタ
指定したタグに対してcssを適用するときは、
p { color:red}とセレクタを指定する。
<a>や<p>のタグ名を指定することを要素型セレクタと言っています。
IDセレクタ
idがnelの要素の色を変えるときは、
`#nel { color:red }などで行けます。
idは自分の好きな値を決めれますが、ページ内で一つだけのものにしてください。
また、idはhtmlの構造に強く影響されるため、あまり利用しない傾向があるらしいです。
クラスセレクタ！
クラス属性でスタイル変換する。
クラスの場合は.nel {color : red}
で適用されます。また、classはページ内に複数回使うことができます。
属性セレクタ！
name属性がurlと一致する要素の文字の色を変える
属性セレクタでは[]を利用します。
[name=url] {color: red;}
-
[name]nameの属性を持つすべての要素に適用される。 - `[name~=key] name属性の値がkeyを含む要素
- `[name*=key] name属性の値がkeyに部分一致する要素
ユニバーサルセレクタ
すべての要素に適用する場合は
`* { color:red }で適用されます。
疑似クラス(:hover)
要素の上にマウスをホバーしたときに適用される。
p:hover { color: red;}
疑似クラス(:active)
クリックされた要素に適用する。
p:active {color: red;)
疑似クラス(:before)
要素の最初に*を表示させる。
その場合には::beforeを利用してcontentプロパティに追加する文字を追加する。
h1::before {content: "*";}
疑似クラス(::after)
特定の要素の直後に*を追加します。
今回はafterを使います
h1::after {content: "*";}
子孫セレクタ！
ここでは、セレクタを組み合わせて使っていく。
子孫要素を指定する方法はセレクタ同士をスペースでつなぐ。
.parent .child { color:red; }
上記のように.parentの配下にある.childの要素に適用することができる。
子要素のセレクタ！
子孫セレクタに続いて子セレクタです。
子要素をセレクタするにはセレクタ同士を、>でつなぎます。
.parent > .child{ color:red;}
子孫要素と違うのは、.parentの直下にある.childの要素にしか適用されません。
隣接セレクタ！
隣接セレクタを指定するときは、セレクタ同士を+でつなぎます。
.parent + .child { color:red;}
この隣接セレクタは、.parentのすぐ後ろにある.childの要素に適用されます。
間接要素セレクタ！
隣接要素セレクタでは、セレクタ同士を~でつなぎます。
.parent ~ .child{color:red;} 間接要素セレクタは、.parentの後に登場する.child`の要素に適用します。
複数同時にセレクタ
複数のセレクタを同時に適用させたい場合は、,でつなぎます。
.ser1,.ser2{color:red;}
高さを指定！
テキストエリアの高さを調整します。
.tx { background: #FFEEBC height: 100px;}
指定の仕方はheightを使用する。
幅を指定！
テキストエリアの幅を調整します。
.tx {background: #FFEEBC width:100px;}
指定の仕方はwidthを使用します。
高さや幅というのはコンテンツエリアを指定するものであり、コンテンツエリアは`marigin/padding/borderより内側です。
内側の余白調整！
テキストエリアの内側の余白を調整します。
.tx { padding : 20px;}
指定の仕方はpaddingを使用します。
また、一個だけ指定した場合は上下左右すべてに同じ値が適用されます。また、個別で指定する場合は、上、右、下、左の順です。
`.tx {padding : 10px 20px 30px 40px;}
外側の感覚を調整！
テキストエリアの外側の間隔を調整する。
.tx{margin:20px;}
指定の仕方はmarginを使用します。
これも、padding同様に上下左右４か所指定可能です。
要素を非表示に！
要素を非表示にするにはdispalyを利用します。
.tx {display: none;}
noneを指定した場合、すべての子孫要素も非表示になります。
要素を中央寄せ！
要素を中央寄せにするにはmarginを利用します。
{margin: 10px auto;}
autoで適切な間隔に作用鵜が置かれて中央寄せに表示されます。
フォントサイズ！
フォントサイズの変更をするにはfont-sizeを利用します。
{font-size: 35px}
フォントサイズを指定する際には、35pxみたいな値の指定以外に、small,smallerなどもあります。
フォントの種類を変更！
フォントを変えるには、font-familyを利用します。
{font-family: Arial;}
フォントを指定する際には、webを見るひとのコンピュータにインストールされていないことを配慮して複数、指定するほうが良いです。フォントの適用順番は左から決まっていきます。
フォントの太さ！
文字の太さを変更するときは、font-weightを使います。
{font-weight: 40;}
これも、数値だけでなくbold,bolderのような指定もできます。
文字に下線！
文字に下線をつけて装飾する際には、text-decorationを使用します。
{text-decoration: underline;}
text-decorationは子孫要素に対しても有効なため、子孫要素では、一度装飾されたものはリセットすることが気出ません。
水平方向の位置を決める！
決める際は、text-alignを利用します。
{text-align:center;}
text-alignはインライン要素には適用できるがブロック要素にはできません。
枠線をつける！
枠線にはborderを使用します。
{border: 1px; solid #DAC4FF}
枠線は、三つのルールからできています。
border-width,border-style,border-color
これらを簡潔化させたものが上に書いた例になります。
枠線の角を丸く！
枠線の角を丸くするには、border-radiusを利用します。
{border-radius:5px}
枠線を点線に！
枠線を点線にするには、
`{border: 2px dotted #DAC4FF;}
ページの背景色！
ページの背景色は、
{background: #FFEEBC;}
で変えることができます。
また、バックグラウンドには、詳細な設定がありますが上の例のようにすることで省略しています。
背景に画像を設定！
最初から例で行くと
{background: url(' ');}
こんな感じで簡単にできます。
文字の色！
文字の色変更は、
{color: red;}
で、できます。
今回も長かったですがやっと終わりました。
今の書き方は階層がうまく作れてないので次の投稿の際にはそこにもきおつけてやっていこうと思います。