CSS 【CSS】iPhone Safariで上下に余白ができてしまう問題
HTML・CSS・JavaScriptで制作したサイトを調整していた際、iPhone（iOS Safari）でのみ上下に白い余白が出てしまう現象に遭遇しました。問題の画像↓（ちなみにこのサイトはです！）調べていく中で分かった原因と、実際に効...
CSS
CSS 
CSS 【JavaScript】Chart.jsでラベルを表示させたい！
自分用のメモとして記事を作成しました。ラベル表示で悩んでいる方にもお役に立てたらと思います！今回は下のようなグラフを作成します。別の記事で、Chart.jsが表示されない件についても記事にしているので、お困りの方はご参照ください！書き方HT...
CSS 【JavaScript】Chart.jsが表示されない！｜初期状態非表示にしてませんか？
今回はサイトで円グラフを表示させるために、Chart.jsを使用することにしました。検索していると比較的簡単そうに実装できそうだったため舐めていましたが、落とし穴が！特に、入力した数値を入れて「enter」でグラフを表示させるような動きを書...
CSS 【WordPress】Lightning｜パンくずリストの位置を変える/自分好みのページヘッダーに変える方法
WordPressの無料テーマ「Lightning」のカスタマイズを行なっています。有料にすると、本格的なサイトに簡単にすることができるようですが、私はCSSを使って無料でカスタマイズを行なっております。今回は、パンくずリストの位置を修正す...
CSS 【CSS】わかりにくいposition: fixed・relative・absolute・fixed 要素の位置調整、考え方
position なんとかは、個人的になかなか難しくて、なんとなく使っていた感じだったので、一旦学習し直してみました。わかりやすく図をいれて記事を書いたので、ご参照いただけたら嬉しいです！1. absolute と relative の関係...
CSS 【CSS】要素の位置を調整する top と transform: translateY(-50%) の考え方
Web制作でよく出てくるのが「要素を上下や左右の中央にそろえたい」「ロゴやハンバーガーボタンをきれいに配置したい」といったレイアウト調整です。この記事では、top・calc()・transform: translateY(-50%) を使っ...
CSS 【CSS】どうしてもページスクロールすると左右に動いてしまう問題！（苦労しました）③
この問題、すっごーーーーーく苦労しました。４ｐｘのはみ出しを探す作業が大変すぎました。悩んでいる方もいると思いますので共有させていただきます。過去にも記事にしているので、載せておきますが、おそらく下記の順番で検証した方が早いかもしれないです...
CSS 【CSS】hrタグで区切り線を使用するが、縦線になる問題
<hr>タグは、横線を引くときに使うHTMLのタグです。今回は、<hr>タグを使用しているにもかかわらず、縦線になる解決方法をご紹介します。縦線になってしまったCSSコードhr.case-line { border-top: 1px das...
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...
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;}大きさは、アイコンの大きさによって調整します。リストのアイコンを画...
CSS 【CSS】オシャレな境界線と、白い線を消す
ギザギザ、尖り、丸い境界線が作れるオシャレな境界線を作ることに関しては、別のページでも紹介しています。境界線をつけると、白い線がついてしまう問題境界線をCSSで作ると、白い線ができてしまうことがあります。これを解消する方法をご紹介します。c...
CSS 【CSS・js】ヘッダーをスクロールに合わせて表示・非表示させる（jQueryなし）
header { position: fixed; top: 0; left: 0; z-index: 99; height: 5.5em; transition: transform 0.3s 0.1s;}/* スクロールするとヘッダーが...
CSS PNG形式の画像に影をつけたいけどうまくいかない！
PNG画像で、周囲の背景は透過しているとき、「box-shadow」で影をつけると、透過しているところにも影がついてしまいました。わかりにくいのですが、角丸なのに、四角として影がついており、白くなってしまいます。この時に便利なのが、filt...
CSS 【CSS】アイコンと文字を上下中央に
こうなってしまっているのをこれにしたい！① アイコン＋文字のクラスに「display: inline-block;」「vertical-align: middle;」を指定② アイコンに「vertical-align: middle;」を指...