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

Columnコラム

TOP
コラム一覧
CSSの一覧

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