ついにSafariも。 media queryの範囲指定をより直感的に書ける記法が全ブラウザ対応へ筆者が CSS を学び始めたとき、media query で画面サイズに応じてスタイルを変える方法が大変ニガテでした😭 min？ max？ 未満のときはどうするの？ and で繋げなきゃいけないの？ 長くない？ と疑問に思いながら、今日まで長い年月を過ごしてきました。 本日（2023/03/28）、Safari 16.4 がリリースされ、 media query のrange（範囲）記法に対応しました。 ▼ 従来の media query の範囲指定
[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ
.loader-1 .loader-outter { position: absolute; border: 4px solid #f50057; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; } .loader-1 .loader-inner { position: absolute; border: 4px solid #f50057;
![[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c73c8f6011ffdcbf5db8a38badef92257137a98c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017071810.png)
CSSの引き出しを増やしておこう！最近見かけたスタイルシートのアイデア・テクニックのまとめ
最近のWebサイトやスマホアプリで見かけるテクニックをはじめ、Web制作者としてよい刺激になるスタイルシートを巧みに使ったさまざまなアイデアを紹介します。 イラスト: Girls Design Materials CSSのみで実装されているのものもたくさんありますが、JavaScriptやSVGなどを必要に応じて使用されているものもあります。
調整も楽々！CSSアニメーションをその場で確認できる「Animista」の使い方を解説
眼球を捉えるようなユニークな動きをするアニメーションを絶妙なタイミングで取り入れることで、ユーザーの興味を引いて離脱を防げる確率が高くなります。 アニメーションはHTML5やCSSでも簡単なものであれば実装することができますが、10年前にAdobe Flashを使って表現していたような複雑なアニメーションを実現するために、CSSやJavaScriptを使ったライブラリを取り入れている方もいらっしゃるのではないでしょうか。 しかし、ライブラリには大抵デモページがついているものの、基本的なアニメーションの確認しか行うことができないものがほとんどです。 実際のところこうしたアニメーションライブラリにはアニメーションの速度やタイミングなど、さまざまなオプションがあり、オプションを活用することで、より活き活きとしたアニメーションを実装することができます。 ところが、デモページではこれらの詳細まで微調
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。
ブロックのアニメーションエフェクトが美しい「Block Reveal Effects」
codropsで公開されてるエフェクトのチュートリアルがステキだったので忘備録。昨年から良く見るレイヤーを追随させるアニメーションエフェクトで、このチュートリアルではアニメーションからメニュー・モーダルウィンドウなど様々なバエーションが用意されてます。 ◆以前紹介した記事 複数のレイヤーを活かしたきれいなエフェクト「Multi-Layer Page Reveal Effects」
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
大学ノート（ルーズリーフ）をモチーフとした手書きまとめノート風Webサイトを制作したときに使用したCSSテクニック - Qiita
まとめノート風Webサイトを作ろうとしたきっかけ 本当はWeb制作本を執筆してみたかったのですが、資金等の関係もあり、Web上でブログ形式で書いていこうと考えました。そこで困ったのがWebサイトのデザインでした。最近では、ほとんどのブログでフラットデザインが使われていますね。Qiitaもその１つだと思います。フラットデザインとは、色に関していえば基本は白地や薄いグレー色で、その他1,2色をアクセント色としてデザインしているもののことですね。比較的簡単に作れて、かつ見やすいデザインなので重宝されていると思われます。 しかし、それではどこも同じような感じなので訪問者の頭に残りづらいと思うんです。そこで、思い出したのが今でもよく使っている大学ノート(ルーズリーフ)です。中学・高校時代はよく要点をまとめたまとめノートを作ったものです。ルーズリーフを使ったことがない人はいないと思うくらい、馴染み深い
CSS3のアニメーションで「ふわふわ」「ゆらゆら」させる方法や便利なオンラインツール - コムテブログ
TL;DR いざアニメーションを作ろうとすると結構面倒ですよね。できれば勉強しながら便利なツールを使ってアニメーションを作りたいところ。今回は CSS3 のアニメーションで「ふわふわ」させたり「スカッシュ」させる方法や便利なオンラインツールをご紹介します。 アニメーション１２の基本原則を確認 こちらは「何か動きを出してくれ」と依頼された時に見ておきたい、ディズニーによって開発されたアニメーションの１２の基本原則（12 basic principles of animation - Wikipedia）デモですが、CSS のみでこういった動きやアニメーションを実現できたら楽しいですよね。ロゴやボタン、イラストなどの一部に使ったら一味違うアイキャッチになるかもしれません。 The illusion of life from cento lodigiani on Vimeo. THE ILLUS
[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ
コンテンツの区切りに使用する線、デザインのアクセントに使えるラインやボーダーをCSSで素敵にデザインするスタイルシートのテクニックを紹介します。 borderプロパティを使ったシンプルなものから、グラデーションや疑似要素やアニメーションを使ったアイデアが素晴らしいものまで、コピペで簡単に利用できます。
![[CSS]コンテンツの区切り線、デザインのアクセントに使えるラインやボーダーを実装するテクニックのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/d81709305545d43bf246e62ef8caf6aa8f3b70da/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016120101.png)
Apple風のかっこよくて美しいデザインの背景49種類を簡単に実装できるスタイルシート -HUE.css | コリス
文字や画像をぽんっと配置するだけで、そのコンテンツが映えるApple風の美しいグラデーションの背景49種類をまとめたスタイルシートを紹介します。 コピペで簡単に利用できるので、CSSのスニペットに登録しておくと便利ですね。 HUE.css HUE.css -GitHub HUE.cssを使うと、簡単に美しい背景を作りだすことができます。 Appleのプレゼンテーションスタイルで、Hueを背景に使用したものです。 画像: Free Promo Backdrops and Gradients HUE.cssは上記のHueの背景画像にインスパイアされたもので、これらの美しいグラデーションの背景がCSSで簡単に利用できます。 元の画像は上記ページの下部から、.sketch, .png形式でダウンロードできます。 HUE.cssの使い方 使い方は、簡単です。 「hue.css」をダウンロードし、外部
[CSS]手間がかかるCSSアニメーションがコピペで簡単に実装できる -ShortSnippets.css
CSSもここ数年でかなり進化し、アニメーションをCSSで実装する機会が増えてきました。しかし、難点は実装に手間がかかること。 気持ちのいい動きのスピナーから、あまり見かけない面白い動きをするものまで、コピペで簡単に実装できるスニペットをまとめたShortSnippets.cssを紹介します。 ShortSnippets.css ShortSnippets.css -GitHub ShortSnippets.cssのデモ ShortSnippets.cssの使い方 ShortSnippets.cssのデモ ShortSnippets.cssではチョウチョのスピナー、ボックスシャドウを使ったアニメーションなど、あまり見かけない面白いものが多いです。 チョウチョは、ひらひら舞っています。
![[CSS]手間がかかるCSSアニメーションがコピペで簡単に実装できる -ShortSnippets.css](https://cdn-ak-scissors.b.st-hatena.com/image/square/126b1e7e35bdc4052d3c0040639da850aeeead48/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016101705.png)
初心者がプログラミング言語を最安最速で習得するなら『Udemy』がいいかも！って話 - wepli.2
僕は3、4年前までブラインドタッチすらできず、一本指打法でPCを操作していました。それが今では、『ふ～ん。javaScriptってこんな感じだよね～』（←知ったかですｗ）というところまで、頭がITの世の中に追いついてきました。僕は単なるブロガーなので、プログラミング言語の知識はさほど必要ありませんが、HTMLやCSSを理解するうえで、何冊か本を購入して色々と勉強してきました。 ただそれは、あまり効率が良い方法ではなく、無駄にお金だけがかかってしまう方法だということに気づいたのです。今では、何か新しいことを学ぶ時には『Udemy』というサービスを使うようにしています。本日は、様々な最先端知識を動画で分かりやすく学習できる『Udemy』というサービスをご紹介したいと思います。 『Udemy（ユーデミー）』とは？ 僕が『Udemy』で学んだこと！ なぜ僕は『Udemy』を使いはじめたのか？ 『U
プロが実践するモダン CSS の書き方入門テクニック20選まとめ
海外サイトTutorialzineで公開された「20 Protips For Writing Modern CSS」の著者 Danny Markov より許可をもらい、翻訳転載しています。 この記事では、CSSスタイリングで実践したい、便利な20種類のテクニックをご紹介しています。CSSをはじめたばかりの初心者のひとにも合った内容も多く、あまり知られていない少しだけ高度で、より実践的なCSSテクニックまで学ぶことできます。これらのテクニックを利用することで、今後のウェブ制作をよりスムーズに、快適に行うことができるでしょう。 コンテンツ目次 1. 縦方向のマージン幅に気をつけよう。 2. レイアウトに Flexbox を利用しよう。 3. CSS リセットをしよう。 4. Border-box をすべてに適用しよう。 5. イメージファイルは背景に適用しよう。 6. リストテーブル用ボーダー
Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
Flexboxを使っていて「なんでこの幅になるんだろう？」と疑問に思ったことはありませんか？ 僕はFlexboxを使い始めたころ「flexアイテム」の幅がどうやって計算されるのかわからなくて、レイアウトにはまってしまいました。調べて整理したのでシェアします。 仕組みをしっかり理解しておくと、問題が起こったときに対処しやすくなります。ということで、flexアイテムの幅の計算方法、行ってみましょ〜！ まずは結論から — flexアイテムの幅の計算方法 結論からざっくり言ってしまいます。 display: flexを指定した親要素を「flexコンテナ」、その中にある子要素を「flexアイテム」と呼びます。 上図のようにスペースが余っている場合、この「flexアイテム」にはflex-growの指定にしたがって余ったスペースが分配される仕組みになっています。 下図のようにflex-grow（またはf
Flexbox入門 - 横並びを実現する定番のCSS - ICS MEDIA
ボックス要素の横並びをCSSで行う場合は、CSSの「Flexboxフレックスボックス」 が便利です。Flexboxを使用することで、簡潔なコードで豊富なボックスのレイアウトが可能です。本記事ではウェブページの作成を通してFlexboxの特徴と使い方について解説します。 この記事で学べること Flexboxの使い方 スマートフォンへのレスポンシブ対応 Flexboxはボックスレイアウト用のCSS Flexboxとは、ボックスのレイアウト方法を定めるCSSの機能です。ボックスとは、HTML上の各要素が生成する領域のことです。下図のHTMLコードのウェブページでは、div要素・h1要素・p要素がそれぞれボックスを生成します。 Flexboxでは、ボックスを横ならびにしたり、右寄せ・中央寄せ・左寄せをしたりと、さまざまなレイアウトを少量のコードで実現できます。 サンプルの紹介 今回はレスポンシブな
Smooth as Butter: Achieving 60 FPS Animations with CSS3
Animating elements in your mobile applications is easy. Animating elements in your mobile applications properly may be easy, too… if you follow our tips here. While everyone is using CSS3 animations in mobile these days, many are not doing it properly. There are best practices to take into account that are constantly and considerably disregarded. This happens mainly because there are still people
Flexboxはすごい便利！最近のレイアウトやコンポーネントが簡単に実装できるスタイルシートのまとめ
2016年1月12日にIEの古いバージョンのサポートが終了して半年が過ぎ、IEの対象バージョンをIE11とEdgeに、そしてFlexboxの導入をしている制作者も多いと思います。 Flexboxを使って、最近のレイアウトやコンポーネントが簡単に実装できるスタイルシートやフレームワークを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者も分かる！レスポンシブ・デザインの作り方
SVG Animations
