shu_web
← ブログ一覧へ
記事2024.08.19

Web制作学習で詰まったところ、AI解説などまとめ【主にCSS関連】

Web制作学習で詰まったところ、AI解説などまとめ【主にCSS関連】

この記事は、オンラインプログラミングスクールの「デイトラ」で、Web制作を学習していて、引っかかったところ、詰まったところで調べた、AIの回答など解説まとめです。

AIの「GeminiAdvance」の解説つけてる投稿は、Xの投稿の下の方にある「gemini」って文字含んでるリンククリックすると、ちょっと動作重いですが、AIの回答・解説に飛べます。

全部のネタに見出し付けてあるので、目次から見出しクリックで気になった項目にジャンプできます。

どんどん数が増えていて、2024年10月現在で、3ページになってます。

このページの目次に置いてある見出しは、1ページ目のものだけになります。

2ページ目以降の目次（見出し一覧）は、それぞれのページの冒頭に置いているので、

目次の「次のページへのリンク」でページ一番下に飛んで、2ページ目以降に移動してください。

思った以上に数が多いので、目次で見てもみにくい？？かもです、あと、Xの投稿大量に埋め込みすぎてページ読み込み重いです、、、

ごめんなさい。

AIは、Googleの生成AIのGeminiに課金して利用。

デイトラは、メンターさんにディスコードで質問すると、ほんとすぐに、わかりやすい回答をくださります。

ただ、自分の場合は、独り立ちしてサポートがなくなってからのことを考えて、できるだけAIなども駆使して、自分で調べて解決するようにしています。

その、調べて「へ～」と、ためになったAI回答と、自分が学習を進めていて引っかかったところ、Xに投稿したものをまとめておきます。

まとめとかないと、確実に自分でも忘れる、、、

この記事では主にCSS関連をまとめてます。

JavaScript関連は↓↓の別記事

Web制作学習で詰まったところ、AI解説などまとめ【JavaScript・PHP（WordPress）関連】

今後も、順次新ネタがあれば、Xに投稿して、この記事にも追加していきます。

AIの回答と、その他小ネタは、それぞれ基本的に、時系列で、上の方に新しい投稿を重ねていってます。

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

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タグで囲うのもまずいらしい

追加で作ったAI解説

inline要素に上下のmarginは効かない

当然、aタグにも上下のmarginは効かない

position：stickyとfixedの違い

画像、containとcover使い分け

formのlabelのfor属性：基本id、複数グループ化するのはname

formのlabelやinputは、デザイン面・拡張性でdivで囲う方が便利

画像、jpgとpngの使い分け

疑似要素【:】と疑似クラス【::】

iframeでpaddingを使う理由

これ、ちょっとややこしいので、AIの回答一部抜粋しときます↓

動作の仕組み:

  1. コンテナ要素（.movie__iframe）にpadding-topが設定されると、要素内に空のスペースが作成されます。
  2. 絶対位置指定されたiframeは、このpadding-topで作成されたスペース内に配置されます。
  3. コンテナ要素の幅が変化すると、padding-topもそれに比例して変化するため、iframeの高さも自動的に調整され、アスペクト比が常に維持されます。

Sassはインデントに意味がある

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

2、3ページ目へのリンク

CSS関連続き

学習の助けになる本

VS Codeでコードを書くのを楽にする小ネタまとめ記事リンク

JavaScript・PHP（WordPress）関連ネタ記事リンク

僕がWeb制作を学んでいる【デイトラ】の紹介

２ページ目：CSS関連続き

swiperの矢印ボタンは.swiperの外に出していい

縦のpadding、%指定の基準

Sassで別ファイル読み込むときは as で名前空間編集

mixinにこだわりすぎない方が逆に楽でキレイ

子孫要素が特定のクラスを持つとき発火:has()

flexアイテムは縦にも伸びる

ul、li は入れ子にしていい

画像を親からはみ出して中央のみ表示

swiperのslidePerViewによるwidth計算式

疑似要素で「・」とかつけたときの中央寄せ

border-radius絶対値指定のレスポンシブは注意

レスポンシブでvwを便利に使う

figureタグにはデフォでmargin

gridの要素のエリア指定方法詳しいサイト

個人的には、grid-template-areas使う方が、直感的でわかりやすいっす。

absolute要素は場所を占めない

border-radiusを使った少し凝ったデザイン方法

画像の背景透過は無料Webツールで一瞬

form関連のテンプレは、ウェブに大量に落ちてる

テンプレサイト、ブックマークしておくなり、使えそうなテンプレ、notionなんかにスニペットとして登録しとくと便利そう。

pictureタグ忘れちゃいかん

スニペットも活用推奨。

不必要な【空のfor属性】は事故の元

Sassのファイル分割時のファイル名は名前空間編集でシンプルに

ファイル冒頭で1回読み込むだけの分割ファイルならいいですが、

Sassの変数定義なんかを別ファイルにするときなんか、変数使うたびにファイル名記入必要です。

その入力するファイル名を、一種の変数のような感じで「名前空間」というものを使って、シンプルにすることができます。

こんな感じ↓↓

// _variables.scss

$primary-color: #f00;
$base-font-size: 16px;


// style.scss

@use 'variables' as var; // 'variables' を 'var' に省略

.element {
  color: var.$primary-color; // var. をつけて変数を参照
  font-size: var.$base-font-size;
}

一時的にスニペットに登録しちゃう手もありますけどね、、、

不必要なCSSプロパティは意図しない崩れに

Figmaなんかのデザインカンプから、CSS一括で読み込んでVS Codeにドーンとコピペできますが、いらないものは消さないと崩れのもとです。

実力！ってより、道具の使い方？？

Web制作に限らず、プログラミング関連学習してると思うんですが、労力と成果は比例しないです。

ショートカットキー調べたり、VS Code・Chromeの開発者ツールなんかの拡張機能、、、

デザインカンプをPC・SPともChromeの別タブに分けて同時に開いておく、、、みたいな小さな工夫の積み重ね、、、

なんかで、ほんと、びっくりするくらいコーディングのストレス・スピード変わります。

そもそも、プログラミング自体が、人間がズボラをするために考えられたもの？？な気がします。

エンジニアは、楽をすることに本気なので、プログラミングを楽にする道具や工夫が大量に考え出されて存在してるので、僕の記事に限らず情報収集してみてください。

僕の調べたズボラ小ネタは↓の別記事にまとめてます。

【VS Code】でコードを書いてて「ムキィ！！」ってならないための知識まとめ：【X】に投稿したものまとめてます

Sassを使って書いてるときは、変換してるか確認！

Sassの変換する拡張機能の初期設定で、変換先のフォルダ・ファイルのパスはしっかり確認！！

そのうえで、VS Code再起動したときなんか、Sassの変換オンにするの忘れない！！

いまだに、Sassの変換切ったままで書いて、あれ？CSS効かねえな？？ってちょくちょくなります。

AIは使い倒せ！

AIはすごい勢いで進歩してるので、今、自分の使ってるAIが便利な理由が、課金のおかげなのか、シンプルにAIが進歩しただけなのか区別つかないですが、

AIは、プログラミング関連にはかなり強いらしいので、プロンプトさえちゃんと考えれば、大活躍してくれます。

スニペットは拡張機能も使って活用

個人的に、忘れそうなコードの書き方は、メモ感覚でスニペットに登録していってます。

スニペットを実際に使う時だけじゃなくて、スニペットの一覧みたいなところをたまに眺めるだけでも、かなりいい復習になります。

ま～、全部覚えるとか無理ですよ。

今書いてるこのブログ記事も、書く目的のひとつは、調べたことを自分で忘れる前提の備忘録ですしね、、、

人間、思ったよりあほだと割り切った方が、結果、楽できます。

作業場所はキレイにね、、、

趣味でやってるだけならいいですが、仕事として取り組むなら、その作業場所は整理して、どこになにがあるかわかりやすく！！

しょっちゅうフォルダの場所探すだけでも、生産性爆下がりです。

そのうえで、ファイル・フォルダの検索機能も使うと、だいぶ便利になります。

Emmet記法の基本

HTMLを直接Chromeで開くひと向けズボラ

「Live server」を使う派のひとは関係ないですが、自分の環境では「Live server」とんでもなく不安定で使えたものじゃないです。

なので、自分は「Perfect pixel」を使った、表示の微調整もChromeでHTMLを直接開いてやってます。

普通にやるなら、Chromeのタブで「Ctrl + O」で、ファイルを選択、、、

なんですが、この拡張機能でVS Codeから一撃で開けます。

scrollbarの太さ調節

最初のころに調べたことですが、当時、AI課金してなかったので、改めてAI回答作ってX投稿しなおしました。

1、3ページ目へのリンク

Web制作関連：【主にCSS】- １ページ目

学習の助けになる本

VS Codeでコードを書くのを楽にする小ネタまとめ記事リンク

JavaScript・PHP（WordPress）関連ネタ記事リンク

僕がWeb制作を学んでいる【デイトラ】の紹介

学習の助けになる本

CSS設計はいちどきちんと学んだ方がいい

下のXの投稿で紹介した本を読む前の僕がそうなのですが、

CSS設計の基本を知らないと、HTMLのクラス名をつけるときに一貫性がないので、

共同開発する他のひと、、、

とか以前に、

自分でコード書いてて、クラス名を見ても何につけたクラスかわからず、

「今書いてるCSS、どこのコードだったっけ？？」と、頻繁に迷子になります。

↓↓この本はデイトラでおすすめされてた本です。

失敗をポジティブに、進歩の種に

プログラミングと直接関係はないのですが、学習をすすめるモチベーションを維持できるようになる本。

Web制作の学習なんかやってると「これでできたんじゃね！？」と思っても、ま～細かいミスやうまくいかないこと多数！！

（注：ちゃんと、確認してきれいに修正してますよ）

そんな失敗をするたびに

「ふふ、、、また成長してしまった、、、」とほくそ笑むことができるようになる本。

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

VS Codeでコードを書くのを楽にする小ネタまとめ記事リンク

この記事では、主にCSS関連の知識の小ネタをまとめてますが、

VS CodeやChromeの開発者ツールを使いながら「コードを書く」ってこと全般に関する小ネタは↓↓の記事にまとめてます。

コーディングや学習の息抜きにでも、どぞ、、、

【VS Code】でコードを書いてて「ムキィ！！」ってならないための知識まとめ：【X】に投稿したものまとめてます

JavaScript・PHP（WordPress）関連ネタ記事リンク

Web制作学習で詰まったところ、AI解説などまとめ【JavaScript・PHP（WordPress）関連】

僕がWeb制作を学んでいる【デイトラ】の紹介

2024年8月時点で、Web制作コースの中級最終課題取り組んでますが、ガチでレベル高いです。

歯ごたえありすぎて、もし、メンターさんの素早い的確な回答がなく、全部自分で調べてやったとすると、奥歯が砕けるレベル。

実際は、デイトラではディスコードでメンターさんに質問すると、ほんと素早く的確に回答くださいます。

さすがに、このAI回答まとめ記事に、メンターさんに教わったことは書いてません。

自分が受講してるから言えるのですが、本気でWeb関連で仕事できるレベルになりたいなら、おすすめです。

キャリアに不安を感じている方へ！デイトラで新しいスキルを身につけ、Web業界で活躍しよう！

サイバーエージェントが運営する小学生向けプログラミングスクール
Tech Kids School【テックキッズスクール】

けっこうガチ目っぽいです↓↓

京大生中心のエンジニアによる中高生のためのプログラミング教室↓↓

僕がWeb制作を学んだデイトラ↓↓
継続的に学習する意思があって、何でも他人任せにするようなひとでなければ、圧倒的低価格で、圧倒的実力が身に付きます

前のページへのリンク

Web制作関連：【主にCSS】- １ページ目

CSS関連続き – 2ページ目