- 2022年9月1日
- 2023年5月11日
【CSS】last-childとlast-of-typeの違いについて
CSSのlast-childとlast-of-typeの違いについてのまとめました。 似ている2つのセレクタ、その違いをしっかりと理解していきましょう。 【CSS】last-childとlast-of-typeの違いについて 並んでいる要素に要注意！ 分かりやすい […]
CATEGORY
css
- 2021年12月31日
- 2023年5月11日
【CSS】デザインが反映されない場合の対処法【media属性は合っていますか？】
CSSの表示が反映されないときの対処法です。 CSSファイルの指定は正しい CSSの記述も間違っていない ChromeのデベロッパーツールからもCSSファイルを確認できる といったときの原因はmedia属性にあるかもしれません。 【CSS】デザインが反映されない場 […]
- 2021年8月8日
- 2023年5月11日
【CSS】要素の順番の入れ替え方法について
HTMLの順番を入れ替えたい場合の方法についてまとめました。 縦方向、横方向、ともにCSSのみで実現可能です。 【CSS】要素の順番の入れ替え方法について 縦組みの要素をCSSで入れ替える まずは上下の順番の入れ替えからです。PCとスマホで順番を入れ替えたい場合な […]
- 2021年7月29日
- 2023年5月11日
【CSS】z-indexが効かない場合の対処法
CSSで使用できる「z-index」プロパティ。 コンテンツの重なり順が指定できる、とても便利な機能ですよね。 ですが、それが効かない場合があります。 原因は大きく分けて以下の二つですので、それぞれ見ていきましょう。 positionを指定していない before […]
- 2021年7月26日
- 2023年5月11日
【CSS】display要素のgridキーワードの使い方
CSS3で登場したdisplay要素の新キーワードgridについてのまとめです。 【CSS】display要素のgridキーワードの使い方 まずは基本となる、grid（枠組み）の作り方について 大枠に「display:grid」を指定することで、grid表示ができ […]
- 2021年5月26日
- 2023年5月11日
「!important」のCSSの無効化、上書き方法について
wordpressでCSSを修正する場合や、誰かの作ったサイトに追記をするときに「! important」が邪魔になることがあります。 追加したHTMLページには「!important」のCSSを適用したくないんだけどなぁ、と思う場合です。 設定されていると、「な […]
- 2021年5月18日
- 2023年5月10日
【CSS】after、before疑似要素のリセットの方法
既存のwordpressテーマや誰かが作成したページを修正する際に、after、before疑似要素をリセットしたい場合があります。 すでに実装されている部分は修正したくないけど、新しく実装する場所にはbefore、after要素を無しにしたい といった形です。方 […]
- 2021年5月7日
- 2023年5月10日
【CSS】HTMLのテーブルを縦にする方法
HTMLのtable要素を縦にするテクニックです。tableを縦にするのはスマホ対応の時に多いです。 「PC表示は横表示だけど、スマホは縦にしたい」といった場合ですね。 意外にも簡単に出来るので、やり方を覚えておきましょう。 HTMLのテーブルを縦にする方法！ ま […]
- 2021年4月8日
- 2023年5月9日
【CSS】ラジオボタンやチェックボックスのデザインを良くする
ラジオボタンやチェックボックスはデフォルトの状態だと少し硬い印象を受けます。 デフォルトのラジオボタン、チェックボックス ちょっとお堅い感じですよね。 デザイン性を高めることは多いので、このラジオボタン、チェックボックスを次のように変更しましょう。 変更の手順さえ […]
- 2021年3月5日
- 2023年5月9日
CSSだけで三角形を作る方法【仕組みも解説しています】
この記事では、CSSのみを用いて三角形を作る手順を紹介していきます！ おしゃれなデザインのサイトなどでは、斜めにカットした背景や、三角形の図形を表示していることが多いです。 実はこれらのデザインはCSSのみで出来るのですが、やや難易度が高くなっています。 ですので […]