HTML＆CSS 春、桜模様を背景にしたいなら
See the Pen Cherry Blossoms background by blue moon (@blue-moon) on CodePen. CSSでもSVGでも、お好みの形状の花びらを作れます。 お試しください。
HTML＆CSS 
HTML＆CSS CSSのborderで切手風フレームを作成
border-image-sourceの値に、円を描画した画像を設定します。ここで円の色（sgvのfillの値）は、親要素と同色にしておきます。
それをborder-image-sliceで分割し、四辺に割り当て、borderの幅の半分外側に配置します。
HTML＆CSS 千鳥格子模様をCSSのgradientで作成して背景模様にする
先日、千鳥格子をSVGで作成したのですが、模様をじーと見てみると、CSSのgradientでも簡単に作れることに気づきました。単純なconic-gradientと、repeating-linear-gradientを重ねます。
HTML＆CSS CSSのclamp()でメディアクエリ 要素の表示切替
CSSの @media を使用せず、clamp() 関数で要素の表示切替をしてみました。clamp(最小値、推奨値、最大値)となっており、推奨値は最小値と最大値の間にある場合にのみ適用されます。
よって、最小値に0px、最大値に表示したい要素のサイズ、推奨値は切替の為の条件式を記述します。
HTML＆CSS CSSのborder-image-sourceの値にSVGコードを指定し、星やハートのボーダーを作成する方法
重要なのがborder-image-sliceです。
指定された画像を縦横3分割にし、上下左右のボーダーに割り当てます。
ボーダーに使用するシェイプを縦横3×3配置するSVGコードを作成し、border-image-sourceの値にしました。
HTML＆CSS 千鳥格子模様をSVGとCSSで背景模様にする
千鳥格子模様をSVGで作成し、CSSのbackground-imagプロパティで背景模様にします。CSSで背景模様にするには、background-imagの値のURLにSVGタグを埋め込むのですが、変更を加える箇所があります。
HTML＆CSS オブジェクトを要素とする配列について オブジェクトの特定のプロパティにreduceを実行
forEachの中でオブジェクトの特定のプロパティにreduceを実行するコードのメモです。sliceで元の配列の一部（現在のindexまでの）のコピーを作成します。背景色の色相（hslのhの値）をそれまでに出てきた要素の色相の値を平均したものにしています。
HTML＆CSS イラストレーターなし ハートのSVGタグを作成する方法
開始点、ベジェ曲線の方向点、下部の先端の座標と、上部の円弧の半径が分かれば描画できます。可愛らしいハートにするため座標を変更してみました。ジェネレーターで簡単にSVGタグが作成できます。塗色fillと同色のstrokeを太めにすると、ハートの上部の二つの円の溝を埋めることができます。
Vue.js Vue.js v-forで配置した要素をユーザー操作で順番を入れ替える
Vue.js v-forで配列を条件に要素を生成し表示しています。表示順を入れ替えるため、配列の順番を入れ替える関数を要素内のボタンのクリックイベントに登録しています。配列のメソッドsplice()を使用して配列の順番を。操作しています。
Vue.js Vue.js v-ifでCSSのサポート状況を条件に表示を切り替え
Vue.jsでCSSのサポート状況を条件に表示を切り替えるために、CSS.supports()関数を使用しました。mountedライフサイクルフックで、この関数を実行するメソッドを実行させています。指定したCSSの対応状況を論理値で返すため、Vue.jsの表示切替に使い勝手がよいと思います。
Vue.js Vue.js レスポンシブ対応ハンバーガーメニュー
ビューポートの幅が768px未満で、グローバルメニューがハンバーガーメニューになるヘッダーコンポーネント。v-showでハンバーガーメニューの表示切替を行います。リサイズ時のイベントハンドラをcreatedライフサイクルフックに登録します。
Vue.js Vue.js is属性でコンポーネントを切替え 動的クラスと固定クラスを付与してタブを作成
v-forでタブを出力する。。タブには共通のクラス、そのタブ用のクラス、アクティブになった時のクラスを付与する。タブによって表示するコンテンツはコンポーネントとし、is属性で出力する。
タブのコンテンツ表示はtransitionを使用する。