我らフロントエンド
技術書典7で頒布された「すぐに現場で使えるフロントエンドTips集」のダウンロード版です。 現役フロントエンドエンジニア4名が、現場で頑張るエンジニアのために執筆。実際に業務で使っている小技をまとめています。 全ページ数のうち約半数がコードになっており、具体的なコードを載せて、解説と使い方を補足した実践向けな内容です。 技術同人誌（PDF） / 59ページ / ￥1,000
こんなエンジニアにおすすめ
・新人フロントエンドエンジニア ・CSS好き ・JavaScript好き ・CSS苦手だけどデザイン再現しなきゃいけない ・JavaScript苦手だけどアニメーション実装しなきゃいけない ・他のエンジニアがどういうコード書いているのか気になる
目次
■はじめに ■スタイルシート CSS疑似要素を使いこなす CSS疑似要素:not()を使いこなす 任意の場所で改行するためにdisplay: inline-blockを使う 画面サイズによってフォントサイズを可変にする メディアクエリをSassのmixinにしておくと便利 CSSだけで「×」ボタンをつくる CSSで三角形を作る CSSだけで「もっと見る」ボタン (使い切り)を実装 CSSだけで画像がフェードインしてくるスライドショーをつくる currentColorで文字色と同じ色を手軽に指定 複数行inline対応のアンダーライン :nth-child:nth-last-childのあわせ技で要素数ごとにレイアウト切替 CSSだけでエリア全体を覆うリキッドの<video>を設置 ■インタラクション CSS transitionでお手軽アニメーション スクロールのタイミングで要素をアニメーションさせる ページ遷移時にアニメーションを挟む ■JavaScript Viewportの指定を変更して画面の表示を切り替える モーダルを開いている時に背景がスクロールしないようにする ■アクセシビリティ SVGを読み上げ対応 ■開発環境 npm開発環境が起動できないときとりあえず試すこと ■著者プロフィール