HTMLとCSSを使った横スライドアニメーションの実装
はじめに 本記事ではHTML、CSSを使用しテキストに横スライドアニメーションをつける方法について記載します。 ゴール 次のような横スライドアニメーションを作成する事を本記事のゴールとする。 ソース HTM…
View Article【CSS】「状態変化」と「バリエーション違い」はCSS変数で整理できる
前書き: ボタンコンポーネントのスタイリングを題材に こんな感じのボタンのコンポーネントを題材に、CSS 変数を使った CSS 記述の改善について考えてみました。 今回は React と CSS M…
View Article課題（014）ー2
お疲れ様です。 先日の続きを進め、先ほど課題提出をして参りました htmlは指定通りに完了しておりましたが、cssが最後までできていませんでしたが、残りも数項目であったため、30分ほどでできました。 …
View ArticleCSSで複数行のリンクテキストを省略表示し、3点リーダーの色を変更する方法
はじめに テキストを複数行表示して「...」で省略するようなUIを実装することがありました。 テキストを省略して表示するとき、overflow: hidden;、white-space: nowra…
View Article【小ネタ】FigmaのVariablesを楽してそのままCSS変数にしたい
きっかけ Figmaのvariablesを最近やっと使い始めたのですが、 CSS変数のように色や数値に名前をつけたり、 "/" で区切るとグループで管理できたりとても便利ですよね。 https://…
View ArticleVue 3 で作る！簡単 ToDo アプリ - Bootstrap でCSS をカスタマイズしよう！
今回は前回のTodoアプリをBootstrap を活用して、爽やかなデザインに仕上げていきたいと思います。 1. Bootstrap を導入 まずは、プロジェクトに Bootstrap を導入します。…
View ArticleCSSを素早く書く方法 (Emmet)
はじめに この記事は先日投稿した記事のCSS版です。 Emmetについてご存知ない方や、HTMLでの使用例にご興味のある方は、 以下の記事も併せて参照していただけると嬉しいです。 https://q…
View ArticleCSSでボタンの枠を点滅させて強調表示する方法
CSSを使ってボタンの枠を点滅させて強調表示する方法を紹介します。 実行環境 HTML5 CCS3 Google Chrome: 126.0.6478.62（Official Build） （64 …
View ArticleJSで特定のidを持つ要素にクラスを追加・削除する方法
JavaScriptで特定のidを持つ要素にクラスを追加または削除する方法を紹介します。 実行環境 HTML5 CCS3 Google Chrome: 126.0.6478.62（Official …
View ArticleOGPタグのまとめ
OGPタグとは OGPタグとは「Open Graph Protcol」の略です。OGPタグは、FacebookやX（旧Twitter）、Slack、LinkedInなどのSNSでシェアした際に設定し…
View ArticleOracle APEXで対話モード・レポートにハイライトを実装してみた
はじめに Oracle APEXでハイライト表示をする方法は沢山あります。 対話モード・レポートのハイライト機能を使えば、直ぐにレポート内の任意の行をハイライト表示することが出来ます。 ただ、行すべ…
View Article【 Tailwind CSS 】ユーティリティクラスの基礎
はじめに Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、開発者が迅速かつ効率的にスタイルを適用できるように設計されています。 本記事では、Tailwind CSSの基…
View Article課題（018）進捗
お疲れ様です。 今回から見本通りに幾何学模様を3つ作成する課題に取り組んでいきます。 既に2日前から始めていましたが、進捗報告をしていなかったため現状までをまとめて書きます 1つ目は要素を横に並べて…
View Article【HTML】preタグの余分なインデントを削除する方法まとめ
はじめに 急いでいる方は解決方法を考えるまで飛ばしてください。 この記事は、preタグの余分なインデントを削除する方法について、数種類の方法を紹介しています。 また、最初の方は問題発生までの手順や、…
View Articleデモページ 卓球得点表 CSSフレームワークBLUMAを使用して画面の修正
デモページとして、今まで学習してきた内容をもとに、 卓球の得点表のようなものを作成していこうと思います。 また、下記ではロジックについてまとめています。 今回は、CSSフレームワークのBLUMAの使…
View ArticleCSSで超絶簡単にダークモード対応する（2024年最新版）
前回の記事はこちら https://qiita.com/yamashee/items/d1f998b27371ca80ec80 というわけで、今回はダークモード対応の実装方法を紹介します。 ダークモ…
View ArticleReact で単にスタイルにスコープをつけるだけなら各種ライブラリに頼らなくても良いのかもしれない
この記事の概要 つい先日こちらの記事を投稿しました。 https://qiita.com/xrxoxcxox/items/ca257cb5bcc9379318ef React 19 でstyleの巻…
View Articleselectを変更する前に一旦それでいいか確認するjs
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wid…
View ArticleHTMLとCSSのみで画像のアクセプト比を保持したまま、背景画像のスライドショーを実装する
はじめに HTMLとCSSだけで画像のスライドショーを実装したいけど、画像のアクセプト比が歪んでしまったり、javascriptを必要とする場合があったので、簡単に実装できるスライドショーの作り方を…
View Article【CSS】 display flexの小技を紹介
はじめに 実案件のフロントエンド開発でcssを書いていく上でdisplayflexってめっちゃ使いますよね。 今日はそんなdisplay flexを使う上での小技をいくつか紹介したいと思います。 活…
View Article