HTML CSS Sass未経験が、プロジェクトの参加で早急に使わないといけなくなったんで勉強した資料まとめました。
今回、ついにSassを使うことになりました。今までは、CSSのみで行ってたのですが、共同作業でサイト構築することになってのでSassでの記述統一なのです。そこで、慌てて勉強です。まずは、AmazonでSassの本検索この本Web制作者のため...
HTML CSS
HTML CSS 
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でキーボードのボタンのような表現をスプレッドシートのショートカット集で表現してみた。【サンプルコードあり】
ショートカット集などでよく見る、キーボードのボタンのような表現方法で書いてみました。キーボードボタンのような表現方法キーボードボタンのような感じの表現の方法実は簡単に出来る。ただ、少し手間がかかります。実際に書いたコードHTMLCSSこの部...
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で指定しててその色をを消したい場合の方法が、あれッ？てなったんでその方法書きます。back...
HTML CSS HTML・CSSでコーディングする時、理解しておきたいブロック要素・インライン要素の理解は必要。よく見る要素を記事に書いてみました。
HTML・CSSでコーディングする際に最低理解しといたほうがいい。コーディングする際の要素には、ブロック要素と、インライン要素ってのがある。この性質を理解してるかしてないかではまったく違ってくる。よく見る、ブロック要素とインライン要素。ブロ...
HTML CSS Grid 画像リストを横並びにして、画像の右端にテキストを配置。グリッドレイアウトで実装レスポンシブ設定までしました。【サンプルコードあり】
画像のリストを横並びにして、その右端に文字を配置する設定。今回は、グリッドレイアウトを使ってやってみました。他にもflexも試したが、今回はグリッドレイアウトを使った方がレスポンシブを考えると簡単に実装できたのでその方法を記事にしました。実...