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

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

Webサイトのコンテンツとして、とても重要な写真やイラストなどの画像。綺麗な写真をどのように見せて、写真コンテンツとして情報を伝えるか。写真もデザインの1つです。 アイコンやイラストなどの画像もそうですが、写真の画像も綺麗な画質でWebに載...
続きを読む>>

Webで利用できる画像フォーマットは、昔ながらのJPEGやGIF、PNGとありますが、昨今ではWEBPやAVIFといった軽量な画像形式も使われるようになり、徐々にではありますが多くのWebブラウザに対応してきました。 さらに、2019年ごろ...
続きを読む>>

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