これでCSSのみで実装できる! スクロール方向に合わせてヘッダを非表示・表示する方法を解説

Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。

これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。

スクロール方向に合わせてヘッダを非表示・表示する方法を解説

Solved by CSS Scroll-Driven Animations: hide a header when scrolling down, show it again when scrolling up.
by Bramus!

続きを読む

最強少女! 新作の日本語フリーフォントが登場、強気な女の子をイメージしたヤンチャなフォント -ストロングガール

ninaSchoolgirl」「になロマン」「くちばしフォント」など、楽しくてかわいいフリーフォントをたくさんリリースされている213ちゃんから、新作フリーフォントがリリースされました!

今回は、最強少女フォント「ストロングガール -nina-Strong-girl」
作者によると、「素直になれない尖ってしまう強気な女の子のヤンチャなフォント」とのこと。マンガや同人誌のセリフにもぴったりです。

ストロングガール -nina-Strong-girl

フリーフォント:nina-Strong-girl_font【商用可】
※漢字は、レゲエOneによる作字です。

続きを読む

便利なJavaScriptライブラリが登場! CSSのプロパティの値の変更を検出できる -CSSStyleObserver

DOMツリーに加えられた変更を検出する機能としてMutationObserverが便利ですが、CSSのプロパティの値は検出できません。

最近ではCSSアニメーションを使用したWebサイトやスマホアプリも増え、プロパティ値の変更に応じてコールバックを実行する必要があるかもしれません。CSSのプロパティの値の変更を検出するための新しいライブラリを紹介します。

CSSのプロパティの値の変更を検出できる新しいライブラリ- CSSStyleObserver

Introducing @bramus/style-observer, a MutationObserver for CSS
by Bramus!

続きを読む

デザインの疑問がこれで解ける! プロのデザイナーとして必要な知識が得られる良書 -デザインの基本ノート[第2版]

※本ページは、アフィリエイト広告を利用しています。

プロのデザイナーに必要な知識を身につけたい、デザインのしっかりしたテクニックを学びたい、著作権やデザイン料の算出方法はどうすればいいの。

そんなデザインの疑問を一気に解決する、プロのデザイナーとして必要な知識をていねいに詳しく解説したお勧めの良書を紹介します。

デザインの基本ノート[第2版]

続きを読む

CSSでラジオボタンとラベルの間にスペースを加えると、関連付けがうまくいかないときの対応方法

ラジオボタンとラベルの間にクリックしても反応しない謎スペースができてしまったことはありませんか?

通常であれば、フォームコントロールとラベルの関連付けが機能し、クリックするとラジオボタンが選択されますが、謎スペースは無反応です。なぜ謎スペースができてしまったのか、そしてこの問題を解決する方法を紹介します。

ラジオボタンとラベルの間のスペースをクリックしても反応しないときの対応方法

Sanding UI
by Jim Nielsen

続きを読む

商用利用も無料! これはすぐに使いたくなる、美しい丸ゴシック体のかわいいフォント「とよまーる」

私のお気に入り「かもめ明朝(紹介記事)」をはじめ、「築豊35ポイントゴチック」「トレゴ」「新レトロ丸ゴシック」「築豊明朝」など、オールドスタイルの日本語フリーフォントをリリースされている文字魚さんから新作フォントがリリースされました!

今回リリースされた「とよまーる」は、丸ゴシック体のかわいいフォント。単に角が丸いだけでなく、丸ゴシックの柔和さをフォントのデザイン全体で表現されています。通常版(有料)とフリー版(無料)の2種類があります。

とよまーる

【販売記念セール】とよまーる(フリー版あり)

続きを読む

CSSでdisplay:none;からアニメーションができる! @starting-styleがすべてのブラウザにサポートされました

CSSの@starting-styleが先日リリースされたFirefoxでもサポートされ、これでデスクトップ・スマホのすべてのブラウザでサポートされました。

@starting-styleはアニメーション化させる要素に対して開始時のスタイルを設定でき、display: none;からアニメーション化する要素に対して必須となります。

@starting-styleがすべてのブラウザにサポートされました

Now in Baseline: animating entry effects
by Una Kravets

続きを読む

Kindle本、読書の秋特大セールが開催! セール初登場もあり、デザイン・Web制作・イラストの良書がお買い得です

※本ページは、アフィリエイト広告を利用しています。

Kindle本、読書の秋特大セールが開催されています。
Webや紙のデザイン、HTML/CSSなどWeb制作の解説書、ディレクションやマーケティング、同人誌・絵師さん向けのイラストの良書がたくさんセール対象です!

セール期間は、10/10まで。

スクロールバーを見ると分かると思いますが、かなりの数がセール対象になっています。対象のKindle本は最安値(当方調べ)、セール初登場もあり、久しぶりのセール対象もあり、貴重なこの機会をお見逃しないように。

Kindleセールの対象本

【最大70%OFF】Kindle本(電子書籍) 読書の秋セール

続きを読む

top of page

©2024 coliss