【CSS】position: sticky で固定ヘッダーを実装する - Qiita
はじめに こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。 Webサイト制作でよく使う固定ヘッダー。 この記事では、 position: sticky で固定ヘッダーを実装するメリットについての解説と、実装例を紹介します。 position: fixed の問題点 position: fixed は、要素をビューポート（ブラウザの表示領域）に対して固定表示する際に便利なプロパティです。 しかし、 position: fixed を使用すると、固定された要素が他の要素の上に重なって表示されてしまうため、コンテンツが隠れる問題が発生します。 これは、position: fixed を適用することでヘッダーが通常フローから外れるためです。 例えば、以下のようなHTML構造とCSSスタイルシートを考えてみましょう。 See the Pen Header
私がマージンをできるだけ使いたくない理由 - Qiita
はじめに 突然ですが、皆さんはCSSのmargin（マージン）をよく使いますか？ 私はマージンを多用しないように気をつけています。というより、あまりマージンと関わりたくないと思っています。今回の記事では、「どうして避けているのか」について自分なりの考えをまとめてみたいと思います。 あくまでも個人の意見なので、こういう考えの人もいるのだなと捉えていただけますと幸いです。もっとこうしたら良くなるのに！というご意見は大募集しているので、どんどん教えてください。 マージンを使いたくない理由 マージンを使いたくない一番の理由に、スタイルが崩れるというものがあります。「崩れる」と一言で言っても、わかりずらいと思うので落ち着いて考えをまとめてみました。その結果、下記の2パターンに分かれるという結論に行きつきました。 マージンが不可解な挙動をする コンポーネントとして使い回しずらい この二つの観点から、マ
『CSS設計の教科書』をエンジニア歴1週間の人間が読んで学んだこと - Qiita
エンジニアの第一線で活躍しようと志し、現在カリキュラムを学習をさせていただいている者です。 この1週間模写コーディングをしながら、WEBページの作り方を学んでいますが、カリキュラムとして「谷 拓樹(2014) 『Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法』 インプレス」を読む機会がありました。 下記に、エンジニア歴1週間の人間の視点から、この本を読んで学んだこと、感想を備忘録的に抜粋してまとめていきます。 専門知識がほとんどないため、文章がかなり稚拙になっています。用語の解釈にも誤りがあるかもしれません。また、あくまで私個人が学んだこと、感想であり、この本の内容、主張を代弁しているわけではない点につきましても、予めご了承ください。 cssにおける設計とは さまざまな人がコード設計に携わるため、また複雑・リッチなWEBサイトが求められ
TailwindCSSで学ぶ技術批判の気をつけ方
Helping Users Find Their Own Way: Creating Modern Search Experiences
display:contents;って何？どんな時に使うと便利なの？ - Qiita
先日、display:contents;というプロパティをはじめて知りました。 他のdisplayシリーズと比べるとあまり馴染みがなかったので、今回はdisplay:contents;とは何か、どんな場面で使えるのかについて紹介します。 1. 結論 display:contents;を指定した要素は、あたかも存在しないかのように扱うことができる これにより、グリッドレイアウトやレスポンシブデザインを作成する際に便利に活用できる ただし、アクセシビリティに課題が残るため、慎重に使用する必要がある 2. display:contents; とは？ 2-1. display:contents;の概要 display:contents;を指定した要素は、存在しないかのように扱われ、指定した要素の子要素が直接親要素内に挿入されます。 Mdn Web Docsでは以下のように説明されています。 これら
見出しとかの日本語をいい感じの塊で自動改行するCSS - Qiita
先に結論 See the Pen いい感じに自動改行するやつ（完成形） by 松田美文 (@mifumi323) on CodePen. リサイズできるようにしたから横幅変えて挙動を確認してみてね。 ポイント 大きな塊単位で改行して、それで収まらなければ小さな塊で順次改行していくよ display: inline-block;のスタイルを当てたspanタグで囲った部分が一つの塊になるよ spanタグの入れ子でより細かい塊を作ってるよ スペース(特に全角スペース )はspan要素の端に来ないようにする必要があるよ overflow-wrap: anywhere;とword-break: normal;のスタイルの組み合わせで、最小の塊より幅が狭くなったときの改行を制御してるよ ここから下は、もうちょっと詳しく知りたいって人向けです。 前書き さて皆さん、映画『それいけ！アンパンマン ばいきん
SVGの色が変わらない？CSSで色を操作する方法 - Qiita
はじめに こんにちは。HRBrainでオウンドメディア・ランディングページの開発を担当している渡邉です。 先日、SVGの色をCSSで変更しようとした際に、なかなか色が変わらなくて困ってしまいました。 この記事では、SVGの色がCSSで変更できない場合の原因と、2つの解決策をわかりやすく解説します。 SVGの色を変更できない原因 fill属性に直接色が指定されていると、その色が固定されてしまい、CSSのcolorプロパティによる変更が適用されなくなります。 <div class="parent"> <svg> <rect width="100" height="100" fill="#000" /> </svg> </div> <style> .parent { color: red; // 効きません } </style> See the Pen svg_fill_bad by Tasuk
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている
「Tailwind CSSめっちゃ負債になりそう」はそうでもないのでは、と思っている Tailwind CSS 1 を一目見た人、特にCSS初学者のうちけっこうな割合が「これエグい負債になりそう」と思う気がする。なぜなら実際にそのような意見をちらほら見るからなんだけども、自分はあんまりそうは思っていないし、微妙に今のCSSについて誤解があるような空気も感じるのでその理由を説明したい2。JSXと同じで嬉しさを理解して使い慣れればなんてことはないのだけど、一方でその背景にある話はJSXより複雑なので単純に使って慣れればいいという話でもなさそう。 なお、この記事は私の以下の2ツイートを膨らませたものです。 Tailwind CSS、剥がすのは大変そうだけどそれをもって重大な負債になると評せるかは微妙に思っている https://x.com/aumy_f/status/18220941478532
CSS変数がもっと便利になる新しい記述方法、CSSの次世代変数@propertyがすべてのブラウザにサポートされました
CSSの@propertyがFirefoxにサポートされ、デスクトップ・スマホのすべてのブラウザでサポートされました。 @propertyは次世代変数と呼ばれるもので、これまでの変数（カスタムプロパティ）の使い勝手が大幅に向上します。@propertyによるカスタムプロパティの記述方法、@propertyを使ったCSSのテクニックを紹介します。 @property: Next-gen CSS variables now with universal browser support by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに @propertyのメリット @propertyによるカスタムプロパティの記述方法 @propertyの使い方: きらめくグ
JavaScript、HTML、CSSを使って画面切り替えをつくろう！ - Qiita
はじめに 下記画像のように、「Aボタン」をクリックすると「A画面」が、 「Bボタン」をクリックすると「B画面」が表示されるような 画面切り替えをJavaScript、HTML、CSS を使って作成していきます。 JavaScript、HTML、CSS ファイルの作成 ますはJavaScript、HTML、CSS のファイルを同じ階層に作成します。 HTML の作成 ヘッダーの作成 次に index.html のヘッダーを作成していきます。ヘッダーの内容については今回詳しくお伝えしませんが、先程作成したCSSファイルとJavaScriptファイルに連携できるようにしています。 <link rel="stylesheet" href="./style.css" /> で style.css に連携。 <script src="./script.js" defer></script> で scr
UIコンポーネントの大きさは外から制御しよう - Qiita
昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P
知らなかったCSSプロパティ 3選 - Qiita
はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor（CSS:カスケーディングスタイルシート） 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 currentColorの利点は、色の変更が親要素のcolorプロパティによって自動的に反映されるため、親要素のテキスト色を変更するとcurrentColorを使用している要素の色も新しい色に変更されることです。 使用例 .parent { color: red; border: 1px solid currentColor; /* テキストの色と同じ色（red） */ .child { color: currentColor; /* 親のテキストの色と同じ
JavaScriptを忘れて、CSSだけでモーダルを創造する - Qiita
はじめに Webアプリケーションではユーザーとの対話を効果的に行うため、モーダルウィンドウ（モーダル）がよく利用されます。JavaScriptを駆使して制御するのが一般的ですが、それが必ずしも必要なわけではありません。今回は、JavaScriptを一旦忘れて、CSSのみを使って綺麗なモーダルを作成する方法を紹介します。 ここでは自分なりに考えた方法を紹介しているので、ぜひコメントで他の方法やアイデアを教えてください！ モーダルを表示する まず、モーダルの表示をCSSだけで実現します。 基本的にはクリックされた時に状態が切り替わるタグを利用して、表示を制御します。 checkboxを使う場合 checkboxにチェックが入ったかどうかに応じてモーダルの表示を制御します。 紐づけるlabelは複数配置できるので、表示ボタンと閉じるボタンに利用しています。 See the Pen CSSModa
【CSS】「状態変化」と「バリエーション違い」はCSS変数で整理できる - Qiita
<div className={style.buttons}> <Button type="button" color="secondary" startIcon={<FiRotateCcw size={18} />} > キャンセル </Button> <Button type="submit" color="primary" startIcon={<FiCheckCircle size={18} />} > 次に進む </Button> </div> このボタンの仕様はざっくりと以下の通りです。 color Prop は以下の2通りの文字列を指定可能 "primary" … 青い背景、白文字 "secondary" … 薄灰色の背景、黒文字 startIcon Prop として ReactNode を渡せる 省略可。渡されたアイコンを、ラベルの左側に配置する つまり、「コンポジション」
HTML,CSS超初心者向け クラス名の付け方 - Qiita
CSS設計を学びたい！ どうもエンジニアになって数ヶ月のひよっこすらなっていない卵エンジニアです！🐣 この記事を見ているのはmarginなどのプロパティやレスポンシブ、flexを学んだばかりという方が意外と悩みがちなクラス名をどうつけるかについて記事にしました！参考にしたのは『技術評論社 CSS設計完全ガイド 半田淳志 第5版』です。有名な本なだけあってわかりやすく、分厚い本でしたがスラスラ読めました。 まず、クラス名をつける前に、みなさんはWebサイトを制作するときにどんなことを意識していますか？クラス名をつける前に、制作するWebサイトをどれだけ細分化と抽象化して見ることが出来ているかが大切です。では細分化と抽象化とは何か？それはWebサイトを見たときに、ブロックやパーツごとに分けることを細分化、デザインが共通してるパーツやブロックを見つけることを抽象化と言います。 細分化 細分化を
CSS Grid で repeat auto-fit や minmax を使って可変サイズを実現しても余白は固定なのかあ……待てよ？ - Qiita
この記事の概要 CSS Grid を使うと、スクリーンの幅にあわせて列数や列サイズを可変させて、簡単にレスポンシブな実装ができます。 しかし、margin や padding、gap といった余白関連のプロパティは固定値です。 そのアンバランスさを解消すべく記事を書きました。
HTML,CSS初めて１ヶ月ぐらいの人に知って欲しいCSS設計のこと - Qiita
「HTML,CSSだって難しいよ！」 初心者でも始めやすいって言ったの誰ですかね。最初は覚えるのに必死だし、少しわかるようになったかな？で始めたサイト制作（コーティング）もエラーだらけで頭を抱える日々。そんな修行を耐えているみなさんに知ってほしい、CSSの設計についてお話できたらなと思います。概念的なこと中心になりますので細かいことは下記の参考文書をご覧ください。 『インプレス社 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷拓樹著 2022年発行第１版』 注意 作者自身もプログラミング初めて１ヶ月の超初心者です。HTML、CSSを使ってデザインカンプを元にサイトを作れるぐらいのレベルです。なので僕より歴長い人はスルーしてもらっていいです。まだ初めたばかりの人は追いついてきてください。僕は先に行ってます。 初め 壊れない完璧な設計を
実務で使うCSS設計を学ぶ『Web制作者のためのCSS設計の教科書』 - Qiita
今回読んだ本 Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 発刊されたのが2014年とおよそ10年前の本になりますが、Web制作においてカオスなCSSに陥らないよう、基本的なCSSのルールから主にコンポーネント設計の手法について書かれています。 以前『CSS設計完全ガイド』という、同じくCSS設計の書籍を読んだことがありましたが、こちらの方がより（文章量的に）ライトで、どちらかといえばCSS設計の概念的な部分で参考になる点が多かった印象です。 自分のCSS設計の現状 普段CSS（SCSS）を書くときは、このあたりを気をつけて臨むようにしています。 SCSS＋BEM記法を使用 セレクタにHTMLタグ、idは使用しない 極力HTMLの構造に依存しないスタイルの当てかたをする（つもり） 既に定義されているスタイルの打ち消しは避ける ハイライ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS｜要素の間に余白をつける - Qiita
CSS でランダムな値を扱う `random()` と `random-item()` 関数
