CSSのtarget擬似クラスでウィンドウの開閉アニメーションを実装する
Webページ内でウィンドウの開閉アニメーションを実装していきたい時には、JavaScriptやJavaScriptのライブラリであるjQueryなど、プログラミングを駆使して実装していくことになりますが、aタグ(アンカー要素)と併用してCS...
続きを読む>>
Webページ内でウィンドウの開閉アニメーションを実装していきたい時には、JavaScriptやJavaScriptのライブラリであるjQueryなど、プログラミングを駆使して実装していくことになりますが、aタグ(アンカー要素)と併用してCS...
続きを読む>>
Webで利用する画像に対して立体感を表現する際は、画像自体にドロップシャドウの視覚効果がなくても、CSSのbox-shadowプロパティを利用して、画像に影をつけて表現することもできます。後から微調整や修正ができたりしますので、CSSで効果...
続きを読む>>
昨今のWebサイトは内容が変化する動的なサイトが多く、CSSで装飾してWebサイト制作していく中、対象の要素を持っているかどうかでスタイルを変更していくこともあります。今後はCSSのみで、CSSの:has()疑似クラスを使うことで、HTML...
続きを読む>>
Webサイトによくあるニュースやお知らせ、ブログ記事投稿の一覧では、見出しの文字テキストが長い場合に、「…」で文字を省略していくこともあります。 文字テキストの省略というと、多くのWebサイトで採用されているWordPressでは、PHPス...
続きを読む>>
Flexboxでは手軽に横並びのレイアウトを構築することができますが、flexアイテムの子要素のコンテンツ量によっては、見た目の高さが揃わないこともあります。ここでは、Flexboxの横並び要素のflexアイテムの見た目の高さを調整する方...
続きを読む>>
レスポンシブWebデザインで、背景色を敷いた要素とテキストの重なり具合においては、リキッドデザインのようにWebブラウザの幅に合わせて可変する場合には、要素同士の重なり具合に合わせてデザインを調整していくことなりますが、CSSのブレンドモー...
続きを読む>>
CSSのbackgroundプロパティでWebP画像を利用する場合、WebPをサポートしていないWebブラウザに対して、サポートしている形式の画像を表示できるように対応する必要がありますが、JavaScriptライブラリ「Modernizr...
続きを読む>>
CSSファイルや、JavaScriptを記述して読み込んでいる外部ファイル(JSファイル)は、半角スペースや改行、コメントなど、無駄を省くことでファイルサイズを軽くすることができます。ファイルを圧縮・軽量化(Minify)することで、ファイ...
続きを読む>>
多くのデバイスに対応させるWebサイトの制作では、CSSのメディアクエリを使ってレスポンシブWebデザインを実装していきますが、Sassを使ったWeb制作でも、ベースとなるスタイルの後にメディアクエリを使う、またはネスト(入れ子)でメディア...
続きを読む>>
Web制作でSassを導入してCSSを生成していく中、ディレクトリ構造(フォルダ・ファイル構成)をしっかり作っておくと、Sass(scss)ファイルの管理がしやすくなります。 Sassを複数ファイルとして分割管理することで、編集する箇所...
続きを読む>>