コハム

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

2024-06-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を使うことができます。この機能は、長…

©コハム