CSS 【CSS】どうしてもページスクロールすると左右に動いてしまう問題！（苦労しました）
この問題、すっごーーーーーく苦労しました。 ４ｐｘのはみ出しを探す作業が大変すぎました。 悩んでいる方もいると思いますので共有させていただきます。 要素がはみ出しているか確認する方法 デベロッパーツールを使用して確認します。 一番簡単なのが...
CSS
CSS CSS 【CSS】hrタグで区切り線を使用するが、縦線になる問題
<hr>タグは、横線を引くときに使うHTMLのタグです。 今回は、<hr>タグを使用しているにもかかわらず、縦線になる解決方法をご紹介します。 縦線になってしまったCSSコード hr.case-line { border-top: 1px ...
CSS 【CSS】セクション間の区切り（画像を下三角/斜め）
自分用メモなのでお許しください。 完成図 HTML <div class="main"> 内容 </div> CSS .main::before { content: ""; width: 100%; height: 55px; backg...
CSS 【Tailwind CSS】ニュースデザイン・お知らせのところのデザイン
今回は、よくあるサイトの「お知らせ」「ニュース」のデザインをTailwind CSSで作成してみました！ 完成図はこちら↓ コードはこちら↓ <section class="sm:min-w-64 mx-auto flex w-full b...
CSS 【Tailwind CSS】ラベルの書き方
シンプルな赤いラベル <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold"> ○○ </span> bg-red-500 → 背景色...
CSS 【SEO】CSS（JS）の圧縮／PageSpeed Insights
ページの速度改善についてです。 ページの速度を速めることは、SEO対策として大切になってきます。 わたしは、ランディングページを作成していましたが、ページの表示速度を速めることはランディングページの利便性というのを改善することにつながり、サ...
CSS 【CSS】画面が左右に動いてしまう問題
サイト制作をしているときに、画面が左右に動いてしまい、スクロールが不安定になってしまうことがありました。 そこで対策方法がわかったので共有します。 最初に、はみ出ている要素がないか確認します。 padding等で、横幅100％からはみ出して...
CSS 【CSS】背景の区切り
オシャレなサイトやLPページでは、セクションの分かれ目でデザイン性のある背景の区切りが使われています。 このサイトでは、素敵な区切りを作成できるもので、CSSをコピペすることができます。 三角の区切り こんな感じの区切りを作ります。 <!-...
CSS 【サイト作成】画面が動いてしまう問題
サイト作成し、スマホで確認した際に、画面が左右に動いてしまうことがありました。 縦のスクロールだけでいいのに、横にスクロールできるような感じです。 そのままにしてもいい感じもしましたが、LPの作成だったので訪問してくれるユーザーが煩わしくて...
CSS 【CSS】リストの改行をそろえる、アイコンを画像にする、アイコンと文字の高さを揃える！
改行を揃える方法 これを これにします。 /* リストの改行の位置をそろえる */ .list { margin-left: 2.3em; text-indent: -2.3em; } 大きさは、アイコンの大きさによって調整します。 リスト...