【力技】スクロールスナップで、現在主に表示している要素を取得し、そのデザインを変える
成果物 スクロールスナップを実装した時、主に表示されている要素（今回は左端に留められている要素）は普通に表示して、それ以外は薄く表示する。 実装 やっていることはかなり力技です。 // useCen…
View Articleangularでパンクズリストを実装する方法
概要 angularでパンくずリストを実装したため、その内容について記載します。 今回はnpmライブラリである xng-breadcrumb を使用して作成しました。 https://www.npm…
View Article「表示の拡大」について
ブラウザで表示を拡大したい場合、ブラウザ上の表示サイズ拡大機能や、ピンチ操作によるズーム、OSで提供されいてる拡大鏡など、様々な方法を利用することができます。 それぞれ挙動（拡大する要素や見え方）や…
View Articleプログラミング学習とテレビゲームの戦い方の共通点～初学者の知恵～
はじめに こんにちは、未経験からエンジニア転職を目指しているものです。 オンラインスクールで本格的に学習して4ヶ月目に入りました。今回は、学習のモチベーションを上げるために考えた内容です。学生時代は…
View Article【Rails】rails assets:precompile実行によりCSSを更新できなくなった
動作環境 OS: macOS Rails: 7.2.1 Ruby: 3.2.3 事象 Webアプリ作成中、カスタムCSSの内容を変更したところ、変更後のスタイルが適用されず変更前のスタイルが維持され…
View Article[CSS] backdrop-filterを設定する場所に気を付ける backdrop-filterの適用にラグがあるときの改善策
この記事の概要 親要素にtransition: opacityなどを設定していて、backdrop-filterの適用にラグが発生したときの改善策です。 結論：transitionを設定している要素…
View ArticleAngular のスタイルカプセル化とinnerHTML のサニタイズについて少し理解を深めるまで
前置き Angular でinnerHTML を使っていたら、スタイルカプセル化とサニタイズについて少し理解を深められたのでそのメモ なんでinnerHTML を使ってたかは前回記事参照 https…
View ArticleCSSでバツの描き方
はじめに 以前、解説サイトからほとんどそのままパクってきた「CSSでバツを描く」コードを、いま一度理解するため、備忘録的に仕組みをここで書いていきたい。 著者について プログラミングを（本格的に）始…
View Article入力フォームを画面中央に縦に配置する方法
はじめに 入力フォームを画面中央に縦に配置する方法が分からなかったのでまとめてみた。 flex-directionが鍵だと思います。 flex-directionで主軸の方向を縦にし、align-i…
View Article初学者向け text-alignについて
はじめに text-alignは「ブロック要素または表のセルボックス内におけるインラインレベルコンテンツの水平方向の配置を設定」するプロパティである。 https://developer.mozil…
View ArticleCSSのappearanceプロパティとベンダープリフィックスの使い方 -webkit-appearanceと-moz-appearanceの役割とは？
はじめに こんにちは、未経験からエンジニア転職を目指しているものです。 オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事…
View ArticleHTMLフォームのaction属性エラーの対策法：リンク未設定時に役立つコツ〜初学者のエラー奮闘記〜
はじめに こんにちは、未経験からエンジニア転職を目指しているものです。 オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事…
View Article電卓を作りながら勉強ー2
お疲れ様です。 昨日は寝かしつけが終わったら勉強しようと計画していましたが、そのまま寝てしまいましたので、今日続きをしています 早速ですが進捗です。 See the Pen Untitled by …
View Articleサイト模写を通じたWeb開発学習: CSS, HTML, JavaScriptの活用法
Web開発の基礎技術であるCSS、HTML、JavaScriptを使い、実際に既存のサイトを模写する学習に挑戦しました。この記事では、その学習プロセスを要約し、特にIDやクラスの使用、スタイルの適用…
View Article【CSS】CSS設計論を勉強
はじめに CSS設計論について勉強したことの備忘録を兼ねてまとめました。 CSS設計の必要性 CSSでは、同じ結果に対していろんな書き方があるので、後々の運用コストを下げるためにしっかりとした設計が…
View Articleevent.preventDefault(); とは？フォーム送信時のページリロードを防ぐ方法
はじめに こんにちは、未経験からエンジニア転職を目指しているものです。 オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事…
View ArticleDaisyUIの魅力：TailwindCSSをより使いやすく
はじめに DaisyUIは、TailwindCSSを拡張し、より効率的にウェブサイトを構築できるようにするプラグインです。このツールを使うことで、開発者はより少ないクラス名でより美しいデザインを実現…
View Articlereset.cssによる違いを実際に比べてみた
はじめに 開発を進めていく中でブラウザによるデザインの違いが発生した事があり その時にreset.cssを知ったのでどんなreset.cssがあってどんな違いがあるのかを 次回のプロジェクトを立ち上…
View ArticleiOSでのブラウザで確認した時だけCSSが崩れてしまう
なにが起きた？ PCのブラウザで確認すると正常なのに、iOSのどのブラウザで見てもキャッシュを削除してもスタイルが崩れている！(フォントサイズがおかしい) CSSでfont-sizeを16pxに指定…
View Article私がマージンをできるだけ使いたくない理由
はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事…
View Article