HTML CSS 【サンプルコードあり】ｄrawer.js を使って、ドロワーメニューを作成した時、内部リンクの場合メニューが閉じない現象になるので、それを解消する方法が簡単だった。
ｄrawer.js を使うと ドロワーメニューを簡単に作成することが可能今回 drawer.jsで、ページ内リンクをクリックした時、ページは変化するけど、メニューが開いたままになった。ドロワーメニューメニューの閉じない場合。解決方法が見つか...
HTML CSS
HTML CSS 
HTML CSS 【サンプルコードあり】display flexやinline-block で横並びでボタンの配置の為 position: absolute したら要素が下に潜り込んでしまった時にやった事
flex や inline-block;で横並びした時、端のボタンをposition: absolute;で配置したら、浮かせた要素の下に入り込んで重なってしまってちょっと悩んだ。試行錯誤の末解決出来たのでそのコードも書いてます。
HTML CSS 【サンプルコードあり】flexで横並びにした時、文字（テキスト）が縦１列になってしまった時、これで治りました。
flexで横並びにした時、文字（テキスト）が縦１列になってしまった時にこの方法で治りました。実際にボタン作成時に起きた現象のコードと実際に解決できたコードのサンプルも記載してるので画像のようなボタンが作成できます。参考にしてください。
HTML CSS flexbox （フレックスボックス）3カラム 5つの要素の時、２行目の配置を右側開けて左に寄せる方法。疑似要素で簡単に出来る。【サンプルコードあり】
flexboxで、3カラムで要素を５つ２段でならべた場合下２段目の要素が２つの時の配置がうまくいかない。横に３カラムの２行で５つの要素を並べた時に、均等配置でしたいので、justify-content: space-between;just...
HTML CSS 【サンプルコードあり】グリッドレイアウトでサイズがバラバラの画像の配置をでやってみた。レスポンシブ対応まで挑戦。
グリッドレイアウトを使うと、レイアウトが簡単に作れるようになる。今まで使ってたFlexboxでは、ちょっと再現しにくいレイアウトもグリッドレイアウトを使うと、いろんなパターンが簡単に作れる印象です。このグリッドレイアウト、色々調べた結果、不...
HTML CSS 【サンプルコードあり】トップ画像にスモーク効果つけて、ロゴやタイトル入れると ロゴやタイトルにもスモーク効果がついて見にくくなった。 それを解消するのに見つけたコードの書き方。
CSS で画像にスモーク効果をあてるのは簡単で、いろんなパターンがあります。この記事では、トップ画像にスモーク効果つけて、ロゴやタイトル入れるとロゴやタイトルにもスモーク効果がついて見にくくなった。それを解消するコードの書き方１つ見つけたの...
HTML CSS 初心者必見。VScode使ってコーディング中にやってしまった失敗。よくやる失敗例も紹介。
VSCodeでコーディング中に、設定が反映されてないようなおかしい現象なったことありませんか？私は、しょっちゅうです。今回も、やっちゃいました。コードを書いて、修正作業してる時に関係のない文字を打ち込んでいたみたいです。それが原因で、その直...
HTML CSS カードレイアウト BOX型デザインでカード全体をクリック出来るようにする方法。【サンプルコードあり】 初心者がよくやる失敗しないように
BOX型（カード）デザインのコーディングで初心者がよくやる失敗の１つで、aタグを入れてるが、BOX（カード）内でリンク先に飛ばない部分が出来る場合がある。BOX（カード）型デザインで、ボックス内全体をクリック可能範囲にしよと思ったが、思うよ...
HTML CSS CSSで文字の下線の長さや位置を自由に変更可能出来る方法わかったんでやってみました。上の線もOK 【サンプルコードあり】
HTML＆CSSで文字の下に線を入れ長さの変更も可能になります。通常border-bottomで指定すれば線を入れることができます。ただ線の太さや色の指定はできるが、長さの指定はこの方法では出来ません。変更方法のサンプルコードも書いてます。
HTML CSS 【サンプルコードあり】HTML/CSS で画像の境目で文字の色を変更して表示する方法。数パターン参考に書いてみました。流れる文字もあり
HTML/CSS 文字を画像などの境目で左右違う色に変更する方法。何パターンか記事にしてみました。今回は画像の位置がずれると、色の変更部分もズレていく感じで出来ました。この辺は、サンプルコードも書いときますので、色々数値変更してやってみてく...