トップ
サービス
事例
コラム
会社概要
お問い合わせ
トップ
サービス
事例
コラム
会社概要
お問い合わせ
Column
コラム
TOP
コラム一覧
CSSの一覧
カテゴリーから探す
CSS
EC
Events
Podio
Tips
WordPress
未分類
アーカイブから探す
2023年
2022年
2021年
2015年
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でナビゲーションが開くよう実装した場合も、タブレットやスマホでは期待通りに動作しない場合があります。 そのため、タッチデバイスでは指定を効
READ MORE
2023.05.18
CSS
明奈
CSS|ヘッダー固定やフッター固定も簡単! パララックス風もできるposition: stickyとは?④[追従するサイドバーを実装]
これまで3回にわたり、position: stickyでどんなことができるかを紹介しました。 CSS|ヘッダー固定やフッター固定も簡単!パララックス風もできるposition: stickyとは?① CSS|ヘッダー固定やフッター固定も簡単!パララックス風もできるposition: stickyとは?②[パララックス編] CSS|ヘッダー固定やフッター固定も簡単! パ
READ MORE
2023.05.17
CSS
明奈
CSS|iOSで送信ボタンのデザイン指定が効かない場合の対策方法
iOSでの送信ボタンのデザインを変更して実機で確認した際、デザインが指定したとおりに表示されません。 これは、ブラウザーが表示を整える機能がデフォルトであるためです。 機能を無効にする場合は、以下のCSSを追加してください。 input[type="submit"]{ -webkit-appearance:none; } デザイン変更が効かない場合、ぜひ試してみてくださ
READ MORE
2023.05.12
CSS
明奈
CSS|テキストの自動拡大機能を無効化する方法
AndoroidのChromeやiOSのSafariには自動拡大機能があり、テキストが読みにくいと判断されると自動で大きいフォントサイズで表示されます。 今回は、その機能を無効化する方法を紹介します。 設定は簡単です。 body{ text-size-adjust: none; } また、Safariで無効化するには、ペンダープレフィックスを付けて追加設定します
READ MORE
2023.05.10
CSS
明奈
ヘッダー固定やフッター固定も簡単!パララックス風もできるposition: stickyとは?③[ヘッダー、フッター編]
前回position: stickyでパララックス風の動きを実装しました。今回はヘッダーやフッターを固定する方法をお伝えします。 初めにposition: stickyがどんな動きをするか知りたい方はこちらの記事もご覧ください。 まずはデモをご覧ください。 See the Pen Untitled by 林 (@hayashi-akina) on CodeP
READ MORE
2023.05.08
CSS
明奈
CSS|ヘッダー固定やフッター固定も簡単!パララックス風もできるposition: stickyとは?②[パララックス編]
前回、CSSのposition: stickyの紹介をしました。今回は、CSSのposition: stickyを使用してパララックス風の動きを再現してみたいと思います! まずはデモをご覧ください。 [video width="1140" height="600" mp4="https://autoproject.nagoya/wp-content/uploads/Untitled.m
READ MORE
2023.04.27
CSS
明奈
CSS|ヘッダー固定やフッター固定も簡単!パララックス風もできるposition: stickyとは?①
今回は、CSSのposition: stickyを覚えればさまざまな場面で使えそうなので紹介します。 position: stickyとは stickyとは「粘着性がある」という意味があり、指定した要素を(ヘッダやナビゲーション、サイドバーなど)スクロール時に、指定した位置にピタリと張り付けることができます! position: stickyを使用する際のポイント sticky使用
READ MORE
1
2
…
4
>