CSS　生成AI(ChatGPT)の解説 [.A.Bと.A .B]

CSSでクラス指定の際、.A.Bや.A .Bなど、複数のクラスを用いる際。AとBの間にスペースを入れると、どのように変わ…

CSS　中央寄せ(上下左右)

方法3つ、整理しました。Grid / Flex / absolute - translate See the Pen 中…

CSS　滑らかなborder-radiusを考える

CSSのborder-radius。曲線を滑らかにしたく、コードを考えてみました。 イメージ ※右下のツマミでリサイズし…

googleフォーム埋め込みのCSS（備忘録）

表示イメージ googleフォーム埋め込みのCSS。 あまり良い状態ではないですが。コードを備忘録として記載します。 h…

CSS　アコーディオン（レスポンシブ版）

特徴 レスポンシブ対応のアコーディオンを作りました。 弱点は右側の「＋」「ー」マークの位置調整が力技なところ。フォントに…

CSS　border-radius 上両端丸め＋なめらかな曲線の工夫を考え中

CSSテストです。 特徴 ボックス上両端丸め＋なめらか曲線の方法検討。 本文 border-radius: 65% 65…

CSS　videoと下地画像

動画表示＋下地画像処理の練習＋備忘録です（ひとまずの状態）。 html構成 <div class="front_p…

CSS　コンテナクエリを使って簡単なレスポンシブ対応コードを組んでみました

今風コードをお勉強中。コンテナクエリで、簡易的にレスポンシブ対応をしてみました。 概要 特定のサイズ以下になったら「文字…

CSS　ボタン横並び（flex）　サンプルコード

flexで折り返される横並びのボタン。 See the Pen buttons by Rin5Graphic (@rin…

CSS　インナーの画像をアウターよりも少しだけハミ出させて微調整

画像をコンテンツ幅に合わせたいけれども、画像の余白でどうにも縦のラインが揃わない。そんな時に、インナーボックスをアウター…

CSS　透過画像<img>をhoverで切り替える（力技）

CSSメモ。 （GIFアニメ） 透過のimg画像をhoverで切り替えるコードを試しました（CodePenでは透過画像の…

CSS　アコーディオン(detailsとsummary)。JavaScriptいらず

CSS。アコーディオンの練習中です。 特徴 角丸 テキストによる簡易的な「＋」「−」アイコン See the Pen ア…

CSS　ワードプレス　background-imageのリンク先　

CSS苦戦につき、備忘録です。 ワードプレスのCSSで、background-imageを用いて背景画像を敷くときのリン…

CSS　縦書きを中央に(Firefoxでチェック)＆gridリスト

縦書きの文字を左右中央に表示し、gridでリスト化しました。Firefoxだと表示崩れが起きやすいようですので、Fire…

当HP。CSSを微修正。回転しながら外から中に入ってくるアニメーション

See the Pen アニメーション：外から回りながら出てくる by Rin5Graphic (@rin5graphi…

【CSS／SVG】ボックスサイズのSVGアイコン

「ボックス内に収まるSVGのアイコン」を作ってみました。（cssの練習＋備忘録） 特徴 SVGの使い回し可 hoverで…

CSS「サムネイル＋アスペクト比」

サムネイル（アスペクト比指定）を作ってみました。（css「aspect-ratio」の練習＋備忘録） 特徴 アスペクト比…