この記事は、オンラインプログラミングスクールの「デイトラ
」で、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制作関連：【主にCSS】現段階で３ページ
HTML・CSS
SVG画像は、自分で書き換えて加工もあり
Figmaからエクスポートした画像の色が、使いたい色と違う場合なんか、
SVGでエクスポートして、その画像コードの中の「fill」を直接使いたい色に書き換えたらあっという間、、、なんですよね、、、
これに気づかず、画像編集ソフト調べたり、結構時間使った、、、
HTMLファイルは基本ルート直下に
devフォルダとか作ったときに、assetsフォルダの中に入れてたら使いにくかった、、、
Sassのインターポレーション≒変数展開
Sassのインターポレーション と呼ばれる機能を使って、変数の値を文字列の中に埋め込み可能。
#{} で囲まれた部分が、変数の値に置き換えられる。
"screen and (max-width: #{$sp-width - 1px})"ベンダープレフィックスとは
主なベンダープレフィックスとブラウザは以下の通り。
新しく出てきて、まだ標準化されてないCSSプロパティを各ブラウザごとで動作させるための接頭語。
-webkit-: Chrome, Safari-moz-: Firefox-ms-: Internet Explorer-o-: Opera
FLOCSSなどを使ったSassファイル分けについて
componentフォルダとかprojectフォルダとかを作って、その中に、_button.scssや、_header.scssなんかの細かい子ファイルに分割して管理して、
同じフォルダの中に_index.scssファイル作って、その中に、子ファイルを全部@use使って読み込んでcomponentはcomponent、projectはprojectでひとつにまとめる。
そして、そのcomponentフォルダなんかを一番親の、ルートディレクトリに置いたstyle.scssで読み込んでさらにまとめる、、、
みたいな感じ。
()、{}、[]、呼び分けできる？？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はインデントに意味がある
