Webエンジニアのブログ

CSSコーディングの作業効率を上げることができるSassは、コンパイルするのにGUIツールやコマンド操作といろんな方法があります。 Visual Studio Codeでは手軽にターミナルやコマンドプロンプトが利用できて、コマンド操作を慣れ...
続きを読む>>

Webサイトでは背景画像やコンテンツとして掲載する画像を使っていく中で、もとの画像素材を加工・編集して利用していくことが多いですが、後でまた編集して更新するようなことがあると手間だったりします。半透明のレイヤーを重ねるような手軽な加工でした...
続きを読む>>

特別な動画コンテンツであれば、YouTubeで公開するのではなく、Webサイトに訪問してもらって視聴してもらう方が、Webサイト意外では公開されていない分、コンテンツの価値を高めることができます。 YouTubeだと限定公開にしてもURLを...
続きを読む>>

Web制作の現場では、日々新しい技術を求められ、CSSでレイアウトを組んでいく中では、効率的かつメンテナンス性の高いコードを書いていくことが必要になってきますが、Sassを使うことで、通常のCSSではできないことができるようになります。 S...
続きを読む>>

Webページ内でページ内リンクを設置し、対象のコンテンツまで移動させる場合には、動きを滑らかにするためにJavaScript（jQuery）を使ってスムーズスクロールを実装するでしょう。 CSSのscroll-behaviorプロパティを利...
続きを読む>>

遅延読み込みについては、Lazy loadingはよく聞くかと思います。img要素やiframe要素では「loading=”lazy”」と、loading属性を付けることで対応できます。 Google Chromeの...
続きを読む>>

Webサイトやブログで画像や動画を使う際、コンテンツの中で綺麗に見せていくには、素材の品質もそうですがアスペクト比も重要な要素になります。 Web制作では画像や動画コンテンツを多くのデバイスに対応していくため、特に動画ですが、アスペクト比の...
続きを読む>>

各デバイスに対応したレスポンシブWebデザインを構築していく中では、可変に対応した要素の幅をpxやemのほか、パーセントの単位もCSSで指定していくこともあります。 ここでは、要素を横並びにするレイアウトで少しつまづきそうなパーセントの指定...
続きを読む>>

Webページのデザインを作成する中で、見出しや文章のコンテンツに対して、画像や動画をフルスクリーンまたはワイドに表示させるデザインを採用することもあるでしょう。 スマートフォンやタブレット端末でも、画像を大きく表示するほうが、コンテンツに関...
続きを読む>>

昨今、多くのデバイスやブラウザの対応によって、Webサイトも目に優しいと言われているダークモードのデザインが求められるようになりました。 ダークモードとなると暗い色調のデザインをCSSで用意していくことになるので、既存のWebサイトでは対応...
続きを読む>>