[B! css] gayouのブックマーク

2画面折りたたみデバイスに対応したCSSメディアクエリ - Qiita

@media (horizontal-viewport-segments: <count>) { } @media (vertical-viewport-segments: <count>) { } <count>は水平(横長)、または垂直(縦長)の画面デバイス数を設定します。例えば Surface Duo の2画面デバイス表示では以下の値になります。水平の場合 horizontal-viewport-segments: 2 垂直の場合 vertical-viewport-segments: 2 CSS環境変数各ビューポートのプロパティは、次の環境変数定義で取得できます。 env(viewport-segment-width <x> <y>); env(viewport-segment-height <x> <y>); env(viewport-segment-top <x> <y>

gayou 2024/02/18

css

リンク

CSSのサブグリッド（subgrid）の基礎知識と使い方、たった一行のCSSで複数カードの水平グリッドを簡単に揃えられる！

CSSのサブグリッド（subgrid）がChrome 117でサポートされ、Safari, Firefoxではすでにサポートされていたので、これで主要ブラウザのすべてで利用できるようになりました。先日の記事でもお伝えしたように、subgridを使用するとカード内の見出しやテキストの水平グリッドを簡単に揃えることができます CSSのサブグリッド（subgrid）の基礎知識と使い方、プログレッシブエンハンスメント、デベロッパーツールによるデバッグ方法などを紹介します。 CSS Subgrid by Adam Argyle 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。はじめにサブグリッド（subgrid）の基礎知識ページレベルの「マクロ」グリッドを共有するサブグリッドのサポートをチェ

gayou 2023/10/13

css

リンク

全ブラウザ対応したcontainer queryは何がスゴイのか？

全ブラウザ対応になったCSSのコンテナクエリについて、基礎から一歩踏み込んだ内容までを解説します。デモ① SNSリアクションバー（container-type, @container） https://codepen.io/tonkotsuboy/pen/PoBMMZw デモ② 古都めぐり（cqw） https://codepen.io/tonkotsuboy/pen/jOvOqOG Zenn記事 https://zenn.dev/moneyforward/articles/css-container-query Twitter https://twitter.com/tonkotsuboy_com 3/1（水）に「TechFeed Experts Night#14 」で発表した内容です。 https://techfeed.io/events/techfeed-experts-night

gayou 2023/03/07

css

リンク

任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリ・「CSS Code Quality」

CSS Code Qualityは任意のURLを入力するだけでCSSを解析し、品質をチェックしてくれるオープンソースのWebアプリです。JavaScriptで書かれています。解析したいCSSを利用しているWebサイトのURLを入力すると自動で解析し、メンテナンス性、複雑さ、パフォーマンスの3項目をそれぞれスコアリングし、その内訳レポートを提出してくれます。大きくスコアを下げる要因は赤、出来るだけ改善すべき要因はオレンジのラインが引かれます。レポートはその場に表示されますがJSONでも提供してくれます。直接CSSコードを貼り付けてチェックする事も可能です。 CSSの最適化や改善作業などを手助けしてくれそうですね。ライセンスはMIT。 CSS Code Quality

gayou 2022/11/26

css

リンク

https://csslayout.io/

gayou 2022/03/01

css

リンク

CSSのみで表現OK 人気レイアウトやUIパターンを集めた便利ライブラリ CSS Layout

依存性なしで、フレームワークも必要なし。 CSSの特別なテクニックも必要とせず、リアルに使えるCSSレイアウトやUIパターンを集めたサイト CSS Layout が注目を集めています。フロントエンジニアとして働くひとは、ウェブサイト制作においてどれだけ多くのレイアウトやコンポーネントを扱う必要があるかよく分かるでしょう。人気のあるレイアウトやUIコンポーネントを提供するCSSフレームワークはたくさんありますが、すべてを自分のプロジェクトに加えたくないときも。そんな悩みを解決すべく、CSS Layout ではCSSのみで構築できる人気レイアウトやUIコンポーネントを集め、カテゴリ別にまとめています。 FlexboxやCSS Gridといった最新CSS機能によって実現されたレイアウトは、それぞれのニーズに合わせて簡単にカスタマイズでき、スターターキットとしても最適です。パーツを組み合わ

gayou 2022/03/01

css

リンク

【2023年版】font-familyの正しい指定方法・タイプ別おすすめフォント設定例

この記事では、フォントを指定するためのCSSプロパティ﹁font-family﹂の書き方について一から詳しく解説します。font-familyを設定したことが無い方でも、正しくフォントが指定できるように、プロパティの書き方から、OSごとの設定の違い、おすすめのフォント設定例などもご紹介します。﹁font-familyはいつもコピペしている…﹂なんて方も、正しい知識が有るか無いかは大きな違いです。ぜひこの機会に、font-familyの正しい設定方法をマスターしてください。 ※本記事は、各OSの標準インストールフォントや、ブラウザのアップデート状況などを踏まえて、なるべく最新の情報をお届けできるように、内容を随時更新しています。著者の調査した情報に基づいて執筆しているため、内容に間違いや不備のある可能性もあります。︵最終調査日‥2023年7月︶ font-familyの役割とは CSSのf

gayou 2021/08/13

日本語フォントの指定の参考にする。

css

リンク

Web制作に役立つ！面倒なCSSのコードを簡単に生成できる便利ツールをまとめました

CSS GridやFlexboxでレイアウトを確認しながらコードを生成、box-shadowによる繊細なシャドウを見ながらコードを生成、さまざまな区切り線、border-radiusやclip-pathによるさまざまな形、UI用の美しいグラデーションやデュオトーン、グラスモーフィズム、ニューモーフィズム、CSSアニメーションなど、面倒なCSSのコードを簡単に生成できる便利ツールを紹介します。

gayou 2021/07/16

いっぱいある。

css

リンク

CSSの中央揃えで、最も万能で信頼できる実装テクニック

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニックはじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー

gayou 2021/01/15

相変わらず良くわからない。

css

リンク

OrbitCSS - A modern CSS framework based on flexbox.

Your Docusaurus site did not load properly. A very common reason is a wrong site baseUrl configuration. Current configured baseUrl = / (default value) We suggest trying baseUrl =

gayou 2020/11/08

新しいcssフレームワークが出た

リンク

日本らしさを表現！CSSで文字の縦書きに挑戦！

2017年8月24日 CSS 日本の書籍は元々上から下、右から左という縦書きで書かれてきました。しかしWebサイトでは横書きが基本なので、縦書きを取り入れることで日本らしさやWebサイトの個性を引き立てられます。かつてのWebサイト制作では縦書きが難しく、多くの場合画像を使って表示されてきましたが、CSSでも縦書きが実装できるようになりました！今回はそんな縦書き表現に注目したいと思います！ ↑私が10年以上利用している会計ソフト！縦書きにするには縦書きを設定するのはとっても簡単！縦書きにしたい箇所にCSSでwriting-mode: vertical-rl; を記述します。この﹁vertical﹂が縦、﹁rl﹂が右から左︵Right to Left︶という意味です。また、IE用には別の書き方になります。 -ms- というベンダープレフィックスを付け、tb-rl︵上から下、右から左＝

gayou 2020/08/15

縦書き難しい

css

リンク

【ブログ】コピペで簡単！見出しデザイン15選 - Nomad Code

gayou 2020/05/14

リンク

css.gg - 500種類を超えるCSSアイコン集 MOONGIFT

Web上でアイコン画像を使う方法は幾つかあります。オーソドックスな画像に加えて、アイコンフォントを使うこともできます。画像はバイナリもあれば、SVGも利用できます。高解像度でもぼやけず、小さな画面でもつぶれないSVGは最近利用が広まっています。さらに覚えておきたいアイコンがCSSアイコンです。SVG同様に拡大しても綺麗なのが特徴です。今回はそんなCSSアイコンを500種類以上集めたcss.ggを紹介します。 css.ggの使い方一覧です。黒単色で描かれたアイコンになります。左側にカテゴリが多数並んでいるのが分かります。その中の一つです。 CSSも公開されています。これをコピーして貼り付けるだけでCSSアイコンとして利用できます。 css.ggに限りませんが、CSSアイコンの魅力としては外部リソースとして用意する必要がなく、HTMLのインラインですら利用できることでしょう。また、全部

gayou 2020/03/29

リンク

[CSS] スクロールバーを非表示にする（IE, Edge, Chrome, Safari, Firefoxに対応） - YoheiM .NET

[CSS] スクロールバーを非表示にする︵IE, Edge, Chrome, Safari, Firefoxに対応︶まとめIE、Edge、Chrome、Safari、Firefox でスクロールバーを非表示にする実装方法はこちらです。コード <div class="container">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div> <style> .container { height: 150px; overflow-y: scroll; -ms-overflow-style: none; /* IE, Edge 対応 */ scrollbar-width: none; /* Firefox 対応 */ } .container::-webkit-scrollbar { /* Chrome, Safari 対応

gayou 2020/02/15

スマホ向けタブメニューのUIで、横スクロールときにスクロールバーを表示させないようにしたかったので参考にした。

css

リンク

超便利！確認しておきたい最新CSSツール、リソースガイド厳選65個 2020年度

海外サイト Speckyboy.com で公開された Our 50 FavoriteCSS Libraries, Frameworks and Tools from 2019 より許可をもらい、翻訳転載し、さらにオススメCSSツール15個を追加しています。 2020年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。今回は、2020年に注目したい最新CSSツール、リソースガイド65個をまとめてご紹介します。これからCSSを本格的に学ぶひとも、普段からバリバリでCSSを使いこなしているひとも、一度は確認しておきたい内容となってい

gayou 2020/01/09

css

リンク

よく使用されている汎用的なレイアウトとUIパターンのCSSコードをコレクションしている・「CSS Layout」

CSS Layoutはよく採用される汎用的なレイアウトやUIパターンのCSSコードを60ほどコレクションしているプロジェクトサイトです例えばレイアウトなら3カラム、サイドバー2カラム、１カラムグリッドレイアウト、左右分割やヘッダー追従などなど、UIならナビゲーションやフォームの各部品、アコーディオンやカードなどなどWebサイトを見ていれば必ずどこかで見かけるようなものが網羅されており、骨組みのCSSをコピーできるようになっています CSSフレームワークを細分化して１つずつ提供する、みたいな印象でした。地味に便利な気がします CSS Layout

gayou 2019/12/08

これは参考になりそうだ。

css

リンク

CSSで見出し固定＋レスポンシブ対応の表を作成

2022年4月27日 CSS, HTML, Webサイト制作料金表やサービスプランの比較、タイムテーブルなどなど、使う場面が多い割には制限も多く、初心者には少しとっつきにくいと思われがちな表。今回はあると便利な表の見出し固定やレスポンシブ対応の方法を紹介します。 ↑私が10年以上利用している会計ソフト！見出しの行を固定する表の中の行が増えてくると、スクロールした時に表の見出しが画面から見えなくなり、なんの値だったのかがわかりづらくなります。そんな時のために、行数の多い表では一番上にくる見出しの行を固定しておくといいですね。まずはベーシックな表を作成します。table タグに border-collapse: collapse; を指定することで、セル間のスペースがなくなってフラットな見た目になりますよ。 HTML <table> <tr class="heading"> <th>車

gayou 2019/10/17

contentでdata-labelの値を要素に入れることができるのか。

リンク

A Modern CSS Reset

Andy Bell Posted on Oct 1, 2019 • Originally published at hankchizljaw.com on Oct 1, 2019 I think about and enjoy very boring CSS stuff—probably much more than I should do, to be honest. One thing that I’ve probably spent too much time thinking about over the years, is CSS resets. In this modern era of web development, we don’t really need a heavy-handed reset, or even a reset at all, because CSS

gayou 2019/10/06

css

リンク

これなら簡単で便利！最近見かけるCSSのさまざまなコンポーネントをコピペで利用できる -CodyHouse Framework

HTMLとCSS、そしてJavaScriptで実装された最近のWebページやスマホアプリで見かけるさまざまなコンポーネントを簡単に利用できるフレームワークを紹介します。各コンポーネントは単体でもHTMLとCSSのコピペで利用できるので、既存ページや他のフレームワークにも簡単に使うことができて便利です。 CodyHouse Framework 2.0 CSSベースの軽量フレームワークアクセシブルで、Webページやスマホアプリのインターフェースを構築するための8Kb軽量フロントエンドフレームワーク。さまざまなコンポーネント HTMLとCSS、そしてJavaScriptで実装された、87種類のコンポーネント。実装もカスタマイズも簡単コピペで利用でき、既存のCSSルールを上書きする必要はありません。モバイルファーストすべてのコンポーネントは、モバイルファーストで実装されています。プ

gayou 2019/07/02

css

リンク

【第3弾】少しのコードで実装可能な15のCSS小技集

2022年4月27日 CSS CSS小技集シリーズの第3弾！「【第2弾】少しのコードで実装可能な20のCSS小技集」から3年が経ち、さらに便利でサクッと使えるコードが続々登場！特にこれまではJavaScriptで実装していたものがCSSだけで実現できるようになったりと、進化が凄まじいです。初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！目次スムーズスクロールスクロールスナップスクロールすると要素を固定画像をトリミング CSSで計算式を書くテキストを円形に回り込ませる Webフォントを使った時の表示遅延を回避するテキストに波線を引くテキストの上に記号を表示表のセルの幅を統一する入れ子になったリストもカウントするフォームのプレースホルダーの文字色を変更しましまのラインメディアクエリーを使わずにタイル型レイアウトをレスポンシブに対応

gayou 2019/05/17

css

リンク

はてなブックマーク

タグ

関連タグで絞り込む (79)

cssに関するgayouのブックマーク (394)

お知らせ

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

月間はてなブックマーク数ランキング（2024年6月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス