[B! CSS] kicchysanのブックマーク

[CSS]シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック

フォームなどのタスク完了までの進捗状況を表示するプログレスバーを実装するスタイルシートのテクニックを紹介します。シンプルなHTMLで実装されており、画像は一切無し、文字要素とborderとborder-radiusでビジュアル化されています。 <ol class="progress-bar"> <li class="is-active">Objective & Template</li> <li>Options</li> <li>Step</li> <li>In a Nutshell</li> <li>Step</li> <li>Step</li> <li>Launch Date</li> <li><

kicchysan 2018/09/19

シンプルなHTMLで、美しいプログレスバーを実装するスタイルシートのテクニック #HTML #CSS https://coliss.com/?p=24445

CSS

リンク

[CSS]クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に

a要素はボタンだけ、でもクリック可能なエリアはカード全体にしたい、と思う時は少なくないと思います。a要素にdisplay: block;を加えてもボタンだけだし、あとはjQueryのプラグインなどJavaScriptでクリック可能な範囲を広げる感じでしょうか。 CSSだけで、クリック可能な範囲を広げるスタイルシートのテクニックを紹介します。下記のようなa要素がボタンだけでも、クリック可能な範囲がカード全体に広がります。

kicchysan 2018/09/11

クリック可能な範囲を広げるスタイルシートのテクニック、a要素はボタンだけでもカード全体をクリック可能に #CSS #JavaScript https://coliss.com/?p=24269

CSS

リンク

[CSS]「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック

例えばカードで、見出しが1行・3行、本文の量が多かったり少なかったりする場合、それぞれの高さを揃えるのは非常に難しく、かなりトリッキーな実装が必要でした。もしくは、JavaScriptを使用しなくてはできなかった実装です。こういったレイアウトをセマンティックなHTMLで実装できるようになるdisplay: contents;の基礎知識と使い方を紹介します。 How display: contents; Works 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。【更新】 2021/9/4: 現在の環境に合わせて、内容をアップデートしました。まずはおさらい、CSSのボックスモデル「display: contents;」を使用すると、どうなるか「display: contents;」について詳しく解説「display:

kicchysan 2018/04/04

「display: contents;」がすごい便利！ラッパーを使った実装が大きく変わるこれからのテクニック #CSS #JavaScript https://coliss.com/?p=23616

CSS

リンク

[CSS]さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox

チェックボックスやラジオボタンのスタイルを苦手にしている人も少なくないと思います。シンプルなHTMLにclassを加えるだけで、さまざまなデザインのチェックボックスとラジオボタンが実装できるスタイルシートを紹介します。角を丸くしたり、カラーをつけたり、といったシンプルなものだけでなく、アニメーションを使ったものもclassを加えるだけで簡単に実装できます。

kicchysan 2017/11/07

さまざまなデザインのチェックボックス・ラジオボタンを美しく実装するスタイルシート -Pretty Checkbox #HTML #CSS http://coliss.com/?p=22941

CSS

リンク

[CSS]便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS | コリス

既存のページに外部CSSを加えるだけで、最近のWebサイトやブログで見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトをカスタマイズできるスタイルをまとめたCSSのフレームワークを紹介します。 Flexboxを使ってみたい、天地の中央に配置したい、シャドウを加えたい、レスポンシブ対応のナビゲーションを備えたいなど、簡単に利用できます。デザインにも幅広く対応しているので、自分のオリジナルのデザインで利用できます。 Tailwind CSS Tailwind CSS -GitHub Tailwind CSSの特徴 Tailwind CSSの使い方 Tailwind CSSで用意されているスタイル Tailwind CSSの実装例 Tailwind CSSの特徴 Tailwind CSSはMITライセンスで、個人でも商用でも無料で利用できます。ボタン、フォー

kicchysan 2017/11/06

便利なのが登場！レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる -Tailwind CSS #CSS #UI http://coliss.com/?p=22935

CSS

リンク

[CSS]ネコ好きにはたまらない！紐につかまった猫がぶらぶらするプリローダー -Cat Swinging on String

画像は一切無し、CSS+HTMLで実装された、紐につかまった猫がぶらぶらするCSSアニメーションを紹介します。ページが読み込まれる時のプリローダーで、こんなのがあったらずっと見ちゃいますねｗ

kicchysan 2017/09/19

ネコ好きにはたまらない！紐につかまった猫がぶらぶらするプリローダー -Cat Swinging on String #HTML #CSS http://coliss.com/?p=22713

CSS

リンク

[CSS]横に並べたパネルをパタパタ裏返す、アニメーションがかわいいプリローダー -FlipPreloader

.flip-preloader { width: 300px; height: 60px; position: absolute; left: 50%; top: 50%; transf orm: translateX(-50%) translateY(-50%); perspective: 300px; perspective-origin: 50% 50%; } .flip-preloader.example-1 { top: 25%; height: 100px; width: 400px; } .flip-preloader div { position: absolute; width: 20%; height: 100%; background-color: red; left: 0%; box-sizing: border-box; transf orm-origin: 0% 5

kicchysan 2017/09/13

横に並べたパネルをパタパタ裏返す、アニメーションがかわいいプリローダー -FlipPreloader #HTML #CSS http://coliss.com/?p=22686

CSS

リンク

[CSS]悩む人も多い、要素を内包するラッパーの最適な実装テクニック

HTMLで最初に書かれている要素が、他のすべてを包み込む要素であるということは少なくありません。これはラッパーと呼ばれるもので、多くの人が使用していると思います。このラッパーの在り方について、divがよいのか、sectionはどうなのか、コンテナとの違い、レスポンシブ対応の幅指定やpadding指定の効果的なテクニックなどを紹介します。 The Best Way to Implement a “Wrapper” in CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Wrapper vs Container -ラッパーとコンテナ width vs max-width -widthとmax-width Additional Padding -追加のpadding どのHTML要素を使用するべきか <body>タグを使用 v

kicchysan 2017/08/24

悩む人も多い、要素を内包するラッパーの最適な実装テクニック #HTML #CSS http://coliss.com/?p=22585

CSS

リンク

[CSS] object-fitの使い方: レスポンシブ対応、動画や画像をブラウザいっぱいに表示するCSSのテクニック

HTML内にインラインで配置した動画や画像を、背景画像のようにブラウザいっぱいに表示するCSSのテクニックを紹介します。レスポンシブに完全対応、スマホでもデスクトップのあらゆるサイズのスクリーンでも最適なサイズで表示されます。

kicchysan 2017/05/31

object-fitの賢い使い方: インラインの動画を背景画像のようにブラウザいっぱいに表示するテクニック #HTML #CSS http://coliss.com/?p=22226

CSS

リンク

[CSS]Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意

ブラウザごとに異なるHTMLの各要素のスタイルを消去（Reset）するのではなく、スタイルを正常化（Normalize）するNormalize.cssが、2017年3月26日にアップデートされました。 2016年10月3日リリースされたv5.0.0から、いくつか重要な変更点があります。 Normalize.css Normalize.css -GitHub Normalize.cssの特徴 Normalize.css v6.0.0のアップデート内容 v5.0.0からの変更箇所 Normalize.cssの特徴 Normalize.cssとはブラウザごとに異なる要素のスタイルの相違を吸収し、各要素のデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。有用なデフォルトはそのまま多くのリセット用スタイルシートは異なり、有用

kicchysan 2017/03/30

Chromeの新バージョンをサポートしたNormalize.css v6.0.0がリリース、いくつかの重要な変更点に注意 #HTML #CSS http://coliss.com/?p=21940

CSS

リンク

[CSS]HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS

HTMLは間違って記述されても、重大なエラーになることはあまりありません。そのため、validではないHTML、セマンティックではないHTML、アクセシブルではないHTMLのコードが、ページ内に紛れてしまうことは非常に簡単です。 HTMLの潜在的な問題を見つけることができる、少し高度なCSSのセレクタを紹介します。 Linting HTML using CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。インラインのスタイルリンクのターゲットアクセシブルではない画像ドキュメントの言語指定不適切な文字セットアクセシブルではないビューポート属性ラベルのないフォーム要素空のインタラクティブな要素不必要、あるいは非推奨の属性インラインのスタイルこのセレクタは、インラインのスタイルが適用されているページ上のあらゆ

kicchysan 2017/03/14

HTMLの潜在的な問題を見つける、少し高度なCSSのセレクタ -Linting HTML using CSS #HTML #CSS http://coliss.com/?p=21838

CSS

リンク

[CSS]マージンとパディングの使い分け方 -コンテナとコンテンツ間、コンテンツ内の要素間

CSSでスペースを与える時、マージン(margin)とパディング(padding)はどのように使い分けをしていますか？ Webサイトやスマホアプリで実際に使用されるUIコンポーネントを例に、マージンとパディングの使い分け方を紹介します。下記のように3つの要素間にある2つのマージン指定も、first-childやlast-childでネガティブマージンを使わずに指定する巧い方法に、目からウロコです。 Margin or padding? 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。スペースの使い分け CSSを使用して例を実装セレクタの解説全称セレクタの活用マージンとパディングの使い分けスペースの使い分けカード型のUIコンポーネントを用意しました。カード型のUIコンポーネントこの例では、2種類の異なるスペースが存