コードサンプル

CodePenに投稿しているサンプルコードの一覧。 別途記事を作成しているものは、そちらへのリンクも付記。

CSS UI

• 写真とテキストの横並びUI
• ボタン付きボックス
• 特定領域に対する画像の縮小配置
• 表示領域を超えたテキストの省略表現記事
• 光る画像（記事）
• flexを使ったコンテンツ

JS UI

モーダル

• シンプルなモーダル
• カスタムデータ属性を利用したモーダル
• 全画面モーダル（CSS Animation）（記事）
• esaモーダル

文字カウンター

• 文字カウンター（jQuery）
• 文字カウンター（Vue.js）（記事）

その他

• カルーセル
• アコーディオン
• 表示切替のアニメーション
• インクリメンタルサーチ（記事）
• Intersection Observer
• チェックボックスの全選択・全解除（記事）
• スクロール位置によって表示が切り替わるフェード演出入りボタン（記事）
• コンソール寿司+テキスト寿司（記事）
• 引数で渡した事項を賞賛してくれる関数（記事）

アルゴリズム

• 配列の組み合わせ作成（記事）
• 特定のvalueを持つkeyを配列化
• forループ最適化
• 重複要素の削除
• 切り上げ、切り捨て計算
• 16進数カラーコードをHSV値に変換
• 独自の文字列を二次元配列にする（記事）
• 要素の高さ揃え
• 多次元配列の一次元化（flatten）