サイト構築 -実装
これは覚えておきたい！ CSSの三角関数で斜めのレイアウトを実装するテクニック
Post on:2023年4月17日
ヘッダやコンテンツの区切りを斜めにしたいとき、どのように実装していますか？ CSSの三角関数が主要ブラウザのすべてにサポートされたことで、今まではかなり複雑なCSSやJavaScriptが必要だった斜めのレイアウトがシン […]
UIデザインに必須の16の論理ルール！ デザインは細部のちょっとした作り込みが使いやすさを決める
Post on:2023年4月13日
UIデザインはシンプルで論理的なルールを理解することで、情報に基づいたデザインの意思決定を効率的におこなうことができます。UIデザインをより使いやすく改善する16の論理ルールを紹介します。 長い記事なので、時間がある時に […]
Adobeユーザーに朗報！ 日本語フォントが650種類超えに、Adobe Fontsで使用できる日本語書体一覧のPDF 2023年最新版
Post on:2023年4月12日
フォントの日（4/10）に、Adobe Fontsで使用できる日本語フォントが増えました！ 今回のアップデートでは、SCREEN GAがパートナーに加わり「ヒラギノフォント4書体」、清和堂から「清和堂明朝 L」、フォント […]
ユーザーのインタラクションを伴うさまざまなUIコンポーネントをCSSで実装できる軽量フレームワーク -Ellegant CSS
Post on:2023年4月10日
ハンバーガーメニューを使用したスマホ用のナビゲーション、アニメーションで表示されるモーダル、要素を表示・非表示するトグル、要素を切り替えるスイッチなど、ユーザーのインタラクションを伴うUIコンポーネントをCSSで実装でき […]
Web制作者は知っておくと便利！ ブラウザにすでにサポートされているCSSの新機能を使ったテクニックのまとめ
Post on:2023年4月6日
CSSのコンテナクエリ（@container）、カスケードレイヤー（@layer）、スクロールスナップ（scroll-snap）、アスペクト比（aspect-ratio）、論理プロパティ（inset-inline）など、 […]
VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding
Post on:2023年4月5日
VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りた […]
AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
Post on:2023年4月4日
AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と […]
CSSのfont-familyの書き方のまとめ、スマホ・デスクトップの各最新OSにインストールされているフォントを使用 -Modern Font Stacks
Post on:2023年4月3日
iOS, Android, macOS, Windows, Linuxの各最新OSにデフォルトでインストールされているフォントをCSSで使用するときに、font-familyにどのように定義するとよいのかが分かるMode […]
HTMLにsearch要素が追加されたぞ！
Post on:2023年3月29日
先週、HTML Living Standardの仕様にsearch要素が追加されました。 ブラウザへの実装はまだ先になると思いますが、検索フォームを実装する時は下記のようなHTMLを使用できるようになります。アクセシビリ […]
CSSで角丸を美しく実装する方法、相対角丸のテクニック
Post on:2023年3月28日
角丸を外側と内側のパネルに使用した際、違和感を感じたことはありませんか？ 数値的には同じ値の角丸を使用しても、内側の角丸の方が少し大きく見えて、不格好になってしまいます。 この外と内の角丸をバランスよく美しく、CSSで実 […]
sponsors
