akina@autoproject.biz | Page 3 of 8 | 自動化する会社　オートプロジェクト

Columnコラム

TOP
コラム一覧

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.11.21
jQuery

明奈

jQuery｜ページを読み込み後の処理が効かない場合に試してほしいこと

jQueryのページを読み込み後の処理が効かない場合は、以下のステップを試してみることをお勧めします。例 $(window).load(function() { // 処理 }); こちらの記述がきかない場合は、jQueryのバージョンを確認してください。 jQuery3.0以降では上記の記述だと効かなくなるため、以下の記述をしてください。 $(window
READ MORE
2023.10.16
CSS

明奈

CSS｜画像の下の余白を消す方法

imgタグで画像を設定する際、画像の下に余白ができる場合があります。今回は、その余白を消す方法を紹介します。なぜ余白ができる？ img要素に対して余白ができる原因は、画像を含むインライン要素にvertical-align: baseline;の初期値が効いているからです。解決方法解決方法は、 img要素に対して、vertical-align: bottom;
READ MORE
2023.10.03
XAMPP

明奈

XAMPPでphpMyAdminに入れなくなった際に、試してほしいこと

前回は、XAMPPのMySQLがスタートができない際の、エラー解消手順を紹介しました。今回は、MySQLはスタートしているのにもかかわらず、phpMyAdminに入れずエラーが出る場合に試してほしいことを紹介します。エラー内容下記の添付のように、phpMyAdminを開くことができなくなり、エラーが出ている。試してほしいことコントロールパネルを開きM
1. MySQL
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.25
XAMPP

明奈

XAMPPのMySQLがスタートができない際に試してほしいこと

開発には欠かせないソフトウェアを、簡単かつ無料で一気にインストールすることができるXAMPPですが、エラーが出て思うようにいかないことがあります。今回は、その中でMySQLがスタートできない際に試していただきたい点を紹介します。エラー内容コントロールパネルでXAMPPのMySQLの「Start」ボタンを押下した際、下記のエラーが出てしまい、スタートできない。エラー解
1. MySQL
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