HTML CSS １枚の画像をclip-pathで切り取って２つ並べる方法 Chat GPTに聞いたが聞き方悪くダメだったがジェネレーターで簡単に出来た。
今回は１枚の画像を２図形に表示する方法には、 mask-imageでの方法もあるのですが、今回適用しようと 思ったらGooglechromeでは非推奨でなんかうまく実装出来ない。 そこで今回は、Chat GPTを使って他の方法を聞いてみた。...
inopro
HTML CSS 
プログラミング フリーランスとして仕事獲得のオンラインプラットフォーム一覧にしてみました。法人口座のおすすめもあり。
フリーランスとしてコーディングの仕事を獲得するための手順として 下記のような流れの感じになります。 この記事では、その中のオンラインプラットフォームを調べたので そのリンクを記載してみました。 フリーランスとして案件獲得の為に一応無料登録サ...
HTML CSS HTML・CSSでキーボードのボタンのような表現をスプレッドシートのショートカット集で表現してみた。【サンプルコードあり】
ショートカット集などでよく見る、キーボードのボタンのような 表現方法で書いてみました。 キーボードボタンのような表現方法 キーボードボタンのような感じの表現の方法 実は簡単に出来る。 ただ、少し手間がかかります。 実際に書いたコード HTM...
HTML CSS formなどで要素にマウスをフォーカスした時にアクションする指定はfocus-visibleで指定すると出来た。【サンプルコードあり】
HTML・CSSでフォームの実装をした時に、入力エリアを クリックした時に入力エリアにアクションをつける方法が簡単。 やり方は、入力エリアの要素にfocus-visibleを 設定すると可能になる。 focus-visible 使用例 今回...
HTML CSS box(ボックス)を２重線で囲んで、その線の間隔を変更するのが簡単に出来る。この方法ならいろんなカスタマイズが可能 【サンプルコードあり】
boxの周囲を２重線で囲む場合で、２本の線の間隔を自分の好きな 広さに設定する方法が簡単。 方法は、outline:;とoutline-offset:;を使うと出来る。 この記事でサンプルコードあり。 完成は下記のような感じで実装出来ます。...
HTML CSS 背景画像（background-color）削除。background-colorで色の指定してる場合で、レスポンシブである範囲背景色を消す方法。【サンプルコードあり】
HTML・CSSでbackground-colorを削除する場合、 コーディングしててレスポンシブである範囲 だけ背景の色background-colorで指定しててその色を を消したい場合の方法が、あれッ？てなったんでその方法書きます。 ...
HTML CSS HTML・CSSでコーディングする時、理解しておきたいブロック要素・インライン要素の理解は必要。よく見る要素を記事に書いてみました。
HTML・CSSでコーディングする際に 最低理解しといたほうがいい。 コーディングする際の要素には、 ブロック要素と、インライン要素ってのがある。 この性質を理解してるかしてないかでは まったく違ってくる。 よく見る、ブロック要素とインライ...
HTML CSS Grid 画像リストを横並びにして、画像の右端にテキストを配置。グリッドレイアウトで実装レスポンシブ設定までしました。【サンプルコードあり】
画像のリストを横並びにして、その右端に文字を配置する設定。 今回は、グリッドレイアウトを使ってやってみました。 他にもflexも試したが、今回はグリッドレイアウト を使った方がレスポンシブを考えると簡単に 実装できたのでその方法を記事にしま...
HTML CSS HTML・CSSでドロップダウンリストのクリックしたらリストが表示されるパターンを作成してみました。【サンプルコードあり】
HTML・CSSでドロップダウンリストを作成してみた。 今回は、ホバーじゃなくクリックでリストが 下に出てくる方法でやってみました。 今回は、HTML・CSSだけでやってます。 JavaScriptの指定なども加えると もっと動きをつけるこ...
VScode VScode スニペット登録方法と注意点記事にしました。コードを書く時間短縮・スペルミスによるエラー減少になるのでオススメ！【サンプルコード有り】
VScodeを使ってコードを書いてる時、スニペットに 前もって任意のコードを登録しとくと、登録した 文字で自動でコードを記入してくれる機能がある。 その登録方法と注意点を記事にしてみました。 この作業は、スニペットを登録すると言います。 登...