この記事は、オンラインプログラミングスクールの「デイトラ
」で、Web制作を学習していて、引っかかったところ、詰まったところで調べた、AIの回答などまとめです。
記事に貼ってある、Xの投稿の下の方にある「gemini」って文字含んでるリンククリックすると、ちょっと動作重いですが、AIの回答・解説に飛べます。
全部のネタに見出し付けてあるので、目次から見出しクリックで気になった項目にジャンプできます。
思った以上に数が多いので、目次で見てもみにくい？？かもです、ごめんなさい。
AIは、Googleの生成AIのGeminiに課金して利用。
デイトラは、メンターさんにディスコードで質問すると、ほんとすぐに、わかりやすい回答をくださります。
ただ、自分の場合は、独り立ちしてサポートがなくなってからのことを考えて、できるだけAIなども駆使して、自分で調べて解決するようにしています。
その、調べて「へ～」と、ためになったAI回答と、自分が学習を進めていて引っかかったところ、Xに投稿したものをまとめておきます。
まとめとかないと、確実に自分でも忘れる、、、
今後も、順次新ネタがあれば、Xに投稿して、この記事にも追加していきます。
AIの回答は、基本的には、時系列で、上が新しい投稿です。
Web制作関連：AI回答【主にCSS】
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タグで囲わない方がいい
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はインデントに意味がある
AI回答以外小ネタ
gridの要素のエリア指定方法詳しいサイト
個人的には、grid-template-areas使う方が、直感的でわかりやすいっす。
absolute要素は場所を占めない
border-radiusを使った少し凝ったデザイン方法
VS Codeの【単語単位で検索】
画像の背景透過は無料Webツールで一瞬
form関連のテンプレは、ウェブに大量に落ちてる
テンプレサイト、ブックマークしておくなり、使えそうなテンプレ、notionなんかにスニペットとして登録しとくと便利そう。
普通のJavaScriptとjQueryは入れ子など組み合わせ可
pictureタグ忘れちゃいかん
スニペットも活用推奨。
不必要な【空のfor属性】は事故の元
ファイル分割時のファイル名は、シンプル・わかりやすく
ファイル冒頭で1回読み込むだけの分割ファイルならいいですが、
Sassの変数定義なんかを別ファイルにするときなんか、変数使うたびにファイル名記入必要なので注意です。
一時的にスニペットに登録しちゃう手もありますけどね、、、
不必要なCSSプロパティは意図しない崩れに
Figmaなんかのデザインカンプから、CSS一括で読み込んでVS Codeにドーンとコピペできますが、いらないものは消さないと崩れのもとです。
実力！ってより、道具の使い方？？
Web制作に限らず、プログラミング関連学習してると思うんですが、労力と成果は比例しないです。
ショートカットキー調べたり、VS Code・Chromeの開発者ツールなんかの拡張機能、、、
デザインカンプをPC・SPともChromeの別タブに分けて同時に開いておく、、、みたいな小さな工夫の積み重ね、、、
なんかで、ほんと、びっくりするくらいコーディングのストレス・スピード変わります。
そもそも、プログラミング自体が、人間がズボラをするために考えられたもの？？な気がします。
エンジニアは、楽をすることに本気なので、プログラミングを楽にする道具や工夫が大量に考え出されて存在してるので、僕の記事に限らず情報収集してみてください。
僕の調べたズボラ小ネタは↓の別記事にまとめてます。
Sassを使って書いてるときは、変換してるか確認！
Sassの変換する拡張機能の初期設定で、変換先のフォルダ・ファイルのパスはしっかり確認！！
そのうえで、VS Code再起動したときなんか、Sassの変換オンにするの忘れない！！
いまだに、Sassの変換切ったままで書いて、あれ？CSS効かねえな？？ってちょくちょくなります。
jQueryなども、便利な道具のひとつ
一部、時代遅れ？？なんて声もあるらしいですが、まあ、普通に便利ですよね、、、
AIは使い倒せ！
AIはすごい勢いで進歩してるので、今、自分の使ってるAIが便利な理由が、課金のおかげなのか、シンプルにAIが進歩しただけなのか区別つかないですが、
AIは、プログラミング関連にはかなり強いらしいので、プロンプトさえちゃんと考えれば、大活躍してくれます。
jQueryで、functionとアロー関数は挙動が違う場合あり
拡張機能でコード整形
これ活用すると、
インデントやJavaScript末尾の「;」なんか、ガン無視してどんどん書いて、最後に「Ctrl + S」でけっこういけます。
スニペットは拡張機能も使って活用
個人的に、忘れそうなコードの書き方は、メモ感覚でスニペットに登録していってます。
スニペットを実際に使う時だけじゃなくて、スニペットの一覧みたいなところをたまに眺めるだけでも、かなりいい復習になります。
ま～、全部覚えるとか無理ですよ。
今書いてるこのブログ記事も、書く目的のひとつは、調べたことを自分で忘れる前提の備忘録ですしね、、、
人間、思ったよりあほだと割り切った方が、結果、楽できます。
作業場所はキレイにね、、、
趣味でやってるだけならいいですが、仕事として取り組むなら、その作業場所は整理して、どこになにがあるかわかりやすく！！
しょっちゅうフォルダの場所探すだけでも、生産性爆下がりです。
そのうえで、ファイル・フォルダの検索機能も使うと、だいぶ便利になります。
Emmet記法の基本
HTMLを直接Chromeで開くひと向けズボラ
「Live server」を使う派のひとは関係ないですが、自分の環境では「Live server」とんでもなく不安定で使えたものじゃないです。
なので、自分は「Perfect pixel」を使った、表示の微調整もChromeでHTMLを直接開いてやってます。
普通にやるなら、Chromeのタブで「Ctrl + O」で、ファイルを選択、、、
なんですが、この拡張機能でVS Codeから一撃で開けます。
scrollbarの太さ調節
最初のころに調べたことですが、当時、AI課金してなかったので、改めてAI回答作ってX投稿しなおしました。
学習の助けになる本
CSS設計はいちどきちんと学んだ方がいい
下のXの投稿で紹介した本を読む前の僕がそうなのですが、
CSS設計の基本を知らないと、HTMLのクラス名をつけるときに一貫性がないので、
共同開発する他のひと、、、
とか以前に、
自分でコード書いてて、クラス名を見ても何につけたクラスかわからず、
「今書いてるCSS、どこのコードだったっけ？？」と、頻繁に迷子になります。
↓↓この本はデイトラでおすすめされてた本です。
失敗をポジティブに、進歩の種に
プログラミングと直接関係はないのですが、学習をすすめるモチベーションを維持できるようになる本。
Web制作の学習なんかやってると「これでできたんじゃね！？」と思っても、ま～細かいミスやうまくいかないこと多数！！
（注：ちゃんと、確認してきれいに修正してますよ）
そんな失敗をするたびに
「ふふ、、、また成長してしまった、、、」とほくそ笑むことができるようになる本。
コードを書くこと自体を楽にする小ネタまとめ記事はこちら
この記事では、主にCSS関連の知識の小ネタをまとめてますが、
VS CodeやChromeの開発者ツールを使いながら「コードを書く」ってこと全般に関する小ネタは↓↓の記事にまとめてます。
コーディングや学習の息抜きにでも、どぞ、、、
僕がWeb制作を学んでいる【デイトラ】の紹介記事はこちら
2024年8月時点で、Web制作コースの中級最終課題取り組んでますが、ガチでレベル高いです。
歯ごたえありすぎて、もし、メンターさんの素早い的確な回答がなく、全部自分で調べてやったとすると、奥歯が砕けるレベル。
実際は、デイトラではディスコードでメンターさんに質問すると、ほんと素早く的確に回答くださいます。
さすがに、このAI回答まとめ記事に、メンターさんに教わったことは書いてません。
自分が受講してるから言えるのですが、本気でWeb関連で仕事できるレベルになりたいなら、おすすめです。
