教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α

教材だけでは分からない、案件でよく要求される細かいコーディングのテクニック30選 + α

フリーランスのフロントエンドエンジニアとして6年間、サイト制作やWebアプリケーション開発の案件に携わってきた中で「これは伝えたい」と思ったコーディングのテクニックをまとめました。 今回はHTML/CSSに関することに絞っています。特に教材にはあまり載っていなかったり、知らないと検索行為に結びつきにくいものを優先的に集めています。 ある程度HTML/CSSは勉強していてゆくゆくは案件を取りたい、あるいは徐々に取り始めているという方にもっともおすすめです。

Chapters
Chapter 01無料公開

はじめに

Chapter 02無料公開

サイズ編

Chapter 03無料公開

- 要素の縦横比を維持する(頻出度:★★★)

Chapter 04

- 要素のサイズを完璧にレスポンシブにする(頻出度:★★★)

Chapter 05無料公開

位置、余白編

Chapter 06無料公開

- 均等に並ぶ要素間の余白をスマートに付ける(頻出度:★★★)

Chapter 07

- 中央揃えに困ったらとにかくflexboxを使う(頻出度:★★★)

Chapter 08

- liタグの先頭の点の位置と改行位置を調整する(頻出度:★★☆)

Chapter 09

- liタグの先頭の点(marker)をカスタマイズする(頻出度:★★☆)

Chapter 10

- コンテンツ量が少ないページでも1画面分の高さを持たせる(頻出度:★★☆)

Chapter 11無料公開

文字、文章の調整編

Chapter 12無料公開

- 長いアルファベットの文字列でも改行させる(頻出度:★★☆)

Chapter 13

- 3点リーダーで長い文章を省略する(頻出度:★★☆)

Chapter 14

- 改行を考慮したline-heightの指定(頻出度:★★☆)

Chapter 15

- line-heightの余白を打ち消す(頻出度:★★★)

Chapter 16

- inline-blockで改行を制御する(頻出度:★★☆)

Chapter 17

- letter-spacingを使った時のズレ(頻出度:★★☆)

Chapter 18

- フォントのちらつきをできるだけ改善する(頻出度:★★★)

Chapter 19

- フォントを日本語/英語/数字などで出し分ける(頻出度:★★☆)

Chapter 20

- 文字のカーニング(文字詰め)を調整する(頻出度:★☆☆)

Chapter 21

- 部分的に使われている特殊なフォントはアウトライン化してsvg画像として使う(頻出度:★★★)

Chapter 22

- 文章を両端揃えする(頻出度:★☆☆)

Chapter 23

- 文字の縦書きを行う(頻出度:★☆☆)

Chapter 24無料公開

画像の調整編

Chapter 25無料公開

- どんな画像が投稿されても崩れないような実装(頻出度:★★★)

Chapter 26

- 画像の圧縮(頻出度:★★★)

Chapter 27

- 画像の縮小(頻出度:★★★)

Chapter 28無料公開

機能編

Chapter 29無料公開

- 画像のlazy loading(頻出度:★★★)

Chapter 30

- border-radiusの楽な書き方(頻出度:★★☆)

Chapter 31

- メニューボタンなどのクリック、ホバー範囲を使いやすくする(頻出度:★★★)

Chapter 32

- フォームの項目のクリック範囲を使いやすくする(頻出度:★★★)

Chapter 33

- 外部ドメインは別タブで開くようにする(頻出度:★★★)

Chapter 34

- 電話番号/メールアドレスをリンク化し、クリックで電話アプリ/メーラーを起動できるようにする(頻出度:★★★)

Chapter 35

- メニューが開いている時に裏のスクロールを止める(頻出度:★★★)

Chapter 36

- ページ内リンクはスムーススクロールにしておく(頻出度:★★★)

Chapter 37無料公開

付録

Chapter 38無料公開

- WordPressに最適化したサーバーを選定する

Chapter 39

- OGPの情報を忘れずに決めておく

Chapter 40

- Google Analyticsなど外部サービスのアカウント、タグの管理

Community
Author
hideki_climax

フリーランス6年目。「世界一初心者に優しい」。 初心者が5年後も続けられるような発信をします。 個人ブログ→http://itokoba.com

Topics
公開
NEW
文章量
54,398
価格
3,000