サイト構築 -実装
Macでフォント管理におすすめのアプリ「Typeface App」、M1/M2完全対応、強力なフォント管理機能を備えた優れもの
Post on:2023年3月2日
M1/M2のmacOSでフォント管理におすすめのアプリ「Typeface App 3」を紹介します。Appleシリコンをネイティブサポート、macOS Ventura対応、フォントを1クリックで有効化・無効化でき、強力な […]
CSSの知っておくと便利なフクロウセレクタの使い方！ 要素を積み重ねる時のマージンにかなり便利です
Post on:2023年2月28日
兄弟要素を積み重ねる時、垂直マージンをどのように実装していますか？ 要素を積み重ねる時のマージンは、フクロウセレクタ（* + *）を使うと簡単です。さらに、>を追加することで、マージンが再帰的に与えられるのを防ぎま […]
VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」
Post on:2023年2月27日
HTML, CSS, JavaScript, PHPなどさまざまな言語に対応、コードのネストされたブロックを枠で囲って強調表示するVS Codeの機能拡張を紹介します。 さっそくインストールして使用してみましたが、これは […]
見た目はUIデザインによくある普通のボタン、でも触ると高電圧の電流が流れるエフェクトが美しくてかっこいい
Post on:2023年2月22日
見た目は、角丸の普通のボタン。 ホバーすると、高電圧の電流が流れるようなエフェクトが美しくてかっこいいボタンを紹介します。厨二病心を全力でくすぐられますね！
UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
Post on:2023年2月21日
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じ […]
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
Post on:2023年2月9日
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 […]
プログラミング用フォントとUIデザインのどちらにも使える！ 美しさと読みやすさを兼ね備えたフォント「Martian Mono」
Post on:2023年2月8日
Webデベロッパーとデザイナー向けに、Groteskの人目を引く美学と読みやすさと分かりやすさを追求したオープンソースのフォントを紹介します。 ボタン・フォーム・リストなど、限られたスペースのWebサイトやスマホアプリの […]
最近よく使用されているCSSの実装テクニック！ レスポンシブ対応のフォントサイズをclamp()で超簡単に定義できるツール -clamp() Calculator
Post on:2023年2月7日
フォントのサイズをレスポンシブ対応にする際、最近よく使用されている実装方法がclamp()関数を使用した流体タイポグラフィです。CSSのclamp()関数を使用すると、ビューポートをベースにしてフォントサイズの最小値と最 […]
CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック
Post on:2023年2月2日
ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。 ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表 […]
CSSって難しい！ セレクタ「.a .b .c」と「.a :is (.b . c)」は同じに見えるけど実は違う、ブラウザはセレクタを右から左に読む
Post on:2023年1月31日
CSSの:is()疑似クラスが各ブラウザにサポート（参考: Can I use）されるようになって、1年が過ぎました。使用率も97%を超え、通常の案件に使用している人も多いと思います。 :is()疑似クラスは複数のセレク […]
sponsors
