２ページ目：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の別タブに分けて同時に開いておく、、、みたいな小さな工夫の積み重ね、、、
なんかで、ほんと、びっくりするくらいコーディングのストレス・スピード変わります。
そもそも、プログラミング自体が、人間がズボラをするために考えられたもの？？な気がします。
エンジニアは、楽をすることに本気なので、プログラミングを楽にする道具や工夫が大量に考え出されて存在してるので、僕の記事に限らず情報収集してみてください。
僕の調べたズボラ小ネタは↓の別記事にまとめてます。
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投稿しなおしました。
