トップ
サービス
事例
コラム
会社概要
お問い合わせ
トップ
サービス
事例
コラム
会社概要
お問い合わせ
Column
コラム
TOP
コラム一覧
CSSの一覧
カテゴリーから探す
CSS
EC
Events
FileMaker
Git
jQuery
Podio
Shopify
TEGARU
Tips
Trends
WooCommerce
WordPress
XAMPP
広告運用
集客方法
アーカイブから探す
2024年
2023年
2022年
2021年
2015年
2024.03.01
CSS
明奈
リンクテキストや画像が垂直方向に動かない場合に試してほしいこと
今回は、リンクテキストや画像(インライン要素)が垂直方向に動かない場合(vertical-alignが効かない時)に試してほしいことを紹介します。 vertical-alignとは インライン要素、テーブルセルに垂直方向の配置を指定できるプロパティです。 効かない原因 指定している箇所が親要素に指定している こちらは、親要素に継承はしないので、親要素に指定しても動
READ MORE
2024.01.16
CSS
明奈
2023年、12月全ブラウザ対応! これまでCSSではできなかった、特定の子要素を持つ親要素にスタイルを適用できる:has()擬似クラスとは!?
2023年12月に新しくリリースしたFirefox 121が、ついに:has()擬似クラス利用可能となりました。 これですべての主要なWebブラウザでの使用が可能となったため、今後使える場面が増える:has()擬似クラスを今回は紹介します。 :has()擬似クラスとは? CSSの疑似クラス関数で、:has()擬似クラスで指定した要素がある場合にのみスタイルを適用できる新機能です。
READ MORE
2024.01.15
CSS
明奈
インストールしたフォントをWebフォントとして設定する方法
今回はCSSの@font-faceを使用してインストールしたフォントをWebフォントとして表示させる方法を紹介します。 @font-faceとは @規則と呼ばれるものの1つであり、外部のWebフォントを読み込んだり、ローカル内のフォントデータを呼び出したりできます。 インストールしたフォント(ローカルフォント)を使用するメリット ローカルフォントは、あらかじめインストールされているもの
READ MORE
2023.12.22
CSS
明奈
CSS|画像を文字(テキスト)の形に切り抜く方法
今回は、CSSの[background-clip]を使用して、下記のように背景画像をテキストの形に切り抜く方法を紹介します。 設定方法 設定は簡単です。切り抜く箇所に、背景画像と[ background-image]とテキストの色を透過指定[color: transparent;]し、切り抜く[background-clip: text;]を指定してください。 HTML
READ MORE
2023.12.18
CSS
明奈
CSS|全ブラウザ対応した! グリッドレイアウト[Grid Layout]の新機能サブグリッド[Subgrid]とは
今回は、グリッドレイアウトの新機能サブグリッドを紹介します! グリッドレイアウトとは 要素を格子状(グリッド)に配置するレイアウト手法です。flexboxと同じで、親要素と子要素が必要。 親要素にdisplay: grid;を記載することで、下記のように全体を囲む親要素がグリッドコンテナーになり、子要素がグリッドアイテムになります。また、グリッドアイテムの間の空白スペースをグリッドギャッ
READ MORE
2023.12.04
CSS
明奈
Swiper|画像ズームアップでバグが起きた際に試してほしいこと
以前の記事で、「SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法」を紹介しました。 SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法 今回は、画像をズームアップさせた際にスマホで確認すると、途中でズームアップされず、かくっとなる現象が起きたため、その解決方法を紹介します。 設定は簡単です。 アニメー
Swiper
READ MORE
2023.10.16
CSS
明奈
CSS|画像の下の余白を消す方法
imgタグで画像を設定する際、画像の下に余白ができる場合があります。 今回は、その余白を消す方法を紹介します。 なぜ余白ができる? img要素に対して余白ができる原因は、画像を含むインライン要素にvertical-align: baseline;の初期値が効いているからです。 解決方法 解決方法は、 img要素に対して、vertical-align: bottom;
READ MORE
2023.09.29
CSS
明奈
iOSで、input, textarea入力時にズームインしてしまうのを解決する方法
iOSでinput, textareaを入力時にズームインしてしまう問題を解決する方法を紹介します。 設定は簡単です。 input,textarea { font-size: 16px; } 上記は16px以上で、ズームインを回避することができます。 また、もう一つの方法としてviewportの設定でズームインしてしまう問題を解決できるので、紹介します。 以下
iOS
READ MORE
2023.08.04
CSS
明奈
CSS|キャプション(テキスト)の幅を画像の幅に合わせる方法
画像の下にキャプション(テキスト)を入れる場合、下記のようにキャプションの幅が画像よりはみ出して表示されてしまうことがあります。 今回は、HTMLの<figure>タグと<figcaption>タグを使用し、CSSでキャプションの幅を画像の幅に合わせる方法を紹介します。 HTML <div class="img-box"> &l
READ MORE
2023.07.06
CSS
明奈
CSS|[レスポンシブ]レイアウト変更に今後使えるコンテナクエリ(@container)が便利
レスポンシブ対応としてよくメディアクエリが使用されますが、コンテナクエリを利用することで、メディアクエリよりも柔軟なレイアウトが可能となります。 コンテナクエリは、今年(2023年)2月に全ブラウザ対応になりました。 コンテナクエリとは 親コンテナを基準に、スタイルをあてることができる新機能です。 メディアクエリとコンテナクエリの違いは以下となります。 このように、メ
READ MORE
1
2
…
5
>