【脱・初心者】教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α - セカヤサBooks

【脱・初心者】教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α - セカヤサBooks

01はじめに 02サイズ編 03- 要素の縦横比を維持する（頻出度：★★★）04- 要素のサイズを完璧にレスポンシブにする（頻出度：★★★）05位置、余白編 06- 均等に並ぶ要素間の余白をスマートに付ける（頻出度：★★★）07- 中央揃えに困ったらとにかくflexboxを使う（頻出度：★★★）08- liタグの先頭の点の位置と改行位置を調整する（頻出度：★★☆）09- liタグの先頭の点（marker）をカスタマイズする（頻出度：★★☆）10- コンテンツ量が少ないページでも１画面分の高さを持たせる（頻出度：★★☆）11文字、文章の調整編 12- 長いアルファベットの文字列でも改行させる（頻出度：★★☆）13- 3点リーダーで長い文章を省略する（頻出度：★★☆）14- 改行を考慮したline-heightの指定（頻出度：★★☆）15- line-heightの余白を打ち消す（頻出度：★★★）16- inline-blockで改行を制御する（頻出度：★★☆）17- letter-spacingを使った時のズレ（頻出度：★★☆）18- フォントのちらつきをできるだけ改善する（頻出度：★★★）19- 文字のカーニング（文字詰め）を調整する（頻出度：★☆☆）20- 部分的に使われている特殊なフォントはアウトライン化してsvg画像として使う（頻出度：★★★）21- 文章を両端揃えする（頻出度：★☆☆）22- 文字の縦書きを行う（頻出度：★☆☆）23画像の調整編 24- どんな画像が投稿されても崩れないような実装（頻出度：★★★）25- 画像の圧縮（頻出度：★★★）26- 画像の縮小（頻出度：★★★）27機能編 28- 画像のlazy loading（頻出度：★★★）29- border-radiusの楽な書き方（頻出度：★★☆）30- メニューボタンなどのクリック、ホバー範囲を使いやすくする（頻出度：★★★）31- フォームの項目のクリック範囲を使いやすくする（頻出度：★★★）32- 外部ドメインは別タブで開くようにする（頻出度：★★★）33- 電話番号/メールアドレスをリンク化し、クリックで電話アプリ/メーラーを起動できるようにする（頻出度：★★★）34- メニューが開いている時に裏のスクロールを止める（頻出度：★★★）35- ページ内リンクはスムーススクロールにしておく（頻出度：★★★）36- preloadを使ってファーストビューの描画を早める（頻出度：★★★）37付録 38- WordPressに最適化したサーバーを選定する 39- OGPの情報を忘れずに決めておく 40- Google Analyticsなど外部サービスのアカウント、タグの管理 41- Web制作でよく使うツール・サイト集

Chapter 04

- 要素のサイズを完璧にレスポンシブにする（頻出度：★★★）

2023.03.09に更新