Webエンジニアのブログ

WebデザインをCSSで構築していく中で、複数の要素に同じスタイルを適応させる場合には、対象の要素があるだけ記述が増えてごちゃごちゃすることがありますが、:is疑似クラス関数を利用することで、複数のセレクタへのスタイルを簡易的に書いていくこ...
続きを読む>>

グローバルナビゲーションや文章内などのテキストリンクなどで、ユーザーの目を引くような下線アニメーションを実装することもあるでしょう。 マウスカーソルを合わせた時の処理として、PCの表示で有効な:hover擬似クラスを使った効果は、CSSのみ...
続きを読む>>

Web制作でデザインを構築していく中、CSSではCascade Layers「@layer」を使ったスタイルの定義ができるようになりました。 Cascade Layers（カスケードレイヤー）とは、カスケード（cascading：スタイルの...
続きを読む>>

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

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

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

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

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

CSSのレイアウト構築で便利なFlexbox。とくに横並びのレイアウトではよく利用され、横並びになった要素同士も高さが揃ってくれます。 しかし、コンテンツの量の違いで、横並びの要素とコンテンツの高さと見た目が揃わないこともあります。Webデ...
続きを読む>>

レスポンシブWebデザインで、背景色を敷いた要素とテキストの重なり具合においては、リキッドデザインのようにWebブラウザの幅に合わせて可変する場合には、要素同士の重なり具合に合わせてデザインを調整していくことも出てきます。また、画像の上に重...
続きを読む>>