記事一覧

モバイル起点の設計、min-widthの積み上げ、実測での幅決定、崩れの切り分けまでを実務目線で学びます。

第2章で学んだFlexboxとGridを使い、モバイルファーストで実践的なレスポンシブレイアウトを構築します。

相対単位、max-width、画像の可変表示を使って、画面幅に応じて自然に伸び縮みするレイアウトを作ります。

viewportの意味とmedia queryの基本構文を理解し、画面幅ごとにCSSを切り替える方法を身につけます。

まとめクイズで理解度をチェックし、セレクター・カスケード・継承・設計手法を活用したWebページを作成する

AIを使ったコミュニティ活動と知識発信の形

AIが代替できない人間力の磨き方

AIを使う人ではなく、AIと共に考える人になる

AIと共に進化する働き方を描こう

AI分析で得意と興味を可視化する方法

AIで発信を支援してもらうセルフブランディング

AIを使ったコミュニティ活動と知識発信の形

情報過多の中で自分軸を保つAIリテラシー

AIが道を示しても、歩くのは自分

AIを使って自分らしい未来をつくる

AI時代でも「自分で選ぶ力」が本当の自由

AIレビューと人の意見を活かす方法

成功、警告、エラー、情報を伝える基本的なアラートコンポーネント

オンラインコミュニティとAIが広げる可能性

技術更新とAI学習ツールの継続活用法

AIは完璧じゃない、人間の学びはそこにある

メンタルケアAIと日記AIとの付き合い方

目標設定とAI自己コーチングの活用

ホバーすると手前にドアが開くアニメーションがついたログインボタン。

消しゴムアイコンが左から右へゴシゴシと動いて文字を消すリアルなアニメーション付き削除ボタン。ホバー時に上から下へ文字が消えます。

クリック位置から氷が広がって凍結するボタンエフェクト。多重送信を防止します。

「←」クリックで履歴を見れて、「←」長押しで、計算結果と計算式を選択できます。計算を途中から再開でき、計算履歴はローカルストレージに保存されます。

右上に折り目があるカードです。NEW/HOT/CHECKなどのラベル付きで、ホバー時に折り目が開くアニメーションとなります