ドキュメント : CSS
-
【CSS】transition-timing-function - トランジション効果の速度
CSSのtransition-timing-functionプロパティをご紹介します。transition-timing-functiontransition-timing-functionはトランジション効果の速度を示すプロパティです。トランジション効果はプロパティが変化する時のアニメーションです。基本構文transition-timing-function: 値;値一般的な値は次の通りです。値
-
【CSS】transition-delay - トランジション効果の遅延
CSSのtransition-delayプロパティをご紹介します。transition-delaytransition-delayはトランジション効果開始までの遅延を示すプロパティです。トランジション効果はプロパティが変化する時のアニメーションです。基本構文transition-delay: 値;複数値はカンマ(,)で区切ります。transition-delay: 値 値 値;サンプル<st
-
【CSS】transition - トランジション効果の設定
CSSのtransitionプロパティをご紹介します。transitiontransitionはトランジション効果の一括設定プロパティです。トランジション効果はプロパティが変化する時のアニメーションです。適用プロパティや時間、速度、遅延を個別に設定するにはtransition-property、transition-duration、transition-timing-function、trans
-
-
【CSS】overflow-x - 領域から出たコンテンツの振る舞い(左右)
CSSのoverflow-xプロパティをご紹介します。overflow-xoverflow-xは要素の左右から出たコンテンツの振る舞いを示すプロパティです。基本構文overflow-x: 値;値一般的な値は次の通りです。値意味autoユーザーエージェント(ブラウザ)の仕様visible表示hidden非表示scrollスクロールサンプル<style>p { white-space
-
【CSS】overflow-y - 領域から出たコンテンツの振る舞い(上下)
CSSのoverflow-yプロパティをご紹介します。overflow-yoverflow-yは要素の上下から出たコンテンツの振る舞いを示すプロパティです。基本構文overflow-y: 値;値一般的な値は次の通りです。値意味autoユーザーエージェント(ブラウザ)の仕様visible表示hidden非表示scrollスクロールサンプル<style>p { height: 100
-
-
-
【CSS】overflow - 領域から出たコンテンツの振る舞い
CSSのoverflowプロパティをご紹介します。overflowoverflowは要素から出たコンテンツの振る舞いを示すプロパティです。基本構文overflow: 値;値一般的な値は次の通りです。値意味autoユーザーエージェント(ブラウザ)の仕様visible表示hidden非表示scrollスクロールサンプル<style>div { height: 100px; pa
-
【CSS】visibility - 要素の可視・不可視
CSSのvisibilityプロパティをご紹介します。visibilityvisibilityは要素の可視・不可視を示すプロパティです。不可視は要素の領域は適用されます。基本構文visibility: 値;値一般的な値は次の通りです。値意味visible可視化hidden不可視化サンプルvisible<style>div { display: flex; justify-c
-
【CSS】position - 要素の相対位置
CSSのpositionプロパティをご紹介します。positionpositionは要素の相対位置を示すプロパティです。top、bottom、left、rightなどの位置関連プロパティはpositionの値に対する相対位置で計算されます。基本構文position: 値;値一般的な値は次の通りです。値意味static通常配置。位置関連プロパティは効果がありません。relative通常配置。位置関連
-
-
【CSS】top - 要素の位置(上)
CSSのtopプロパティをご紹介します。toptopは要素の上端の位置を示すプロパティです。基本構文top: 値;サンプル<style>.container { position: relative; padding: 15px; background: lightgray;}.box { height: 100px; background: yellow
-
【CSS】bottom - 要素の位置(下)
CSSのbottomプロパティをご紹介します。bottombottomは要素の下端の位置を示すプロパティです。基本構文bottom: 値;サンプル<style>.container { position: relative; padding: 15px; background: lightgray;}.box { height: 100px; backgr