Webフォント

webフォントの特徴

CSS実装の例

HTML要素が占める幅を計算

計算に使うプロパティ:

1. width

2. padding

3. margin

4. border

5. box-sizing

幅の計算:
1) width + 左右のpadding + 左右のborder + 左右のmargin
基本的にこれ

2) width + 左右のmargin
box-sizing: border-box　の場合 コンテンツのwidthとheightは、
「padding」と「border」の数を含む widthと左右のmarginを足せばいい

例1)
.box {
width: 250px;
padding: 2px;
border: solid black 1px;
margin: 5px;
box-sizing: border-box;
}

上記はwidth: 250pxになっているが、
左右のpaddingと左右のborderを含む

よって、250px = (2+2) - (1+1)
= 244px
実際のwidth: 244px となる


244px + 左右のpadding + 左右のborder + 左右のmargin
244 + (2+2) + (1+1) + (5+5)
= 244 + 4 + 2 + 10
= 260px

例2)
.box {
width: 250px;
padding: 2px;
border: solid black 1px;
margin: 5px;
}

幅の計算
250px + 左右のpadding + 左右のmargin + 左右のborder
= 250 + (2+2) + (5+5) + (1+1)
= 250 + 4 + 10 + 2
= 266px

CSSの要素 pxの設定

1. 上下左右　
   margin: 10px;

2. 上下　左右
   margin: 10px 20px;

3. 上　左右　下
   margin: 10px 20px 30px;

4. 上　右　下　左(時計回り)
   margin: 10px 20px 30px 40px;

例)
padding-top: 10px;
padding-bottom: 10px;
padding-right: 20px;
padding-left: 20px;

↓
padding: 10px 20px 10px 20px;
padding: 10px 20px;
padding: 10px 20px 10px;

1. autoを設定すると、マージンを自動的に設定する
   例) divを中央寄せにするmarginの値(要素の左右のマージンを0にする)
   margin: 0 auto;

section要素を横並び

以下を使う
float: left;
clear: both;

floatプロパティ:
HTMLの要素を左右に回り込ませる
これを設定するとそれ以降の要素は回り込み続ける

clear: both
左右どちらの回り込みも解除する

section {
  float: left;
  width: 50%; /* 画面の幅の50%で2つのセクションを横並びに配置 */
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


<div class="wrap clearfix">
    <section>A</section>
    <section>B</section>
</div>

column-spanプロパティ
列全体にスタイルを適用するか、1列のみスタイルを適用する

column-spanプロパティ
列全体にスタイルを適用するか、1列のみスタイルを適用する

1. 列をまたぐ要素を設定
   column-span: all;

2. 列をまたがない要素を設定
   column-span: none;

例)

/* 2列のマルチカラムレイアウトを定義 */
.container {
  column-count: 2;
}

/* 全ての列にまたがる */
.span-all {
  column-span: all;
  background-color: lightblue;
}

/* 1つの列に留まる */
.span-none {
  column-span: none;
  background-color: lightgreen;
}




<div class="container">
  <p class="span-all">This paragraph spans all columns.</p>
  <p class="span-none">This paragraph stays within one column.</p>
  <p>Another paragraph in the first column.</p>
  <p>Another paragraph in the second column.</p>
</div>

カスケードの例)

最終的にp要素に適用されるスタイル

p要素に適用されるスタイル

1. color: red;

2. font-size: 1.2em;

メモ: paddingやmarginなどボックスモデルのプロパティは子要素に引き継がれない

<div style="color: red; fint-size: 1.2em; padding: 10px; border: solid 1px black;">
    <p>aaaaaaaaaaaaaaa</p>
</div>

例) p要素の色は .latest つまり 青になる

p要素に直接スタイルを適用しているのは、クラスセレクタ(.latest)とタイプセレクタになる

クラスセレクタとタイプセレクタは、クラスセレクタの方が優先順位が高い
　よって青になる

.latest {
    color: blue;
}
 #new  {
    color: yellow;
}

p {
    color: red;
}


<div id="news" style="color: green;">
    <p class="latest">HTML5</p>
</div>

最も優先順位が高いCSSプロパティ

クラスセレクタとかが何個あるかとかそういう基準で決まる

例1)
この中では、li:hover h2 .title　が優先順位が高い

.new > a.hover
li:hover h2 .title
.sp > a
.sp .capture h1
.basic li > span

この中ではクラスセレクタと疑似クラスが一番優先順位が高いセレクタになっている

例2)
この中ではIDセレクタが一番優先順位が高い
#cat .tail img
はその中でも IDセレクタ、クラスセレクタ、タイプセレクタがある
なので一番優先順位が高い

li:hover h1 .title
.sp .capture h1
.main h2 > span
#cat .tail img
#doc div > img

@規則

@import
    CSSファイルに別のCSSファイルを読み込む

@font-face
    カスタムフォントをダウンロードし適用する

@keyframes
    アニメーションを作成

@counter-style
    CSSカウンタを設定

li クラスspecialnewsの色を変える

<h2>NEWS</h2>
<ul>
    <li class="specialnews">aaaaaaaaaa</li>
    <li>bbbbbbbbbbb</li>
</ul>

1. .クラス名で指定

.specialnews {
    color: red;
}

1. li要素を指定

li {
   color: red; 
}

1. ul要素を指定 子クラスのliも影響する

ul {
    color: red;
}

1. ユニバーサルセレクタ

* {
    color: red;
}

セレクタ 拡張子の例

1)
A, B

2) 
A > B

3)
A + B

4)
A ~ B

displayの主な値

1. 要素をブロックレベルにする
   display: block;

2. 要素をインラインレベルにする
   display: inline;

3. 要素を可変ボックスにする
   display: flex;

/* ブロックレベル要素 */
.block {
  display: block;
  width: 200px;
  height: 100px;
  background-color: lightblue;
  margin-bottom: 10px;
}

/* インラインレベル要素 */
.inline {
  display: inline;
  padding: 5px;
  background-color: lightgreen;
}

/* 可変ボックス */
.flex-container {
  display: flex;
  justify-content: space-between;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}



<!-- ブロックレベル要素 -->
<div class="block">Block Element 1</div>
<div class="block">Block Element 2</div>

<!-- インラインレベル要素 -->
<span class="inline">Inline Element 1</span>
<span class="inline">Inline Element 2</span>

<!-- 可変ボックス -->
<div class="flex-container">
  <div class="flex-item">Flex Item 1</div>
  <div class="flex-item">Flex Item 2</div>
  <div class="flex-item">Flex Item 3</div>
</div>

div要素を中央寄せ

要素の左右のマージンをautoに設定

autoは自動的に領域を確保する
左右ともautoなら左右均等にマージンがかかる
よって中央寄せになる

margin: 0 auto;

または、
margin-left: auto;
margin-right: auto;

.container {
  width: 80%; /* コンテンツ幅を指定 */
  margin: 0 auto; /* 左右の余白を自動的に均等に設定して中央揃え */
  background-color: #f2f2f2 ;
  padding: 20px;
}

<div class="container">
  <h1>This is a centered page</h1>
  <p>This content is centered horizontally using margin: 0 auto;</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget tellus ac sapien vehicula tempor. Integer at mi urna. Duis eleifend odio ac libero fringilla condimentum. Quisque ullamcorper libero sit amet risus laoreet condimentum.</p>
</div>

div要素に収まりきらない部分のテキストを非表示にする overflow

1. 表示
   overflow: visible;

2. 非表示
   overflow: hidden;

3. スクロールバーの表示
   overflow: scroll;

/* 要素をブロックレベルにする */
.container {
  width: 300px;
  height: 200px;
  border: 1px solid black;
}

.visible {
  overflow: visible; /* 内容がはみ出しても表示 */
}

.hidden {
  overflow: hidden; /* 内容がはみ出した場合は非表示 */
}

.scroll {
  overflow: scroll; /* 内容がはみ出した場合はスクロールバー表示 */
}


<!-- 表示: 内容がはみ出しても表示 -->
<div class="container visible">
  <p>This is a visible overflow example. Content will overflow the container but will still be visible.</p>
</div>

<!-- 非表示: 内容がはみ出した場合は非表示 -->
<div class="container hidden">
  <p>This is a hidden overflow example. Content will overflow the container but will be hidden.</p>
</div>

<!-- スクロールバーの表示: 内容がはみ出した場合はスクロールバーが表示される -->
<div class="container scroll">
  <p>This is a scroll overflow example. Content will overflow the container and a scrollbar will appear.</p>
</div>

clip 特定の部分のみ可視化する

clip: rect(上、右、下、左)


img {
    position: absolute;
    clip rect(10px, 250px, 250px, 0px);
}

.container {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2 ;
  overflow: hidden; /* オーバーフローを非表示にする */
}

.clip {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #ff0000 ;
  clip: rect(0px, 50px, 50px, 0px); /* 左上隅を基準にして範囲を指定 */
}

<div class="container">
  <div class="clip"></div>
</div>

background 背景関連

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Property Example</title>
<style>
.container {
  width: 400px;
  height: 300px;
  background: url('background-image.jpg') center center / cover no-repeat border-box content-box fixed #f2f2f2 ;
}
</style>
</head>
<body>

<div class="container">
  <h1>Background Property Example</h1>
  <p>This page demonstrates the use of the background property to set multiple background-related properties at once.</p>
</div>

</body>
</html>

borderプロパティ

例)
widthとheightが100pxのdiv要素を円形に表示する

border-radius: 50%;
円形になる

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border Property Example</title>
<style>
.box {
  width: 200px;
  height: 200px;
  border-width: 5px; /* 枠線の幅を指定 */
  border-style: solid; /* 枠線のスタイルを指定 */
  border-color: #ff0000 ; /* 枠線の色を指定 */
  border-radius: 20px; /* 枠線の角を丸める */
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

HTMLの要素を非表示にするCSSプロパティの設定例

z-index 要素の重なり順

以下のように要素の重なり順を決める

要素1 {
   z-index: 1;
}

要素2 {   
   z-index: 2;
}

text-decoraitonプロパティ

プロパティ:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Decoration Example</title>
<style>
.underline {
  text-decoration-line: underline; /* 下線 */
  text-decoration-style: solid; /* 実線 */
  text-decoration-color: blue; /* 下線の色 */
}

.overline {
  text-decoration-line: overline; /* 上線 */
  text-decoration-style: double; /* 二重線 */
  text-decoration-color: green; /* 上線の色 */
}

.line-through {
  text-decoration-line: line-through; /* 打消し線 */
  text-decoration-style: dotted; /* 点線 */
  text-decoration-color: red; /* 打消し線の色 */
}
</style>
</head>
<body>

<p class="underline">Underline text</p>
<p class="overline">Overline text</p>
<p class="line-through">Line-through text</p>

</body>
</html>

directionプロパティ
unicode-bidiプロパティ テキストの方向を指定

.directionP {
    direction: rtl;
    unicode-bidi: bidi-override;
}

<p class="directionP">テキスト</p>

テキスト関連のプロパティ

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Styling Example</title>
<style>
.custom-text {
  text-transform: uppercase; /* テキストをすべて大文字に変換 */
  white-space: nowrap; /* テキストが折り返されないように指定 */
  word-break: break-all; /* 単語の途中でも改行を許可 */
  hyphens: auto; /* ハイフンを自動的に挿入 */
  text-align: justify; /* テキストを両端揃えにする */
  word-spacing: 5px; /* 単語間のスペースを5pxに設定 */
  letter-spacing: 2px; /* 文字間のスペースを2pxに設定 */
  text-indent: 20px; /* 先頭行のインデントを20pxに設定 */
}
</style>
</head>
<body>

<p class="custom-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vehicula nisi auctor, bibendum tortor et, fermentum neque. Fusce ut ex quis leo efficitur ultricies. Integer sed eleifend libero. Vestibulum scelerisque, nunc ut elementum ultrices, lorem quam fermentum risus, in tincidunt libero ante ac arcu.</p>

</body>
</html>

font

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Property Example</title>
<style>
.custom-font {
  font-style: italic; /* 斜体 */
  font-variant: small-caps; /* スモールキャップ */
  font-weight: bold; /* 太字 */
  font-size: 24px; /* フォントサイズ */
  font-family: Arial, sans-serif; /* フォントファミリー */
}
</style>
</head>
<body>

<p class="custom-font">This is a customized text with different font properties.</p>

</body>
</html>

font-family

特徴:

font-sizeプロパティ

columnプロパティ　マルチカラムレイアウト

マルチカラムレイアウトは、多段レイアウトを実現するプロパティ

columns: 2;
　　要素が2列に分かれたレイアウトにできる

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Layout Example</title>
<style>
.container {
  columns: 3; /* 列の数を指定 */
  column-gap: 20px; /* 列同士の間隔を指定 */
  column-rule: 1px solid #ccc ; /* 列間の線のスタイル、幅、色を指定 */
}

/* 列間の線のスタイルを指定 */
.column-rule-custom {
  column-rule-style: dotted;
  column-rule-width: 2px;
  column-rule-color: blue;
}

/* 全ての列にまたがる要素 */
.column-span-all {
  column-span: all;
}
</style>
</head>
<body>

<div class="container">
  <p>Column 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Column 2: Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  <p>Column 3: Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
  <p class="column-span-all">Column Span All: Fusce pharetra convallis urna.</p>
</div>

<div class="container column-rule-custom">
  <p>Custom Column Rule Style</p>
</div>

</body>
</html>

可変ボックスにおいてflexアイテムの配置を設定する

可変ボックスとは、様々なディスプレイサイズに適応するためのレイアウトモードの1つ

可変ボックスの特徴:

flexコンテナはflexアイテムの入れ物
flexコンテナの作り方:
以下のいずれか

1) display: flex;
2) display: inline-flex; 

プロパティ

1) justify-contentプロパティ
    フレックスアイテムの配置を制御する
2) flex-direction 
    主軸の方向を設定する
3) flex-basis
    flexアイテムのサイズを設定する

transformプロパティ

translateプロパティは、要素を移動、回転、拡大、縮小、傾斜させる
設定値:

1. translate　要素を移動

2. rotate　　　要素を回転させる

3. scale　　　要素を拡大、縮小する

4. skew　　　　要素を傾斜する

transitionプロパティ

CSSプロパティの変化速度を制御することでアニメーションのような効果を出せる。

トランジションを適用するのに使うプロパティ:

1. transition

2. transition-property

animationプロパティ

例)

from {
    margin-left: 0%;
}

to {
    margin-left: 100%;
}


animation-name: fadeout;
animation-duration: 3s;　　　　　3秒かけてアニメーションが実行される
animation-fill-mode: forwards;  img要素は右側に異動し、透過する
animation-iteration-count: 2;　　アニメーションが2回繰り返される
animation-delay: 1s;　　　　　　　1秒経過してからアニメーションが開始する

list-styleプロパティでまとめて指定できるプロパティ

1. list-style-type

2. list-style-image

3. list-style-position

4. list-style

テーブル関連のプロパティ

プロパティ名:

1. caption-side
   キャプションを「表の上または下」に表示する

2. border-collapse
   隣接するセルの枠線をつなげるか、切り離すかを設定する

3. border-spacing
   隣接するセルのボーダー同士の間隔を設定

4. empty-cells
   空のセルの背景とボーダーを表示させるかを設定