css

HTML detailsタグアニメーション簡単実装ガイド！CSS・JSでアコーディオン、三角アイコン変更を実現

detailsタグアニメーションの実装方法をCSS/JavaScript両面から解説。開閉時のスムーズな動きを実現するtransition設定法から、三角アイコンのカスタマイズ術、複数アコーディオンの排他制御まで。主要ブラウザ対応のクロスプラットフォーム戦略と実践サンプル付き。誰にでも分かりやすく丁寧にご紹介します。

【保存版】CSS var()の使い方徹底解説！カスタムプロパティで色・サイズ・レイアウトを一括管理するテクニック＆実践例

CSS変数でCSS設計を効率化！カスタムプロパティの基本（定義、var()、スコープ）はもちろん、カラーテーマ、レスポンシブ、ダークモードといった現場で即役立つ活用例、JavaScript連携などの応用テクニックまで、具体的なコードとともに詳しく解説します。CSS変数でよりメンテナンス性の高いコードを目指しましょう。

CSSの「@property」の使い方完全ガイド｜基礎・実例・注意点まで徹底解説【初心者向け】

CSSの@propertyは、カスタムプロパティに型や初期値、継承の有無を定義できる新しいルールです。この記事では、基本的な使い方や構文の解説はもちろん、アニメーションでの活用例やJavaScriptとの連携方法も紹介。主要ブラウザの対応状況や導入時の注意点までまとめているので、これから導入したい方にも安心です。

CSSのエラーチェック方法とおすすめツール

はじめにCSSはWebサイトのデザインを決定する重要な技術です。しかし、コードが複雑になると、エラーや予期しないスタイル崩れが発生することがあります。効率的なエラーチェックを行うことで、保守性の高いコードを維持し、サイトの品質を向上させることができます。この記事では、CSSのエラーチェック方法と、役立つツールを解説しま...

CSSでスクロールできない問題の原因と解決策

はじめにWebサイトを制作していると、意図せずスクロールができなくなる問題に直面することがあります。本記事では、この問題が発生する原因と具体的な解決策を解説します。初学者がつまずきやすいポイントから、現役エンジニアが見落としがちな細かい事項まで、特にスマホ環境での問題を詳しく説明していきます。スクロールできない原因と対...

box-shadowを特定の方向だけに適用する方法 – 影を横には出さずに縦だけに出したいんです

CSSである要素に強調を持たせるために、プロパティbox-shadowは非常に有用な機能です。しかし、特定の方向だけに影を適用したいと思っても実際には不要な方向にも弱い影が出てしまうことがあります。この問題を回避するためのテクニックをご紹介します。box-shadowの基本box-shadowはCSSで影を指定するため...

【CSS】floatした画像を文章の右下に回りこませる方法

はじめにデザイナーから渡されるデザインカンプで画像が右下の回り込んでいるパターンを見たことがある人はどれだけいるのでしょうか？画像が回り込んでいる部分の幅や高さが固定値ならばそれほど困らないのですが画面幅によって見た目が変わるレスポンシブデザイン全盛の現在では対応に困ってしまいます。そんな右下回り込み画像ですがCSSの...

入力内容に応じて高さを自動調整するtextareaの作り方（Javascript、CSS<field-sizing>、jQuery、ライブラリを使った各方法）

はじめにWEBサイトで長い文字列を入力可能にするtextareaタグですがデフォルトのままだと行が増えていくと初期の高さを超えた時に上部の文字が見えなくなってしまいます。スクロールバーが出現してスクロールをすることによって見ることができはしますがいちいちスクロールするのは煩わしいのでユーザーが使いやすいように入力内容...

これは便利！HTMLのdialogタグでのモーダルウインドウ実装とアニメーション設定方法

モーダルウインドウ機能を実装するのに古い方法で作成していませんか？古い方法とは次のようなやり方です。オーバーレイ（モーダルの背景）用のdivタグを用意モーダルの実体用のdivタグを用意cssもしくはjsでpositionやopacity、displayなどの値を操作開閉イベントを登録モーダルがアクティブ状態の時に背景が...

iPhone、safariでボタンの文字が青くなる原因と対処方

はじめにWEBサイトのコーディングも終盤にかかりいざ実機確認を行った際、「iPhoneでリンクじゃないボタン（buttonタグ）の色が黒じゃない…」という状態になったことはないでしょうか？Windowsの端末で作業している人は特に。BootstrapなどのCSSフレームワークを使用していれば基本要素には全部ノーマライズ...

grid-areaプロパティでレスポンシブレイアウトをもっと楽に自由に！cssのgridレイアウトの活用方法

はじめにレスポンシブレイアウトを構築するとき、どのようにCSSを設定するのがよいのでしょうか？display:flex、display:gridのどちらかで設定を行うのがセオリーとなっています。どちらを使うかは条件によって分かれます。例えば…＜条件1＞スマホは1列、デスクトップは4列、要素は左詰めでOK＜条件2＞スマホ...

知っておくとかなり使える！複数行の文字を丸めるcssプロパティline-clamp

はじめにあるブロック範囲内にテキストを収めたい場合、cssプロパティtext-overflow: ellipsis;を設定するとはみ出した文字は…（３点リーダー）として表示されます。WordPressなどの記事の抜粋を表示するサイト制作の際にとても役にたつプロパティなのですがtext-overflow:ellipsis...

レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら

はじめにレスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。CSSではなくnode製altcssのstylusのコードになります。各要素に気軽に設定できるようにmixinになっています。styl...

ちょっと待って！！知っていますか？input type=numberの落とし穴

はじめにユーザーに何かを入力してもらいたい画面を作成する場合にinputタグのtypeは何にしていますか？数字を入力してほしい場合にtype属性の値をnumberにするべきだと安直に考えてはいけません。input type=numberには落とし穴があります。input type=numberの落とし穴Chromeでs...

新しいページトップボタンの処理の書き方。【CSS】scroll-behaviorと【JS】scrollIntoViewを使ったスムーズスクロール

WEBサイトの定番部品の「ページトップへ戻るボタン」。だいたいのWEBサイト、ランディングページ（LP）で必要なので使い回している人も少なくないはずです。jQueryのanimateを利用している人、そのコードもう古いかもしれません。IE11がサポート外になった今、もっと簡単な新しいコードで書いていきましょう。ページ内...

flexbox使用の要素が折り返さない！？解決への鍵はflex-basisの値だった

Webデザインで「要素を横並びにしたいのに、勝手に折り返される…」そんな経験はありませんか？flex-wrap: nowrap;を指定しているのに思ったように動作しない原因は、親要素のサイズ、CSSリセット、ブラウザの互換性など、さまざまな要因が考えられます。この記事では、Flexboxで要素を折り返さないための具体的...

1 2