[イベント原稿]CSS Nite Coder's High - 2021 fall - Qiita
これは何 2021年11月5日に開催されるCSS Nite Coder's High - 2021 fallにて発表する内容です。 当日はスライドを用いて発表しますが、コードの見やすさの問題もあるためQiitaに原稿を投稿します。 導入 それでは今から「そのCSS、新しい書き方がありますよ」と題してセッションをはじめていきます。 まずは簡単に自己紹介から。 Increments株式会社でデザイナーをしています、綿貫佳祐と申します。 企画考えたり情報設計したり目に見えるUI作ったりフロントエンドやったり……比較的色々やっている方です。 また、このxrxoxcxoxのIDで各種SNSやっておりますので良かったらフォローしてください。 1番動いているのはTwitterです。 さてそれでは内容に入っていきますが……CSS、色んな書き方がありすぎると思いません？ 最終的なビューが同じなら、便利な書き
![[イベント原稿]CSS Nite Coder's High - 2021 fall - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a0940c7ebeebb20d618712e064a3a3c4cb08d835/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUUzJTgyJUE0JUUzJTgzJTk5JUUzJTgzJUIzJUUzJTgzJTg4JUU1JThFJTlGJUU3JUE4JUJGJTVEQ1NTJTIwTml0ZSUyMENvZGVyJTI3cyUyMEhpZ2glMjAtJTIwMjAyMSUyMGZhbGwmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTg4MjE4OTNhOTk2Nzg1ODA4NzA0ZDk4YWVlOTYxNWQw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB4cnhveGN4b3gmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTM1ZTU2NWZhNTc3MDRmZTExYzYzNWYxYzE5OGU0MGQ4%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4gUWlpdGHmoKrlvI_kvJrnpL4%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D9e2ada6311f33c43fbfecc423b6c61a9)
CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！
JAJAAAN代表です。このサイトの制作者です。趣味は、最近始めたアウトドア、最近始めた釣り、最近始めた格闘技です。尊敬する人はさかなくん。人生で学んだことは「女は怖い」ご連絡はメールかTwitterでDMください。 メール Twitter SEE MORE 今回はCSSのみで作れる見出しデザインについて100個サンプルを作ってみました。 見出しなどで使えるデザイン例についてどこよりも詳しく（おそらく..）紹介・解説しています。すべてCSSのみで実現しているものになりまります。 コピペしてそのまま使用していただいて構いません。デザイン例によって作成時のポイントや注意点も書いています。 CSSのみで作る見出しについて見出しについて、マークアップで使用されるHTMLタグはh1〜h6になるかと思います。サンプルのHTMLではh2を例にしていますが、hタグである必要はありません。ご自由なHTMLタ
グラデーションのグレーデッドゾーン、真ん中辺りがグレーにくすむのを避ける方法、美しいグラデーションを作成する方法
美しい色を選んだのに、グラデーションがくすんでしまうことはありませんか？ 真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です。 美しいグラデーションを作成するためにどうすればよいのか、紹介します。 Photoshopなどのデザインツールだけでなく、CSSのグラデーションにも使用できるテクニックです。 The “Gray Dead Zone” of Gradients 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カラーのグラデーションについて、Erik D. Kennedy氏が興味深い現象を指摘しています。2つのカラーを使用したグラデーションで、その2つのカラーを結ぶ線がカラースペース内で彩度ゼロの中央を通ると、グラデーションに「グレーのデッドゾーン」が生じます。
2024年に最適なfont-familyの書き方 - ICS MEDIA
ウェブサイトのフォントは何を指定すればよいのでしょうか？ CSSのfont-familyプロパティーに指定可能なフォントは選択肢が多く、HTMLコーダーなら誰もが一度は迷ったことがあるはずです。 font-familyの組み合わせを紹介している記事は多々あります。しかし、必要のない指定や、考察不足なまま紹介している記事を見かけることは少なくありません。それもそのはず、フォント事情は日々変化するもので、古い情報は役立たないことが多いためです。 本記事ではフォントに関わるここ最近のビッグニュースを取り上げつつ、教訓から学んだ変化に強い「無難」なフォント指定を紹介します。 結論 いきなり結論ですが、以下のフォントの組み合わせがオススメです。CSSのbodyセレクターなどにコピー＆ペーストして利用ください。 body { font-family: "Helvetica Neue", Arial,
2020年、知っておくと便利なCSSのプロパティのまとめ
ChromiumベースのEdgeもリリースされ、最近のブラウザ状況は大きく変わってきました。知っておくと便利なCSSのプロパティを紹介します。 一昔前まではJavaScriptでないと実装できなかったもの、CSS Gridでの中央揃え、Flexboxでの中央揃え、リストのカラーを変更する方法、アイコンの横並び、タイル状の背景をいい感じに配置など、実践的なテクニックが満載です。 Uncommon CSS Properties by Ahmad Shadeed はじめに CSS Gridでの中央揃え place-itemsプロパティ Flexboxと古き良きmargin: auto; あまり知られていない::marker疑似要素 text-alignプロパティ display: inline-flex;プロパティ column-ruleプロパティ background-repeat: roun
CSSでロゴのようにサイズが異なる画像を美しく揃えて配置するスタイルシートの実装テクニック
ロゴ画像のようにさまざまなサイズ、さまざまな形の画像を美しく揃えて配置するスタイルシートのテクニックを紹介します。 CSSのテクニックだけでなく、デザイン上の注意点も解説されており、実装時の参考になります。 Aligning Logo Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ロゴを配置する時のデザイン上の注意点 ロゴを配置するグリッドの実装 CSSブレンドモードを使用してホワイトの背景を削除する ロゴの最後の行の中央揃え 実装時の注意点 終わりに はじめに フロントエンドのデベロッパーとして、複数のロゴを配置したことがあるでしょう。この実装は最初は簡単に思えるかもしれませんが、ロゴを揃えたり、中央配置にする時に悩ますかもしれません。さらに、ロゴにはさ
サイトの質が向上！コピペできるHTML/CSS便利スニペット100個まとめ
この記事では、Webデザイン制作に便利なコピー＆ペーストで実装できる最新HTML/CSSスニペットをまとめてご紹介します。 新しいテクニックを利用した、ますます進化するWebの可能性を感じさせてくる作品ばかりで、最新のウェブデザインテクニックを手軽に実現、楽しむことができます。今後のデザイン制作に活用してみてはいかがでしょう。 ここでは、カテゴリー別に分けて最新HTML／CSSスニペットをまとめています。 コンテンツ目次 1. 小技テクニック系（15個） 2. 面白、ユニーク系（16個） 3. ホバーエフェクト系（6個） 4. テキストエフェクト系（10個） 5. ページレイアウト系（10個） 6. イメージスライダー系（9個） 7. ナビゲーションメニュー系（2個） 8. ローディングアニメーション系（4個） 9. ボタンエフェクト系（13個） 10. CSSマジック（10個） 11.
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
CSSの新しい疑似クラス:is()と:where() なんだこれ便利すぎる！
複数のセレクタを1つにまとめられる:is()、セレクタの詳細度を0にする:where()、CSSの新しい疑似クラスが、SafariとFirefoxで利用できるようになりました。 そんな:is()と:where()の便利な使い方を紹介します。 CSS :is() and :where() are coming to browsers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 :is()を使用すると、繰り返しを減らせる :where()を使用すると、詳細度を低くキープできる CSSの新しい疑似クラス「:is()」「:where()」がブラウザに登場 CSSの新しい疑似クラス「:is()」「:where()」が、Safari（Tech Preview 1
2024年、現在の環境に適したリセットCSSのまとめ
CSSにおけるブラウザによる互換性の問題はWeb制作でモダンブラウザをターゲットにした場合、以前に比べるとはるかに少なくなりました。昔から使用している無理なリセットCSSやすべてをリセットする必要は全くありません。 IE11のサポート終了から2年が経ち、現在はモダンブラウザの時代です。Chromeをはじめ、chromiumベースのEdge、Safari、Firefoxはエバーグリーンブラウザ（最新版に自動アップデートするブラウザ）と呼ばれています。 現在の制作環境に合わせて制作された新しいリセットCSSの中から特に注目すべきリセットCSSを紹介します。CSSのテクニックや知見も満載です！ リセットCSSとは リセットCSSの使い方・書く順番 どのリセットCSSが適しているかの選び方・カスタマイズ方法 A (more) Modern CSS Reset -モダンブラウザに最適化された新しいリ
2021年版：Flexboxの対応ブラウザとベンダープレフィックスまとめ | Web Design Trends
IE11は注意が必要！ 何かと話題になりやすいInternet Explorerですが、最新のIE 11でもFlexboxに関するバグがいくつか報告されているため、Flexboxを使用する場合はIEでの動作確認を行った方がいいでしょう。 ただし、IEのサポートも2022年6月に終了することが発表されており、これから制作するWebサイトであればIEを最初からサポート外にしてしまう方がいいと思います。 Flexboxのベンダープレフィックス一覧 下記にFlexboxに関連するCSSのプロパティのベンダープレフィックスの記述方法をご紹介しておきます。 すでに、ベンダープレフィックスが必要なバージョンのブラウザはシェアがかなり少なくなってきており、基本的にはベンダープレフィックス無しでもほぼ100％に近いシェアをカバーできるものの、古いブラウザでの動作保証もしっかりケアしたいという場合は、ベンダー
【2023年版】おすすめのリセットCSSまとめ！基本知識と使い方を解説 | Web Design Trends
リセットCSSとは、ブラウザによって異なるデフォルトのCSSを打ち消してブラウザ間の表示を揃えるためのCSSファイルのことを言います。 分かりやすい例だと、inputタグなどはSafariとChromeでは全く異なる表示になってしまいますが、リセットCSSを使うことでそれぞれの表示を整えることができます。 リセットCSSは、CDNを使ったりコードをコピペするだけで簡単に導入することができるので、Webサイトをコーディングするときには正しくリセットCSSを使用するようにしましょう。 今回は、2023年最新のおすすめリセットCSSや、リセットCSSの基本と使い方をご紹介していきたいと思います。 リセットCSSとは？ リセットCSSとは、Google ChromeやSafari、Microsoft Edgeなど異なるブラウザを使っても同じようにWebサイトが表示されるためのCSSファイルのことを
これは便利！CSSの指定した機能のフォールバックがうまく機能しているか確認できるツール -CSS Feature Toggle
CSSの新しい機能は便利で魅力的なものばかりですが、ネックになるのがサポートブラウザです。レイアウトではCSS GridやFlexbox、また@supportsによる機能検出、画像をレスポンシブ対応にするためにobject-fitやスクロールコンテンツにposition: sticky;など、それぞれをサポートしていないブラウザでどのように表示されるか、フォールバックはうまく機能しているか確認できるデベロッパーツールの機能拡張を紹介します。 CSS Feature Toggle -GitHub CSS Feature Toggleの特徴 CSS Feature Toggleのインストール CSS Feature Toggleの使い方 CSS Feature Toggleの特徴 CSS Feature Toggleはデベロッパーツールの機能拡張で、CSSのさまざまな機能をサポートしていないブ
表示領域にピタッと移動！CSSでスクロールスナップを実装しよう
2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！ スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"
CSSリセット、2019年におすすめのカスタマイズ方法
Webサイトを制作する際、CSSリセットを使用されている人が多いと思います。Eric MeyerのCSS Resetをはじめ、Normalize.css、Sanitize.css、そして最近ではReboot.cssが登場しました。 Eric MeyerのCSS Resetをベースに、marginやpaddingなどのスペースを上か下かのどちらかに統一できるようにカスタマイズされたCSSリセットを紹介します。 My CSS Reset/Base 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSリセットについて margin, padding, borderのCSSリセット フォントのCSSリセット レイアウトとbox-sizingのCSSリセット 特定要素のCSSリセット 属性と状態のCSSリセット スクリーンリーダー専用の
超便利！2019年に注目したい最新CSSツール、リソースガイド100個まとめ
2019年がスタートし、ここ数年で急速な進歩を続けているCSSは、さまざまなオープンソースのツールがリリースされています。 CSSライブラリやフレームワーク、オンラインツールを利用することで、サイト制作の時間を節約、短縮できるだけでなく、新しいテクニックやプロパティなどに関しては、学習用ガイドラインも多数公開されています。 今回は、2019年に注目したい100種類のCSSライブラリ、フレームワーク、リソース、便利ツールをまとめてご紹介します。これからCSSを本格的に学ぶひとも、日常の業務などで普段使いしているひとも、一度は確認しておきたい内容となっています。 1. 新作CSSライブラリ 2. お役立ちCSSユーティリティ 3. CSS画像エフェクトツール 4. CSSレイアウトフレームワーク 5. CSS Flexbox フレームワーク 6. オンラインCSSツール&生成ツール 7. CS
CSSの参考になるアイデアがいっぱい！2018年スタイルシートを使ったテクニックのまとめ
2018年も、CSSの進化がすごかったです！ CSSを使ったアニメーションはより快適なものが増え、JavaScriptを使用しないと実装できなかったものがCSSだけで実装できるようになったり、vwやvhやcalc()などを効果的に使用したり、レイアウト、ナビゲーション、カードなどもより洗練されて実装されています。 さまざまな素晴らしいアイデアが取り入れられたスタイルシートを使ったテクニックを紹介します。 各デモはCSSのみで実装されたものもありますが、JavaScript併用もあります。 動作を見るには、「Run Pen」をクリックするか、クリック後に右上「Edit on Codepen」をクリックしてください。 まずは、ダイナミックなアニメーションが楽しいソーラーシステム。動きが斬新で、スライドなどに応用してもよさそうです。ベストビューは、Operaです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CAMP
https://csslayout.io/
