ITコース CSS基礎 026_表示、可視性、エフェクト
表示
CSSにおいて、displayプロパティは要素がページ上でどのように表示されるかを決定します。
display: none;
要素を非表示にし、ページ上で見えなくなり、スペースを占有せず、レイアウトに影響しません。要素はページに表示されません。例：
.example{ display: none; } <div class="example">テストテキスト</div>ABC123効果： 
display: block;
要素をブロックレベル要素として表示します。ページ上でブロックとして表示され、幅はデフォルトで親コンテナの100%になります。ブロック要素は全幅を占有し、前後に改行があります。例：
.base{ background-color: deepskyblue; } .example{ display: block; } <a class="base example" href="">ハイパーリンクテスト</a> <br> <a class="base" href="">ハイパーリンクテスト</a>効果： 
display: inline;
要素をインライン要素として表示します。要素は同じ行に表示され、行を独占せず、幅はコンテンツによって決まります。インライン要素は必要な幅のみを必要とし、強制的に改行しません。例：
.base{ background-color: aquamarine; } .example{ display: inline; } <p class="base example">段落テスト</p> <p class="base">段落テスト</p>効果：
display: inline-block;
要素をインラインブロック要素として表示します。要素は同じ行に表示されますが、幅、高さなどのブロックレベル要素のプロパティを設定できます。例：
.example1{ display: inline-block; width: 100px; height: 100px; background-color: cornflowerblue; } .example2{ background-color: cornflowerblue; } <p class="example1">段落テスト</p> <p class="example1">段落テスト</p> <p class="example2">段落テスト</p>効果：
可視性
CSSにおいて、可視性はvisibilityプロパティで制御できます。このプロパティには2つの主な値があります：visibleとhidden。
visibility: visible;
要素を可視に設定します。例：
.example{ visibility: visible; } <div class="example">テストテキスト</div>ABC123効果：
visibility: hidden;
要素を不可視に設定しますが、非表示の要素は非表示になる前と同じスペースを占有する必要があります。つまり、要素は非表示になっていますが、レイアウトに影響を与えます。例：
.example{ visibility: hidden; } <div class="example">テストテキスト</div>ABC123効果：
エフェクト
CSSエフェクトとは、CSSプロパティを通じて要素の外観や動作を変更するエフェクトを指します。CSSは色、背景、境界線、フォント、影、グラデーション、トランジション、アニメーションなど、さまざまなエフェクトをサポートしています。
透明度
CSSにおいて、透明度は要素の背後にある背景がどの程度覆われるかを指します。透明度はopacityプロパティで設定できます。opacityプロパティの値は0.0から1.0の範囲で、0.0は完全に透明、1.0は完全に不透明を意味します。
例：
.base{ width: 200px; height: 200px; background-color: #3498db;}.example{ opacity: 0.5; /* 50%の透明度 */} <div class="base"></div> <br> <div class="base example"></div>効果： 
テキストシャドウ
CSSにおいて、text-shadowプロパティはテキストに影を追加するために使用されます。影はぼかしたり、くっきりしたりでき、任意の色にできます。
例：
.example{ text-shadow: 5px 5px 10px rgba(243, 40, 40, 0.8); /* 2px水平オフセット、5px垂直オフセット、5pxぼかし半径、色rgba(243, 40, 40, 0.8) */ font-size: 100px; } <div class="example">テストテキスト</div>効果：
グラデーション
CSSにおいて、グラデーション（gradient）はスムーズな色の遷移を作成するためのエフェクトです。グラデーションは要素の背景、境界線、テキストなどに適用できます。
- 線形グラデーション（linear gradient）：ある位置から別の位置へ遷移します。
例：
.example{ background: linear-gradient(to bottom, red, blue); /* 上から下へのグラデーション、赤から青 */ height: 100px; } <div class="example"></div>効果： 
- 放射状グラデーション（radial gradient）：ある点から四方へ遷移します。
例：
.example{ background: radial-gradient(circle, red, blue); /* 円形グラデーション、赤から青 */ height: 100px; } <div class="example"></div>効果：
変形
CSSにおいて、変形とは要素の形状、位置、またはサイズを変更するエフェクトを指します。
- 移動（Translate）：平面上で要素の位置を移動します。
- 拡大縮小（Scale）：要素のサイズを変更します。
- 回転（Rotate）：要素の中心点を中心に回転します。
- 傾斜（Skew）：水平軸または垂直軸に沿って要素を傾斜させます。
- 組み合わせ変換：複数の変換を組み合わせます。
例：
.base { height: 100px; width: 100px; background-color: lightblue;}.example1 { transform: translate(50px, 20px); /* 水平方向に50px、垂直方向に20px移動 */}.example2 { transform: scale(0.5); /* 要素を1.5倍に拡大 */}.example3 { transform: rotate(45deg); /* 時計回りに45度回転 */}.example4 { transform: skew(50deg, 20deg); /* 水平方向に30度、垂直方向に20度傾斜 */}.example5 { transform: translate(50px, 60px) rotate(45deg) scale(1.5);} <div class="base example1"></div> <div class="base example2"></div> <div class="base example3"></div> <div class="base example4"></div> <div class="base example5"></div>効果：
