はてなブログを改造してWeb制作の基礎を学んでいる。

AIに教えてもらいながら、はてなブログを練習台にしてHTML/CSSを学んでいる

1. 検証ツールを使用する。

まずはブラウザの「検証ツール」を使って、サイトの裏側をのぞき見する方法をしようといわれた。 もともと知ってはいたがまぁあんまりやらんかった。

検証ツール

後回しにしてたけどなるほどなーっておもった。でもさわりしかしてない。 もっと調べる必要性ある。

2. 自分専用の「強調ボックス」を錬成

次に、CSSを使って「自分専用のパーツ」を作成した。

作成したパーツのデザイン

/* デザインCSSに貼り付けたコード */
.my-check-box {
    border: 2px solid #ff6600;
    padding: 15px;
    background-color: #fff5ee;
    border-radius: 8px;
}

3. ボタンを横に並べる「Flexbox」を行う

• justify-content: ボタンを真ん中に寄せる
• gap: ボタン同士の隙間をピッタリ空ける
• margin-top: 上の文章とぶつからないように余白を作る

4. スマホ対応（レスポンシブ）の壁

この辺は聞きかじりだったんだけど、「メディアクエリ（@media）」でなるのか。便利やなと思った。 確かにいまだとスマホがほとんどだし、むしろスマホ画面が優先なのかもしれない。

---

次はGoogle Fontsの使い方進められている

Google Fontsの使い方を勧められている図

色彩センスはデザインはイラスト学ぶなかでやってるからまぁあんまりやらんでも良さそう。 という事は文字の方が先かなという感じ。

まとめ

目的持ってやっぱりやった方がよさそう。 あとはプロパティの詳細とかその辺は調べた方が良さそう。