マガジンのカバー画像

WEB&UI

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

#Webデザイン

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

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

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

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

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

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

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

WEBサイトを観察していて、以前よりも使われている明朝体のバリエーションが増えている気がし…

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

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

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

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

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

とても便利なCSSのflexboxですが、若干幅の調整にクセがあるなと思ったのでまとめておきます。 flexboxとはCSSのflexboxに馴染みが無い方や復習したいかたはこちらをぜひ。横並びをもちろん、レイアウトをフレキシブルに組む優れものです。 こうしてflexの時に各要素の幅設定に使える、flex-grow、flex-shrink、flex-basisが若干ややこしいので掘り下げます。 flex-growとflex-shrink どちらも正の整数値(1,2,3等

WEBデザイン観察-Fender(ギターブランド)

以前行っていた目を引く印刷物の観察を、WEBサイトでも行っていきます。WEBでは配置やサイズの…

UI制作で大切にすべき7つのこと

UI制作における原則改めて整理していて、多くの場所で語られている「よいUIであるために必要な…

ポートフォリオ制作の進め方と考え方

これまでの制作キャリアで作ってきた作品をポートフォリオにまとめて製本しました。 作る上で…

新UIトレンド「ニューモーフィズム」に見るデザインの過去と今後

WEBサイトを含むUIのトレンドを掘り下げ、新UIトレンド「ニューモーフィズム」についても考察…

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

以前のように外出先で見つけた良さげなデザイン物を観察することができないため、今日も歴代巨…

ブラウザで異なるCSS点線の対処

少し前に思い出して調べ直した、CSSで点線を描写する際の対処方法を共有しておきます。 borde…

pythonで全JPEG画像のExif情報を消す

pythonでちょっとしたツールを作ることが趣味みたいになってきていますが、今回も作りました。gulp(タスクランナー)でできそうですが、しっくりくる情報がなかった&python慣れのため作成。 Exif自体についてやその他の対処方も少し記載したので参考まで。 (背景)撮影写真の「カメラの向き」が、imgタグ表示に支障スマホやデジタルカメラで撮影したJPEG画像には「Exif情報」という撮影時の記録が含まれています。この情報には「カメラの向き」も含まれており、問題は下記の厄