Webエンジニアのブログ

多くのデバイスに対応させるWebサイトの制作では、CSSのメディアクエリを使ってレスポンシブWebデザインを実装していきますが、Sassを使ったWeb制作でも、ベースとなるスタイルの後にメディアクエリを使う、またはネスト（入れ子）でメディア...
続きを読む>>

Web制作でSassを導入してCSSを生成していく中、ディレクトリ構造（フォルダ・ファイル構成）をしっかり作っておくと、Sass(scss)ファイルの管理がしやすくなります。ここでは、Sassファイルを分割管理する方法について、Dart...
続きを読む>>

Sassの書き方も新しい機能が追加されアップデートする中で、Sassのコンパイル方法として、Sass公式がDart Sassを推奨しており、今後はDart Sassを利用していくことになるでしょう。ここではDart Sassを手軽にコンパイ...
続きを読む>>

Webサイトで画像を利用していく中で、使用する画像データの解像度やアスペクト比（縦横比）によっては、 サイズがバラバラだったりして、利用しにくいことがあります。 Webデザインを制作する段階で、AdobeのPhotoshopやXDなどのツー...
続きを読む>>

CSSでデザインを構築していく中でSassを利用していくと、作業効率とメンテナンス性の高いコードを書いていくことができます。Sassでのコードの書き方はいろいろありますが、ここでは「@mixin（ミックスイン）」のコードの書き方についてご紹...
続きを読む>>

CSSコーディングの作業効率を上げることができるSassは、コンパイルするのにGUIツールやコマンド操作といろんな方法がありますが、Visual Studio Codeの拡張機能「Live Sass Compiler」を利用することで、Sa...
続きを読む>>

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

HTMLのvideo要素でWebページに動画を埋め込み、Webサイトを訪問してもらって視聴してもらう方が、ここでしか観れないという希少性から、人の心を引きつけることもできるでしょう。ここでは、Webページに動画を埋め込むHTMLのvideo...
続きを読む>>

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

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