仕事今年はいろいろなことがあったので、あっという間に1年が過ぎていきました。昨年以上の数の仕事があり、コロナが流行の中、外部に常駐して1ヶ月ほど仕事をするといったこともしました。外部の会社で働くのは初めてだったのですが、関わった人皆本当にいい人ばかりで、やりやすかったです。 今年は技術的な側面だけでなく、若手の育成、ツール導入による課内のクリエイティブ全体の効率化に主体的に取り組みました。 具体的には社内のコーディングガイドラインやコーディングテンプレートの整備、デザイン
画像などを遅延読み込みをするlazyloadを使った手法をご紹介します。 今回はlazyloaderの中でも軽量なlazysizesというライブラリを使った方法で話します。 1.ライブラリを読み込ませる <script src="lazysizes.min.js" async></script> lazysizes.min.jsを読み込ませる。lazysizesの実行タイミングをwindowのloadイベント時に移したい場合は、ライブラリの記述を変更する必要があります。
重いデータを読み込むとローディング画面が欲しくなりますね。 ローディング画面実装の備忘録をサンプルコード付きでまとめました。 1.ページ読み込み時にはローディング画面を表示 2.全て読み込みが終了するとローディング画面を消す サンプルコード <div class="js-loading"></div> .js-loading { display: flex; align-items: center; justify-content: center; position:
テーブルのセル（th）の横幅を固定幅で指定すること多いですよね。 固定幅で指定をしてると文字数によっては改行が目立って、見にくかったりといったことがあると思います。 テーブルのコーディング 普通に組んだ時のHTMLとSASSです。 <div class="c-table-container"> <table class="c-table"> <tbody> <tr> <th>見出し</th> <td>テキスト<
リキッドさせるみたいなコーディングで悩んだことってありますよね。 デザイナーが1600pxのカンバスサイズで作ったものをそのままのフォントサイズでコーディングするとノートPCなどの小さい端末で見たときにフォントサイズが大きすぎたり、デザインが崩れます・・。 font-sizeをvwで指定するやり方がありますが、ブレイクポイントの調整がめんどくさく効率的ではありません。 remでフォントサイズを指定 rem指定は主流ですよね。remで指定しているサイトが多いかと思います。
