2024.02.13(40)
背景画像を設置（background-image)
値
url 画像ファイルを指定
none 背景を使わない
urlに続いて丸かっこ（ ）内に画像のパスを記述します。CSSファイルからみた画像ファイルの位置を書く
例
@charset “UTF-8”;
body {
background-color: #f5f2e5;
background-image: url(images/bg.png);
}
url(images/bg.png) 背景画像を指定。
背景を繰り返し表示（background-repeat)
値
| 指定方法 | 説明 |
| repeat | 縦、横 ともに繰り返す。 |
| repeat-x | 横方向に繰り返す。 |
| repeat-y | 縦方向に繰り返す。 |
| no-repeat | 繰り返さない。 |
例
@charset “UTF-8”;
body {
background-image: url(images/bg.png);
background-repeat: repeat-x;
}
repeat-x 横方向に繰り返しの指定
2024.02.14
背景画像の大きさを指定（background-size)
元の画像の比率を維持したまま要素に当てはめたり、指定したサイズに引き延ばしたり出来ます。
数値
px,rem,%の単位を付ける。
キーワード
cover（画像比率を保持したままの為、表示領域を埋め尽くし、画像が途切れる）,contain（画像は全て表示されるが表示領域が広い場合 余白が出来る）
例（cover)
@charset “UTF-8”;
div {
background-image: url(images/bg-airplane.jpg);
background-repeat: no-repeat;（画像は折り返さない）
background-size: cover;（埋めつくす表示指定）
height: 100vh;
}
p {
text-align: center;
padding-top: 30px;
}
例（contain）
@charset “UTF-8”;
div {
background-image: url(images/bg-airplane.jpg);
background-repeat: no-repeat;
background-size: contain;（画像が全て表示される設定）
height: 100vh;
}
p {
text-align: center;
padding-top: 30px;
}
2024.02.17(120)
背景画像の位置を設定（background-position プロバティー)
背景画像を表示する開始位置を指定する、横方向、縦方向の順で記述する。デフォルトでは、左上が表示開始位置。
数値 px,rem,% の単位を付ける
キーワード
左(left) 中央(center) 右(right) 横方向
上(top) 中央(center) 下(bottom) 縦方向
例
@charset “UTF-8”;
body {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: top center; （上の中央に表示させる指定）
}
例
@charset “UTF-8”;
body {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: 30px 80px; （画像を左から３０ｐｘ、上から８０ｐの指定）
}
プロバティーをまとめて指定（backgroundプロバティー)
backgroundを使えば背景に関するすべての値を一括設定出来ます。指定して居ないものは初期値が適用され、プロバティー同士は半角スペースで区切る。
background-sizuの値はbackground-positionの最後に /（スラッシュ）で区切る。
一括指定できるプロバティー（background- A ）
Aの部分が下記です。
clip,color,image,origin,position,repeat,size,attachment
例
@charset “UTF-8”;
div {
background: #70a2dc url(images/bg-airplane.jpg) no-repeat center bottom/cover;
height: 100vh;
}
写真素材（Web）
| 料金 | 1 | 2 | 3 | 4 |
| 無料 | ぱくたそ | GIRLY DROP | Stock Snap.io | Pixabay |
| 有料 | iStock | Adobe Stock | PIXTA |
他 （Compressor.io）
幅と高さの設定
幅はwidth、高さはheightで要素の大きさを指示する、テキストを囲む<a>や<span>などのタグに指定しても変更は出来ません。
数値 px rem % 。 auto （プロバティーの値によって自動設定）
例
@charset “UTF-8”;
div {
background: #0bd;
width: 500px; （幅の指定）
height: 300px; （高さの指定）
}
幅をautoで指定すると
<div>,<p>のブロック要素ではwidthの値をしていない限り（幅は横いっぱいに広がります）widthの初期値のautoが加えられている為。<div>の幅が５００ｐｘなら、<P>に幅指定しない限り自動で５００ｐになります。
幅（width)を%で指定すると
例えば<div>の幅が６００ｐｘ <p>を５０％にした場合は３００ｐｘになります。
相対単位（ブラウザの表示領域を基準として相対的に算出される単位）
| 単位 | 内容 |
| % | フォントサイズに指定した場合は、親要素のフォントサイズが１６ｐｘの場合１６ｐｘ＝１００％となります。 |
| em | フォントサイズに指定した場合は、親要素のフォントサイズが１６ｐｘの場合１６ｐｘ＝１emとなります。 |
| rem | ルート要素（<html>タグ）を基準に計算される単位、（root＋em=rem）、html要素のフォントサイズが１６ｐｘ＝１ｒｅｍとなります。 |
| vw | viewport widthの略、ビューポート（サイトの表示領域）の幅が１２００ｐｘの場合、５０ｖｗは６００ｐｘ、表示の幅で変動するので対応性が良い。 |
| vh | ビューポートの高さを基準とした割合の単位、高さが８００ｐｘの場合、５０ｖｈは８００ｐｘの半分の４００ｐｘとなり表示領域の高さで変動します。 |
絶対単位（表示領域や親要素に影響されない、指定したサイズそのまま表示される単位）
px
最も使われる一般的な絶対単位、他の要素からの影響を受けないで １０px と指定したら必ずそのサイズで表示されます。柔軟性に欠ける為、様々なデバイスには向かない。
配色ツール
ウェブ配色ツール（https://www.color-fortuna.com/color_scheme_genelator3）
Adobe Color CC (https://color.adobe.com/ja)
Paletton（https://www.pinterest.jp/pin/paletton–735986764088935614/）
2024.02.18 (120)
余白の概念
| 呼び | 読み | 内容 |
| margin | ﾏｰｼﾞﾝ | 表示領域の1番上から要素の１番上までの距離（大きな入れ物から小さな入れ物までの距離） |
| padding | ﾊﾟﾃﾞｨﾝｸﾞ | 入れ物の淵から中身までの距離（小さい入れ物からコンテンツまでの距離） |
| border | ﾎﾞｰﾀﾞｰ | marginとpaddingの間の枠線の事を言う |
| width | ｳｨﾄﾞｩｽ | 小さい入れ物の横幅を言う |
| height | ﾊｲﾄ | 小さい入れ物の高さを言う |
要素の外側の余白 (marginプロバティー）
| プロパティー | |
| margin-top | 上 |
| margin-bottom | 下 |
| margin-left | 左 |
| margin-right | 右 |
例
@charset “UTF-8”;
div {
background: #0bd;
margin-top: 30px;
margin-left: 100px;
}
上記を下記の様にしても、同じ構成になる。
例
@charset “UTF-8”;
div {
background: #0bd;
margin: 30px 0 0 100px;
}
要素の内部の余白 （padding）
| プロパティー | |
| padding-top | 上 |
| padding-bottom | 下 |
| padding-left | 左 |
| padding-right | 右 |
例
@charset “UTF-8”;
div {
background: #0bd;
padding: 40px;
}
ボックスの淵とテキストの間に４０ｐの余白が出来る。
余白が近いと関連と見てしまう、関連しない情報は近づけない。（関連しなければ余白を作る）
要素boxの淵と文章の間に文字の１．５倍の余白を作ると良い、（余白をたっぷり使う事で、上品で落ち着いたサイトになる。
線を引く
線の太さ(border-width)
| 指定方法 | 説明 | |
| キーワード | thin( 細い線 ),medium(普通の線 ),thick(太い線 ) | |
| 数値 | px,rem,%,などの単位をつける |
例
@charset “UTF-8”;
p{
border-width: thick; (太い実線）
border-style: solid; （太い実線)
}
div {
border-width: 1px 4px 8px 12px; （上１ｐｘ、右４ｐｘ、下８、左１２ｐｘ）
border-style: solid;
}
線の種類（border-style)
| 指定方法 | 説明 |
| none | 線を非表示 |
| solid | １本実線 |
| double | ２本実線 |
| dashed | 破線 |
| dotted | 点線 |
| groove | 谷型線 |
| ridge | 山型線 |
| inset | 凹み線 |
| outset | 凸み線 |
例
@charset “UTF-8”;
p{
border-width: 1px; （線の太さも必ず指定する）
border-style: solid; （実線の指定）
}
div {
border-width: 4px;
border-style: double dotted solid ridge;
}
線の色（border-color）
主な値
| 指定方法 | 説明 |
| カラーコード | #で始まる３桁、６桁のカラーコードを指定 |
| RGB値 | (rgb)で書き始め、赤、緑、青を（,）カンマで区切る |
| 色の名前 | red,blueなどの名前を指定 |
例
charset “UTF-8”;
p{
border-style: solid;
border-color: tomato;
}
div {
border-style: solid;
border-color: tan #0bd tomato #000;
}
要素のの周りに線を引く （border)
線のborder-width,border-style,border-colorは まとめて書けます（好きな順番でスペースで区切って指定する）borderのみだと全ての淵に適用される。
border-top(上) border-bottom(下) border-left(左) border-right(右)
例
@charset “UTF-8”;
p{
border-bottom: 2px solid #0bd;
}
div {
border: 5px dotted tomato;
}
コンテンツの区切りを付けたい場合は、文字よりも薄い色を使うと良い。
2024.02.25 (120)
リストマーカーの種類（list-style-type プロパティー)
リスト項目の先頭に表示される物を言います。指定しないと黒丸で表示されます。
主な物１５種類
| 指定方法 | 説明 |
| none | リストマーカー非表示 |
| disc | 黒丸 |
| circle | 白丸 |
| square | 黒四角 |
| decimal | 数字 |
| decimal-leading-zero | ０を付けた数字 |
| lower-roman | 小文字のローマ字 |
| upper-roman | 大文字のローマ字 |
| cjk-ideographic | 漢数字 |
| hiragana | ひらがな |
| katakana | カタカナ |
| lower-alpha | 小文字のアルファベット |
| upper-alpha | 大文字のアルファベット |
| hiragana-iroha | ひらがなの いろは |
| katakana-iriha | カタカナの イロハ |
例
@charset “UTF-8”;
ul {
list-style-type: square; （黒四角の指定）
}
ol {
list-style-type: hiragana; （ひらがの指定）
}
リストマーカーの表示位置 (list-styile-position)
outside リストマーカーの外側を囲む
inside リストマーカーを含んで囲む
例
@charset “UTF-8”;
ul {
list-style-position: outside;
}
ol {
list-style-position: inside;
}
リストマーカーに使う画像（星や花など）（list-style-imageプロパティ）
url 画像のURL
none 指定しない
例
@charset “UTF-8”;
ul {
list-style-image: url(images/star.png);
}
リストマーカーの装飾をまとめて指定（list-style)
type,position,imageをまとめて書く事が出来る。
例
ul {
list-style: square url(images/star.png) outside; （画像指定が優先される）
}
リストマーカーをうまく装飾すると良い。
色や形を変える、丸数字を使うなど。
クラス ID
装飾を変えたい個所にクラスIDを指定する。（HTMLでクラスIDをふい分けておき、CSSと紐付けるとその部分だけデザインを変えられる。
クラスの書き方
クラスを使う場合は、HTMLファイルでタグにclass属性を追記し、任意のクラス名を記述します。CSSファイルには、（.）ピリオドとクラス名を書き、適用させたいスタイルを書く、あとHTMLのclass属性部分にはピリオドを付ける必要は有りません。
例
@charset “UTF-8”;
p {
color: #999; （灰色）
}
.blue { （ピリオドをクラス名の前に置く）
color: #0bd; （ブルーの指定）
}
クラスを指定しない場合は灰色でテキストを表示
クラスを指定した部分は青でテキストを表示
IDを使った書き方
HTMLファイルでタグにid属性を追記し、任意のID名を記述します。CSSには＃とID名を書き適用させたいスタイルを書く、なおHTMLのID属性部分には#を付けなくとも良い。
例
@charset “UTF-8”;
p {
color: #999; （灰色の指定）
}
#orange { （#をID名の前に置く）
color: #fa2; （オレンジの指定）
}
ID を指定しない場合は灰色でテキストを表示
IDを指定した部分はオレンジでテキストを表示
タグ名とクラスやIDをセットで指定する
（.）クラス名や（＃ID）名と指定すると使用しているタグは関係なく、それらのクラスやIDが指定されてる全てに反映されてしまう。しかしCSSで（タグ名、クラス名）、（タグ名＃ID名）の様にタグの名前に続けてクラス名やID名を書くと特定のタグにしか反映されなくなる。
<h1>タグと<p>タグどちらにも（blue）と言うクラスを付け文字を変化させます。次にHTMLタグはそのままで、CSSの（.blue)としていた所を（p.blue）
例
@charset “UTF-8”;
.blue {
color: #0bd;
}
charset “UTF-8”;
p.blue { （<p>タグのクラス名のみ指定）
color: #0bd;
}
クラス名とID名の決まり
自分で名前は決められますがルールを守って名前を付けないとCSSに反映されません。
- 空白（スペース）を入れない
- 英数字、-、_、以外は使わない
- 1文字目は必ず英字
2024.03.02 (60)
1つのタグに複数のIDやクラスを付ける
ダブルクォーテーション（”）内に半角スペースで区切て書きます。
下記は<p>タグに blue text-center small という３つのクラスを記述する
例
<p class=”blue text-center small”>半角スペースで区切る</p>
下記は IDとクラスを同じタグに書く事も出来ます。<div>タグにmain というID 、とcenterというクラスを記述しています。
例
<div id=”main class=”center”>IDとクラスを同時に記述</div>
クラスとIDの違い
１つは、同じHTMLファイル内で使用できる回数です。
IDはページ内で同じIDを使う事は出来ません。（例 レイアウトの枠組み、どのページでも変わる事のない部分に使う。）
クラスはページ内で何度でも使えます。（例 何度でも使う装飾はクラスを使う）
例
一度<h1 id=”heading”>と書いたら、このheadingというIDは同じHTMLファイル内では使えません。
クラスだったら<h1 class=”heading”>と書けばheadingというクラスは何度でも使えるので<h2 class=heading”>や<p class=”heading”>のように他のタグにも使う事が出来る。
CSSの優先順位
同じタグにクラスとIDで違う色を指定した場合、その場合IDが優先されます。
<p id=”blue” class=”orenge”>クラスとIDの優先順位</p>
例
@charset “UTF-8”;
#blue {
color: #0bd; （ID指定）
}
.orange {
color: #fa2; （クラス指定）
}
IDを使ってページ内リンクを作成できる。
リンクを作成する<a>タグを使って#contentsへのリンクを貼ると、ページ内のcontentsというID属性の部分にジャンプ出来ます。
2024.03.03 (60)
レイアウト
コンテンツを使いやすい様に どこに どう配列するか設計する事
Flexbox（フレックスボックス）で横並びにする。複雑なレイアウトも簡単に組める、CSSでレイアウトを組む上でのベースとなります。
Flexboxの基本
Flexコンテナーと呼ばれる親要素の中にFlexアイテムと呼ばれる子要素を入れてHTMLを作成します。
例
HTML
<div class=”container”>
<div class=”item”>Item 1</div>
<div class=”item”>Item 2</div>
<div class=”item”>Item 3</div>
<div class=”item”>Item 4</div>
</div>
CSS
@charset “UTF-8”;
.item {
background: #0bd;
color: #fff;
margin: 10px;
padding: 10px;
}
上記では（.itemが横に並んでいます。）これを横に並べるにはHTMLは そのままでCSSの親要素（.container)に対して（display:flex）を追加する。
例
@charset “UTF-8”;
.container {
display: flex; （.containerクラスに対してdisplay:flexを追加）
}
.item {
background: #0bd;
color: #fff;
margin: 10px;
padding: 10px;
}
上記だと縦並びから横並びに変わる（.itemが横並びになる。)
親要素に（display:flex;)を記述して追加のプロパティを記述すれば要素の並び方をカスタマイズ出来る。
子要素の並ぶ向き（flex-directionプロパティ）
子要素をどの方向に配置していくかをflex-directonプロパティで指定します。
| 値 | 説明 |
| row（初期値） | |
| row-reverse | |
| column | |
| column-reverse |
コメント