Webエンジニアのブログ

マウスカーソルを合わせた時の処理として、PCの表示で有効な:hover擬似クラスを使った効果は、CSSのみで実装することができます。また、スクロール時のアニメーションでしたら、スマートフォンやタブレット端末で効果的です。ここでは、hover...
続きを読む>>

Web制作でデザインを構築していく中、CSSではCascade Layers「@layer」を使ったスタイルの定義ができるようになりました。@layer規則でCSSの優先順位をレイヤー（層、階層）で管理していくことができます。...
続きを読む>>

Webデザインのレイアウトでは、コンテンツを画面の中央に配置したり左右中央寄せや上下中央寄せなど、要素の配置を調整していくことはよくあります。 CSSで要素の配置を調整する方法としては、Flexbox（フレックスボックス）やGrid Lay...
続きを読む>>

Webページ内でウィンドウの開閉アニメーションを実装していきたい時には、JavaScriptやJavaScriptのライブラリであるjQueryなど、プログラミングを駆使して実装していくことになりますが、aタグ（アンカー要素）と併用してCS...
続きを読む>>

昨今のWebサイトは内容が変化する動的なサイトが多く、CSSで装飾してWebサイト制作していく中、対象の要素を持っているかどうかでスタイルを変更していくこともあります。今後はCSSのみで、CSSの:has()疑似クラスを使うことで、HTML...
続きを読む>>

Webサイトによくあるニュースやお知らせ、ブログ記事投稿の一覧では、見出しの文字テキストが長い場合に、「…」で文字を省略していくこともあります。 文字テキストの省略というと、多くのWebサイトで採用されているWordPressでは、PHPス...
続きを読む>>

Flexboxでは手軽に横並びのレイアウトを構築することができますが、flexアイテムの子要素のコンテンツ量によっては、見た目の高さが揃わないこともあります。ここでは、Flexboxの横並び要素のflexアイテムの見た目の高さを調整する方...
続きを読む>>

Webデザインの1つとして重要な、写真やイラストなどの画像の読み込み。PCやタブレット端末、スマートフォン等のデバイス幅や、Retinaディスプレイでの表示のほか、Webブラウザで対応しているWebP等の画像フォーマットなど、HTMLで画像...
続きを読む>>

Webで利用できる画像フォーマットは、昔ながらのJPEGやGIF、PNGとありますが、昨今ではWEBPやAVIFといった軽量な画像形式も使われるようになり、さらにはJPEG XL（.jxl）という画像フォーマットも開発が進められています。こ...
続きを読む>>

Webサイトの各ページのURLの末尾にある拡張子。表示があったり表示がないWebページがあったり気になったことはあるでしょう。Webに詳しい方は、どの言語でどのように作られているかがだいたい想像できますが、この拡張子は特に表示させる必要がな...
続きを読む>>