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

レスポンシブ対応としてよくメディアクエリが使用されますが、コンテナクエリを利用することで、メディアクエリよりも柔軟なレイアウトが可能となります。 コンテナクエリは、今年（2023年）2月に全ブラウザ対応になりました。 コンテナクエリとは 親コンテナを基準に、スタイルをあてることができる新機能です。 メディアクエリとコンテナクエリの違いは以下となります。 このように、メ

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

今回は、Shopifyで使用しているテーマのバージョンが不明な際に確認する方法を紹介します。 テーマ確認方法 ①Shopifyにログイン → 管理画面のオンラインストアをクリック ②下記、赤枠の箇所が現在のテーマのバージョンです。

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

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

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

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

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

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