My Code Library | 私の技術備忘録

🐍 Pythonでリスト内包表記

forループを書くよりも短く、高速にリストを生成する方法。慣れると手放せない。

💡 Metaphor:
普通のループが「一個ずつお皿に盛る」なら、内包表記は「工場のラインで一気に製造する」イメージ。

                        PYTHON
# 普通の書き方
squares = []
for x in range(10):
    squares.append(x**2)

# リスト内包表記
squares = [x**2 for x in range(10)]
                    

Python Basic 時短

🎨 CSSで要素を中央揃え

Flexboxを使えば、たった3行でど真ん中に配置できる。呪文として覚えること。

                        CSS
.parent {
    display: flex;
    justify-content: center; /* 横方向 */
    align-items: center;     /* 縦方向 */
    height: 100vh;
}
                    

CSS Layout Flexbox

📅 自動日付ハイライトの実装

HTMLのdata-day属性とJSのDate()を使い、カレンダーの「今日」を自動で強調表示する仕組み。

💡 Metaphor:
HTMLで座席に「番号札」を貼り、JSというスタッフが毎日「今日の番号」を探してスポットライトを当てるイメージ。

                        JAVASCRIPT
document.addEventListener('DOMContentLoaded', () => {
    // 1. 今日の日付(日)を取得
    const today = new Date();
    const dayOfMonth = today.getDate(); // 例: 3

    // 2. data-day="3" の要素を探してクラス付与
    const target = document.querySelector(`.cal-cell[data-day="${dayOfMonth}"]`);
    
    if (target) {
        target.classList.add('today-active');
    }
});
                    

JavaScript DOM操作 UI/UX