2022.08.11transition:0.3s;hover前のセレクタに、transitionというCSSを入れ込めば、簡単にアニメーションにできます。プロパティー値はアニメーションの秒数を入れ込みます。「0.3s」と入れ込めば、0.3秒でアニメーションします。#00f;}ボタンの色が赤から青に切り替わるアニメーション。アニメーションを入れることにより、サイトを少しリッチにできます。HTML、CSSのコーディング情報をインスタで配信中。Codeでは、デフォルトでフォーマッターが入っている。自動でコードを整形してくれるので、とても便利。CSSの小技CSSのline-hightで文字の縦位置を真ん中にできるheightをとった要素に文字を入れると文字の縦位置は上揃えになる。center;で真ん中揃えにしている。スマホ版、PC版で改行箇所を変更することができる。CSSの小技CSSのflexboxで上下左右を要素の中央に配置するheightをとった要素に文字を入れると文字の縦位置は左上揃えになる。flexboxの三行を使うだけで、要素内で文章を真ん中配置できる。CSSの小技CSSのmarginにマイナス値を入れると要素を重ねることができる要素が2つ並んでいます。この要素をmarginで、重ねることができます。要素が重なっていない状態。今回は上の画像のような例を再現します。CSSの小技HTMLだけでアコーディオンメニューを作るHTMLの<details>タグと<article>タグを使うと簡単なアコーディオンメニュー(開閉メニュー)がHTMLだけで実装可能です。<article>以外の箇所が開閉する仕組みになります。勉強プロフィールyamaguchiエンジニアの現場でJava、SQL、Webサイトのアクセシビリティー対応、Wordpressのアプリ開発を経験。Wordpressでのサイト制作が中心。■コーディング初心者がコーディングで躓く箇所をクイズで出題。■コーディング講師・Wordpress講師インスタでも情報を発信中。CSSの小技webサイト制作その他お問い合わせタイトルとURLをコピーしました。