すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナログっぽい雰囲気を出すために、あえてズレているように見せるデザイン手法として使ってます） 一番上のレイヤーに紙っぽいテクスチャを乗せて乗算かける 後ろのテキストはaria-hidden="true"でスクリーンリーダーに読み上げられないようにする （疑似要素でやりたかったけど乗算上手くいかなかった・・） ▼ HTML <div class="hanzure"> <img src="紙っぽいテクスチャ" alt=""> <div class="hanzure01"> <p class="front">版ズレ風の表現</p> <p class="back" aria-hidden="true">版ズ
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
HTMLやCSSには、ユーザーインタラクション（ユーザー操作）を無効化するための方法がいくつか存在します。たとえば、マウスやタッチ操作を無効化したいときはCSSでpointer-events: noneを要素に指定するなど、制御したいユーザー操作によってさまざまです。 カルーセルやモーダルなユーザーインターフェイス（UI）では、非アクティブな要素が操作されないように「画面には表示されているが、あらゆるユーザー操作を受け付けない状態」にしたい場合があります。具体的には、以下のユーザー操作を無効化します。 マウスやタッチ操作を無効化したい テキスト選択を無効化したい キーボードフォーカスをあえて無効化したい 音声読み上げをあえて無効化したい 必要なプロパティや属性を複数指定することが考えられますが、そのようなときに役立つのがinertイナートと呼ばれるHTMLのグローバル属性です。 inert
海外で有名なデザインおしゃれなトグルボタンをコーディングしてみた
FigmaのXアカウントがおしゃれなトグルボタンを公開していて、「コーディング泣かせだ」との声を見かけたので、改めて自分でコーディングしてみようと思い書いてみました。 デザイナに作れよ！って言われれば作るよ。だってぷろだもん。https://t.co/HF6afHhfzm https://t.co/IXl7iufv7v pic.twitter.com/T4x4uV7tKX — ゆひゃ (@zaty_Akiyama) October 14, 2023 元ネタ 参考にしたのはFigmaのこのポストですが、結構有名なデザインで、最初に見たのはこのポストだと思います。 still laughing at this pic.twitter.com/Ny525aAuYH — Joie Chung (@hellojoie) April 28, 2023 このポストの一連の引用や返信を見ると、海外でもっと
各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetのまとめ -Chrome, Safari, Firefox, Edge
Webページを実装する際、そのページを表示するブラウザが各HTML要素にデフォルトでどのようなスタイルが適用されているか知っておくのは大切なことです。 Chrome, Safari, Firefox, Edge 各ブラウザごとのデフォルトのスタイルシート、user agent stylesheetを紹介します。 例えば、p要素にはdisplay: block;が定義されており各ブラウザでmarginの数値が異なります。また、h1要素は単独で使用した場合とsection要素などの子要素で使用した場合ではmarginの数値が異なります。 /* * The default style sheet used to render HTML. * * Copyright (C) 2000 Lars Knoll (knoll@kde.org) * Copyright (C) 2003, 2004, 20
プロトタイピング向けにペライチで最低限のフロントエンドスタックを動かす方法について。 注意: 本番で使わないでください。tailwind は CDN モードで動かしているし、 esm.sh はスクリプトを動的にビルドするのでパフォーマンスは良くないです。 前提 jsconf.jp で色々なツールを使えばそれっぽいバンドルレス実現できる(けどパフォーマンスに難)という話を書きました。 具体的には NativeESM + importmaps + esm.sh 等の組み合わせます。 <script type="importmap"> - HTML: ハイパーテキストマークアップ言語 | MDN ESM>CDN これに、 esm.sh の v135 の新機能を使って tsx をバンドルするのを組み合わせる話です。 esm.sh/run 使い方は簡単。 <!-- esm.sh からランナーをロード
Building a dialog component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. In this post I want to share my thoughts on how to build color-adaptive, responsive, and accessible mini and mega modals with the <dialog> element. Try th
.voo-button:has(svg)]:opacity-0 [&:has(.header-drawer-open)>.voo-button:has(svg)]:pointer-events-none flex items-center gap-x-[30px] max-w-[1182px] w-full mx-auto px-[32px] py-[17px] transition-colors duration-300 rounded-[23px] [&>*:first-child]:mr-[8px] tb:gap-x-[20px] [&_.voo-logo]:w-[38px] tb:[&_.voo-logo]:w-[27px] [&_.voo-logo_svg]:w-[38px] tb:[&_.voo-logo_svg]:w-[27px] tb:px-[26px] tb:py-[19
ウェブブラウザを使ったVJ活動 - hitode909-vj-workshop
ウェブブラウザを使ったVJ活動 2019/11/30 Audiovisual Workshop with TOPLAP Japan at 甲南女子大学 hitode909 はじめに、の前に いまのうちにGoogle Chromeをダウンロード、インストールしておいてください ワークショップ教材はGoogle Chromeで動作確認している Google Chrome ウェブブラウザ はじめに はじめに(15分) 今日のワークショップでやること VJについて、ブラウザについて やってみよう(30分x3で1.5時間) HTMLを書こう VJとして適した形のHTMLを作ろう コントローラをくっつけて操作できるようにしよう おわりに(15分) 今後の進め方 参考になる情報について 自己紹介 hitode909 株式会社はてな アプリケーションエンジニア はてなブログ(ブログサービス)やGigaVi
モーダルダイアログのようなUIには、それが出現している間はダイアログの外の領域が操作不能になっているという慣習があります。ダイアログが取り扱うタスクだけにユーザーを集中させるために、あえてダイアログ以外の操作ができないようになっています。 またモーダルダイアログをはじめとしてディスクロージャーなど、ユーザーの操作に応じて表示と非表示が切り替わるUIもあります。こうしたUIは視覚的には隠れているようでも、実装としては、つねにDOM上に存在しているHTML要素の属性だけを書き換えてレンダリング結果を制御するのが一般的です。 こうしたケースでは、特定の領域を操作できないように実装を行う必要があります。CSSでdisplay:noneかvisibility:hiddenが指定されたHTML要素はそれだけで操作できない状態になりますが、それ以外の方法で非表示になったHTML要素は、利用状況によっては
CSSのボックスモデルの構造をCSSアニメーションで可視化
@use postcss-preset-env { stage: 0 } .stack { display: grid; grid: [stack] / [stack]; perspective: 5000; &:before { content: ""; position: fixed; inset: 0; background: lch(95 0 0); transition: background 2s ease; pointer-events: none; } &:matches(:hover, :active) { &:before { background: lch(15 0 0); } } &:matches(:hover, :active) .card { --bg-opacity: 5%; transition-duration: 2s; transition-timin
Reactでは様々なスタイリングの手法があり、その上に構築されるコンポーネント実装も多くの選択肢があります。 styled-componentsやemotionといった CSS in JSライブラリによるスタイリングや、それらのライブラリ上に構築されたMUIやChakra UIといったコンポーネントライブラリ。一方でTailwind CSSやCSS ModulesなどCSS寄りなスタイリング手法があります。 私自身としてはTailwindを利用し、コンポーネントに関しては自作することが多いです。Tailwind CSSをベースにしたコンポーネントライブラリはいくつかありますが、自分の肌に合うものはありませんでした。 しかし、最近ちょうどいい選択肢と思われるshadcn/uiというものを見つけました。 一言でいうと、カスタマイズ性が高く、使いやすいUIコンポーネント集です。 本記事では、sh
Tailwind CSSにおいて、スタイルの組み合わせを抽象化したいと考えたとき、対処としてはいくつかの方法が考えられる。 もっとも一般的なのは、コンポーネントやパーシャルとして、クラス属性値とHTMLをセットで抽出する方法。 <template> <div> <img class="rounded" :src="img" :alt="imgAlt" /> <div class="mt-2"> <div> <div class="text-xs font-bold uppercase tracking-wider text-slate-600">{{ eyebrow }}</div> <div class="leading-snug font-bold text-slate-700"> <a :href="url" class="hover:underline">{{ title }}</
いくら下にスクロールしても強制的に巻き戻されてしまいます。 こちらが実際に採取したコードです。長いので折りたたみに入れていますが、別に全部読む必要はないです。 採取した HTML <!-- Generated by まとめくす (https://2mtmex.com/) --> <div class="article_mid_v2"> <div id="article_mid_v2"> <script type="text/javascript"> (function(){ var ua = window.navigator.userAgent; var android_reg = /android/i; var android_rand = Math.floor(Math.random() * (100)) + 1; var ios_rand = Math.floor(Math.rand
I first got into web design/development in the late 90s, and only as I type this sentence do I realize how long ago that was. And boy, it was horrendous. I mean, being able to make stuff and put it online where other people could see it was pretty slick, but we did not have very much to work with. I’ve been taking for granted that most folks doing web stuff still remember those days, or at least t
atoms で活用したい CSS 隣接セレクタ
CSS 隣接セレクタ（隣接兄弟結合子）を活用すると、JavaScript のみで制御するよりもスマートな atoms を作ることができます。また、JavaScript の処理を削減することが出来ます。 【本稿サンプル】https://github.com/takefumi-yoshii/atoms-example 装飾は「状態管理」に依存させない 以下は関連記事をベースに作った Component です。ref forwarding が何故必要かは、そちらの記事を参照してください。 label 要素に囲まれており、状態をもたない input 要素を保持しているが、type は決まっていない Props で「３種の形状切り替え」が可能（"checkbox" | "radio" | "toggle"） import React from "react"; import styles from
HTMLのtextarea要素では、テキスト単位で色をつけたりイベントハンドリングしたりなどすることは、通常の方法では出来ないことは皆さんご存知かと思います。それを(擬似的に)可能にするライブラリを作成しました。 もしよろしければスター、使用した上でフィードバックなどいただけると非常にありがたいです。 Demo テキストを装飾したり(textareaに見えないかもしれないですがtextareaです)、 キャレットの位置にメニューを表示したり、 テキストにカーソルを乗せた時にTooltipを出したり、 アイデア次第で色々と出来ると思います(もちろん原理上不可能なことはありますが…)。 同様のことは、例えばSlateなどのライブラリを使用しても実現可能だと思いますが、こちらの方が断然軽量でバンドルサイズに何倍も差があります(現在約3.0kB gzipped)。なのでエディタライブラリを持ち出す
キーワードリンク下線を消す方法 みなさん、こんばんは。 はてなブログを読んでいて個人的に気になるのが、キーワードに下線がついてリンクになっていることです。 下線は無料版はてなブログでよく見られますが、このキーワードリンク下線は、有料版だと消すことが出来ます。 無料版のはてなブログでは、必ずと言っていいほどキーワードにリンク下線が勝手に付けられ読みにくい時もありますよね。 今日は無料版はてなブログで、記事文中のキーワードリンク下線を消す方法について書いていきたいと思います。 はてなブログでキーワードリンク下線を消す方法 有料版はてなブログ(はてなProの場合) 無料版はてなブログの場合 終わりに はてなブログでキーワードリンク下線を消す方法 キーワードリンクは以下のようなものです。 「はてなブログ」の文字の下にラインが引いてありますよね。 これがキーワードリンクです。 無料版のはてなブログで
どうも！LSSです！！ CSSを知らなくてもなんとなく遊べる（？）、CSSパズル第三問です！ CSSパズル カテゴリーの記事一覧 - Little Strange Software CSSパズル 第三問！ 「現在のコード」について やっている事と言えば… 応用例 CSSパズル 第三問！ ２つの写真があります。 上が「お手本」で、下が「回答」です。 そのさらに下に、赤い枠線で囲んだコードがあり、その中にいくつかの選択肢が入っています。 選択肢を変更すると「回答」の表示がそのコードで生成したものに変化するので、「回答」を「お手本」と同じものになるよう、正しい選択肢を選ぶ、という出題です。 なお、選択肢を変更した際に、さらにその下にある「現在のコード」がその選択肢の場合のコードとなります。（つまり、その時点で表示されている「回答」のコードですね） 全ての選択肢が正しいものになり、「お手本」と「回
「はてなスター」のアイコンを大きく表示させるカスタマイズ & はてなスターについて思う事 - カラーひよこのブログ
はてなスターの表示（見た目）をちょっと変えるカスタマイズをやってみた。はてなブログをやっていない人にはなんのこっちゃという話だが、ツイッターの「いいね」みたいな機能です。ブログを見たはてなユーザーが記事下のスターボタンを押すと星が付く仕組み。アイコンとユーザー名も表示されて誰がスターを付けてくれたのかが分かります。 はてなスターのアイコンを大きく表示させるカスタマイズ はてなスターの使い方とスターについて思う事 はてなスターのアイコンを大きく表示させるカスタマイズ 今回はこちらのブログさんの記事を参考に（っていうか丸々コピペ）しました。 ２例目の「星（スター）を吹き出し表示にしてプロフィール画像（アイコン）を丸く表示させる」をやってみました。下記の CSS をはてなブログの管理画面から「デザイン」→「カスタマイズ」の一番下の「デザイン CSS」に貼るだけです。 注意：CSS を修正する際に
最近pixivのUI改悪で「作品管理」や「ブックマーク」のメニューが格納されて右上のアイコンをクリックしないと表示されなくなってアクセスが悪くなりました。 よく使うメニューが格納された…という事でヘッダーにメニューを追加するためのUserScriptを作成しました。 自分が使う分にはこれで十分かな…という簡易的な物ですが、ご自由にお使いください。 メニュー追加こんな感じに追加されます // ==UserScript== // @name pixivにメニューを追加 // @namespace http://web.monogusa-note.com/add-menu-to-pixiv // @version 1.1 // @description pixivに簡易的なメニューを追加します。 // @author 草村 // @match https://www.pixiv.net/* //
The inert attribute Stay organized with collections Save and categorize content based on your preferences. The inert attribute is a global HTML attribute that simplifies how to remove and restore user input events for an element, including focus events and events from assistive technologies. Inert is a default behavior in dialog elements, such as when you use showModal to open a dialog for users t
【JavaScript】ありきたりなマウスストーカーを作ってみました - Little Strange Software
どうも！LSSです！！ 昔、HTML4.0の頃に自分も作ってみた事はありましたが、ちょっと試しに「ありきたりなマウスストーカー」を作ってみました。 ※1/25追記。PC（Windows＋Chrome）とiPhone7で動作確認していましたが、Androidスマホで動作しなかったため、一部コード修正しました。 コード コード解説 HTML部分 コード解説 CSS部分 コード解説 スクリプト部分 あとがき コード ^^) _旦~~ <style> #stalker{ position:absolute; pointer-events: none; transition:linear 0.1s; } </style> <div id="stalker">^^) _旦~~</div> <p> <script> stkx=0;stky=0; pntx=0;pnty=0; stks=10;//速度調整
こんにちは。株式会社インプルの平澤です。 ReactのCSSで迷われたこと、迷っていることはありませんでしょうか？ そんな方々へReactの各CSSをご紹介致します。 最初に言いますが、どの方法が良いかの正解はありません。「個人的な相性」・「開発チームの相性」・「パフォーマンス」など、どこに重点を置くかでも選択は変わってきます。 それを踏まえた上でご自身のベストプラクティスを見つけてみましょう。 本記事では ・Pure CSS ・CSS Modules ・CSS in JS (styled-component, emotion) ・CSSフレームワーク(Tailwind CSS) を皆さん大好きReactのトップページに適用して比較し、 各メリット・デメリットをまとめました。 ※下記コマンドでプロジェクトを作成した前提で進んでいきます。 $ npx create-react-app {プロ
昨日のマウスストーカー、ちょっと修正しました。 - Little Strange Software
どうも！LSSです！！ 昨日の記事、 little-strange.hatenablog.com ですが、公開後に「実はAndroidスマホで動作しない」事が判明し、先ほどAndroidでも動作するように修正しました。 公開前に、PCとiPhoneで動作確認はしていたのですが、まさか「iPhoneで動作してAndroidで動作しない」とは^^; ※iPhoneのほうがなにかにつけてウルサイ、と思い込んでいますｗ 何故動作しないか、については心当たりがあったので、修正はさくっとでき、コード・コード解説も修正済です。 ちなみに変更点 要するに、「.touches[0]」をサボってました^^; あとがき ちなみに変更点 コード <style> #stalker{ position:absolute; pointer-events: none; transition:linear 0.1s; }
Accessing hardware devices on the web Stay organized with collections Save and categorize content based on your preferences. The goal of this guide is to help you pick the best API to communicate with a hardware device (e.g. webcam, microphone, etc.) on the web. By "best" I mean it gives you everything you need with the shortest amount of work. In other words, you know the general use case you wan
【CSS】雪というより…ほこり？ｗ【実験】 - Little Strange Software
どうも！LSSです！！ ※画面がアレですが、お使いの端末は（多分）正常ですｗ １２月もそろそろ中盤。 クリスマスや大晦日が近づいていると同時に、大掃除のシーズンでもありますね。 去年のこの時期、このブログではクリスマスに向けて、 little-strange.hatenablog.com という準備を経て、 little-strange.hatenablog.com で盛大に雪を降らせたりしたものでした。 今年もクリスマスにはなにか凝った装飾をやってみたいものですが…ちょっと準備的に、思いついた事をこの記事上で試してみます。 画面上に浮遊しています コード 仕組み 降ってはいないので、雪とは言えない… 画面上に浮遊しています 昨年のクリスマス時点ではまだ身についていなかった、LSS自身のCSS知識として、 preserve-3d による立体表現 pointer-events: none;
どうも！LSSです！！ ちょっとconic-gradientを使った実験です。 スマホでは分かりにくいかもですが、この記事の画面、右上から光が差し込んでいるような効果を作ってみました。 実用性は…結構邪魔かも？なので、現段階では「実験」扱いです^^; 消す時はここから コード 消す方のコード あとがき 消す時はここから ↑のボタンを押すと効果が消えます。 コード まず、光が差し込む方のコード <style> #ray{ position:fixed; top:0px; left:0px; width:100%; height:100%; pointer-events: none; background-image:conic-gradient(at 100% -10%,#ffffff00 195deg,#ffffff90 225deg 235deg,#ffffff00 265deg);}
Building a tooltip component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a color-adaptive and accessible tooltip custom element. In this post I want to share my thoughts on how to build a color-adaptive and accessible <tool-tip> custom element. Try the demo and view the source! A tooltip is shown working across a va
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
WebKit Features in Safari 17.5
Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today. CSS There are several exciting new CSS features in Safari 17.5, including text-wrap: balance, the light-dark() color function, and @star
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Very often, while using switch variables (a variable that’s either 0 or 1, a concept that’s explained in a greater detail in in this post), I wish I could perform logical operations on them. We don’t have functions like not(var(--i)) or and(var(--i), var(--k)) in CSS, but we
タブやモーダルなど、よく見かけるフロントエンドUIコンポーネントの紹介と実装サンプル集 | Hypertext Candy
2019.07.21 タブやモーダルなど、よく見かけるフロントエンドUIコンポーネントの紹介と実装サンプル集 この記事では、フロントエンドでよくある UI コンポーネントについて、名前と見た目、なんのために用いられるのか、そして実装サンプルを紹介します。 Web 開発を学び始めた方を対象に想定しています。ここに紹介した基本的な UI 部品はエンジニアのみならず、クライアントやプロデューサー、ディレクター、デザイナーなど Web 開発/制作に関わる人たちにとっての共通言語と言えるでしょう。 モーダル 画面に覆いかぶさる形で表示されるサブウィンドウを、モーダル（ウィンドウ）と呼びます。 付加情報やユーザーのアクションに対する通知などを、画面遷移を伴わず表示させます。表示中の画面からユーザーの意識を離させずに、かつ注意・集中を引き寄せたい場合に利用されることが多いと思います。 モーダルウィンドウ
Stripe Elementsをカスタマイズしてクレジットカード入力のユーザービリティを向上させる | DevelopersIO
本記事は JP_Stripes Advent Calendar 2019 の15日目の記事です。昨日は中山千春さんによる Stripe入社1年、好きな自社プロダクトについて熱く語ってみる！ でした。Stripe、そしてStripe Connectへの熱さが伝わる素晴らしい記事でした。 Stripe Elementsをカスタマイズし、クレジットカード入力のユーザービリティを向上させる取り組みと実装方法についてご紹介したいと思います。 Stripe Elementsとは？ Stripe Elementsは、Stripeの主にクレジットカード入力に利用できるUIコンポーネントライブラリです。Stripeを使ってスムーズな顧客体験が構築できるように考えられています。 Stripe Elements は、Stripe のフロントエンドチーム、デザインチーム、アナリティクスチームの協力のもとに開発され
いつも読んで頂きありがとうございます。 たまに覗いてみようかgoogleアナリティクス。前回は7月に覗いてみたので今回は8月～ 10月まで見てみましょう。モバイルの人は見にくい画像があるのでご了承ください。 googleアナリティクス（3か月集計） googleアナリティクス（3か月集計） ユーザー概要 デバイス別 プラウザ・オペレーション別 国別・地域別・市町村別 集 客 最後に ユーザー概要 3ケ月分の年代別で見てみると前回同様に若い年代に読まれていることが分かります。 そして、今回は55歳以上のユーザーが増えていいます。同じ年代の方が増えるのは嬉し いですね。 前回 今回 差 18～24歳 14.64% 13.13% -1.51% 25～34歳 25.23% 25.88% +0.65% 35～44歳 26.17% 24.54% -1.63% 45～54歳 19.00% 18.09%
CSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプルと共に、jQuery や外部モジュールも利用せず、実際に利用するための簡易的な方法をご紹介します。 まずは、今回適当に作成したローディングアニメーションのデモをご覧ください。 See the Pen Simple CSS Spinner valiation by digistate (@digistate) on CodePen. この HTML と CSS を基礎にして、以下に実際に利用するための手順をまとめます。 HTML の構造 各ローディングアニメーション要素の HTML の構造は至ってシンプルです。 <div class="box"> <!-- type1 〜 t
I am a curious person who is always interested in opening up the browser DevTools to see how things were made on a website. This is the first time that I blog about something like this. I found some interesting uses of different CSS features (at least for me), and I wanted to share them with you. The new Facebook design started rolling out for users lately, and I got it almost two weeks ago. At fi
今回ははてなブログを運営している人に向けて、HTMLとCSSだけで作れるグローバルメニューのデザインを11個紹介します。よく見る定番のデザインやおしゃれなデザインなど、様々なものを作ってみました。全部コピペOKです！ また、レスポンシブデザイン（スマホ版デザイン）にも対応させる方法も解説します！スマホ表示のグローバルメニューの作り方を解説している記事があまりなかったので書いてみました。 なお本記事の最後には自力でカスタマイズする方法や微調整のやり方も解説します！ コピペすると細かい部分が微妙だったりすることもあるので、その時用に自分でカスタマイズする方法も教えます。 グローバルメニューのコードを書く場所はてなブログではHTMLとCSSの両方を記述します。 まずダッシュボード（管理画面）に入り、「デザイン→スパナアイコン→ヘッダ」と進み、その下にある「タイトル下」という場所にHTMLを書きま
Chameleonic Header In this tutorial, we will create a chameleonic header that changes its style on scroll to match the color theme of the underneath section. Dependencies CodyFrame (CodyHouse front-end framework) Tutorial This effect uses the clip-path CSS property. The idea is to have a clone of the main header inside each <section> of the page. Each clone will inherit the style of the section it
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
紙っぽいかわいいWebサイト作りたい - Qiita
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
ユーザー操作の一括無効化で役立つ！ HTMLのinert属性の紹介 - ICS MEDIA
インストール不要。ペライチHTMLでReact+TSX+Tailwind のフロントエンド一式を動かす
Building a dialog component | Articles | web.dev
NAYA - Modular Keyboard
UIにおける見えるけど利用できない非活性な領域の実装とinert属性について
ReactのUIコンポーネントならshadcn/uiがちょうどいい
Tailwind CSSにおけるHTMLのコンポーネント化とCSSのコンポーネント化
悪名高きスクロール妨害広告を解析する - Qiita
Old CSS, new CSS / fuzzy notepad
textareaをカスタマイズできるReact用のライブラリを作成しました
はてなブログのキーワードリンク下線を消す方法 - Random Life Blog
CSSパズル 第三問！ - Little Strange Software
pixivにメニューバーを追加するUserScript(Chrome)
The inert attribute | Articles | web.dev
React CSSで悩む全ての人へ【2022年版】 | ramble - ランブル -
Accessing hardware devices on the web | Articles | web.dev
【CSS／実験】陽光さす記事 - Little Strange Software
Building a tooltip component | Articles | web.dev
Logical Operations with CSS Variables | CSS-Tricks
たまに覗いてみよう！だからと言って何もしないけど - のんべえの気まぐれ
CSS によるローディングアニメーションのサンプルと簡単な実装方法
CSS Findings From The New Facebook Design
おしゃれなはてなブログのグローバルメニュー11選！【レスポンシブ対応】
Chameleonic Header in CSS and JavaScript | CodyHouse