Webエンジニアのブログ

昨今、多くのWebサービスやソーシャルメディアが生まれる中、プライベートで楽しんだりビジネスとして活用したりと、さまざまな使い方をしていくでしょう。こうしたメディアで発信する情報は、運用しているWebサイトに埋め込むこともできます。 企業サ...
続きを読む>>

CSSも年々アップデートされる中、Media Queries Level 4ではRange型が扱えるようメディアクエリの構文が拡張されました。デバイス幅の範囲はこれまでのmin-widthやmax-widthの他、比較演算子を利用した範囲指...
続きを読む>>

:is疑似クラス関数はセレクタのリストを引数として、セレクタのいずれかと一致する要素にスタイルを適応させます。セレクタのリスト化することで、複数のセレクタ指定が短いコードで出来ます。ここでは、同じような擬似クラスの:where疑似クラス関数...
続きを読む>>

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

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

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

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

Webで利用する画像に対して立体感を表現する際は、画像自体にドロップシャドウの視覚効果がなくても、CSSのbox-shadowプロパティを利用して、画像に影をつけて表現することもできます。後から微調整や修正ができたりしますので、CSSで効果...
続きを読む>>

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

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