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｜ヘッダー固定やフッター固定も簡単！　パ

iOSでの送信ボタンのデザインを変更して実機で確認した際、デザインが指定したとおりに表示されません。 これは、ブラウザーが表示を整える機能がデフォルトであるためです。 機能を無効にする場合は、以下のCSSを追加してください。 input[type="submit"]{ -webkit-appearance:none; } デザイン変更が効かない場合、ぜひ試してみてくださ

AndoroidのChromeやiOSのSafariには自動拡大機能があり、テキストが読みにくいと判断されると自動で大きいフォントサイズで表示されます。 今回は、その機能を無効化する方法を紹介します。 設定は簡単です。 body{ text-size-adjust: none; } また、Safariで無効化するには、ペンダープレフィックスを付けて追加設定します

前回position: stickyでパララックス風の動きを実装しました。今回はヘッダーやフッターを固定する方法をお伝えします。 初めにposition: stickyがどんな動きをするか知りたい方はこちらの記事もご覧ください。 まずはデモをご覧ください。 See the Pen Untitled by 林 (@hayashi-akina) on CodeP

前回、CSSのposition: stickyの紹介をしました。今回は、CSSのposition: stickyを使用してパララックス風の動きを再現してみたいと思います！ まずはデモをご覧ください。 [video width="1140" height="600" mp4="https://autoproject.nagoya/wp-content/uploads/Untitled.m

今回は、CSSのposition: stickyを覚えればさまざまな場面で使えそうなので紹介します。 position: stickyとは stickyとは「粘着性がある」という意味があり、指定した要素を（ヘッダやナビゲーション、サイドバーなど）スクロール時に、指定した位置にピタリと張り付けることができます！ position: stickyを使用する際のポイント sticky使用