css

css

レスポンシブ対応がカンタンに!CSS aspect-ratioプロパティの使い方

レスポンシブ対応がカンタンにできる、CSSのaspect-ratioプロパティの使い方です。YouTubeの動画を埋め込む場合でもレスポンシブ対応できます!css関連記事aspect-ratioプロパティとはaspect-ratioは、要素...
css

効率よくセレクタを指定してcss効かせるサンプル!21選

first-childや、nth-of-type()などを使って、効率よくセレクタを指定してcss効かせるサンプル!21選css関連記事サンプルはこちらから。1.タグで指定cssタグを指定してstyleを適用します。2.idで指定cssid...
css

楽天スマホで使える!classを使わずにcssを適用する裏技

使用可能タグが限られた楽天スマホで使える!classを使わず、属性値に任意の値を指定してcssを適用する裏技楽天Tips関連記事楽天スマホで使用可能なタグ使用可能なタグはとても少なく、aタグやpタグ、table関連程度しか使えません。div...
css

cssのkeyframesで画像に動きや変化のアニメーションをつけるサンプル10選

cssのkeyframesをつかって、要素や画像に対して、ふわふわ上下・左右に移動する動きや、ゆらゆら揺れる動き、ゆっくりズームするなどのアニメーション・動きをつけるサンプルを7種類紹介します。今回は、画像にアニメーションを付けたいのでim...
css

cssで要素に動きや変化をアニメーションでつける、keyframesの使い方

cssで要素に動きや変化をアニメーションでつける、keyframesの使い方css関連記事今回、imgタグにアニメーションを付けてみます。htmlkeyframesの使い方cssanimation_testがアニメーションの名前を任意でつけ...
css

SVG画像をcssのプロパティで色や大きさなどのスタイルを変更する

SVG画像をhtmlに埋め込み、cssのプロパティで色や大きさなどのスタイルを変更する方法css関連記事svgのデータは「icooon-mono」さんからのデータをsvgでお借りしました。デモを用意しました。1.svgをhtmlに反映するダ...
css

cssで要素を上下左右に中央寄せするサンプル

cssで要素を上下左右に中央寄せするサンプルcss関連記事text−alignで中央寄せhtmlcssよく使うやつですね。これで横方向の中央寄せができます。line-heightで中央寄せhtmlcssheightとline-heightを...
css

jQueryでcssの:before・:afterの疑似要素のstyle・contentを変更する

jQueryでcssの「:before」、「:after」などの疑似要素のstyleを変更する方法です。色や背景などのデザインだけでなく、contentの内容も変更できます。css関連記事jQueryで要素のcssを変更するJavaScri...
css

Bootstrapのグリットスタイルで横並びのカラム同士の高さを揃える

Bootstrapのグリットスタイルで、cardや画像などの横並びコンテンツで、それぞれの高さが違う場合に、高さ指定しないでカラム同士の高さを揃える方法css関連記事カラム同士の高さを揃えるhtmlこんな感じでレイアウトしているときにカラム...
css

jQueryとcssでハンバーガーメニューの開閉ボタンをアニメーション付きで変化させる

cssでシュッと動かす動きをつけて、jQueryで開閉させるとハンバーガーメニュー(アコーディオンメニュー)の開閉ボタンをアニメーション付きで変化させる方法ナビゲーションメニュー関連記事htmlとjshtmljsコードは【jquery】クリ...