コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

2024-01-01から1年間の記事一覧

パンくずリストの地味さに別れを。パンくずリストのデザイン例45選

CSS

パンくずリストのデザインアイデアを45選ご紹介します。 Pure CSS3 breadcrumb navigation, pixel perfect Collection - Breadcrumbs - Сomponent - 4ID Simple "transform: skew" breadcrumb Pure CSS3 breadcrumb navigation Flat CSS3 Breadcrumb Refacto…

CSS色指定で地獄を見た人は絶対使うべし!currentColorで色をまとめてキレイに統一する3つの裏技

CSS

Master Consistent Styles with CSS currentColor: 3 Powerful Use Cases 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 currentColorを使ってCSSの色のスキームを一貫して維持するのに苦労していませ…

HTMLクラス命名の重要性:コードの読みやすさとメンテナンス性に直結する命名の大切さ

How should class naming be in HTML? — Clean Code. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 多くの開発者は開発フェーズでネーミングに多大な時間を費やすことがあります。実際、場合によって…

Atropos.jsで実現する、もっとスクロールしたくなるWebデザイン

Exploring The Creative Potential Of Atropos.Js For Web Design 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 デザイン愛好家の皆さん、気を付けて乗ってください!私たちは、Webデザインにおける無…

インパクト大!View Transition APIによるページ遷移の実装例

View Transition API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 View Transition APIは他ページへの遷移にアニメーション効果を適用するCSSです。 2024年秋に予定されているiOS18に搭載されるSafa…

メディアクエリはもう古い?CSS数学関数やコンテナクエリによる次世代のレスポンシブ対応とは?

CSS

Beyond CSS Media Queries 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 メディアクエリの問題点 メディアクエリの問題点 問題1: ビューポート中心主義 問題2: 管理が困難 問題3: それほどレスポンシ…

こんなことできるって知ってた?HTMLだけでできること21選

21 HTML Tips You Must Know About 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 リンクの作成 展開・折りたたみ可能なコンテンツ 意味のあるHTML要素の活用 フォーム要素のグループ化 ドロップダウ…

2024年のカラートレンドはこれだ!流行中のカラースキーム6選

Website Design Trends 2024: Colours 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 2024年のウェブサイトデザインのトレンドである鮮やかな色使いの世界をご紹介します。退屈なデザインにさよならを…

HTML&CSS&Javascript初学者は必携!「1冊ですべて身につく」シリーズ

※本記事はアフィリエイトリンクが含まれています。 Webデザイン初学者にはピッタリの2冊をご紹介します。 HTML&CSSとJavascriptの基礎知識が2冊で身につきます! 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 Manaさんが書いたやさしい入門書 HTMLと…

最新のHTMLではスイッチが進化!ネイティブHTMLによるスイッチインターフェイスの実装方法

Switching It Up With HTML’s Latest Control 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに Webは、HTMLの要素を取り入れ、見た目、動作、感触を完全に異なるものに変換することに慣れ親し…

日本の「弁当箱」がヒントに!?UIデザインの新潮流【BENTO】を探る

Discover Bento Design: The Emerging UI Trend for 2024 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 はじめに 2024年、ユーザーインターフェイスデザインの世界は、絶え間ない変革の時代の一部と…

スマホのロックをJavascriptで防ぐ!Screen Wake Lock APIの基本的な使い方

Disable Screen Sleep in JavaScript with WakeLock API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 JavaScriptでスクリーンスリープを防ぐには、WakeLockAPIを使うことができます。この機能は、長…

ドメイン名にどれだけ価値があるか?1億円以上で売買されたドメイン20選

Million dollar domains: The 20 most expensive domain names ever sold 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ※ 原文の$による表記は1$=150円として計算しています。 ドメイン名は一つのウ…

インターフェイスに遊び心と気持ちよさを!UIアニメーション8選

8 UI Animation Trends: Make Your Design Standing Out of Competitors 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 8つのUI アニメーションの例を紹介します。これらはユーザー体験とユーザビリテ…

あなたのCSSの書き方はもう古い!CSS論理プロパティの徹底解説

CSS

A Complete Guide to CSS Logical Properties, with Cheat Sheet 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 この記事では、CSSの論理プロパティについて詳しく解説します。論理プロパティとは何か…

現代のWeb制作では必須のCSS Gridをより深く極めよう!repeat()を使いこなす秘訣

CSS

How to Use CSS Grid repeat() Function 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブサイトがビジュアル的に魅力的になり、さまざまなレイアウトが用意されるようになったため、バランスの取…

やってはいけない:ブラウザのズーム機能で拡大できない文字サイズの指定方法

(Danger!) Preventing Zoom from Changing Text Size 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ブラウザのズームは、アクセシビリティの機能です。これに反するような試みは、無用な問題を引き起…

トレンドの浮遊感を簡単に実装!グラスモーフィズムジェネレーター11選

Top CSS Glass Effect Generators for Web Designers 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 CSSグラスモーフィズムジェネレーターは、Web デザイナーがウェブサイトにガラスのような魅力的な…

端末に合わせて文字が自動調整!今すぐ試したい画期的なCSSのタイポグラフィー術

Responsive Typography Techniques with CSS 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 今日のデジタル時代、ユーザーが様々な画面サイズのデバイスでウェブサイトやアプリケーションにアクセスす…

Copilotを使うならまずは読んでおきたい必読の一冊【Microsoft Copilot for Microsoft 365活用大全】

※本記事はアフィリエイトリンクが含まれています。 Microsoft Copilotはコーディングを支援するMicorsoftのAIです。 VSCodeやWindowsにも組み込まれ、プログラミング作業はCopilotを使うか使わないかで仕事の品質や速さに大きな差が出てくることは確実です。…

【完全無料】【商用利用可】Webデザイナー/UXデザイナー必見!絶賛の無料デザインリソースとUIキット:theme-ui

theme-ui theme-uiは無料で高品質なウェブデザインリソース、テンプレート、UIデザイン素材の配布サイトです。世界中の才能あるデザイナーが作った最高のUIデザイン素材とウェブデザインリソースが見つかります。 すべて無料、すべて商用利用可です。 配布さ…

Tailwind CSSとReactでかんたん実装!華やかなスタガーテキストアニメーションを取り入れたヒーローイメージ

Create Staggered Text Animation with Tailwind CSS and React 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Linearのランディングページに似た、React と Tailwind CSS を使って作成されたスタガー…

ブロックテーマでも楽々フォント管理!GoogleフォントをWordPressで使う最新テクニック

Managing Fonts in WordPress Block Themes 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 フォントは、どんなサイトのデザインにおいても重要な特徴です。WordPressのテーマもその例外ではありません…

Safari17.5で使える新機能をチェックしよう:text-wrap: balance、light-dark()、@starting-styleなど

iOS17.5の配信と同時にSafariも17.5にアップデートされました。 Safari17.5で使用できる新しい機能やバグフィックスをチェックしておきましょう。 引用元: WebKit Features in Safari 17.5 CSS Safari 17.5には、text-wrap: balance、light-dark()カラー関…

SolidJSとReactの徹底比較:パフォーマンス、学習のしやすさ、人気度から選ぶべきフレームワークは?

Solidjs vs. React Comparison – Complete Guide 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 JavaScriptの旅路の岐路に立ち、どのフロントエンドフレームワークを選ぶべきか迷っていませんか? 「ど…

ReactとAngularとVue:どれを選ぶべきか2024年版

React vs Angular vs Vue: Which is Better in 2024? 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ開発の分野が進化を続けるなか、適切なフロントエンドフレームワークを選ぶことが、堅牢でス…

コピペでOK!Tailwindを使用した実用的な1200以上!のコンポーネント集

1200+ Free Tailwind CSS Examples TailWindを使用した実用的で美しい様々なコンポーネントをなんと1200以上も掲載した1200+ Free Tailwind CSS Examplesを紹介します。 カード、フォーム、ボタンなど実用的なコンポーネントがそれぞれ数十種類以上用意され…

2024年の最旬ブルーカラーパレット21選!個性を最大限引き出す配色を見つけよう

20+ Best Blue Color Palettes for 2024 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 2024年の最高のブルーカラーパレット 組織の個性を反映するブルーカラーパレットを探しているなら、2024年のト…

Promise.tryによる同期/非同期処理のエラーハンドリングのベストプラクティス

Promise.try to improve error handling and sync/async interoperability 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 この記事では、JavaScriptのPromiseと同じくらい古い面倒なタスクの現代的な…

モダンJavascriptには必須!ES6で使えるスプレッド演算子を学ぶ

ES6 Spread Operator: Unleashing the Power of Modern JavaScript 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 JavaScriptはかつてはWebページのための単純なスクリプト言語と考えられていましたが…

©コハム