ページ内リンクをクリックしたときにジャンプ先の背景色をアニメーションさせて分かりやすくする演出の方法です。 <a href="#jump">ページ内リンク</a> ... ... ... <p id="jump">あのイーハトーヴォの...</p>まずは、ページ内リンクをマークアップします。 html { scroll-behavior: smooth; }html 要素に scroll-behavior: smooth; を指定してページ内リンクをクリックしたときにスムーススクロールされるようにしておきます。 @keyframes highlight { 0% { background-color: #fceb70; } 100% { background-color: transparent; } }@keyframes を使ってアニメーションを定義します。今回は、黄色の背景色から透明

CSSを理解するには、プロパティや値を知っているだけでは不十分です。CSSのレイアウトアルゴリズムがどのように機能するかを理解する必要があります。 ブログやツイートで便利なCSSスニペットが紹介されていても、なぜ機能するのか、レイアウトアルゴリズムがどのように使用されているのか説明されていないことはよくあります。CSSにおけるレイアウトアルゴリズムについて解説します。 CSSの初学者をはじめ、長く携わっている人にも、気づきや学びがあると思います。 Understanding Layout Algorithms by Josh W. Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSにおけるレイアウトのアルゴリズム レイアウトアルゴリズムの確認 インライン要素の不思議なスペース 終わりに はじめに 数年

Tired of opinionated CSS frameworks? Looking for a robust option that gives you the freedom to create? Give Tailwind CSS a try. Tailwind CSS is a utility first CSS framework that allows developers to design custom web components without switching to a CSS file. In this tutorial, you will learn how to install Tailwind CSS in React and how you can use it to build a simple React page. Why Use Tailwin

【ゴールデンウィーク営業のお知らせ】 2024年4月27日(土)～2024年5月6日（月）の期間中、GWのため休業とさせていただきます。 ※4月30日（火）、5月1日(水)、2日(木)は通常営業いたします。 ※休業期間中にいただいた審査申請については、結果をお返しするために数営業日いただくことをご了承ください。

There are more values of display, including lists and tables; to see the full set of values visit the CSS Display Specification. We can see how this would work for Flexbox. If I want to have a block-level element with flex children I use display: block flex, and if I want an inline-level element with flex children I use display: inline flex. The below example will work in Firefox 70. See the Pen M

We all want to have codebases that are easy to maintain, so we start out with the best of intentions to make our codebase (or our corner of the codebase) maintainable and easy to understand. Over time, as a codebase grows, it can become more and more difficult to manage dependencies (JS, CSS, images, etc.). As projects grow, an increasing amount of your codebase becomes "tribal knowledge" (knowled

概要 Jqueryで要素の追加と自動更新 開発環境 2019/10/16 macOs 10.14.6 ruby 2.5.1p57 Rails 5.0.7.2 mysql Ver 14.14 Distrib 5.6.43 source 'https://rubygems.org' git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.0.7', '>= 5.0.7.2' gem 'mysql

2019年10月15日 著 We're not designing for screens -- Tanner Christensen"Digital workers--particularly designers, researchers, and writers--would do well to remember that everything we do that exists behind a screen is only valuable in so far as what it adds to the world outside the screen." Culrs Mac App | Thoughtfully crafted color palettes in your Mac"Culrs is a mac app where colors that work togeth

Monaca(Cordova)とOnsen UIの構成でダークモードに対応するに当たって、色々と検討した結果を書き記します。 答えはここに書いてた https://ionicframework.com/docs/theming/dark-mode 以下要約。 メディアクエリー（prefers-color-scheme）だと最新のブラウザしか動作しないため、クラスでフォールバックすると良い（JSで制御できるようにもなるしね） メディアクエリー変更の検知はwindow.matchMedia 使えば良い 以下のコードで現在のメディアクエリーの取得と変更検知のイベントリスナーを登録しています。ダークモードの場合は、bodyタグにdarkクラスを付与します。 // prefersDark.matches=trueの場合、ダークモード const prefersDark = window.matchM

Ever since releasing Grid Inspector, the Firefox DevTools team has been inspired to build a new suite of tools to solve the problems of the modern web. In this article, we’ll learn about all 7 tools and take a peek at potential future projects. Over the last few years, our team at Firefox has been working on new CSS tools that address both cutting-edge techniques and age-old frustrations. We’re th

最近ではWebサイトを構築する際にWordPressなどのCMS（コンテンツ管理システム）を利用することが多いが、今日でも静的なHTMLファイルを使ったサイト構築には多くのメリットがある。今回は、こうしたHTMLファイルベースのサイト構築を支援するHTMLファイル生成ツール「Hugo」を紹介する。 静的ファイルでサイトを作るための支援ツール「Hugo」 コンテンツの作成や編集の容易さから、昨今ではWebサイトを構築する際にCMSを利用する例が多い。ただ、CMSを使用するにはCMS自体のインストールや設定、データベースの準備などが必要であるため、更新頻度の低いサイトやページ数の少ないサイトでは静的なHTMLファイルを使って構築したほうがコストが低くなる場合がある。 とはいえ、HTMLファイルをいちいち手動で作成するのは楽ではない。そのため、HTMLファイルを半自動生成するようなツールが数多く

HTMLの勉強で知ったこと 1の続き。 今回はどちらかといえばCSSのことばかりになってしまった。 CSS便利 htmlではないが、インラインでCSSを書くにあたって、あまりCSSを意識していなかったが便利だと思った。 HTMLリンクのターゲット属性 リンクにtarger属性を設定することで、リンク先を開く場所を指定できる。 今までwebサイトを閲覧して、リンクを同じタブで開く時と新しいタブで開く時があったが、これが関係していたのか、と思った。 target属性には、次の値を持つことができる。 _blank リンク先のページを新しいウィンドウまたはタブで開く _self クリックされたのと同じウィンドウ/タブでリンクされたページを開く（これがデフォルト） _parent 親フレームにリンクされたページを開く _top リンクされたページをウィンドウ全体で開く framename 指定した名

ブログを開始して、正確には10/7がその日でしたが、13年が経ちました！ ようやくコリス サーティーンになれました。 たくさんのビジター様、そしてスポンサー様に支えられ、深く感謝しております。 感謝の気持ちをこめて、13周年記念プレゼント企画 第1弾を実施します！ 応募期間は、2019年10月16日に終了しました。 今回の13周年も例年以上に豪華なラインナップです！ 応募要項をしっかり確認して、ご応募ください。 応募期間 応募要項 当選発表 プレゼント商品 応募期間 2019年10月16日まで。 応募要項 応募要項は、2点。 コリスのTwitterアカウント「@colisscom」をフォローしている。 Twitterの自アカウントで下記の項目を含めて、ツイートしてください。 ※配送が必要なプレゼントは国内のみを対象とします。 ツイートに必要な項目 ツイートには、下記の3点を含めてください。

こんばんは、@0yanです。 課メンバーに業務自動化要望をヒアリングしたら、「Webアプリの手作業を自動化して欲しい」という要望があった為、Seleniumで自動化ツールを作成、PyInstallerで実行ファイルにして配布しました。 その際、学びがあったのでこちらで紹介したいと思います。 想定している読者 Python＋Seleniumで業務自動化しているノンプログラマーや初心者の方 コード読めない方から「Webアプリの自動化ツールを作って欲しい」と要望受けている方 コンテンツ PyInstaller超便利 Seleniumのfind_element_by_css_selector超便利 おまけ：Seleniumで躓きがちなこと 環境 Windows10 Python 3.7.3（Anaconda3） PyInstaller超便利 自動化ツール依頼元のメンバーがプログラミング未経験者のた

This site has a dark mode and a light one. Which mode you see depends on the setting of your device. Try it! The instant change in appearance is accomplished by this appendix to the style sheet: @media (prefers-color-scheme: dark) { body { background-color: #444; color: #e4e4e4; } a { color: #e39777; } img { filter: grayscale(30%); } } This works in Firefox, Safari, and Chrome among other browsers

「円熟者はそれ単体でゲームも作成できる」と言われるCSSの便利技法を調査・記録するだけの記事第一弾。 CSSのみでの「マリオ」や「絵画」のような、芸術作品に触れないと習得のきっかけにならない若年者。 今回は、頻度が高い入力フォーム関連の3つの技法を記録することにしよう。 技法1: 入力フォームの空チェック 「placeholder-shown」属性を利用 結果 See the Pen input-check-css by taisuke oono (@t_o_d) on CodePen. 内容 今回の入力フォームのCSS部分で使用している属性は、「placeholder-shown」であり、これはplaceholder(仮テキスト)が表示されている時を示す。 つまり、下記のような指定でnotを用いることで、「placeholderが表示されていない時にボタンの透明度をあげて、ボタンをクリッ

There are so many things you can do with clipping paths. I’ve been exploring them for quite some time and have come up with different techniques and use cases for them — and I want to share my findings with you! I hope this will spark new ideas for fun things you can do with the CSS clip-path property. Hopefully, you’ll either put them to use on your projects or play around and have fun with them.