Sass、別に言うほどいらない説
Web制作 web制作の領域では、主にLPやコーポレートサイトを開発することになります。 LPや小規模のコーポレートサイトでは恩恵が少ない LPや小規模のコーポレートサイトにおいては、Sassを使うメリット以上にデメリットの方が大きいと思っています。 そもそもSassの利点としてよく挙げられるのは、 セレクタのネスト（入れ子）ができる 変数が使える mixinが使える ファイル分割ができる 中括弧がいらない などでしょうか。 上の機能があることによって色やフォントの管理が一元化されたり、頻出のプロパティ群をまとめて使い回しやすくしたりすることが実際の開発上における利点です。 一方でデメリットとしては 設計/管理工数がかかる 開発環境を用意するのがやや面倒 などが挙がると思います。（一回設定を構築してしまえば使いまわせば良いのかもですが。） LPなどにおいては、単純にメリットの部分の恩恵があ
たったの一行でサイトの読み込み速度を実質10倍以上にする方法
ホームページはできれば読み込みが速い方が良いですよね。特にLPのようにユーザーに直接商品を訴求するようなページではなるべく離脱率を下げる工夫がしたいところです。その一つとして読み込み速度はとても重要です。 一方でLPは使われる画像の数が多く、圧縮を駆使しても読み込みに一定の時間がかかってしまいます。 そこで、まずは最初に人の目に見えるファーストビューの速度を上げることを考えます。 その際に重要なポイントとして「background-imageに指定した画像はimgタグの画像の読み込みより順番が後になる」という仕様があるようです。ファーストビューにbackground-imageを使うケースはよくありますが、imgタグの画像が多いほどその読み込みが遅れてしまい表示に時間がかかるのです。 よってそれを解決しましょう。
Markuplintを使って高品質なHTMLコーダーになる
こんにちは。今回はMarkuplintというHTMLリンターについて紹介します。入れるだけで自分のコードの間違いや改善できるところを指摘してくれて、かつ改善方法まで教えてくれる素晴らしいツールです。 存在を知ったのは去年の後半でしたが、しばらく使ってみたところ本当に効果を感じました。絶対に入れた方がいいです。 概要 MarkuplintはHTMLの構文をチェックし、間違いがあればエラーを出してくれる上に解決方法もある程度教えてくれるツールです。VSCodeの拡張機能としても利用が可能です。エラーがあると赤の波線で表示され、ホバーすると問題の詳細が表示されます（下画像）。 このように、名前の通りマークアップ（要はHTML）をLintしています。 プログラミングの世界で「Lint」というと、コードの構文が間違っていないか、エラーの原因になりうるコードがないかをチェックすること言います。それを行
レスポンシブ対応する時に、どうしても綺麗に要素が収まらない時のほぼ完璧な対処法
clamp(下限, デザインファイル上のサイズ / アートボードの横幅 * 100vw, 上限); 例） 横幅375pxのアートボード上で30pxの文字 font-size: clamp(24px, 30 / 375 * 100vw, 30px) 例） 横幅1440pxのアートボード上で650pxの画像 width: clamp(0px, 650 / 1440 * 100vw, 650px) clampという見慣れない関数を使っています。後ほど詳しく説明します。 デモ このデモでは文字と画像部分に上記のサイズ調整を施しています。 解説 上記の計算式でやろうとしているのは、どの画面幅になっても比率を維持することです。比率が維持できているのなら画面幅が大きかろうが小さかろうが絶対に崩れません。 そこで比率が維持される計算式を考えます。画面幅に対してどのくらいか、が計算できれば良いですね。 よっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
