CSS
1 規則セット
- セレクターリスト
- セレクターを , でつなぐ、 body , artile , h2 の部分
セレクターとはhtmlタグで囲まれた（要素という）部分のこと
- 宣言ブロック
-
{
- 宣言
-
プロパティ : 値;
-
}
- 以上を ルール（規則）セットという
- CSSとは?
- カスケーディングスタイルシート（CSSの意味）MDNから cssリファレンスで調べる
2 プロパティ
- プロパティ(property性格特性 情報)
- 数多くあるので 標準参照となる MDN の一覧を参考にするとよい。
CSSリファレンスで調べる値も同じリファレンスで色の例や構文など
参考に決めるとよい 又、VSコードのカラーピッカーで種類・色値・透明度が簡単に選択できるから便利。
marginはよく使われているショートハンド記述google検索
- プロパティ値関数 calc() を使うと計算 例えば引き算・割り算をwidth の値に使うと便利 ｛width:calc(100% / 3);｝など・・
- CSSフォントの説明をまとめ
- font-sizeフォントサイズもrem値など面白い
<!DOCTYPE html> <!--フォントの rem値 使い方-->
<html lang="ja">
<head>
body {
font-size:62.5%; /* font-size 1em = 10px on default browser settings */
}
span {
font-size: 1.6rem;
}
</style>
</head>
<body>
<div>私は62.％です
<span>Outer <span>inner </span> outer </span>
</div> <!--文字列は同じ10pxで表示される-->
</body>
</html>
- display
- displayのキーワード値Gridを使ってページを作ってみた
3 セレクター
- 5分類
- 要素・クラス・IDによるセレクター
- ータイプセレクター（div,p header,-など）
ーclass こちら優先
ーid
ーユニバーサルセレクター ＊ 部分で使うときだけの時articl ＊ でOK
- 属性によるセレクター・<a href=" https://www.yahoo.com の例で説明
- ー存在や値のセレクター a[href]{ } はaタグのhref要素だけ指定している
ー部分文字列一致セレクター a[href="https://www.yahoo.com"]{ } はaタグのhref要素のhttps://www.yahoo.comだけ指定している
ー部分文字列一致セレクター(前方一致) a[href^="https://www"]{ } はaタグのhref要素の前方だけ指定している
ー部分文字列一致セレクター(部分) a[href*="yahoo"]{ } はaタグのhref要素のyahooだけ指定している
ー部分文字列一致セレクター(最後) a[href$=".co.jp"]{ } はaタグのhref要素の.co.jpだけ指定している
- 疑似クラス及び疑要素によるセレクター ・<article><p>タグの例で説明
- ー:first-child, :first-of-type -- article p:first-of-type{ } はarticleタグのp要素で始まるものだけ指定している
last-of-typeもあります -- article p:nth-of-type(2){ }は2列目だけ指定
ー:not -- article p:not（:first-of-type）{ } は:first-of-tye以外のものだけ指定している
ー:hover -- p:hover{ } はカーソルで触れたときだけ指定している p:not(:hover){ }にすると逆で触れると消える
ー::after ::befor -- h1::after{ content: "!!!" }は後ろに ！！！が付く 前もできる
ー::first-line -- p::first-line{}は一列目だけ色を変えるなど p::first-letter{}は最初の文字だけ
- 結合子
- ーdescendant combinator(子孫結合子) main article h1{}は mainの中のarticleの h1だけ指定
ーchild cobinator(子結合子) main > h1{}はh1だけ指定
ー 隣接兄弟結合子 article p + p{ } は<p></p>が数列あるとき隣接の2番目だけマージンや色を付けるなどとき
ー 一般兄弟結合子 article h1 ~ p{ } はh1の後ろだけマージンや色を付けるなどとき
ー
MDN参考に必要に応じてMDNを見て下さい
戻る
4 カスケード・詳細度・継承 について
- カスケード cascading（ 滝のように連鎖的流れるの意 ）
- CSSルール順序 同じh1だと後に書いた色が出る
カスケード順１と３が重要
- 詳細度
- 複数のルールが適用された場合の優先度 ＃優先 . が次 h1 などが次の順
- 詳細度の項を見て下さい インラインスタイルは1000なので一番優先
- 詳細度のスコアリング スコアリング見方
!important h1 { color: orange !important;} が最優先される が多くは使わない
- 承継
- 親要素から子要素へプロパティ値を引き継ぐ
承継の抑制
inherit,initial,unset
親の値引継 デフォルト値 inheritがあればinheritなければinitial
color: red; color: inherit; color: initial; color: unset;
全てのプロパティ値のリセット
<div>ブロック1</div> div{
<div class="fix">ブロック2</div> background-color:orangi;
border: 3px solid black;
}
.fix{
background-color: initial;
border: initial; } /*ブロック２の枠の色と枠が消える！ fix{ all: unset;} で同じに*/
戻る
5
divとspanの違いを理解しよう、同じCSSでも違う表示になる
div(ブロック要素)は上下左右にmarginをあてることができる 要素をよこ並びにできない
span(インライン要素)下のTextはインライン要素で左右にのみMarginがつく 横並びになる
下のTextはインライン要素で左右にのみMarginがつく 横並びになる
Text
Text
Text
=css=
.block{
text-align: center;
padding: 20px;
border: 2px solid crimson;
margin: 20px;
}
.line{
text-align: center;
padding: 20px;
border: 2px solid crimson;
margin: 20px;
}
=html=
<div class="block">下のTextは・・・・ <div>
<span class="line">Text</span>
<span class="line">Text</span>
<pan class="line">Text</span>
- マージン相殺の原理 同じは同じ デカい方が採用する
MDN参考に
display: inline; でそのディブ（div）ブロックをインライン変える、逆にインラインをブロックボックス {display: block;}となります。
｛display: inline-block;}とはインラインぽくブロックでマージン・パッティングなどが効く便利
6
- ーFlex Boxで思い通りのレイアウトをするー Youtubeで参考に
- - flexbox基本 -flex意味は、曲がる・柔軟性
- フレックボックスの基本概念参考サイトMDN Plus
- フレックスボックス (flexbox) をゲームで理解し学ぶサイト
蛙を蓮の葉の上に載せるゲーム、２４問で完成します。
#pond {
display : flex ;
○ ○ ○ ○：○ ○ ○ ○；
○ の部分を埋めてレイアウトを完成する
}
- justify-content: ; の値に使うものは何でしょう
- justify-content: ; の 値 flex-end, center, space-around, space-between , などから始まり
戻る
7
- flexプロパティ
- 一度に1次元のレイアウト（行または列）を処理する、
flex-directionプロパティを使うと主軸を定義する、値を 縦 column; 横 row; にするとわかりやすい
- 準備
containerに対して割合が決めれる
- CSS - - HTML -
.container{ <body body style="margin: 0;">
width: 1000px; <div class="container">
background-color: coral; <div class="item item1">Item 1</div>
display: flex; <div class="item item2">Item 2</div>
} </div>
.item1{ <div class="measure">
background-color: pink; <div>100</div>
flex:1; <div>200</div>
} <div>300</div>
.item2{ <div>400</div>
background-color: skyblue; <div>500</div>
flex: 2; /* item横長比が１対２ */ <div>600</div>
} <div>700</div>
<div>800</div>
<div>900</div>
<div>1000</div>
</div>
- 他の flex プロパティ
- flex-grow
- は全画面の対象余白に対しての割合 flexと違う
- flex-shrink
Oh flex-shrink
- 逆に反対にオーバー分をいかに縮めるか
- flex-basis
- 基礎部分を決める
8
下のHTMLに対してbackground-colorと. outline: 1px solid red;がレイアウト調べに役立つborderと違い幅がカウントされない
レイアウト調べに都合いい、試してみた白色と赤線が outline: 1px solid black;にしました。
<ul>をclassで！
<ul class="">
<li>
<img src="写真UR" alt="">
<h1>タイトル</h1>
<p>内容文章</p>
＊リストタグを続けるULタグのテクニック
9
- プロパティ値 clamp 関数
- 値を上限と下限の間に制限します。 clamp() によって、定義された最大値と最小値の間の値を選択することができます。最小値、推奨値、最大値の3つの引数を取ります。
- MDN参考サイト
clampは かすがい・固定する の意味
CSS の関数で、値を上限と下限の間に制限します。
clamp() によって、定義された最大値と最小値の間の値を選択することができます。
最小値、推奨値、最大値の3つの引数を取ります。
ページの この節フォントサイズはclamp(1rem,2,5vw,1.5rem)で固定。
2.5vw が 1 レム未満の場合、フォント サイズは 1 レムになります。
2.5vw が 1.5rem より大きい場合、フォントサイズは 1.5rem になります。
それ以外の場合は、2.5vw になります。
図はCSSの display: flex; , width: clamp(,,); を使って作成
<style> /* 図 CSSコードです */
.element{
display: flex; /*表示：フレクッス;*/
justify-content: center; /* コンテナ内全体の主軸方向（初期値では横方向）の揃え位置*/
align-items: center; /* コンテナ内全体の交差軸方向（初期値では縦方向）の揃え位置*/
width: clamp(50px, 16%, 1000px); /*幅：クランプ（最小幅, 推奨幅, 最大幅）; */
padding: 1.5rem 1rem; /* */
color: #fff; /*色 */
background: #468eef; /*背景 */
border-radius: 150px; /* */
box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.13); /* rgba( 赤, 緑, 青, 透明度 )*/
margin: 0 auto; /*上下０は不要？左右自動 */
}
.p{
font-size: clamp(1rem, 2.5vw, 1.5rem); /*clampは かすがい〜で始まる、やや大きいサイズ文字列部分*/
}
</style>
10
カスタムプロパティを学ぶ
作成中です資料ファイルfile:///C:/Users/user/Desktop/CSS/CSS
%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3.html
HOME
Top