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

Columnコラム

TOP
コラム一覧
CSSの一覧

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
2023.05.29
CSS

明奈

CSS｜メディア特性を使用してスマホのみhoverさせない方法

要素をhoverしたときに、色が変わるリンクなどがあります。これをスマートフォンなどのタッチデバイスで実行すると、「タップ後に違う要素がタップされるまでそのスタイルが反映され続ける」など、意図しない動きになってしまうことがあります。また、hoverでナビゲーションが開くよう実装した場合も、タブレットやスマホでは期待通りに動作しない場合があります。そのため、タッチデバイスでは指定を効
1. hover
READ MORE
2023.05.18
CSS

明奈

CSS｜ヘッダー固定やフッター固定も簡単！　パララックス風もできるposition: stickyとは？④［追従するサイドバーを実装］

これまで3回にわたり、position: stickyでどんなことができるかを紹介しました。 CSS｜ヘッダー固定やフッター固定も簡単！パララックス風もできるposition: stickyとは？① CSS｜ヘッダー固定やフッター固定も簡単！パララックス風もできるposition: stickyとは？②［パララックス編］ CSS｜ヘッダー固定やフッター固定も簡単！　パ
1. パララックス
READ MORE