目次- サイズ設定
- フォントプロパティ
- テキストプロパティ
- 背景プロパティ
- 枠線
- displayプロパティ
- ボックスモデル---各タグ(要素)にはボックスモデルがある
- フロート
- フロートがもたらす悪影響
- オーバーフロー属性
- 円形アバターの例
- 配置
- z-indexによるz軸制御
- 透明度
サイズ設定
- タグにサイズを設定する場合、ブロックレベルのタグのみ設定可能です。
- インラインタグに設定しても効果はなく、内部のテキストサイズのみに依存します。
<style>
.container {
width: 200px;
height: 400px;
}
.inline-element {
width: 400px;
height: 200px;
}
</style>
<div class="container">divタグのサイズ</div>
<span class="inline-element">spanタグのサイズ</span>
フォントプロパティ
- フォントの種類
- フォントサイズ
- フォントの太さ
- フォントの色と透明度
<style>
.text-content {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
font-size: 24px;
font-weight: bold; /*lighter: 細くする, bold: 太くする*/
color: rgba(128, 128, 128, 0.3); /*値の範囲は0~255, 0.3は透明度を表し、値が小さいほど透明度が高くなる*/
/*color: red;*/
}
</style>
<p class="text-content">フォントプロパティを設定しました!</p>
テキストプロパティ
- テキストの配置方法
- テキストの装飾: 上線, 下線, 取り消し線, none
- 1行目のインデント
<style>
.paragraph {
text-align: center; /*center: 中央寄せ, left: 左寄せ, right: 右寄せ*/
text-decoration: line-through; /*over/underline: 上/下線, line-through: 取り消し線*/
text-decoration: none; /*aタグのデフォルトの下線を削除するために使用*/
text-indent: 48px;
}
.link {
text-decoration: none;
}
</style>
<a href="https://www.example.com" class="link">クリックしてください</a>
<p class="paragraph">テキストプロパティを設定しました!</p>
背景プロパティ
- 背景の色
-
- 背景画像はデフォルトで領域全体に広がります
- 通常、ページ上の小さなアイコンは個別ではなく、
- 1枚の大きな画像にウェブサイトが必要とするすべての小さなアイコンが含まれています
- positionパラメータでdivの背景画像の位置を制御して、異なるアイコンスタイルを表示します
- 現在の技術はより高度で、画像をコードに変換し、コードに基づいて動的に画像を解析します
<style>
.bg-container {
width: 400px;
height: 400px;
background-color: green;
background-image: url("background.png");
background-repeat: no-repeat; /*no-repeat: 繰り返さない, repeat-x: 水平方向に繰り返す*/
background-position: center center; /*最初のパラメータがx軸、2番目がy軸に適用される*/
/*background: url("background.png") yellow no-repeat center center;*/
}
</style>
<div class="bg-container">背景プロパティを設定しました!</div>
- 背景画像の例
<style>
.fixed-bg {
height: 600px;
background: url("background.png");
background-attachment: fixed; /*背景画像はページのスクロールに伴って移動しません*/
}
</style>
<div style="height: 400px; background-color: red"></div>
<div style="height: 400px; background-color: green"></div>
<div class="fixed-bg"></div>
<div style="height: 400px; background-color: blue"></div>
枠線
- borderの後に3つのパラメータを記述: 太さ、色、スタイル
- 特定の辺の枠線スタイルを個別に設定することもできます
- 統一された設定に簡略化することも可能です
.border-example {
border-top: 3px solid red;
border-left: 2px dotted green;
border-bottom: 4px dashed blue;
/*border: 1px solid aqua;*/
}
<p class="border-example">枠線を設定しました!</p>
- 円を描画するには、border-radiusを高さまたは幅の半分に設定します
<style>
.circle {
border: 1px solid black;
background-color: red;
height: 400px;
width: 400px;
/*border-radius: 200px;*/
/*border-radius: 50%;*/
border-radius: 50px; /*角の丸みを設定*/
}
</style>
<div class="circle"></div>
displayプロパティ
-
inline:
-
ブロックレベルのタグをインラインタグに変換します
-
インラインタグになるとwidthとheightの影響を受けなくなり、テキストコンテンツのサイズのみに依存します
.inline-transform {
width: 50px;
height: 50px;
background-color: red;
border: 1px solid green;
display: inline; /*ブロックレベルのタグをインラインタグに変換*/
}
<div class="inline-transform">displayプロパティのinline値!</div>
-
block
-
インラインタグをブロックレベルのタグに変換します
-
ブロックレベルのタグになると1行を占有し、widthとheightでサイズを設定できます
<style>
.block-transform {
border: 5px solid red;
display: block;
width: 400px;
height: 400px;
}
</style>
<span class="block-transform">displayプロパティのblock値!</span>
-
inline-block
-
タグはサイズを設定でき、1行にすべて表示され、ブロックレベルとインラインの両方の特性を持ちます
<style>
.inline-block-example {
border: 5px solid red;
display: inline-block;
width: 200px;
height: 100px;
}
.inline-block-example2 {
border: 5px solid green;
display: inline-block;
width: 100px;
height: 200px;
}
</style>
<span class="inline-block-example">displayプロパティのinline-block値!</span>
<span class="inline-block-example2">displayプロパティのinline-block値!</span>
-
displayプロパティのnone値とvisibilityプロパティのhidden値
-
display: noneはタグを非表示にし、タグが占有していた位置もなくなります
-
visibility: hiddenはタグを非表示にしますが、タグの元の位置は残ります
<div style="display: none">displayプロパティのnone値!</div>
<div style="visibility: hidden">visibilityプロパティのhidden値!</div>
<div>divタグ!</div>
ボックスモデル---各タグ(要素)にはボックスモデルがある
- 配達箱を例に考えてみましょう:
- 2つの配達箱間の距離、外側の余白、margin
- 配達箱の厚さ、枠線、border
- 配達箱内の物品が内側の枠線から離れている距離、内側の余白/内側の詰め物、padding
- 物品のサイズ、テキストコンテンツのサイズ、content
<style>
body {
margin: 0; /*1つのパラメータのみを指定すると、上下左右すべて0になります*/
} /*bodyとブラウザ間のページ余白を削除*/
.box-model {
border: 1px solid red;
margin-bottom: 10px;
padding-top: 20px;
}
.box-model-2 {
border: 1px solid green;
padding: 30px;
}
.small-box {
width: 50px;
height: 50px;
border: 1px solid aqua;
margin: 0 auto; /*左右中央揃えのみ可能、上下中央揃えは不可*/
}
</style>
<div class="box-model">ボックスモデル!
<div class="small-box">div内のdiv!</div>
</div>
<div class="box-model-2">ボックスモデル!</div>
フロート
- CSSではどの要素もフロートできます、float
- フロートした要素は通常のドキュメントフローから離れ、以前占めていた位置を解放します
- しかし、ブラウザはテキストコンテンツを優先して表示します
<style>
.float-left {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.float-right {
width: 100px;
height: 100px;
background-color: green;
float: right;
}
</style>
<div class="float-left">フロート!</div>
<div class="float-right">フロート!</div>
<div class="normal-box" style="background-color: pink; width: 100px; height: 100px">フロート!</div>
フロートがもたらす悪影響
- 親タグの崩壊を引き起こし、ポケットがへこんだような状態になります
<style>
.float-left {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.float-right {
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.parent-container {
border: 10px dotted aqua;
}
</style>
<div class="parent-container">親divタグ!
<div class="float-left">フロート!</div>
<div class="float-right">フロート!</div>
</div>
- フロートによる親タグの崩壊問題の解決法: どの親タグが崩壊したか、clear_fixというクラス属性値を追加します
<style>
.float-left {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.float-right {
width: 100px;
height: 100px;
background-color: green;
float: right;
}
.parent-container {
border: 10px dotted aqua;
}
/*共通スタイル*/
.clear_fix:after {
content: '';
clear: both; /*左右の両方にフロート要素がないようにする*/
display: block;
}
</style>
<div class="parent-container clear_fix">親divタグ!
<div class="float-left">フロート!</div>
<div class="float-right">フロート!</div>
</div>
オーバーフロー属性
<style>
.overflow-container {
height: 50px;
width: 50px;
border: 3px dashed green;
overflow: hidden; /*はみ出たコンテンツを直接非表示にする*/
/*overflow: scroll;*/
/*overflow: auto;*/
}
</style>
<div class="overflow-container">オーバーフロー属性!オーバーフロー属性!</div>
円形アバターの例
<style>
.avatar-container {
height: 200px;
width: 200px;
border: 5px dashed green;
border-radius: 50%;
overflow: hidden;
}
.avatar-image {
width: 100%;
}
</style>
<div class="avatar-container">
<img src="avatar.jpg" alt="女性の画像">
</div>
配置
すべてのタグはデフォルトで静的であり、位置を変更できません。position: static。配置するには、まず静的状態を配置状態に変更する必要があります
- 相対配置(理解): relative、タグの元の位置からの相対的な移動
<style>
.relative-position {
width: 100px;
height: 100px;
background-color: gold;
position: relative;
left: 100px;
top: 100px;
}
</style>
<div class="relative-position"></div>
- 絶対配置(小米のショッピングカート)、absolute、すでに配置された親タグ(staticでないもの)を基準に配置します
<style>
.absolute-position {
width: 50px;
height: 50px;
background-color: gold;
position: absolute;
top: 100px;
left: 100px;
}
.relative-parent {
width: 100px;
height: 100px;
background-color: blue;
position: relative; /*d1を非配置のタグから配置済みのタグに変換*/
}
</style>
<div class="relative-parent">絶対配置の親タグ!
<div class="absolute-position"></div>
</div>
- 固定配置(トップに戻る)、fixed、ブラウザウィンドウに対して固定され、特定の位置に動きません
<style>
.fixed-element {
width: 80px;
height: 20px;
position: fixed;
bottom: 30px;
right: 50px;
border: aqua 5px solid;
}
</style>
<div style = "height: 500px; background-color: red"></div>
<div style = "height: 500px; background-color: green"></div>
<div style = "height: 500px; background-color: blue"></div>
<div class = "fixed-element">固定配置!</div>
- 位置の変更がドキュメントフローから離れるかどうか
- ドキュメントフローから離れない: 相対配置
- ドキュメントフローから離れる: フロート要素、絶対配置、固定配置
z-indexによるz軸制御
<style>
.z-index-top {
width: 200px;
height: 200px;
background-color: green;
position: fixed;
top: 50%;
left: 50%;
margin: -100px -100px;
}
.z-index-bottom {
width: 100%;
height: 1000px;
background-color: aqua;
}
</style>
<div class="z-index-top">z-indexの上層ページ</div>
<div class="z-index-bottom">z-indexの下層ページ</div>
透明度
<style>
.bg-transparent {
background-color: rgba(220, 80, 70, 0.3); /*背景色の透明度を調整*/
}
.full-transparent {
background-color: aqua;
opacity: 0.3; /*タグ全体の透明度を調整*/
}
</style>
<div class="bg-transparent">背景色の透明度</div>
<div class="full-transparent">タグ全体の透明度</div>