HTML CSS

【サンプルコードあり】HTML/CSSで flex-wrap: wrap; が効かない場合の対処の方法

flex-wrap: wrap; が効かない場合の対処方法はいくつかの方法があります。今回、ページを縮めた時に要素が下に折り返す設定を下が、要素が縮むだけで折り返されない状態になってました。その解消法はいろいろあります。その中の1つで今回実...
HTML CSS

【サンプルコードあり】 ナビゲーションバー(nav)をinline-blockを使って作った方法。

ナビゲーションバー(nav)の作成方法はいろいろありますが、この記事ではnavをulのliで作成して、liをinline-blockにすると横並びになるのでその方法で作成。calcで均等配置して作成。実際のサンプルコードも記載してます。
VScode

VSCodeを使う時に知ってると便利なショートカットキーまとめてみました。Windows版・Mac版表あり

VSCodeを使う時に知ってると便利なショートカットキーまとめてみました。このショートカット知ってると作業効率上がるので、出来れば覚えて使えるようになりましょう。ショートカットキーは多くのものがありますが、最初は覚えるの大変でしょうから、ま...
フリーナンス

マイナンバーカードの健康保険証登録で7500円分ポイント付与申請受付が 6月30日から開始みたいです。

マイナンバーカードの健康保険証登録方法調べたので、まとめてみました。マイナンバーカードの健康保険証登録で7500円分ポイント付与申請受付が 6月30日から開始みたいです。厚生労働省がYouTube動画も公開してたのでその動画も載せました。
HTML CSS

Page Ruler Reduxが使えなくなったので、代わりにグリッド定規(Grid Ruler)とDimensionsでページの要素などのサイズを測定の拡張機能使ってみた。

ページの要素などのサイズを測定できるGoogle Chromeの拡張機能。Page Ruler Reduxを使ってたのですが、最近この拡張機能がポリシーに違反してるとのことで、使用出来なくなった。そこで、変わりに使える拡張機能探したのですが...
GAS

サンプルコードあり GASを使って簡単なHTMLサイトの作成が可能。新しいエディタはデプロイで公開

GASを使って簡単なHTMLサイトの作成が可能。この記事では新しいエディタはデプロイで公開まで書いてます。GASの勉強してると、よくぶち当たる問題。それは、エディタがどうも最近新しくなって、操作ボタン等の配置が大幅に変更になってる。今時点で...
HTML CSS

【サンプルコードあり】 li(リスト)スタイルで、hoverした時に背景色の変更したが枠いっぱいに反映されない。

li(リスト)スタイルで一覧表を作成して、aタグにhoverした場合、背景色が変わる設定をしても、背景色が枠いっぱいに反映されない場合その解消が出来たので、この方法でホバーした時に反映される範囲を操作しやすくなるそんな内容を記事に書きました。
HTML CSS

【サンプルコードあり】ナビの文字にa要素でリンクつけて下線表示、hoverした時に上下に広がってしまった時にした解消方法。

今回は、ナビゲーションメニューの所で、文字hoverした時に文字の下に下線が出る設定をした。文字hoverした時に下線が出るようにはなったが、hoverしたら上下にふくれるような動きになる。今回の下記のサンプルの場合は、navの文字がhov...
HTML CSS

【サンプルコードあり】HTML・CSSでコーディングしてて、意図しないマージンと要素の重なり(おかしな重なり)等があった場合の修正

今回、コーディング時に下記のように変な状態になってたんで、その原因と、今回どうやって修正したか記事にしました。もし同じような状況になって場合は参考にしてみてください。改善前の状態改善後の状態今回の不具合の原因このセクションを囲ってる中に、M...
JavaScript

【サンプルコードあり】ハンバーガーメニューページ内リンク飛ばない時の解消はJavaScriptコード追加で簡単に出来た。

ハンバーガーメニューページ内リンク飛ばない時の解消JavaScriptを使って作成したハンバーガーメニューで、リンクをクリックした時に、ハンバーガーのウインドウが消えない状態の解消方法を書いていきます。ハンバーガーメニューから、リンクをクリ...