🫱
こんな場面で使えます
📚 HTML/CSS学習
HTML/CSSの授業で見本コードとして活用。実際に動くサンプルを見ながら、コードの構造と視覚効果の関係を学べます。
🎨 情報デザイン教育
色の組み合わせやアニメーションの効果を比較・検討する教材として。デザインの良し悪しを議論する素材になります。
💻 課題制作の参考資料
児童・生徒が自分のWebサイトを作る際のデザインパーツ集として。コピーして色を変えるだけでオリジナル作品が作れます。
📊 授業資料の作成
教員がデジタル教材やプレゼンを作る際に、見やすいボタンやカードをすぐに実装できます。
🔧 技術的な実験
「この色にしたらどう見える?」「アニメーションの速度を変えたら?」など、試行錯誤しながら学ぶ素材として。
🎯 保護者向け資料
学校ホームページやお知らせページで、見やすく目を引くデザインを簡単に取り入れられます。
🎨
何から始める?
使いたいカテゴリを選んでください
🗇
カード
シンプルカード
初級
色変更:
#0075c1
カードの内容
ホバーカード
中級
カーソルを当ててみて
グラデーションカード
中級
色変更:
#0075c1
カードの内容
フリップカード
上級
ホバーで回転
ネオンボーダーカード
上級
色変更:
#0075c1
ネオンエフェクト
✨
アニメーション
バウンド
中級
色変更:
#0075c1
スピン
中級
色変更:
#0075c1
パルス
中級
色変更:
#0075c1
シェイク
中級
色変更:
#0075c1
フロート
中級
色変更:
#0075c1
ハートビート
中級
色変更:
#0075c1
🎨
背景
グラデーション
初級
色変更:
#0075c1
ドットパターン
中級
色変更:
#0075c1
ストライプ
中級
色変更:
#0075c1
アニメグラデーション
上級
色変更:
#0075c1
ウェーブ
上級
色変更:
#0075c1
📝
見出しデザイン
h1, h2, h3など、どの見出しレベルにも使用できます
アンダーライン見出し
初級
色変更:
#0075c1
学習内容
左線付き見出し
初級
色変更:
#0075c1
重要なポイント
点線アンダーライン見出し
初級
色変更:
#0075c1
活動内容
二重線見出し
初級
色変更:
#0075c1
まとめ
上下線見出し
中級
色変更:
#0075c1
今週のテーマ
ドット装飾見出し
中級
色変更:
#0075c1
お知らせ
コーナーライン見出し
中級
色変更:
#0075c1
イベント情報
背景グラデーション見出し
中級
色変更:
#0075c1
授業の目標
アニメーションアンダーライン
上級
色変更:
#0075c1
ホバーしてみて
グラデーション文字 + 影
上級
色変更:
#0075c1
特別企画
3Dエフェクト見出し
上級
色変更:
#0075c1
立体的な見出し
ネオングロー見出し
上級
色変更:
#0075c1
光る見出し
🎨
番外編:カラーパレット
PICOブランドカラー
クリックでコピー
PICOブルー
#0075c1
クリックでコピー
ダークブルー
#004d82
クリックでコピー
ライトブルー
#0056a3
クリックでコピー
アクセントイエロー
#FFE066
教育向けパステルカラー
クリックでコピー
パステルピンク
#FFB3BA
クリックでコピー
パステルグリーン
#BAFFC9
クリックでコピー
パステルブルー
#BAE1FF
クリックでコピー
パステルイエロー
#FFFFBA
クリックでコピー
パステルパープル
#E0BBE4
クリックでコピー
パステルオレンジ
#FFDAB9
ビビッドカラー
クリックでコピー
ビビッドレッド
#FF6B6B
クリックでコピー
ビビッドシアン
#4ECDC4
クリックでコピー
ビビッドブルー
#45B7D1
クリックでコピー
ビビッドグリーン
#96CEB4
クリックでコピー
ビビッドイエロー
#FFEAA7
クリックでコピー
ビビッドグレー
#DFE6E9
モノトーン
クリックでコピー
ホワイト
#FFFFFF
クリックでコピー
ライトグレー
#F8F9FA
クリックでコピー
グレー200
#E9ECEF
クリックでコピー
グレー600
#6C757D
クリックでコピー
ダークグレー
#2C3E50
クリックでコピー
ブラック
#000000
❓
よくある質問
Q1. コピーしたコードはどこに貼り付ければいいですか?
A. HTMLは
<body>タグの中に、CSSは<style>タグの中、または外部CSSファイルに貼り付けてください。Q2. 色を変更したい場合はどうすればいいですか?
A. CSS内の
#0075c1という色コードを、お好きな色のコードに変更してください。カラーピッカーツールを使うと便利です。Q3. スマートフォンでも動作しますか?
A. はい、すべてのサンプルはレスポンシブ対応しています。必要に応じてメディアクエリで調整してください。
Q4. 見出しデザインはh1, h2, h3のどれに使えますか?
A. すべての見出しデザインは、h1からh6まで、どの見出しレベルにも使用できます。クラス名を適用するだけで、同じスタイルが反映されます。
このサンプル集は、PICOの活動での知見をもとに用途別の"はじめの一歩"を整理したものです。
学校・教育機関向けの導入支援やカスタマイズについては、お気軽にお問い合わせください。