CSS min() 関数の使い方
今更ながら CSS の関数 min() を使ってみたのでそのメモを残しておきます。似たような CSS 関数で他に max() や clamp() などがありますが、今回は min() 関数だけ触れます。（他のはまだ実践で使ってないので） min() とは min() CSS 関数を使うことでその複数の値の中の最小値を選んで使用してくれます。 例えば親要素の 10% もしくは 100px を子要素の最大幅にしたい時はこんな感じで書けます。 min(10%, 100px) を使うことで、親要素の幅が 1000px より大きい時は 100px、小さい時は 10% を使用します。 （例えば親要素の幅が 800px の場合、10% = 80px となるので、80px の方が選ばれる） これを min() なしで実現したいのであれば、多分以下のような従来の書き方でもいけると思います。 ただ、僕が実際に
【CSS】自動で文字を折り返すには？改行するための2つのプロパティを紹介 - WEBCAMP MEDIA
HTMLページにおける文章を作成している時に「いちいちbrタグで改行するのは面倒」と思ったことはありませんか？ bodyタグ内に定めた要素内に文章を収めて表示させたい時、簡単かつはみ出さずに文章を折り返し表示させたいですよね？ そこで今回は、自動で文章を折り返し表示させる「overflow-wrap」と「word-break」プロパティの特徴や使い方について解説します。 この記事を読んでわかる内容は以下の通りです。 overflow-wrapプロパティの特徴と使い方 word-breakプロパティの特徴と使い方 overflow-wrapプロパティが効かない原因と対処法 改行をコントロールできる2つのプロパティについて
Sass不要！CSSだけでも変数やネスト、演算子が使えるよ！
2023年9月6日 CSS CSSをより便利に、効率よく記述できるSass。利用しているWebサイト制作者も多いでしょう。近年はCSSでもSassのような書き方ができるようになってきているので、Sassとの書き方の違いとともに紹介します！ ↑私が10年以上利用している会計ソフト！ 何度も利用する値を変数として定義し、使いまわせます。よく利用する数値や、色が連想しづらいカラーコードに利用するといいでしょう。 Sassの場合の書き方 $ マークに続いて任意の変数名を書き、コロンで区切って変数の値を記述。この値が呼び出されるようになります。実際に使いたい箇所では $ マークと変数名を書けば、変数を呼び出せます。 $main-gutter: 30px; .box { width: 300px; height: 100px; margin: $main-gutter; } CSSの場合の書き方 公式
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは - ICS MEDIA
CSSだけでスクロールアニメーションが作れる！？ 新技術Scroll-driven Animationsとは 2023年7月にリリースされたGoogle Chrome 115では、「Scroll-driven Animations」が搭載されました。 Scroll-driven Animationsを使うと、今まではJavaScriptを使わなければ実装できなかったスクロールと連動するようなアニメーションがCSSだけで実現できるようになります。 以下は、CSSだけを使って作成したスクロールアニメーションのデモです。一切JavaScriptは使用していません。 Scroll-driven AnimationsはJavaScriptでも使うこともできますが、本記事では、実装の手軽さを一番にお伝えしたいため、CSSだけを使ったスクロール駆動アニメーションの作り方をご紹介します。 スクロールアニメ
[CSS] ラジオボタンやチェックボックスのサイズを変更する
ラジオボタンやチェックボックスのサイズを標準サイズよりも大きくしたり小さくしたりするには、CSSの「transform:scale()」を使用します。 サンプル 例）ラジオボタンのサイズを変更する <input type="radio" name="rdo1" value="1" style="transform:scale(1.0); checked"> いぬ <input type="radio" name="rdo1" value="2" style="transform:scale(2.0);"> ねこ <input type="radio" name="rdo1" value="3" style="transform:scale(3.0);"> たぬき
![[CSS] ラジオボタンやチェックボックスのサイズを変更する](https://cdn-ak-scissors.b.st-hatena.com/image/square/d01941ed8e6465eedb5c2950b529e07070366ce8/height=288;version=1;width=512/https%3A%2F%2Fpasomaki.com%2Fwp-content%2Fuploads%2F2019%2F03%2Fcss.png)
【CSS】flexの子要素をheight: 100%;にしつつalign-items: center;にしたい場合のやり方
display: flex;とalign-items: center;を指定すると子要素は縦に揃いますが、height: 100%;を指定しても効きません。 しかし、display: flex;のみだとデフォルト値のalign-items: stretch;のおかげでheightは100%っぽくなりますが、今度は縦に中央揃えができません。 子要素でheight: 100%;とalign-items: center;の状態を同時に実現する必要があったので、今回はこれのやり方を解説します。 height: 100%;っぽくしつつalign-items: center;っぽくする方法こんな感じのコードでいけました。 <div class="parent"> <div class="child">子要素です</div> </div> .parent { display: flex; } .chil
CSS フォームのステップバー デザインテンプレート 3選
フォームに使われているステップを表記するCSSのデザインサンプルです。 特徴 どこにいるかがひと目で分かる視認性 ステップ名を変更できる レスポンシブ対応 コピペで簡単作成 ドットタイプ 今どの段階にいるのかをドットで表現したタイプ。 HTML&CSS See the Pen css form-step01 by Aquarium (@aquarium) on CodePen. ドットタイプ 番号付き 番号付きでさらに全体を把握しやくすなりました。 HTML&CSS See the Pen css form-step02 by Aquarium (@aquarium) on CodePen. 矢印タイプ ステップの流れを矢印で表したタイプ See the Pen form-step03 by Aquarium (@aquarium) on CodePen.
font-sizeの単位をvwにしてデバイスサイズに合わせて拡縮する - Qiita
スマートフォンのフォントサイズは固定でいいのか問題 スマートフォンのコーディングでpxなどの固定値を使うとiPhone6 plusなどの画面幅の広い端末でフォントサイズが小さく違和感を覚えることがないでしょうか。 フォントサイズだけではなくマージンやパディングなどでも同じことが言えるのですが、画像はmax-width: 100%などとしているため画面幅に応じてある程度大きくなるのに対し、フォントサイズなどを固定値でコーディングしてしまうと、画像や画面幅に比べて小さく見えてしまい、余白が目立ったり不自然なレイアウトに見えることがあります。 デザイナーの本来の意図を汲み取るのであれば、画面幅が広くなったときはフォントサイズなどもそれに応じて大きくなるのが一番良いのではないかと思っています。 （追記） ただし、個人的にfont-sizeを拡縮できるようにして思ったのはどんなプロダクトでも推奨でき
2024年、現在の環境に適したリセットCSSのまとめ
CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ
「font-sizeの指定はpxとremどちらを使うべきか？」問題に対する回答
こんにちは。TAK(@tak_dcxi)です。 今回は SNS で頻繁に話題になる「font-size の指定はpxとremどちらを使うべきか？」問題について。 自分が観測している限りだと、 font-size の指定は px と rem どちらを使うべきか？ Web デザイナーはコーディングの知識があったほうがいいか？ jQuery はオワコンなのか？ 実装者はピクセルパーフェクトに拘らないとダメか？ h1 タグはどこに使うべきか？ あたりは四半期に一度は話題になっている感覚がありますね。 おそらくこの記事を読んでいる方や、もしくはタイムラインにこの記事の Twitter カードなんかが流れてきてウンザリしている方も多いことでしょう。僕も正直「またこの話題か…」という感想ですが、頻繁に話題になるということはそれだけ意見が割れているということなので、自分なりの見解をまとめるためにもこの記事
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
サクッとグリッドCSSを理解して、クライアントワークに使う
こんにちは。イッティのデザイナーのHです。IEを非対応の場合はCSSグリッドを積極的に使うことができます。 CSSグリッドは難しくはありません。グリッドの基本と、３つほどのプロパティを覚えれば使いこなすことができます。このページを読み終える頃にはCSSグリッドを使いこなす事ができているでしょう。 グリッドCSSは、グリッドの分割方法と新しい単位frを覚えることで、グリッドCSSを使いこなすことができます。 グリッドの指定方法がいくつかありますが、まずは基本的な指定方法を習得しましょう。 複雑なレイアウトも可能ですが、運用の効率化も考慮してシンプルなグリッドレイアウトにすることも重要になります。 まずはグリッド線の理解 まずはグリッド線の理解から。 Y軸は「row」 X軸は「column」 です。 グリッドを指定するプロパティ グリッドを指定するプロパティや、値の記述方法はいくつか用意されて
CSS GridをIE11、EDGEに対応させるために注意する点
IEでもCSS Gridを適用させる時に注意するポイントです。 IE11からCSS Gridに対応しています。 そのため、案件の定義が「IE11以上」であればCSS Gridでコーディングすることもできます。 CSS Gridの基本はこちらの記事を参照ください 「Gridでコーディングするのか？」「Flex Boxでコーディングするのか？」迷うところです。 実際にコーディングしてみると、下記のようなレイアウトの場合は「Flex Box」によるコーディングが最適かと思いました。 トップページや、ランディングページなどに多いレイアウトで、縦のグリッド線が多くなる場合です。 CSS Gridの恩恵を受けることができるレイアウトは下記のような場合です。 レスポンシブレイアウトにした場合、ピンク色のコンテンツが2段目になるレイアウトです。 Flexboxでもコーディングできますが、構造が分かりやすい
ベンダープレフィックスは何のためにつけるの？使い方を紹介
このように、プロパティを記述する前に対応ブラウザごとのベンダープレフィックスをつけます。 ベンダープレフィックスの注意点 ベンダープレフィックスなしのプロパティも記述する 新しいプロパティを使用する際は、ベンダープレフィックスをつけないプロパティも併用して記述しておく必要があります。これは、仕様が変更されたり、機能が廃止されたり、新しい機能が追加されるなどの可能性があるためです。 機能が普及したらベンダープレフィックスを外す 草案段階であった機能が勧告候補になった際には、ベンダープレフィックスを外すことが推奨されています。ベンダープレフィックスがなくても動作するようになった機能には、併用して記述していたベンダープレフィックスなしのプロパティだけを残すようにしましょう。 ベンダープレフィックスの自動化 テキストエディタの拡張機能 テキストエディタの拡張機能を使えば、自動でベンダープレフィック
新しいCSSリセットはシンプルで軽量！CSSの新しい機能を使用したCSSリセット -The New CSS Reset
CSSの新しい機能は主要ブラウザでのサポートが進んでいます。例えば、1年くらい前にサポートされはじめたセレクタの詳細度を0にする:where()も、現在では主要ブラウザのすべてでサポートされています。 CSSの新しい機能を使用した、シンプルで軽量なCSSのリセットを紹介します。 :where()や:not()、allプロパティやunset値やrevert値など、見慣れないCSSがあるかもしれませんが、IE11を除くすべてのブラウザでサポートされています。 The New CSS Reset The New CSS Reset -GitHub The New CSS Resetの特徴 The New CSS Resetは何をリセットするのか？ The New CSS Resetの中身 2021年、モダンブラウザに適したCSSリセットのまとめ The New CSS Resetの特徴 この新し
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
px, %, em, rem, vw, vhなど、CSSの異なる単位が互いにどのように変換されているかが分かる便利ツール
CSS: キーフレーム内で!important付けた宣言は無視される - Qiita
CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
[SCSS]便利な&（アンパサンド）の使い方メモ - Qiita![[SCSS]便利な&（アンパサンド）の使い方メモ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/983d132efe56d758feb2423599d30f6ee59b695d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCU0NTUyU1RCVFNCVCRSVCRiVFNSU4OCVBOSVFMyU4MSVBQSUyNiVFRiVCQyU4OCVFMyU4MiVBMiVFMyU4MyVCMyVFMyU4MyU5MSVFMyU4MiVCNSVFMyU4MyVCMyVFMyU4MyU4OSVFRiVCQyU4OSVFMyU4MSVBRSVFNCVCRCVCRiVFMyU4MSU4NCVFNiU5NiVCOSVFMyU4MyVBMSVFMyU4MyVBMiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9MmQzNGI4ZDA4ZmIxMDQxNTIyZjVlYzc3ZDBkY2IyZTk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBub3F1YSZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YWJmYjZlY2RlZGY0ODA3YWQwOGIyZGYwODhhOGZiNDE%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Daec43c90517fe4b6062305f217c3d6e8)
