color-gamutとcolor()関数で色の精度を上げるSCSS
導入 CSSのカラースペースは近年進化を遂げており、sRGBからP3やRec.2020など、より広い色域をサポートするようになっています。本記事ではSassを使用して色指定を簡単にする方法を紹介しま…
View ArticleHTML,CSS,JavaScript で自由配置を行う。やつてみたシリーズ半完動品
初期フォーマット形式を試行錯誤中で、見本を動かせないというか、配置はでは出来ましたが連続という段階で躓いています。 スクリプトの見本としてどうぞよろしくお願いいたします。 studio.html <…
View ArticleLaravelに標準でインストールされるViteでSCSSからCSSに変換する
開発環境 Windows 10 Pro(64bit) Node v20.12.2 Laravel 10.10 PHP 8.1.9 (cli) (built: Aug 2 2022 14:17:26)…
View ArticleHTMLとCSSだけでアコーディオンメニューを作成してみる
はじめに Webサイトでよく見るナビゲーションやコンテンツを表示するための「アコーディオンメニュー」。 今回はHTML5で導入されたdetails要素を使ってシンプルなアコーディオンを実装する方法を…
View Articlewebアプリ開発で意識したこと
初めに https://qiita.com/opatu07/items/be0d5e38710ba0854fb4 この記事で書いていたWebアプリが完成したので、その開発過程で意識したことを紹介しま…
View Article【CSS】stylesheetの指定方法
まとめ インラインスタイルシート方式 HTMLタグに直接CSSを記述する 内部スタイルシート方式 HTMLのheadタグ内にstyleタグを作成し、CSSを記述する 外部スタイルシート方式（推奨） …
View Articlecssのセレクタメモ
はじめに 書き方 cssのセレクタ html <p style="color: red;">test</p> 【要素セレクタ】 <p>node</p> style.css p { color: re…
View Article【🐣成長記録2】Grid Layoutが便利だったので備忘録としてまとめました
はじめに こんにちは！ささかまです！ みなさまは横並びレイアウトはどのように実装していますでしょうか？ 私はFlexboxを多用していたのですが、最近Grid Layoutに触れる機会があり、試した…
View Article多重minify
異なるminifierでminifyを繰り返すと、より縮む可能性があります。ただし時代についていけていないminifierもあります。そういうものを使うと不具合が出る事があるで注意して下さい。 Ja…
View Article私のstyle.css
私のstyle.css (仮) 後日 解説記載。 *{margin:0;padding:0} div,h1,h2,h3,p,ul,li,input,textarea,table,tr,th,td,f…
View Article私のreset.css
後日記載します。 私のreset.css ・ios対応reset.css :where([hidden]:not([hidden='until-found'])) { display: none !…
View Article紙っぽいかわいいWebサイト作りたい
かわいいWebサイトが作りたい Web上でグラフィックデザインっぽい表現をしてるサイト大好き！ 思いついたら追加する 「版ズレ」風 版ズレ ＝ 印刷の際に、色の版がズレて出力されてしまう現象。（アナ…
View ArticleCSS設計:BEM SMAACSSについて簡単にまとめてみた
概要 CSS設計について簡単にまとめてみた まとめ BEMとSMACSSを用いてCSSの書き方を工夫していきたい 参考本 ざっくりつかむ CSS設計 CSS設計とは 何も考えなしにCSSを書いていく…
View ArticleCSSのanimationとNext.jsでカート追加のアニメーション実装
CSSのanimationとNext.jsでカート追加のアニメーション実装 css の animation を勉強しようと思い、ECサイトで商品を追加した際の動作を再現しました。 概要 Next.js で実…
View Article20240427 redditの右側を隠す
redditの右側が邪魔 「改善前」の右側にある囲っている部分が邪魔なので、消すことにしました TemperMonkeyを試す TemperMonkeyというChrome拡張でなんとかなるんじゃない…
View ArticleGrid Layoutを使った簡単なweb配置
私が最近，Webサイトを作成する際に多用しているgridの使い方について紹介する． gridって何? CSSのGrid Layoutは，2次元レイアウトを簡単に作成することができる機能です．列と行を…
View Article【CSS】画像を特定のアスペクト比でトリミングする方法
img要素にaspect-ratioとobject-fit: coverを指定することでaspect-ratioの比率で画像をトリミングできます。 img { aspect-ratio: 1 / 1…
View ArticleWebアプリ開発 ホーム画面編
初めに webアプリの開発ができたので、手順を公開していきます。 開発環境 macOS Sonoma 14.4.1 PHP 8.3.3 Laravel Installer 5.2.0 ソースコード …
View Article私のsmartphone_reset.css
私のsmartphone_reset.css 後日記載 ios_reset.css android_reset.css 後日記載 ios_reset.css ios_reset.css 参考リンク …
View Article完全未経験（元消防士）からWEB系エンジニアへの道
私は、今年の3月で消防を退職しWeb系エンジニアを目指す２６歳男 すず。 こういった、ブログは初めて書く。続くかは、分からないけどなるべく長く続いたらいいなくらいの気持ちで記録として残していこうと思…
View Article