CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、 これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの比較関数の
接頭辞つきのクラス名にマッチする CSS セレクター
Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気がするけど、それだと foo-grid- みたいに頭に余計なものがついていてもマッチしてしまう。そこでホワイトスペースを接頭辞の前に置いて [class*=" grid-"] とすることでそれを避けている。すると今度は class="grid-one" みたいに class 属性の先頭で頭にホワイトスペースがない場合にマッチしないので、[class^="grid-"] という前方一致のルールを追加。
CSSでアイコンをテキストに揃えるのはこれで簡単になる！CSSの新しい単位「lh」「rlh」が登場
アイコンのサイズをテキストに揃えて配置する時、どのように実装していますか？ テキストのサイズぴったりにアイコンを簡単に配置できるCSSの新しい単位「lh」「rlh」が登場します。 'lh' and 'rlh' units 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Values and Units Module Level 4に見たこともない新しい単位がありました！ lh それが使われている要素のline-heightプロパティの計算値に等しい rlh ルート要素（おそらく<html>要素）のline-heightプロパティの計算値に等しい これらの新しい単位が役立つシーンはどこだと思いますか？ Šime Vidasの記事によると、
最先端Webテクはこれ！コピペできるHTML/CSSスニペット77個まとめ
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 一般的に「切れ端、断片」といった意味をもつスニペット（英: Snippet）は、ウェブサイトなどのプログラミングで簡単に切り貼り、再利用できる部品、コンポーネントを指します。 これらのスニペットを利用すれば、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のウェブ制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて新しいオンラインツールをまとめています。 コンテンツ目次 1. テキストエフェクト系 2. イメージスライダー系 3. ナビゲーションメニュー系ト 4. ローディングアニメーション系 5. ページレイアウト系 6. ボタンエフェクト系 7. 便利、面白系スニペット 「Run Pen」をクリックすることで読み込みが開始され
BEM Naming Cheat Sheet by 9elements
When it comes to finding the right class name, it can quickly drive you to despair. Even the most experienced CSS developers don't always find the right class name right away. This tool aims to help you to not get lost in the BEM cosmos by giving you naming-suggestions for some of the most common web components. If you still have no idea what BEM means, we have added some helpful links below. For
CSS Section Separator Generator
CSS section divider descriptionWith this CSS Section Separator Generator, you can choose between 6 different dividers. Each of them can be customized by using the controls in the preview field. The tool includes a skewed divider, a semi-circle divider, a wave divider, a spikes divider, a triangle divider and a curved divider. Most of these dividers are pure CSS and using the ::before and ::after p
必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス
CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ
テキストリンクをホバーした際に、テキストのカラーをスライドのアニメーションで変更させるピュアCSSの実装方法を紹介します。 IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニックをご利用ください。 4 Ways to Animate the Color of a Text Link on Hover by Katherine Kato 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. background-clip: text;を使ったテクニック 2. widthまたはheightを使ったテクニック 3. clip-pathを使用したテクニック 4. transformを使用したテクニック まとめ はじめに ホバー時にテキストリンクのカラー
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
CSSで実装が面倒なトグルをさまざまなデザインで簡単に実装できるCSSの軽量ライブラリ -MoreToggles.css
シンプルなHTMLに、実装が面倒なトグルをclassを加えるだけで簡単に実装できるスタイルシートを紹介します。 iOSやAndroidのスタイルをはじめ、チェックやスクエアなど、さまざまなデザインのトグルを簡単に実装できます。トグルは拡大縮小にも対応しているので、非常に便利です。 MoreToggles.css MoreToggles.css -GitHub MoreToggles.cssの特徴 MoreToggles.cssのデモ MoreToggles.cssの使い方 MoreToggles.cssの特徴 MoreToggles.cssは、さまざまなデザインのトグルを簡単に実装できるCSSライブラリです。classを追加するだけで、簡単に利用できます。 JavaScriptはなし、ピュアCSS classを付与するだけで、簡単な実装 8つのスタイル（さらに増やす予定） トグルの拡大縮小
20 Amazing Pure CSS Animated Buttons - 1stWebDesigner
If you want to give your website a little extra flair, you’ll definitely want to investigate and utilize CSS animated buttons. These bits of code add a layer of interactivity to your website that most site visitors will appreciate. Plus, they can be used to add a sense of dynamics and further help to solidify your brand. If you’re not sure where to start in getting these buttons for your site, how
fit-content, min-content, max-contentの便利な使い方、CSSでコンテンツに依存してサイズを決める
CSSで要素やレイアウトのサイズを指定する方法には、幅や高さを固定値にサイズを定義する方法とその中のコンテンツに依存してサイズを決める方法があります。 この2つの方法それぞれのメリットと使い分け方、特にレスポンシブで効果的なコンテンツに依存してサイズを決める方法を使ったテクニックについて紹介します。 Intrinsic Sizing In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSでのサイズ指定方法とは 外因性サイジング 内因性サイジング: min-content 内因性サイジング: max-content 内因性サイジング: fit-content ブラウザのサポート状況 実際の使用例 終わりに CSSでのサイズ指定方法とは CSSには、内因性と外因性の2つのサイズ指定方法
1歩踏み込んでみる！ CSSグラデーションのマニアックな世界 - ICS MEDIA
CSSでグラデーションがかけられるようになって久しいですが、ただ2色をつないでいるだけの人も多いのではないでしょうか？ あるいはジェネレーターでコピペして終わりにしてはいないでしょうか？ 実は、値を細く設定することで、グラデーションに留まらない、より豊かな表現を実現できます。工夫すればこんな表現もCSSのみで行えます。 後半の応用例の実装は手入力のCSSでは困難な部分もあるので、SCSSを使って記述しています。SCSSを使うとCSSだけでは難しい処理もスムーズに行え、mixin機能を使えば、面倒な入力手間も省けるので便利です。記事内で紹介しているグラデーションの生成mixinも用意しました。 デモを別ウインドウで再生する 使われているmixinを確認する CSSグラデーションの種類 CSSグラデーションは色を扱うのでbackground-colorプロパティを使いたくなりますが、backg
See-SS
' sandbox="allow-same-origin" class="iframe__style--small-card" data-v-2fcdfb78> シンプルなフラットボタン
コピペで簡単実装！押したくなるボタンエフェクト用HTMLスニペット44個まとめ
この記事では、HTMLとCSSを中心にデザインされた、思わず押したくなる最新ボタンエフェクト用コードスニペットをまとめてご紹介します。 コンテンツに注目を集めたいときに最適なテクニックが中心で、CSSのみでスタイリングできるアニメーションエフェクトも手軽にコピペで利用できます。 ウェブがますます進化し、ネット回線も高速になってきたことで、これまではむずかしかった多彩なアニメーションなど、スタイリングの幅がグッと広がっています。先日紹介した「ニューモーフィズム」の新トレンドも参考にしてみると良いでしょう。 ニューモーフィズム？CSSコピペ実装できる新Webトレンドの参考HTMLスニペット、ツールまとめ コピペで簡単実装！押したくなるボタンエフェクト用HTMLスニペットまとめ Button Hover Effect 疑似要素を左右に配置し、アニメーションで合体させるCSSを使ったテクニック。
やめよう、CSSのシステムデフォルトフォント指定 - Chienomi
序 ウェブをブラウジングしていると、嫌というほど見る 無意味にひたすらシステムフォントを列挙している 同じシステム上に存在すると予想される和文フォントのあとに欧文フォントを指定する という苦痛極まりないフォント指定をしているCSSをよく見かける。 ひどい思考停止だと思うのだが、実際には行われているばかりか、ウェブデザイナーを自称する者が平気でそのような指定を推奨していたりする。 それについては散々言及したつもりでいたのだが、実際にChienomiでそのこと全体を指摘した記事はなかったので、ここでしっかりと述べておこうと思う。 ここではそれがなぜ、どのように問題なのか、どのようにすべきかということを述べていこう。 起 話の大本としては、MSNのフォント指定がひどくて、Linux上で見るために気を遣ったaliasを書かねばならないが、それ以上に無意味な指定である、ということを指摘した。 それ以
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
2022年9月24日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ↑私が10年以上利用している会計ソフト！ ローディングアニメーションの設置手順 こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSSだけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。 1. ローディング画面の用意 まずはコンテンツを用意しましょう。上部に
CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方
ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。 CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxでのオートマージンの仕組み Flexboxのオートマージンについてmagic of flexbox and auto
HTML/CSSで表現できる、すごいテキストエフェクト用スニペット44個まとめ
この記事では、CSSで表現できる新作テキストエフェクト用HTMLスニペットをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。 実際のコードを見ながらサンプルを確認、編集を行うことができるので、世界基準の新テクニックを効率的にウェブ制作に採用することができます。 HTML/CSSで表現できる、すごいテキストエフェクト用スニペットまとめ Fluid text hover マウスの動きに合わせて背景の画像がぐにゃりと液体のように変化するテキストエフェクト。 See the Pen Fluid text hover by Robin Delaporte (@robin-dela) on CodePen. SVG textPat
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】text-shadowを使ったテキストの装飾パターンを色々作ってみた | KuzLog
