この記事は、オンラインプログラミングスクールの「デイトラ
」で、Web制作を学習していて、引っかかったところ、詰まったところで調べた、AIの回答などまとめです。
AIの「GeminiAdvance」の解説つけてる投稿は、Xの投稿の下の方にある「gemini」って文字含んでるリンククリックすると、ちょっと動作重いですが、AIの回答・解説に飛べます。
全部のネタに見出し付けてあるので、目次から見出しクリックで気になった項目にジャンプできます。
どんどん数が増えていて、2024年10月現在で、3ページになってます。
このページの目次に置いてある見出しは、1ページ目のものだけになります。
2ページ目以降の目次（見出し一覧）は、それぞれのページの冒頭に置いているので、
目次の「次のページへのリンク」でページ一番下に飛んで、2ページ目以降に移動してください。
思った以上に数が多いので、目次で見てもみにくい？？かもです、あと、Xの投稿大量に埋め込みすぎてページ読み込み重いです、、、
ごめんなさい。
AIは、Googleの生成AIのGeminiに課金して利用。
デイトラは、メンターさんにディスコードで質問すると、ほんとすぐに、わかりやすい回答をくださります。
ただ、自分の場合は、独り立ちしてサポートがなくなってからのことを考えて、できるだけAIなども駆使して、自分で調べて解決するようにしています。
その、調べて「へ～」と、ためになったAI回答と、自分が学習を進めていて引っかかったところ、Xに投稿したものをまとめておきます。
まとめとかないと、確実に自分でも忘れる、、、
この記事では主にCSS関連をまとめてます。
JavaScript関連は↓↓の別記事
今後も、順次新ネタがあれば、Xに投稿して、この記事にも追加していきます。
AIの回答と、その他小ネタは、それぞれ基本的に、時系列で、上の方に新しい投稿を重ねていってます。
Web制作関連：AI回答【主にCSS】
HTML・CSS
()、{}、[]、呼び分けできる？？2パターン
独りで学習してた時は、読み方知らなくても問題なかったんですが、デイトラのチーム企画なんかに参加しだしたので調べました。
ほんとに小ネタ。
radioのfieldsetやlegendは特殊、display: contents;使うと楽
fieldsetに、display: contents;当てたら、一撃
3投稿↓
selectタグのplaceholder的なもの
selectの矢印カスタマイズ
投稿ふたつ↓
form関連基本まとめ
gridアイテムのwidth%指定の100％とは？
flexだと「親の内側の幅＝paddingを引いた幅、gap指定するとその分アイテムが縮む」になるらしいっす。
画像を保存するときの単語を区切る命名ルール
CSSのクラス命名と整合性とるなら「_」の方？
ただ、CSSは「__」と、「_」を二つ並べるんだよなぁ、、、
しばらく両方試して、独りプロジェクトのときは、自分なりに統一します。
gridレイアウト行によって列数を変えたり
gridレイアウトで、行によって列数を変えたり、要素の幅を変えたりする方法。
pictureタグやそのなかのimgに疑似要素は当てられない
pictureタグのスタイリングについて
pictureタグはただのcontainer要素なので、基本そのままではスタイリングの対象にはならない。
absoluteの親のpaddingと子要素の配置基準について
親のpaddingいじると、子の絶対配置にも影響が出るので、あとでpadding微調整が必要な要素は親にしない方が無難？？
imgタグとbackground-imageの使い分け
SEO、やスクリーンリーダーなんかの観点から、ほんとの飾りの背景ってんじゃなかったら、基本imgタグでaltつけるのがいいみたい。
GooglefontをVS Codeや自分のサーバー上にダウンロードして使う方法
Googlefontは、一般的にはCDNで使う方法が推奨されるらしいですが、ローカルで開発やってると、回線の問題なんかで読み込みが不安定になることが、、、
表示しょっちゅう崩れるのめんでぃので、ローカルにダウンロードして使う方法調べてまとめました。
疑似要素での下線、長さを自動でテキストに合わせる方法
この方法で、共通クラスで見出しなんかの部品作っておくとめっちゃ便利。
gridレイアウトで、gapをきれいに整える方法
z-indexには指定条件が、、、
position:abusolute;の親要素のposition
flexとdisplayの組み合わせは注意が必要
display:none;が使えないとき、visibility:hidden;
position:fixed;で固定した要素リセット方法
aタグはbuttonタグで囲わない方がいい、逆もダメ
追記：逆に、buttonタグをaタグで囲うのもまずいらしい
inline要素に上下のmarginは効かない
当然、aタグにも上下のmarginは効かない
position：stickyとfixedの違い
画像、containとcover使い分け
formのlabelのfor属性：基本id、複数グループ化するのはname
formのlabelやinputは、デザイン面・拡張性でdivで囲う方が便利
画像、jpgとpngの使い分け
疑似要素【:】と疑似クラス【::】
iframeでpaddingを使う理由
これ、ちょっとややこしいので、AIの回答一部抜粋しときます↓
動作の仕組み:
- コンテナ要素（
.movie__iframe）にpadding-topが設定されると、要素内に空のスペースが作成されます。 - 絶対位置指定されたiframeは、このpadding-topで作成されたスペース内に配置されます。
- コンテナ要素の幅が変化すると、padding-topもそれに比例して変化するため、iframeの高さも自動的に調整され、アスペクト比が常に維持されます。
Sassはインデントに意味がある
