マガジンのカバー画像

WEB&UI

40
運営しているクリエイター

#css

【CSS】背景だけにブレンドモードを適用する方法(mix-blend-mode)

備忘録までに記載しておきます。いろいろ方法がありますが、一例まで。 プロパティ「mix-blen…

「The State of CSS 2021」で振り返るCSSの近況(後編)

引き続き、昨今のCSS状況を「The State of CSS」にて振り返ります。 以下のサイトに掲載されて…

「The State of CSS 2021」で振り返るCSSの近況(前編)

昨年同様、昨今のCSS状況を「The State of CSS」にて振り返ります。 今年も以下のサイトに掲載…

【CSS】flexboxのgapプロパティが安定して利用可能に

去年(2021年)辺りから安定してきたflexboxのgapプロパティについて、今更ながら振り返ります…

【CSS】流し込み時の「shape-outside」を掘り下げる

CSSにおいてレイアウト目的での使用頻度が激減して久しいfloatですが、雑誌のような文字の流し…

「State of CSS 2020」で振り返る比較的新しいプロパティと人気フレームワーク

最近CSSのアップデートを追えていなかったので、備忘録兼ねてまとめておきます。 State of CS…

WEBで使える明朝を紹介&違いを再確認

WEBサイトを観察していて、以前よりも使われている明朝体のバリエーションが増えている気がしました。 そこで今回は、いくつかの有名明朝体を取り上げて細部を観察、特徴を理解していこうと思います。 前提事項WEBの閲覧環境は日々変化していますが、各OSシステムフォントの明朝体は大概以下の通りです(2020年末現在)。 Windows 10…游明朝/BIZ UD明朝/MS明朝 Mac Catalina…游明朝/ヒラギノ明朝/凸版文久明朝 Android 8,9,10…なし iOS

CSSで“切り抜く”あれこれ (clip-pathとmask-imageの違い)

WEB制作で要素を「特定の形に切り抜く」テクニックについて再確認する機会があったので共有し…

レスポンシブで縦横比を維持するCSSと理由解説

レスポンシブ対応で使う機会が多い「要素の縦横比を維持(正方形等)」。よく使われるCSSテク…

CSS flex-basisとwidthの違い&隙間の作り方

とても便利なCSSのflexboxですが、若干幅の調整にクセがあるなと思ったのでまとめておきます。…

CSSの色・画像・背景関連を掘り下げる

引き続き「HTML5プロフェッショナル認定試験」対策を兼ねた、多くを引用した個人の勉強ノート…

CSSの変形関連を掘り下げる

引き続き「HTML5プロフェッショナル認定試験」対策を兼ねた、多くを引用した個人の勉強ノート…

CSSセレクタの細かい部分を学びなおす

引き続き「HTML5プロフェッショナル認定試験」対策を兼ねた、多くを引用した個人の勉強ノート…

現代デザインにも通じるスイススタイル3大原則

以前のように外出先で見つけた良さげなデザイン物を観察することができないため、今日も歴代巨匠の作品について簡単に勉強した内容を共有します。 スイススタイル (国際タイポグラフィ様式) とは 1920年代のロシア、オランダ、ドイツで発祥し、1950年代にスイスで発展したデザイン様式で、芸術運動の一つ。グラフィックデザインに限定したものではなく、様々な芸術や建築に影響を与えたものです。 スイスは多言語国家で複数の言語を併記する必要があります。こうした文字表記の複雑さに対する解決