CSSでスクロールスナップ(scroll-snap)の実装方法【デモ有】 | キノコログ
スライド（スワイプ）で簡単に要素を切り替えることが出来るCSS「スクロールスナップ」についてご紹介します。 JavaScript（jQuery）で今までやらざるを得なかったスライド動作をCSSのみで軽快に行うことが出来ます。 現在は対応ブラウザも増えているため、用途が合えば採用してみましょう。 スクロールスナップとは？ スクロールスナップとは、ユーザーがスライド動作、スマホではスワイプ動作を行った時に、要素を特定の位置で静止させるスクロールが実現できます。 実際に見たほうが分かりやすいので、下記のGIFアニメーションをご確認ください。 このページで公開しているサンプルをスマホで操作した時の動きです。 こんな風に、要素毎にスクロールをスナップすることが出来ます。 1枚めくるような動作になるため、漫画やプレゼン資料を公開したい時などに向いています。 スクロールスナップ用プロパティの対応状況 ス
【WV.5】WordPressにおけるJSとCSSの遅延読み込み – Capital P – WordPressメディア
Core Web Vitalに関する連載の第5回はCSSとJSの遅延読み込みについて説明する。この2点は主に「レンダリングを妨げるリソースの除外」という項目でPage Speed Insightsに表示される。 WordPressプラグインのおすすめまでしてくれる。 プラグインで対応する方法もあるのでプラグインを導入して済めばそれでよし。本稿では原理の説明とコードによる解決を紹介する。テーマ本体に手を入れなくてもよいソリューションなので、ぜひ取り組んでほしい。筆者の開発したテーマSide Businessでもほぼ似たようなことをやっている。 CSSの遅延読み込み CSSは通常headタグ内に挿入される。ブラウザは <link> タグを見つけるたびにCSSをダウンロードし、その内容を解析してスタイルコンテキストツリーを構築する。この間はHTMLのパース（DOMモデル構築）やJavaScrip
スクロールに応じて任意の要素をアニメーションさせる超軽量スクリプト・「animon」
animonはスクロールに応じて任意の要素をアニメーションさせる超軽量スクリプトです。非依存型で単体で動作します。 ScrollTrigger.jsの機能をやや抑えて軽量化した、みたいな感じでした。使い方も導入もとても簡単です。 <link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/> <script type="text/javascript" src="https://unpkg.com/animon@1.0.1/dist/animon.iife.js"></script> <script type="text/javascript"> Animon.animon(); </script>CSSとJSを読み込んで初期化。これで準備完了です。設定は加須亜夢データ属性で行います。 <h1 c
CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介 | BUILD Journal
CSSで実装できるシンプルな見出しデザインを21パターンご紹介します。汎用性が高くテイストに縛られず現場ですぐ使えるデザインなのでストックしておくと便利に使えます。あなたの現場でぜひご利用ください。 CSSのみで実装するシンプルな見出しデザイン21パターン蛍光ペンのような線をひいたCSS見出しデザイン HTML<h2 class="heading01">ラインを使ったCSS見出し</h2>CSS.heading01 { display: inline; font-size: 26px; background-image: linear-gradient(rgba(0,0,0,0) 70%, rgb(252,81,133) 70%); }蛍光ペンで線を引いたような見出しデザインです。display: inlineで複数行にも対応させています。 2色を重ねた線とCSS見出しデザイン HTML<
新時代のCSS三角の作り方 clip-path 〜 さらば、すべての border 〜
CSSで三角を作る方法と言えば border でした。 私も三角を作りたい時は 「css 三角」 で検索、コピペして調整して作っていました。 ですが最近 clip-path というプロパティによってより分かりやすく三角が作れることを知ったので共有いたします。 ちなみに IE 以外では大丈夫そうです。逆を言うと IE 対応しなければいけない人は引き続き border で三角を作る必要があります。ここまでお読みいただきありがとうございました。 clip-path を使った三角の作り方 こう CSS を書くと .sankaku { background-color: blue; width: 16px; height: 20px; clip-path: polygon(0 0, 0% 100%, 100% 50%); } こうなります。 どこの点を結ぶかは clip-path で指定して、高さと
CSSのみで実装するボタン、テキストリンク、hoverスタイル19選 | Pulp Note
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイルCSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;
imgタグに指定した画像のURLが存在しない時に表示される状態をCSSだけで対応する
Result 1番上が画像のURLが存在しない時で、特に何もしない場合に表示されるやつ。 2番目が対策した場合+画像が無い時。 3番目が対策した場合+画像がある時。 何もしなければ1番目の表示になります。 対策すると2番目のように任意のスタイルで表示されます。 対策した場合でも3番目のように画像があれば影響を受けません。 cssご存知のように基本的にはimgに疑似要素は使う事が出来ません。 が、デモのように画像が存在しない時は使う事が出来るようなのでそれを利用してスタイリングする、みたいな話です。 img { display: inline-block; font-family: Arial, sans-serif; font-weight: 300; line-height: 2; text-align: center; min-width: 300px; min-height: 50p
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
Webクリエイター 小林さんのCSS TIPS集
小林 I Webデザイナー @pulpxstyle 現場で使用してきたHTMLやCSSのTipsをモーメントにまとめました。フリーランスの私がこれまでの制作で実際に使用してきたもののみ紹介してます。 あなたの現場でも使えるものがあると思いますので、ぜひご利用ください！ ⚡️ "現場で使えるHTML&CSS Tips ①" twitter.com/i/moments/7819… 2020-04-09 09:35:06 小林 I Webデザイナー @pulpxstyle ダークモードを適用する時は『prefers-color-scheme:dark』とメディアクエリで指定する。 アプリのダークモード化が進み利用者は多い。サイトのニーズも増える可能性があるので是非おさえておきたい。 実際にコーディングしてみましたが予想より工数が多いので、予算は別途必要になりそうですね。 pic.twitter.
CSSもこれで簡単に！テキストの左右に水平線を引くスタイルシートの新テクニック
div要素はひとつだけ、CSS Flexboxを使用してテキストの左右に水平線を引くスタイルシートのテクニックを紹介します。 HTMLは非常にシンプルで、テキストと水平線はレスポンシブ対応で、カラーやサイズや左右のマージンも簡単に変更できます。 div要素ひとつだけで実装する テキスト付きの区切り線 まずは、最終のデモをご覧ください。 テキストの左右に水平線を引いた区切り線は、div要素ひとつだけで実装されています。モダンブラウザはもちろん、EdgeでもIE11でも大丈夫です。 実装のポイント div要素ひとつだけ、spanなど余分な要素は必要なし。 divに限らずブロック要素、h1で見出しの装飾としても使えます。 画像やSVGなども必要なし。 水平線は、カラー・サイズ・マージンの変更ができる。 フォントのサイズを大きくしても自動で調整される。 水平線はレスポンシブ対応。 背景が画像でも水
Google Fontsのファイルサイズを簡単に軽量化できる！日本語フォントにも対応
Google Fontsは英語フォントだけでなく日本語フォントもあり、すでに使用している人、もしくは使用を検討している人も多いと思います。その際に懸念されるのが、フォントファイルのサイズです。 フォントファイルのサイズを劇的に軽減できる機能があります。 パラメーターで使用する文字のみフォントファイルを読み込め、これによりフォントファイルのサイズを大幅に削減できます。 タイトルや見出しのみにGoogle Fontsを使いたい時にぴったりです。 Google Fonts -Optimizing your font requests Google Chromeのエンジニア マネージャーであるAddy Osmani氏によると、CSSファイルにパラメーターを付けるだけで簡単にできる、とのことです。 日本語フォントにも対応しています！ Tip: Shave up to 90% off the size
Googleカスタム検索のダサダサな検索Boxを好きなデザインにする方法｜鈴木麗子
Googleカスタム検索とはGoogleでサイト内検索ができる小窓を自分のウェブサイトに設置できるサービスです。 Googleアカウントにログインして下記ページから登録を行います https://cse.google.com/cse/all そして取得したJavascriptコードを、自サイトのHTMLソースの検索ボックスを設置したい位置に貼りつけます。 こちらが張り付けた例ペタリいまいちだ 一応テーマとかあったり、各パーツの色だけ変更できるんですが、もうそんな問題じゃないです。 Googleカスタム検索を好きなデザインに変更する！この検索ボックスはテーブル組（！）なのでCSSを上書きしても限界があります。 頑張ってCSSを駆使して何とかしているブログなどもありましたが、やだ、もっと素敵にしたいんです。 なんとやりかたは超簡単でした。 普通に好きにinputなどを設置して、パラメーターでカ
CSSとJavaScriptでWebページにローディングアニメーションを表示させる方法
2022年9月24日 CSS, JavaScript ページやコンテンツの読込中、何も表示されない真っ白な画面が延々と続くと、なんだか不安になりますよね。本当にこのページであってるのか…今何を待ってたんだっけ…なんて。ユーザーを不安にさせないためにも、読込中だと認識できるローディングアニメーションを取り入れてみるといいですね。 ↑私が10年以上利用している会計ソフト！ ローディングアニメーションの設置手順 こんな感じで、最初にローディングアニメーションを表示させ、ページを読み込んだらコンテンツを表示させるページを作ってみましょう。よく「CSSだけで実装できる！」なんてうたわれている場面もありますが、多くの場合アニメーション部分のみのおはなしで、実際にページの読み込みを認識させるには簡単なJavaScriptも必要です。 1. ローディング画面の用意 まずはコンテンツを用意しましょう。上部に
内容に応じてサイズが可変する <textarea> を素敵に実装する - Qiita
概要 内容に応じてサイズが可変する textarea を、できるだけ手間をかけず、スマートな実装を試みます。 しかも、ネイティブのフォームが持っている利点をそのまま活かして、堅牢でアクセシブルな設計を目指します。 標準 textarea の難点 HTML の textarea 要素は基本的に高さが固定されていて使い勝手が悪いです。３行分くらいしか領域がなくて、長い文章を打つのがとにかく苦痛なんていうこともザラです。 最近のブラウザ実装では、多少気を利かせてくれているのか、テキストエリアの領域をドラッグで拡大・縮小できます。 ただ私は思うのです。めんどくさいし、最初っから、入力するテキスト量に応じて自動的に伸び縮みしてくれればいいのに……と。スクロールバーなんて、１ページにひとつあればじゅうぶんなんですよ。 実装方法 難しいことはありませんが、HTML と CSS、JS が協調して動作します
font-familyについて本気で考えてみた - Qiita
今年はmacOSのアップデートによりヒラギノが動かなくなったり、 来年初頭にはWindows7がサポート終了、Edgeのブラウザエンジン変更など、 エンドユーザーの環境を考えなければならない節目の時です。 そこでいつもコピペで済ましているfont-familyについて1から考え直してみます。 全部読もうとしている人はスクロールバーを見てから考えてください。 結果 コピペユーザーのために先に結果を記載します。 ブログ等に転載する場合はこのページのURLぐらい貼ってください。 @font-face { font-family: "Original Yu Gothic"; src: local("Yu Gothic Medium"); font-weight: 100; } @font-face { font-family: "Original Yu Gothic"; src: local("Y
CSSで複数行3点リーダーを実現する「line-clamp」がついにIE以外に対応したよ！ - Qiita
最新のFirefoxが対応した!! これにより、IEさえ無視すれば完全にCSSのみで複数行の3点リーダーが実現可能となりました。 よく使う割に難しい処理だったので、地味に嬉しいです。 最新の対応状況はこちら line-clampとは？ 行数を指定して、テキストが領域をはみ出した時に3点リーダ「…」を表示することができます。 //css p { width: 170px; display: -webkit-box; -webkit-line-clamp: 4; //3点リーダを表示する行数を指定 -webkit-box-orient: vertical; overflow: hidden; } たったこれだけで実現できちゃいます。 詳しくはこちらの記事でわかりやすく書かれています。 現状のベストプラクティス ・IE以外で簡単に実現できるようになったので、基本line-clampを使いましょう
Gradient Magic
A Free Gallery of Fantastic and Unique CSS Gradients.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codepen.io/sengokyu/pen/poRWzOr
Conic.css - nice, simple conic gradients
cssでPhotoshopのように画像にエフェクトを追加する方法 | バシャログ。
