CSS 【CSS】hrタグで区切り線を使用するが、縦線になる問題
<hr>タグは、横線を引くときに使うHTMLのタグです。今回は、<hr>タグを使用しているにもかかわらず、縦線になる解決方法をご紹介します。縦線になってしまったCSSコードhr.case-line { border-top: 1px das...
maple
CSS CSS 【CSS】セクション間の区切り（画像を下三角/斜め）
自分用メモなのでお許しください。完成図HTML<div class="main"> 内容 </div>CSS.main::before { content: ""; width: 100%; height: 55px; background...
CSS 【Tailwind CSS】ニュースデザイン・お知らせのところのデザイン
今回は、よくあるサイトの「お知らせ」「ニュース」のデザインをTailwind CSSで作成してみました！完成図はこちら↓コードはこちら↓<section class="sm:min-w-64 mx-auto flex w-full bg-w...
Github 【Github】マークダウン コードを表示させる方法
簡単！コードの前後に「```」をいれるだけ！（これで終了…）
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％からはみ出しているこ...
SQL 【SQL】GoogleBigQuery メモ
sample-- SELECT * FROM `booleanoid.limo_orders.orders`（すべて取り出す）-- SELECT * FROM `booleanoid.limo_orders.orders` WHERE or...
SEO 【SEO】PageSpeed Insights「第三者コードの影響を抑えてください」をタグマネージャーを用いて対応
PageSpeed Insights で、ページの表示速度がどのくらいなのか計測することができます。ページの表示速度を上げることは、SEO対策として重要です。私の過去の記事でも、Wordpressで作成したサイトの速度を上げることについて掲...
SEO 【SEO】レイアウトシフトメモ
自分用のメモとして残しておきます。数ミリ秒の低下でもペナルティになる累積レイアウトシフト(CLS)は、PageSpeed Insights でわかるCLS判定値が0.1以下ならOK、0.1以上なら要改善・0.1未満⇒良好・0.25以下⇒改善...