動画の再生終了後に動画を非表示にしてコンテンツを表示する
昨今では多くのWebサイトで動画が使われており、Webページにアクセスした時にファーストビューで動画が流れるサイトもよく見かけるかと思います。 Webページにアクセスした時にはじめに動画が流れて、動画再生の終了時に動画がフェードアウトし、そ...
続きを読む>>
昨今では多くのWebサイトで動画が使われており、Webページにアクセスした時にファーストビューで動画が流れるサイトもよく見かけるかと思います。 Webページにアクセスした時にはじめに動画が流れて、動画再生の終了時に動画がフェードアウトし、そ...
続きを読む>>
Web制作においてサイトの見栄えに影響を与えるフォントサイズの指定では、pxやem、rem、%といったいろんな単位を使った経験があるでしょう。px単位は昔からよく使われていた単位でありますが、ブラウザのフォントサイズはユーザーが変更可能なた...
続きを読む>>
WebデザインやWeb制作技術を学ばれている方は、HTMLでは意味付けしていくタグ、CSSではスタイルを適応させるためのプロパティや擬似要素、擬似クラス、そして関数など沢山のことを覚えて利用していく必要があります。ここでは、Web制作を学ぶ...
続きを読む>>
CSSでは関数を利用していくことで、通常のプロパティの指定だけではできないことができたり、効率的にスタイルを適応させることができます。 CSSも年々進化を続け、とても便利な関数が続々と追加される中、ここではレスポンシブ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...
続きを読む>>