CSS基礎
【便利なCSS】clamp・aspect-ratio・min-height・min-width・擬似クラスまとめ
この記事では、日々のコーディングで出番が多い便利なCSSをまとめています。レスポンシブな文字サイズを作るclamp()、画像やカードの比率を保つaspect-ratio、レイアウト崩れを防ぐmin-heightとmin-width、そして要素の条件指定に使う擬似クラスを、コード例つきで紹介します。
ARTICLES
CSS基礎
セレクタ、共通クラス、便利なプロパティなど、保守しやすく崩れにくいCSSを書くための基本と実装例を解説します。
CSS基礎
【clip-path】便利なCSS
この記事では、CSSのclip-pathプロパティを使用したさまざまなデザインパターンの実装方法を説明しています。具体的には、上部斜め線、下部斜め線、上下部斜め線、三角形、波状の形状が含まれます。
CSS基礎
テキストのくり抜きmix-blend-mode: screen
mix-blend-mode: screen;はCSSプロパティの一つで、HTML要素のブレンドモード（色の混合方法）を指定する際に使用します。screenはそのブレンドモードの一種で、背景となる色と混合してより明るい色を生成します。Photoshopやその他の画像編集ソフトウェアで見られる「スクリーン」ブレンドモードと同様の効果があります。今回はこちらのプロパティを使用し、テキストをくり抜き動画を表示させたいと思います。
CSS基礎
デザインの微調整に便利なプロパティoverflow-x: scroll並びにletter-spacingの活用
ウェブ制作では、様々なデバイスに対応するために、レスポンシブ対応で調整します。テキストが一部だけ長くなり、そのために全体的なデザイン崩れが発生することを防ぐために調整する便利なプロパティが存在します。そのようなものを紹介していきます。
CSS基礎
common.cssの作り方｜再利用できるCSS共通クラスと運用上の注意点
Web制作では、事前に使用するクラスを共通クラスとしてまとめておくことで、作業の効率化や記述ミスの防止ができます。一般的に、それらのクラスはcommon.cssというファイルにまとめられることが共通の認識とされています。今回はそのcommon.cssを公開いたします。ぜひ活用してみてください。
CSS基礎
セレクタの種類(子孫セレクタ、子セレクタ)クラスセレクタとの違いについて
セレクタの種類（子孫セレクタ・子セレクタ）について、それぞれの意味を理解しましょう。 CSSのセレクタは、「どの要素にデザインを適用するか」を指定するために使用します。 特に子孫セレクタと子セレクタは実務でも非常によく使用するため、違いを理解して使い分けることが大切です。