【脱・初心者】教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α - セカヤサBooks
フリーランスのフロントエンドエンジニアとして7年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました！ 正直言うと、これができているかどうかが「プロかプロでないか」を大きく分けます。逆に言えば、この本の内容をマスターすればプロのコーダーになれます！ 今回はHTML/CSSに関することに絞っています。特に教材にはあまり載っていなかったり、知らないと検索行為に結びつきにくいものを優先的に集めています！ ある程度HTML/CSSは勉強していて案件を取りたい、あるいは徐々に取り始めているという方にもっともおすすめです！
Chapters
はじめに
サイズ編
- 要素の縦横比を維持する（頻出度：★★★）
- 要素のサイズを完璧にレスポンシブにする（頻出度：★★★）
位置、余白編
- 均等に並ぶ要素間の余白をスマートに付ける（頻出度：★★★）
- 中央揃えに困ったらとにかくflexboxを使う（頻出度：★★★）
- liタグの先頭の点の位置と改行位置を調整する（頻出度：★★☆）
- liタグの先頭の点（marker）をカスタマイズする（頻出度：★★☆）
- コンテンツ量が少ないページでも１画面分の高さを持たせる（頻出度：★★☆）
文字、文章の調整編
- 長いアルファベットの文字列でも改行させる（頻出度：★★☆）
- 3点リーダーで長い文章を省略する（頻出度：★★☆）
- 改行を考慮したline-heightの指定（頻出度：★★☆）
- line-heightの余白を打ち消す（頻出度：★★★）
- inline-blockで改行を制御する（頻出度：★★☆）
- letter-spacingを使った時のズレ（頻出度：★★☆）
- フォントのちらつきをできるだけ改善する（頻出度：★★★）
- 文字のカーニング（文字詰め）を調整する（頻出度：★☆☆）
- 部分的に使われている特殊なフォントはアウトライン化してsvg画像として使う（頻出度：★★★）
- 文章を両端揃えする（頻出度：★☆☆）
- 文字の縦書きを行う（頻出度：★☆☆）
画像の調整編
- どんな画像が投稿されても崩れないような実装（頻出度：★★★）
- 画像の圧縮（頻出度：★★★）
- 画像の縮小（頻出度：★★★）
機能編
- 画像のlazy loading（頻出度：★★★）
- border-radiusの楽な書き方（頻出度：★★☆）
- メニューボタンなどのクリック、ホバー範囲を使いやすくする（頻出度：★★★）
- フォームの項目のクリック範囲を使いやすくする（頻出度：★★★）
- 外部ドメインは別タブで開くようにする（頻出度：★★★）
- 電話番号/メールアドレスをリンク化し、クリックで電話アプリ/メーラーを起動できるようにする（頻出度：★★★）
- メニューが開いている時に裏のスクロールを止める（頻出度：★★★）
- ページ内リンクはスムーススクロールにしておく（頻出度：★★★）
- preloadを使ってファーストビューの描画を早める（頻出度：★★★）
付録
- WordPressに最適化したサーバーを選定する
- OGPの情報を忘れずに決めておく
- Google Analyticsなど外部サービスのアカウント、タグの管理
- Web制作でよく使うツール・サイト集
Community
Author
Topics
- 公開
- 本文更新
- 文章量
- 約56,750字
- 価格
- 3,900円