CSSのhasを使ってみたかっただけ
はじめに 最近cssでhas使ってみたらと言われたので、使用してみました。 hasってなに？ :has() は CSS の疑似クラス関数で、引数として渡される相対セレクターのいずれかが、その要素から…
View Articleプロフィール写真切り取り機能の実装
はじめに 実務で、プロフィールで顔写真を登録できるようにしたいと要望がありました。 プロフィール写真は表示回数が多いため、ファイルサイズを小さくする必要がある プロフィール写真を表示する際に、ちょう…
View ArticleTailwind CSSで動的に色を指定できないときの解決方法
問題 Tailwind CSSでは，16進数のカラーコードを動的に指定できない．すなわち，次のようなことはできない． const colorInHex = "ffffff"; return <Hog…
View Article【初心者必見】簡単！BootStrapとCSSで垢抜けたサイトを作る方法！
こんばんは！ BootStrapだとなんだかBootStrap感が出てしまう(?)と悩んでいる方、もしよかったらこちらの記事を参考にしていただけると幸いです。 最近ECサイトを作っていて、その際にB…
View Article初めてTailwind CSSを使ってみた
初めてTailwind CSSを使ってみた 背景 これまでの個人プロジェクト(React)ではstyled-componentsをメインに使ってきていたが、ViteやNext.jsの学習の際にTai…
View Article【Rails】SprocketsによってコンパイルされたCSSを文字列として取得する方法
Railsでは通常、layoutファイルでstylesheet_link_tagメソッドを使ってSprocketsによってコンパイルされたCSS（元々app/assets/stylesheets/a…
View ArticleEPUB形式の電子書籍でJavaScriptを使ってMP3音声を再生
やりたいこと 外国語学習のためにテキストと音声を組み合わせた電子書籍を自作したいと思いました． EPUB形式の電子書籍を自作し，CSSで音声再生ボタンを用意して，JavaScriptで音声を再生させ…
View Articlemix-blend-modeを使用して白黒反転を簡単に実装
mix-blend-modeを使用で白黒反転 mix-blend-modeとは、cssのプロパティの一つで 要素の内容物と親要素の内容物や要素の背景をどのように混合するかを設定できるもの。 http…
View Articlewovn-ignoreを入れ忘れない方法
Webサイトの多言語化・翻訳対応を一任できるサービスWOVN.ioにおいて、個人情報や動的な数字がWOVNに送信されないように翻訳抽出対象外にするwovn-ignoreを設定し忘れない方法を紹介しま…
View ArticleJavaScriptとCSSで実装するレスポンシブハンバーガーメニュー
この記事では、JavaScriptのclassListとDOMTokenListの概念を活用して、レスポンシブなハンバーガーメニューを実装する方法を解説します。ウェブサイトのナビゲーションをモバイル…
View ArticleずれなくWebページを印刷させるためのCSSティップス集
用紙の大きさはA4とかって決まっているとき、その決まった大きさにずれずに収まるように印刷できるようなウェブページを作るときのティップス集。複数のページにしたいときにも対応。 @page を書く @p…
View Article【CSS】子要素が指定の数以下の場合にのみスタイルを適用する方法
以下のように記述すると指定した数以下の場合にのみスタイルが適用されます。 ul:has(> :nth-child(-n+N):last-child) li { ... } 子要素が３つ以下の場合にの…
View ArticleBootstrap5.3.0をSassを編集してカスタマイズする
Bootstrapをカスタマイズしたい CSSフレームワークとして有名なBootstrap。簡単に綺麗なサイトが作れて嬉しいが、王道というか、Bootstrapっぽいなと一目でわかってしまう。 新し…
View Article【Rails】ECサイトにおける新着商品の表示レイアウトの整え方
概要 この記事では、Bootstrap導入済みのRailsアプリケーションにおいて、ECサイトのトップページに表示する新着商品のレイアウトの整え方について言及しています。 環境 Rails: 6.1…
View Article【Rails】画像の上に文字を中央揃えで表示する方法
概要 この記事では、Railsアプリケーションにおいて画像の上に文字を中央揃えで表示する方法を説明します。 実装方法の参考として残しておく形なので詳しい解説はあえてつけていません。 環境 Rails…
View ArticleModalって作るの難しい・・・諳んじれますか？
ふと気になって調べること数十回。自分の中で区切りをつけたいので記事にまとめます！ あと、諳んじる必要は全く無いと思っています！ 環境 BrowserがあればOKです。 一応、リポジトリにNode プ…
View Articleブロック要素とライン要素（自分用）
・ブロック要素 行全体のまとまりを作る。 div,header,footer,nav,section,article,p,ul ・インライン要素とは 行の中の一部のまとまり span,img,sma…
View Article要素を横に並べる（自分用）
次のようなリストをCSSで横並びにしてみる。 ①リストをインラインにする ②floatを使う ③flexを使う ・flexについて flexは親要素が子要素を横並びにさせる。 justify-con…
View ArticleNode.jsでHTML、CSSを反映させる（自分用メモ）
はじめに ポートフォリオ用にウェブサイトを作りたいけどやり方が分からねぇってことで勉強したことをまとめました。最初の導入部分的なことしかまだわかっていませんが、もし似たようなことをしたくて困っている…
View ArticleRailsでsasscのLoadErrorが発生した際の解決方法
はじめに Railsアプリケーションで、scssファイルにCSSを記述しようとしたところ、以下のエラーメッセージが発生しました： LoadError in HomeController#home c…
View Article