CSS 滑らかなborder-radiusを考える
CSSのborder-radius。曲線を滑らかにしたく、コードを考えてみました。 イメージ ※右下のツマミでリサイズし…
ブログ
カテゴリー：CSS
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」の練習＋備忘録） 特徴 アスペクト比…