Sassのマップで複数のカテゴリ情報を管理する
以前にSassでカテゴリーの色を管理するという記事を投稿しましたが、単一色の管理ではなく複数のカテゴリ情報を持たせたいと...
HTML・CSSの記事一覧
SVGのアニメーションでイージングを設定する
SVGのanimate属性でアニメーションの設定をする際、イージングの指定ができるようだったのでメモ。...
SVG内の要素に設定したfilterがSafariで効かない
SVG内の要素に対してCSSのfilterを設定した際、Safariで適用されないようだったので備忘録としてメモ。...
Sassで0始まりの数値を使用した際、コンパイル後に0が省略される
タイトルの通りですが、Sassで0始まりの数値を使用した際に0が省略されてしまうということがあったので、備忘録としてメモ...
position:sticky でサイドバーを追従させる
サイドバーをスクロールに合わせて追従させる際、position:sticky で実装しようとして少し迷う点があったので、...
SVGのpathで描画した図形をくり抜く
pathで描画した円形をドーナツ型にくり抜きたいということがあったので、その際に調べたことをメモ。...
SVGのpathで円を描画する
SVGで円を描画したい場合は基本的にcircleを使用することが多いですが、少し特殊な処理をしたいことがあったのでpat...
flexboxで幅を縮小しないようにする
flexboxで横並びの設定をした際、幅を縮小しないようにする方法をメモ。...
:focus-withinを使ってみる
自分自身かその子孫要素にフォーカスがある場合にスタイルを設定できる、CSS擬似クラスの:focus-withinを使って...
2列のリストで要素数が奇数の場合に最後の要素を100%表示にする
2列で並ぶリストで最後に1つ余った際に幅100%に広げたい場合、幅100%用のclassを別途付与するでも実装はできます...
スキップリンクを実装してみる
一般的なサイトだとメインコンテンツの前にはヘッダーがあり、その中にナビゲーションや検索などといった要素が入っていることが...
Sassでのイージング設定を試してみる
CSSのイージングではlinear・ease・ease-in・ease-out・ease-in-outの5つのキーワード...
Sassの@debug・@warn・@errorを使ってみる
Sassの実装を行う上で便利な@debugと@warn、@errorについてそれぞれ試してみます。...
Sassで三角形を作るmixinを作成する
以前にCSSで三角形を作る記事を投稿しましたが、疑似要素で三角形を作る機会が度々あるので、Sassのmixinで作成でき...
Sassで桁数を揃える関数を作成する
Sassの@forでループ処理を行う際、連番の数値は通常1,2,3のようになりますが、01,02,03や001,002,...
CSSのtransformの設定を個別に指定する
CSSのtransformで使用していたtranslate()・rotate()・scale()の設定を、個別に指定する...
hoverでbackground-imageを変更した際にちらつくのを防止する
CSSのhoverでbackground-imageの画像を変更した際、変更後の画像読み込みでちらつくのを防止する方法を...
box-shadowをborderの代わりに使用する
デザインで装飾された要素の縁取りをコーディングするということが度々ありますが、borderの実装手段の一つとしてbox-...
Safariでホバーが効かない
CSSでホバー時の設定をした際、Safariでのみ効かないということがあったので対応方法をメモ。 確認はSafariのバ...
CSSで透過画像に影を付ける
CSSで影を設定する際、画像要素自体に影を付けるのではなく、画像内の実際の透過内容に合わせて影を付ける方法をメモ。...