nuxt-swiperの使い方(次へ・戻るボタン追加) / how to use 'nuxt-swiper' (add next button,prev...
<template><Swiper :slides-per-view="2" :loop="true" :modules="[Navigation]" :navigation="{ nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }"><SwiperSlide v-for="item in...
View Article梅雨バテ？
梅雨入りしました 何だか最近は憂鬱です 梅雨バテ？六月病？ 仕事は忙しくなってきました転職して一年半たちましたいろんな仕事任されるようになって嬉しい 週末はパーソナルジムで筋トレしてますプロテイン美味しい
View Articlescssのネストと複数クラス
ネストの場合<divclass="component"><divclass="items"><divclass="item">アイテム1 </div><divclass="item">アイテム2 </div><divclass="item">アイテム3...
View Article開発中のブランチの特定のファイルをdevelopに戻したい場合(git checkout)
gitコマンド現在のブランチを確認git branch --show-currentdevelop以外の開発中のブランチになっていることを確認例) 開発中のブランチの特定のファイルをdevelopの同じファイルで上書きするgit checkout develop /path/target_folder/target_file.html git checkout [copy元のブランチ名]...
View Article人生に飽きているわけではなくて今が暇なだけ
タイトル通り 人生に飽きているわけではなくて今が暇なだけ人生がつまらないと勘違いしていないか？ただ今時間を持て余して暇なだけなのでは？新しいことに挑戦してみよう。人生は壮大な暇つぶしだ
View Articlenuxt3 vue3でsitemapを追加
nuxtseo.com上記公式ドキュメント参照npx nuxi@latest module add sitemap nuxt.config.tsexport default defineNuxtConfig({ site: { url: 'https://example.com', }, })デプロイコマンドなどで生成可能npm run generate
View Articledocker-compose zsh command not found
docker-compose zsh command not founddocker-compose up is can not usefixyou can usedocker compose upnew version docker is in space
View Article.gitignoreに書くほどでもないとき.git/info/exclude
gitプロジェクトに以下のファイルがすでに作られている（git init実行時に作成される）.git/info/excludecd .git/info open excludeexcludeファイルにgit管理したくないファイルパスを追加すると個人専用の.gitignoreが使える/path/filename
View Articlevue.jsのイベント修飾子まとめ
Vue.js イベント修飾子のまとめVue.jsは、イベント処理を簡素化するための様々な修飾子を提供しています。以下は主要な修飾子の概要です。.sync双方向バインディングを簡単に実装親コンポーネントから子コンポーネントへのプロパティ更新を可能に<child-component...
View Article悩むのは生きている証
人は生きている限り不安や虚無感を感じ何かしらの悩みを持っているこれは誰もが抱えるもの完全に無くすことはできない大事なのは完全に無くそうと頑張るのではなく楽しいことに目を向けることである
View ArticleCSSの単位まとめ：px、%、vw、vh、em、remの違いと使い分け
CSSの単位まとめ：px、%、vw、vh、em、remの違いと使い分けCSSを使ってWebページをスタイリングする際、単位の選択は非常に重要です。適切な単位を選ぶことで、レスポンシブなデザインやユーザー体験を向上させることができます。この記事では、CSSでよく使われるpx、%、vw、vh、em、remの違いと使い分けについて解説します。px...
View ArticleマニアックなCSSの単位まとめ
マニアックなCSSの単位まとめCSSには、多くの開発者があまり使わない、少しマニアックな単位が存在します。しかし、これらの単位を理解し適切に使うことで、デザインやレイアウトの調整に役立つことがあります。今回は、そんなCSSのマニアックな単位をいくつか紹介します。1. ch概要: 現在のフォントにおける "0"（ゼロ）の幅を基準にした長さの単位です。用途:...
View Article夏の終わり
台風が大きな影響を与えました皆さんは無事でしょうかまだ暑い日が続きますので熱中症にお気をつけください暦は9月になり夏の終わりが始まりました私は相変わらず仕事に追われています誰かの役に立ちながらお金をもらうことに充実感を覚えています神経をすり減らしながら大変なお仕事ですやはり自分の好きな仕事だからこそ妥協ができないのです好きな仕事ができることは幸せなことですが最近はヒロアカを１話から見始めました、...
View ArticleVue.jsを使ったアトミックデザイン
以下は、Vue.jsを使ったアトミックデザインについてのブログ記事をMarkdown形式でまとめたものです。Vue.js でアトミックデザインを活用する方法はじめにアトミックデザインは、ウェブ開発において、コンポーネントを小さな単位から組み立てていく設計手法です。この手法は再利用性と一貫性を向上させるために役立ちます。この記事では、Vue.js...
View Articleアトミックデザインについて
アトミックデザインは、2024年の時点でも依然として推奨される設計手法ですが、状況によっては他の手法や考え方と組み合わせて使うことが一般的になっています。アトミックデザインの強みである再利用性、一貫性、保守性は、特に大規模なプロジェクトやデザインシステムを構築する際に非常に有効です。しかし、近年ではアトミックデザインに対する批判や限界も指摘されており、他のアプローチと比較検討することが重要です。アト...
View ArticleRubyのnil?, blank?, present? の違い
Rubyにおける nil?, blank?, present?の違いRubyのコードを書いていると、オブジェクトが「空」であるかどうかを確認するために様々なメソッドを使います。その中でもよく使われるのが nil?, blank?, present?です。これらのメソッドは少し似ていますが、実際には異なる役割を持っています。この記事では、それぞれのメソッドの違いについて詳しく見ていきます。1....
View ArticleKPIとKGIの違い
KPI（Key Performance Indicator）とKGI（Key Goal Indicator）は、どちらも目標達成のための指標ですが、その役割と位置づけが異なります。KGI（Key Goal Indicator）...
View Article幸せは主観で感じるもの
他人と比べて持っている持っていないとか劣っているとか優れているとかそんなことを気にしてばかりいると幸せを感じなくなる客観的に見て幸せかどうかよりあなたが幸せを感じるかどうかが大事です生き方は人それぞれ十人十色です
View Article人は必ずいつか死ぬ
退屈な日々にうんざりしてても時間が経てばいつか寿命がつきる。別に好きなことして時間潰してればいいのでは？何もしなくても時間は経つし、仕事しないといけないでしょ？悩むことない。人間が退屈に感じなかったり飽きたりしなかったら現代のように文明が発達しなかっただろう。飽きるまでやって成長した証。退屈であれば自己成長に時間と労力を割けば良い。健康のために運動したりヘルシーな食事を作ったり、本を読んで知識を増や...
View Article好きなことを仕事にしても辛い
好きなことを仕事にしたとしても辛いことも多いしストレスも溜まります好きでない仕事だとしても楽にできる仕事はあるかも知れないのでケースバイケースだと思います
View ArticleCSSの`align-items`と`align-content`の違い
CSSで使うalign-itemsとalign-contentの違いFlexboxやGridレイアウトを使って要素の配置を調整する際に、align-itemsとalign-contentというプロパティは頻繁に登場します。しかし、両者の役割が似ているため、どう使い分けるべきかがわかりにくいことも。この記事では、align-itemsとalign-contentの違いについて、具体例を交えながら解説し...
View Article選択肢が多いと選べない
選択肢が多すぎると選べないのは当たり前だと思うけど 今の世の中は選択肢が多すぎて何もできない状態に陥ることがある。 豊かな国で幸せなことなんですが、好きなことがわからなくなったり何をしていいのかがわからなくなることがある。 なので信頼できる人やサービスにお勧めされると選びやすくなると思うんです。 結局おすすめされたとしても選べない時もあるが。
View ArticleCSS設計について
「フロックス（FLOCSS）」と「BEM」は、CSSの設計・管理をシンプルかつ効果的に行うための手法です。それぞれの特徴をまとめます。 1. フロックス（FLOCSS） FLOCSS（“Function, Layer, Object, Component, Scope...
View ArticleCSS設計を改善！FLOCSSとBEMを活用したSCSS構成ガイド
以下のように、FLOCSSとBEMの組み合わせによるCSS設計をSCSSでまとめたブログ記事を書いてみました。CSS設計を改善！FLOCSSとBEMを活用したSCSS構成ガイドWebアプリケーションやサイトのスタイルが複雑化する中、CSSの設計はますます重要です。本記事では、FLOCSSとBEMを組み合わせ、SCSSで効率よくスタイルを管理する方法を紹介します。このアプローチは、可読性や再利用性が高...
View ArticleタグのCSSで三角アイコンをカスタマイズする方法
<details>タグのデフォルトの三角アイコンは、CSSを使って変更できます。ここでは、三角アイコンをカスタマイズする方法を紹介します。1....
View Article