CSS | 自動化する会社　オートプロジェクト

Columnコラム

TOP
コラム一覧
CSSの一覧

2023.12.04
CSS

明奈

Swiper｜画像ズームアップでバグが起きた際に試してほしいこと

以前の記事で、「SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法」を紹介しました。 SwiperとCSSを使用し、スライダーの背景画像をズームしながらふわっと切り替えする方法今回は、画像をズームアップさせた際にスマホで確認すると、途中でズームアップされず、かくっとなる現象が起きたため、その解決方法を紹介します。設定は簡単です。アニメー
1. 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の設定でズームインしてしまう問題を解決できるので、紹介します。以下
1. 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
2023.06.20
CSS jQuery

明奈

CSS｜［jQuery］data属性の使用方法③（data属性を取得し、色を切り替える方法）

これまで2回にわたり、CSSでのdata属性の使用方法を紹介しました。気になる方は以下の記事もご覧ください。 deta属性の使用方法①［タイトルに仮名を付ける方法］ deta属性の使用方法②［ラベルを作成し、文言や色を指定する方法］今回はdata属性をを取得し、色を切り替える方法を紹介します。まずは、下記の［Result］の中にある赤、青、緑のボタンをそれぞれ押してください。
READ MORE
2023.06.12
CSS

明奈

CSS｜deta属性の使用方法②［ラベルを作成し、文言や色を指定する方法］

前回は、data属性をしようしてタイトルに仮名をつける方法を紹介しました。data属性のルール指定方法は前回の記事に書いてあるので気になる方はご覧ください。今回は、以下のようにラベルを作成し、文言や色を指定する方法を紹介します。 HTML <div class=""> <p data-type="new">あたらしく
READ MORE
2023.06.06
CSS

明奈

CSS｜deta属性の使用方法①［タイトルに仮名を付ける方法］

deta属性とは deta属性は、タグに対して指定できる属性です。 deta属性の指定は簡単です。任意のHTMLタグにdata-○○を指定します。○○の箇所は以下ルールを守れば自由に指定できます。要素[data-任意の名称=”任意の値”] 属性名に使用できる文字数字文字 -（ハイフン） .（ドット） _（アンダースコア） ※「xml
READ MORE
CSS

明奈

CSSで［input type=”number”］の上下矢印を非表示にする方法

今回は、<input type="number">を設定した際、下記のように矢印がデフォルトで出るので、削除する方法をお伝えします。設定は以下です。 Chrome、Safariの場合 input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-sp
READ MORE
2023.05.31
CSS

明奈

CSS｜「スマホ表示」画面が動く際に原因を見つける方法

コーディング後にスマホでチェックをすると表示が横や縦に動いてしまう現象があり、大体はbodyからはみ出した要素が原因だったりします。今回は、そのはみ出した要素を簡単に探す方法を紹介します。方法は簡単です。全称セレクタを利用してoutlineを表示させます。 * , *::after, *::before{ 　　　　outline: 1px solid rgb(234,
READ MORE