HTML CSS Sass未経験が、プロジェクトの参加で早急に使わないといけなくなったんで勉強した資料まとめました。
今回、ついにSassを使うことになりました。 今までは、CSSのみで行ってたのですが、 共同作業でサイト構築することになってので Sassでの記述統一なのです。 そこで、慌てて勉強です。 まずは、AmazonでSassの本検索 この本Web...
inopro
HTML CSS 
VScode Windowsで Visual Studio Codeのターミナルで貼り付け’ctrl+v’じゃなかった！
WindowsパソコンでVSCodeのターミナル内で貼り付けしようと ”ctrl+v”したところ何んも変化無く、２回押すと"^V"ってのが 表示される。 そこで、いろいろ試してみたら、下記の順序で出来た！ ctrl+v ⇒ ctrl+v ⇒...
JavaScript JavaScript条件分岐 if文の使い方 【サンプルコードあり】
JavaScriptで条件分岐をしたい場面は多くあると思います。 例えば、「もし〇〇だったら、〇〇をする」などのような場面。 そんな時は、if文を使うと指定可能です。 if文の参考例1 上記の式で、条件式の所にもし〇〇だったらの式を記入。 ...
HTML CSS HTML・CSSコーディング時に知ってる便利だが使い方よく悩むセレクタ４選。first-child・first-of-type・A ~ B・A > B
HTML/CSSコーディングする時に知ってると便利なセレクタ これいつもあれ？ってなるからここに書いてのこしました。 1.first-child 兄弟の中で最初の要素を指定 first-childは、指定した要素の兄弟（同じ階層）で 一番最...
HTML CSS headerナビゲーションメニューをHTML・CSSコーディング時参考にできるように、ヘッダーナビのサンプル作ってみました。【サンプルコード・CODEPENリンクあり】
headerナビゲーションメニュー （headernav）いろいろなパターンがある。 また、案件によって微妙に違ってくるので、基本のパターンのコードを リスト化してみました。 とりあえずこの記事では、私が最近までに作ってきた物を 取り上げて...
HTML CSS １枚の画像をclip-pathで切り取って２つ並べる方法 Chat GPTに聞いたが聞き方悪くダメだったがジェネレーターで簡単に出来た。
今回は１枚の画像を２図形に表示する方法には、 mask-imageでの方法もあるのですが、今回適用しようと 思ったらGooglechromeでは非推奨でなんかうまく実装出来ない。 そこで今回は、Chat GPTを使って他の方法を聞いてみた。...
プログラミング フリーランスとして仕事獲得のオンラインプラットフォーム一覧にしてみました。法人口座のおすすめもあり。
フリーランスとしてコーディングの仕事を獲得するための手順として 下記のような流れの感じになります。 この記事では、その中のオンラインプラットフォームを調べたので そのリンクを記載してみました。 フリーランスとして案件獲得の為に一応無料登録サ...
HTML CSS HTML・CSSでキーボードのボタンのような表現をスプレッドシートのショートカット集で表現してみた。【サンプルコードあり】
ショートカット集などでよく見る、キーボードのボタンのような 表現方法で書いてみました。 キーボードボタンのような表現方法 キーボードボタンのような感じの表現の方法 実は簡単に出来る。 ただ、少し手間がかかります。 実際に書いたコード HTM...
HTML CSS formなどで要素にマウスをフォーカスした時にアクションする指定はfocus-visibleで指定すると出来た。【サンプルコードあり】
HTML・CSSでフォームの実装をした時に、入力エリアを クリックした時に入力エリアにアクションをつける方法が簡単。 やり方は、入力エリアの要素にfocus-visibleを 設定すると可能になる。 focus-visible 使用例 今回...
HTML CSS box(ボックス)を２重線で囲んで、その線の間隔を変更するのが簡単に出来る。この方法ならいろんなカスタマイズが可能 【サンプルコードあり】
boxの周囲を２重線で囲む場合で、２本の線の間隔を自分の好きな 広さに設定する方法が簡単。 方法は、outline:;とoutline-offset:;を使うと出来る。 この記事でサンプルコードあり。 完成は下記のような感じで実装出来ます。...